<template>
    <div >
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="模版名称:">
                <el-input v-model="formInline.name" clearable placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="装置型号:">
                <el-select v-model="formInline.devType" placeholder="请选择" style="width: 100%" clearable>
                    <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>
                <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"
                           v-if="userInfo.role.indexOf('工程')>-1 || userInfo.role.indexOf('运维管理员')>-1">
                    新增模版
                </el-button> -->
                <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="name" label="模板名称" align="center"></el-table-column>
            <el-table-column prop="versionNo" label="版本号" align="center"></el-table-column>
            <el-table-column prop="versionDate" label="版本时间" align="center"></el-table-column>
            <el-table-column label="操作" width="220px"  align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="del(scope.row)" icon="el-icon-delete">删除</el-button>
                </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">
            <el-form :model="form" :label-width="formLabelWidth">
                <el-form-item label="升级文件:">
                    <el-upload
                        class="upload-demo"
                        action="123"
                        :limit="1"
                        :auto-upload="false"
                        :on-change="fileChange"
                        :on-exceed="fileExceed"
                    >
                        <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="addDevModel">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog  :visible.sync="lookDialog">
            <el-tabs v-model="activeName">
                <el-tab-pane label="测量数据" name="first">
                    <el-table
                        stripe
                        :cell-style="{ textAlign: 'center' }"
                        :header-cell-style="{ textAlign: 'center' }"
                        :data="tableData"
                        height="50vh"
                        v-if="activeName == 'first'"
                    >
                        <el-table-column prop="date" label="数据名称" width="180"></el-table-column>
                        <el-table-column prop="name" label="数据类型" width="180"></el-table-column>
                        <el-table-column prop="address" label="单位"></el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="电能量数据" name="second">
                    <el-table
                        stripe
                        :cell-style="{ textAlign: 'center' }"
                        :header-cell-style="{ textAlign: 'center' }"
                        :data="tableData"
                        height="50vh"
                        v-if="activeName == 'second'"
                    >
                        <el-table-column prop="date" label="数据名称" width="180"></el-table-column>
                        <el-table-column prop="name" label="数据类型" width="180"></el-table-column>
                        <el-table-column prop="address" label="单位"></el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script>
import {queryDevModelPage, addDevModel, AuditDevModel, queryByid, queryByCode} from '@/api/app/setting.js'

export default {
    data() {
        return {
            loading: true,
            dialogFormVisible: false,
            activeName: 'second',
            lookDialog: false,
            dialogTitle: '新增字典数据',
            form: {
                devType: '',
                devTypeName: '',
                filePath: '',
                // softInfoId: '',
                // versionDate: '',
                // versionNo: '',
            },
            formLabelWidth: '120px',
            formInline: {
                devType: '',
                pageNum: 1,
                pageSize: 20,
                versionStartDate: '',
                versionendDate: '',
                date: [],
                name: '',
            },
            file: '',
            fileList: [], // 回显‰
            tableData: [],
            total: 0,
            options: [
                {
                    value: '选项1',
                    label: '黄金糕',
                },
                {
                    value: '选项2',
                    label: '双皮奶',
                },
                {
                    value: '选项3',
                    label: '蚵仔煎',
                },
                {
                    value: '选项4',
                    label: '龙须面',
                },
                {
                    value: '选项5',
                    label: '北京烤鸭',
                },
            ],
           // tabHeight: 'calc(100vh - 255px)',
            devTypeOptions: [],
            typeOptions: [],
            userInfo: {},
        }
    },
    computed: {
        vth() {
            return window.sessionStorage.getItem("appheight") - 145;
        }
    },
    created() {
        this.userInfo = sessionStorage.getItem('Info')
        queryByCode('Direct_Connected_Device').then((res) => {
            queryByid(res.data.id).then((res) => {
                this.devTypeOptions = res.data.map((item) => {
                    return {
                        value: item.id,
                        label: item.name,
                    }
                })
            })
        })
    },
    mounted() {
        this.onSearch()
        this.loading = false
    },
    methods: {
        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',
            })
        },
        onSearch() {
            console.log('submit!')
            queryDevModelPage(this.formInline).then((res) => {
                console.log(res)
                this.tableData = res.data.records
                this.total = res.data.total
            })
        },
        resetFormInline() {
            this.formInline.devType = ''
            this.formInline.name = ''
            this.formInline.versionStartDate = ''
            this.formInline.versionendDate = ''
            this.formInline.date = []
        },
        addDevModel() {
            if (!this.file) {
                return this.$message({
                    message: '请上传文件',
                    type: 'error',
                })
            }
            addDevModel(this.file).then((res) => {
                if (res.code == 'A0000') {
                    this.onSearch()
                    this.$message({
                        message: '添加成功',
                        type: 'success',
                    })
                    this.dialogFormVisible = false
                }
            })
        },
        AuditDevModel() {
            for (let key in this.form) {
                if (!this.form[key]) {
                    this.$message({
                        message: '请完善表单信息',
                        type: 'error',
                    })
                    return
                }
            }
            AuditDevModel(this.form).then((res) => {
                if (res.code == 'A0000') {
                    this.onSearch()
                    this.$message({
                        message: '编辑成功',
                        type: 'success',
                    })
                    this.dialogFormVisible = false
                }
            })
        },
        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.length > 0) {
                this.formInline.versionStartDate = e[0]
                this.formInline.versionendDate = e[1]
            }
        },
        del(item) {
            this.$confirm('确定删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                AuditDevModel({
                    id: item.id,
                    status: 0,
                }).then((res) => {
                    console.log(res)
                    if (res.code == 'A0000') {
                        this.onSearch()
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                        })
                        this.dialogFormVisible = false
                    }
                })
            })
        },
        edit(item) {
            this.form.id = item.id
            for (let key in this.form) {
                this.form[key] = item[key]
            }
            this.dialogTitle = '设备数据模版编辑'
            this.dialogFormVisible = true
        },
        look() {
            this.lookDialog = true
        },
        add() {
            for (let key in this.form) {
                this.form[key] = ''
            }
            delete this.form.id
            this.dialogTitle = '设备数据模版新增'
            this.dialogFormVisible = true
        },
    },
}
</script>
<style lang="scss">

</style>
