<template>
    <div class="page" >
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="装置型号:">
                <el-select
                    clearable
                    filterable
                    v-model="formInline.devType"
                    placeholder="请选择"
                    style="width: 100%"
                    @change="devTypeChange"
                >
                    <el-option v-for="item in devTypeAllOptions" :key="item.value" :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="日期:">
                <el-date-picker
                    v-model="formInline.date"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="dateChange"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch"  icon="el-icon-search">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="resetFormInline" icon="el-icon-setting">重置</el-button>
            </el-form-item>
            <el-form-item style="float: right">
                <el-button type="primary" icon="el-icon-plus" @click="add">新增版本</el-button>
            </el-form-item>
        </el-form>
        <el-table
        stripe
            style="width: 100%"
            :data="tableData"
            border
            header-cell-class-name="table_header"
            highlight-current-row
            height="calc(100vh - 280px)"
        >
       
            <el-table-column prop="devTypeName" label="装置型号" align="center"></el-table-column>
            <el-table-column prop="versionNo" label="版本号" align="center"></el-table-column>
            <el-table-column prop="versionAgreement" label="版本协议" align="center"></el-table-column>
            <el-table-column prop="versionDate" label="版本日期" align="center"></el-table-column>
            <!-- <el-table-column prop="updateBy" label="修改人员"> </el-table-column> -->
            <el-table-column prop="updateTime" label="归档日期" align="center"></el-table-column>
            <el-table-column prop="description" label="描述" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                    {{ scope.row.status == 1 ? '启用' : '禁用' }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="220px" fixed="right" align="center">
                <template slot-scope="scope">
                    <!-- <div class="table-operation"> -->
                        <el-button size="mini" type="primary" @click="edit(scope.row)" icon="el-icon-edit">编辑</el-button>
                        <el-button icon="el-icon-warning" size="mini" type="danger" @click="del(scope.row)" v-if="scope.row.status == 1" >禁用
                        </el-button>
                        <el-button icon="el-icon-success"  size="mini" type="success" @click="start(scope.row)" v-if="scope.row.status == 0">
                            启用
                        </el-button>
                    <!-- </div> -->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            align="right"
            @size-change="handleSizeChange"
            @current-change="pageChange"
            :current-page="formInline.pageNum"
            :page-sizes="[20, 30, 40, 50, 100]"
            :page-size="formInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            class="mt10"
        >
        </el-pagination>
        <el-dialog  :title="dialogTitle" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            <el-form :model="form" :label-width="formLabelWidth">
                <el-form-item label="装置类型:">
                    <el-select v-model="form.type" placeholder="请选择" style="width: 100%" @change="typeChange">
                        <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="装置型号:">
                    <el-select v-model="form.devType" placeholder="请选择" style="width: 100%" @change="devTypeChange">
                        <el-option v-for="item in devTypeOptions" :key="item.value" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="版本号:">
                    <el-input v-model="form.versionNo" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="版本类型:">
                    <el-input v-model="form.versionType" autocomplete="off" placeholder="填写特殊类型(不填默认通用类型)"></el-input>
                </el-form-item>

                <el-form-item label="版本协议:">
                    <el-input v-model="form.versionAgreement" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="版本日期:">
                    <el-date-picker
                        v-model="form.versionDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期时间"
                        align="right"
                        style="width: 100%"
                        :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="描述:">
                    <el-input v-model="form.description" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="CRC校验:">
                    <el-input v-model="form.crcInfo" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="升级文件:">
                    <el-upload
                        class="upload-demo"
                        action="123"
                        :limit="1"
                        :auto-upload="false"
                        :on-change="fileChange"
                        :on-exceed="fileExceed"
                        :file-list="fileList"
                    >
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addEdData">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {queryEdDataPage, addEdData, auditEdData, queryCsDictTree, queryByCode, queryByid} from '@/api/app/setting.js'

export default {
    data() {
        return {
            loading: false,
            dialogFormVisible: false,
            dialogTitle: '新增字典数据',
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date())
                        },
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date()
                            date.setTime(date.getTime() - 3600 * 1000 * 24)
                            picker.$emit('pick', date)
                        },
                    },
                    {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date()
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit('pick', date)
                        },
                    },
                ],
            },
            form: {
                devType: null,
                devTypeName: null,
                // versionAgreement: null,
                // versionNo: null,
                // versionType: null,
                // crcInfo: null,
                // description: null,
                // versionDate: null,
                type: null,
            },
            file: '',
            fileList: [], // 回显
            formInline: {
                pageNum: 1,
                pageSize: 20,
                versionStartDate: '',
                versionendDate: '',
                date: [],
            },
            formLabelWidth: '120px',
            tableData: [],
            total: 0,
            devTypeOptions: [],
            devTypeAllOptions: [],
            typeOptions: [],
            tabHeight: 'calc(100vh - 255px)',
        }
    },
    computed: {
        vth() {
      return window.sessionStorage.getItem("appheight") -145;
        }
    },
    created() {
        this.onSearch()

        queryByCode('Direct_Connected_Device').then((res) => {
            queryCsDictTree(res.data.id).then((res) => {
                this.typeOptions = res.data.map((item) => {
                    return {
                        value: item.id,
                        label: item.name,
                    }
                })
            })
            queryByid(res.data.id).then((res) => {
                this.devTypeAllOptions = res.data.map((item) => {
                    return {
                        value: item.id,
                        label: item.name,
                    }
                })
            })
        })
    },
    methods: {

        typeChange() {
            this.form.devType = null
            this.form.devTypeName = null
            queryCsDictTree(this.form.type).then((res) => {
                this.devTypeOptions = res.data.map((item) => {
                    return {
                        value: item.id,
                        label: item.name,
                    }
                })
            })
        },
        devTypeChange(e) {
            console.log(e)
            this.form.devTypeName = this.devTypeOptions.filter((item) => item.value == e)[0].label
        },
        fileChange(e) {
            console.log('fileChange!')
            console.log(e)
            this.file = e.raw
        },
        fileExceed(e) {
            console.log('fileExceed!')
            console.log(e)
            this.$message({
                message: '最多只能上传一个文件，如若替换请先删除',
                type: 'error',
            })
        },
        addEdData() {
            let form = new FormData()
            for (let key in this.form) {
                if (!this.form[key]) {
                    this.$message({
                        message: '请完善表单信息',
                        type: 'error',
                    })
                    return
                }
                form.append(key, this.form[key])
            }
            if (this.form.id) {
                if (this.file) {
                    form.append('file', this.file)
                }
                auditEdData(form).then((res) => {
                    console.log(res)
                    if (res.code == 'A0000') {
                        this.onSearch()
                        this.$message({
                            type: 'success',
                            message: '修改成功!',
                        })
                        this.dialogFormVisible = false
                        for (let key in this.form) {
                            this.form[key] = ''
                        }
                        delete this.form.id
                        this.fileList = []
                        this.file = ''
                    }
                })
            } else {
                if (!this.file) {
                    this.$message({
                        message: '请上传升级文件',
                        type: 'error',
                    })
                    return
                }
                form.append('file', this.file)
                addEdData(form).then((res) => {
                    console.log(res)
                    if (res.code == 'A0000') {
                        this.onSearch()
                        this.$message({
                            message: '添加成功',
                            type: 'success',
                        })
                        this.dialogFormVisible = false
                        for (let key in this.form) {
                            this.form[key] = ''
                        }
                        this.file = ''
                    }
                })
            }
        },
        onSearch() {
            console.log('submit!')
            queryEdDataPage(this.formInline).then((res) => {
                console.log(res)
                this.tableData = res.data.records
                this.total = res.data.total
            })
        },
        resetFormInline() {
            this.formInline.devType = ''
            this.formInline.versionendDate = ''
            this.formInline.versionStartDate = ''
            this.formInline.date = []
        },
        pageChange(e) {
            console.log('pageChange!')
            console.log(e)
            this.formInline.pageNum = e
            this.onSearch()
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.formInline.pageNum = 1
            this.formInline.pageSize = val
            this.onSearch()
        },
        dateChange(e) {
            console.log(e)
            if (e && e.length > 0) {
                this.formInline.versionStartDate = e[0]
                this.formInline.versionendDate = e[1]
            } else {
                this.formInline.versionStartDate = ''
                this.formInline.versionendDate = ''
            }
        },
        start(item) {
            console.log(item)
            this.confirmPassWord().then(() => {
                this.$confirm('确定启用吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    auditEdData({
                        id: item.id,
                        status: 1,
                    }).then((res) => {
                        console.log(res)
                        if (res.code == 'A0000') {
                            this.onSearch()
                            this.$message({
                                type: 'success',
                                message: '启用成功!',
                            })
                        }
                    })
                })
            })
        },
        del(item) {
            console.log(item)
            this.confirmPassWord().then(() => {
                this.$confirm('确定禁用吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    auditEdData({
                        id: item.id,
                        status: 0,
                    }).then((res) => {
                        console.log(res)
                        if (res.code == 'A0000') {
                            this.onSearch()
                            this.$message({
                                type: 'success',
                                message: '禁用成功!',
                            })
                        }
                    })
                })
            })
        },
        add() {
            this.confirmPassWord().then(() => {
                this.dialogTitle = '新增版本'
                this.dialogFormVisible = true
            })
        },
        confirmPassWord() {
            return new Promise((resolve, reject) => {
                if (localStorage.getItem('password')) {
                    resolve()
                } else {
                    this.$prompt('密码确认', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputType: 'password',
                    }).then(({value}) => {
                        localStorage.setItem('password', value)
                        resolve()
                    })
                }
            })

        },
        edit(item) {
            this.confirmPassWord().then(() => {
                for (let key in this.form) {
                    this.form[key] = item[key]
                }
                this.fileList = [
                    {
                        name: item.filePath,
                        url: item.filePath,
                    },
                ]
                this.form.id = item.id
                console.log(this.form)
                this.dialogTitle = '修改终端版本'
                this.dialogFormVisible = true
            })
        },
    },
}
</script>
<style lang="scss">
.dictionary {
    .el-input {
        width: 100%;
    }
}
</style>
