<template>
    <div style="padding: 0.5% 0.5%">
        <!--查询条件-->
        <el-row>
            <el-col :span="24">
                <span style="font-weight: ; font-size: 14px">装置系列:</span>
                <el-select v-model="teriminal" style="width: 250px; margin: 0 10px 10px" placeholder="请选择装置系列">
                    <el-option
                        v-for="item in teriminaloption"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
                <el-button type="primary" class="el-icon-plus" @click="addData">新 增</el-button>
                <el-button type="primary" class="el-icon-search">查 询</el-button>
             
            </el-col>
        </el-row>
        <!--列表-->
        <el-row style="margin-top: 0.2%">
            <el-col :span="24">
                <el-table stripe :data="tableData" border :height="height" style="width: 100%">
                    <el-table-column align="center" prop="xh" label="序号" width="88"></el-table-column>
                    <el-table-column align="center" prop="zzxl" label="装置系列"></el-table-column>
                    <el-table-column align="center" prop="bbh" label="版本号"></el-table-column>
                    <el-table-column align="center" prop="bbxy" label="版本协议"></el-table-column>
                    <el-table-column align="center" prop="bbrq" label="版本日期"></el-table-column>
                    <el-table-column align="center" prop="xgry" label="修改人员"></el-table-column>
                    <el-table-column align="center" prop="xgsj" label="修改时间"></el-table-column>
                    <el-table-column align="center" prop="ms" label="描述"></el-table-column>
                    <el-table-column align="center" prop="bblx" label="版本类型"></el-table-column>
                    <el-table-column align="center" prop="zt" label="状态">
                        <template slot-scope="scope">
                            <el-radio-group v-model="scope.row.zt" size="small" @change="checkbox(scope.row)">
                                <el-radio-button label="1">启用</el-radio-button>
                                <el-radio-button label="0">未启用</el-radio-button>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button type="primary" size="small" @click="editData(scope.row)">修改</el-button>
                            <el-button type="primary" size="small" @click="DeleteData(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    style="float: right"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageData.currentPage"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="pageData.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageData.total"
                ></el-pagination>
            </el-col>
        </el-row>
        <!--弹窗框-->
        <el-dialog
            :close-on-click-modal="false"
            :title="title"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
        >
            <el-form ref="form" :model="formData" label-width="80px">
                <el-form-item label="版本号:">
                    <el-input v-model="formData.bbh"></el-input>
                </el-form-item>
                <el-form-item label="协议版本:">
                    <el-input v-model="formData.xybb"></el-input>
                </el-form-item>
                <el-form-item label="版本日期:">
                    <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="formData.bbrq"
                        style="width: 100%"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="装置系列:">
                    <el-select v-model="formData.zzxl" placeholder="请选择活动区域" style="width: 100%">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="版本类型:">
                    <el-input v-model="formData.bblx"></el-input>
                </el-form-item>
                <el-form-item label="描述:">
                    <el-input type="textarea" v-model="formData.ms"></el-input>
                </el-form-item>
                <el-form-item label="升级文件:">
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :file-list="fileList"
                    >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip" style="color: red">
                            只能上传后缀为.bin的文件/无后缀文件，且不超过30M
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="CRC校验:">
                    <el-input v-model="formData.crc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="submintData">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { tableheight } from '@/assets/commjs/common'
export default {
    data() {
        return {
            teriminal: '',
            height: '',
            dialogVisible: false,
            tableData: [
                {
                    id: '0',
                    xh: 1,
                    zzxl: 'NPQS-572',
                    bbh: 'V2.31',
                    bbxy: 'V1.6.0',
                    bbrq: '2021-09-20',
                    xgry: '测试员1',
                    xgsj: '2022-04-26 11:17:28',
                    ms: '此为前置机自动录入',
                    bblx: '通用',
                    zt: 1
                },
                {
                    id: '1',
                    xh: 2,
                    zzxl: 'NPQS-573',
                    bbh: 'V2.31',
                    bbxy: 'V1.6.0',
                    bbrq: '2021-09-21',
                    xgry: '测试员1',
                    xgsj: '2022-04-26 11:17:38',
                    ms: '此为前置机自动录入',
                    bblx: '通用',
                    zt: 0
                }
            ],
            //表单
            formData: {
                bbh: '',
                xybb: '',
                bbrq: '',
                zzxl: '',
                bblx: '',
                ms: '',
                crc: ''
            },
            title: '',
            //分页
            pageData: {
                currentPage: 1,
                pagesize: 100,
                total: 200
            },
            fileList: [
                {
                    name: 'food.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                },
                {
                    name: 'food2.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }
            ]
        }
    },
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {
        this.height = tableheight() + 'px'
    },
    methods: {
        //分页
        handleSizeChange() {},
        handleCurrentChange() {},
        //切换
        checkbox(row, val) {
            alert('该行id:' + row.id + '========该行控制状态:' + row.zt)
        },
        //删除
        DeleteData(row) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取删除'
                    })
                })
        },
        //关闭弹窗
        handleClose() {
            this.dialogVisible = false
        },
        //修改
        editData(row) {
            this.title = row.zzxl + '装置修改'
            this.dialogVisible = true
        },
        //新增
        addData() {
            this.title = '新增装置'
            this.dialogVisible = true
        },
        //保存提交
        submintData() {
            this.dialogVisible = false
        },
        handleRemove(file, fileList) {
            //console.log(file, fileList);
        },
        handlePreview(file) {
            //console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
                    files.length + fileList.length
                } 个文件`
            )
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`)
        }
    }
}
</script>
