<template>
    <div class="page" >
        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" style="height: auto;">
            <el-form-item label="数据分类:">
                <el-select v-model="formInline.dataType" multiple filterable collapse-tags clearable
                           placeholder="请选择数据分类"
                           @change="formInlineChange">
                    <el-option v-for="item in dataTypeSelect" :key="item.value" :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="数据存储:">
                <el-select v-model="formInline.classId" multiple filterable collapse-tags clearable placeholder="请选择数据存储"
                           @change="formInlineChange">
                    <el-option v-for="item in dataSelect" :key="item.code" :label="item.label"
                               :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="过滤筛选:">
                <el-input v-model="formInline.searchValue" placeholder="数据名称、别名、名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryCsDictDataPage" 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" @click="add" icon="el-icon-plus">新增字典</el-button>
            </el-form-item>
        </el-form>
        <el-table
            stripe
            style="width: 100%;"
            :data="tableData"
            height="calc(100vh - 280px)"
            border
            v-loading="loading"
            highlight-current-row
            header-cell-class-name="table_header"
        >
            <el-table-column align="center" show-overflow-tooltip min-width="120" prop="classId" label="数据分类">
                <template slot-scope="scope">
                        <span>{{
                                dataTypeSelect.find((item) => item.value == scope.row.dataType) &&
                                dataTypeSelect.find((item) => item.value == scope.row.dataType).label
                            }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" show-overflow-tooltip min-width="180" prop="name"
                             label="数据名称"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip min-width="180" prop="otherName"
                             label="别名"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip min-width="150" prop="showName"
                             label="展示名称"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip min-width="100" prop="phase" label="相别"
                             width="80px">
                <template slot-scope="scope"> {{ scope.row.phase === 'M' ? '-' : scope.row.phase }}</template>
            </el-table-column>
            <el-table-column align="center" show-overflow-tooltip min-width="100" prop="unit" label="单位"
                             width="80px">
                <template slot-scope="scope"> {{ scope.row.unit == null ? '-' : scope.row.unit }}</template>
            </el-table-column>
            <el-table-column align="center" show-overflow-tooltip min-width="130" prop="type" 
                             label="基础数据类型">
                <template slot-scope="scope"> {{ scope.row.type == '' ? '-' : scope.row.type }}</template>
            </el-table-column>
            <el-table-column align="center" show-overflow-tooltip min-width="150" prop="harmStart"
                             label="数据谐波次数">
                <template slot-scope="scope"> {{ scope.row.harmStart }} - {{ scope.row.harmEnd }}</template>
            </el-table-column>
            <!-- <el-table-column min-width='80' prop="harmEnd" label="数据结束谐波次数"> </el-table-column> -->
            <el-table-column align="center" min-width="180" prop="statMethod" show-overflow-tooltip
                             label="数据统计方法">
                <template slot-scope="scope"> {{ scope.row.statMethod == null ? '-' : scope.row.statMethod }}</template>
            </el-table-column>
            <el-table-column align="center" min-width="120" prop="classId" label="数据存储" show-overflow-tooltip
                             :formatter="formFilter"></el-table-column>
            <el-table-column align="center" min-width="110" prop="resourcesId" label="数据来源"
                             show-overflow-tooltip :formatter="formFilter">
                <template slot-scope="scope"> {{
                        scope.row.resourcesId == null ? '-' : scope.row.resourcesId
                    }}
                </template>
            </el-table-column>
            <!--            <el-table-column align="center" min-width="100" prop="sort" label="排序" width="80px"></el-table-column>-->
            <el-table-column align="center" min-width="200" label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="edit(scope.row)" icon="el-icon-edit">编辑</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row.id)" 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="drawer" size="80%" custom-class="dictionary-draw"  class="Cn-page" :before-close="closeDialog" 
                   width="1000px">
            <el-divider content-position="center">基础数据</el-divider>
            <el-form :model="form" :label-width="formLabelWidth" :rules="rules" ref="form">
                <el-form-item label="数据分类:" prop="dataType">
                    <el-select v-model="form.dataType" filterable clearable placeholder="请选择数据分类">
                        <el-option v-for="item in dataTypeSelect" :key="item.value" :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数据名称:" prop="name">
                    <el-input v-model="form.name" autocomplete="off" placeholder="请输入数据名称"></el-input>
                </el-form-item>
                <el-form-item label="别名:" prop="otherName" >
                    <el-input v-model="form.otherName" autocomplete="off" placeholder="请输入别名"></el-input>
                </el-form-item>
                <el-form-item label="展示名称:" prop="showName" >
                    <el-input v-model="form.showName" autocomplete="off" placeholder="请输入展示名称"></el-input>
                </el-form-item>
                <el-form-item label="相别:" prop="phase" >
                    <el-select v-model="form.phase" filterable clearable placeholder="请选择相别">
                        <el-option v-for="item in phaseSelect" :key="item.value" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单位:" prop="unit" >
                    <el-input v-model="form.unit" autocomplete="off" placeholder="请输入单位"></el-input>
                </el-form-item>
                <el-form-item label="基础数据类型:" prop="type" >
                    <el-input v-model="form.type" autocomplete="off" placeholder="请输入基础数据类型"></el-input>
                </el-form-item>
                <el-form-item label="开始结束次数:" prop="harmStart" >
                    <div class="input-2">
                        <el-input type="number" v-model="form.harmStart" autocomplete="off"></el-input>
                        <div style="margin-left: 10px;">-</div>
                        <el-input style="margin-left: 10px;" type="number" v-model="form.harmEnd"
                                  autocomplete="off"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="统计方法:" prop="statMethod" >
                    <el-select v-model="form.statMethod" multiple filterable clearable placeholder="请选择统计方法">
                        <el-option v-for="item in statMethodSelect" :key="item.value" :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数据存储:" prop="classId" >
                    <el-select v-model="form.classId" filterable clearable placeholder="请选择数据存储">
                        <el-option v-for="item in dataSelect" :key="item.code" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="报表数据来源:" prop="resourcesId" >
                    <el-select v-model="form.resourcesId" filterable clearable placeholder="请选择报表数据来源">
                        <el-option v-for="item in resourcesIdSelect" :key="item.code" :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="序号:" prop="sort" >
                    <el-input type="number" v-model="form.sort" autocomplete="off" placeholder="请输入序号"></el-input>
                </el-form-item>
                <el-form-item label="限值名称:" prop="limitName" >
                    <el-input type="text" v-model="form.limitName" autocomplete="off" placeholder="请输入限值名称"></el-input>
                </el-form-item>
                <el-form-item label="限值表名:" prop="limitTable" >
                    <el-input type="text" v-model="form.limitTable" autocomplete="off"
                              placeholder="请输入限值表名"></el-input>
                </el-form-item>
                <el-form-item label="超标判断方式:" prop="formula" >
                    <el-select v-model="form.formula" filterable clearable placeholder="请选择超标判断方式">
                        <el-option v-for="item in formulaSelect" :key="item.code" :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider content-position="center">拓展数据</el-divider>
            <el-form :model="form" :label-width="formLabelWidth" :rules="rules2" ref="form2">
                <el-form-item label="参数缺省值:" prop="defaultValue">
                    <el-input v-model="form.defaultValue" autocomplete="off" placeholder="请输入参数缺省值"></el-input>
                </el-form-item>
                <el-form-item label="事件类别:" prop="eventType">
                    <el-input v-model="form.eventType" autocomplete="off" placeholder="请输入事件类别"></el-input>
                </el-form-item>

                <el-form-item label="设置最大值:" prop="maxNum" >
                    <el-input type="number" v-model="form.maxNum" autocomplete="off" placeholder="请输入设置最大值"></el-input>
                </el-form-item>
                <el-form-item label="设置最小值:" prop="minNum" >
                    <el-input type="number" v-model="form.minNum" autocomplete="off" placeholder="请输入设置最小值"></el-input>
                </el-form-item>
                <el-form-item label="枚举序列:" prop="setValue" >
                    <el-input v-model="form.setValue" autocomplete="off" placeholder="请输入枚举序列"></el-input>
                </el-form-item>
                <el-form-item label="字符串长度上限:" prop="strlen" >
                    <el-input type="number" v-model="form.strlen" autocomplete="off" placeholder="请输入字符串长度上限"></el-input>
                </el-form-item>
                <el-form-item label="上送规则:" prop="tranRule" >
                    <el-input v-model="form.tranRule" autocomplete="off" placeholder="请输入上送规则"></el-input>
                </el-form-item>
                <el-form-item label="是否可远程控制:" prop="ctlSts">
                    <el-radio v-model="form.ctlSts" :label="1">是</el-radio>
                    <el-radio v-model="form.ctlSts" :label="0">否</el-radio>
                </el-form-item>
                <el-form-item label="是否需遥控校验:" prop="curSts">
                    <el-radio v-model="form.curSts" :label="1">是</el-radio>
                    <el-radio v-model="form.curSts" :label="0">否</el-radio>
                </el-form-item>
                <el-form-item label="是否存储:" prop="storeFlag">
                    <el-radio v-model="form.storeFlag" :label="1">是</el-radio>
                    <el-radio v-model="form.storeFlag" :label="0">否</el-radio>
                </el-form-item>
                <el-form-item label="是否加密:" prop="storeFlag">
                    <el-radio v-model="form.storeFlag" :label="1">是</el-radio>
                    <el-radio v-model="form.storeFlag" :label="0">否</el-radio>
                </el-form-item>
                <el-form-item label="数据是否上送:" prop="tranFlag">
                    <el-radio v-model="form.tranFlag" :label="1">是</el-radio>
                    <el-radio v-model="form.tranFlag" :label="0">否</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="addCsDictData">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {addCsDictData, queryCsDictDataPage, delCsDictData, updateCsDictData} from '@/api/app/setting.js'
import {dicData} from "@/assets/commjs/dictypeData";

export default {
    data() {
        return {
            loading: true,
            drawer: false,
            dialogTitle: '新增字典数据',
            form: {
                classId: null,
                ctlSts: null,
                curSts: null,
                dataType: null,
                defaultValue: null,
                eventType: null,
                harmEnd: null,
                harmStart: null,
                maxNum: null,
                minNum: null,
                name: null,
                otherName: null,
                phase: null,
                resourcesId: null,
                setValue: null,
                showName: null,
                sort: null,
                statMethod: null,
                storeFlag: null,
                strlen: null,
                systemType: null,
                tranFlag: null,
                tranRule: null,
                type: null,
                unit: null,
                formula: null,
                limitName: null,
                limitTable: "pq_overlimit",
            },
            dataTypeSelect: [],
            systemTypeSelect: [],
            resourcesIdSelect: [],
            formulaSelect: [],
            dataSelect: [],
            typeSelect: [],
            // A、B、C、T、M
            phaseSelect: [
                {
                    label: 'A相',
                    value: 'A',
                },
                {
                    label: 'B相',
                    value: 'B',
                },
                {
                    label: 'C相',
                    value: 'C',
                },
                {
                    label: 'T相',
                    value: 'T',
                },
            ],
            statMethodSelect: [
                {
                    label: '平均值',
                    value: 'avg',
                },
                {
                    label: '最大值',
                    value: 'max',
                },
                {
                    label: '最小值',
                    value: 'min',
                },
                {
                    label: 'CP95值',
                    value: 'cp95',
                },
            ],
            formLabelWidth: '140px',
            formInline: {
                pageNum: 1,
                pageSize: 20,
                searchValue: '',
                dataType: [],
                classId: [],
            },
            total: 0,
            tableData: [],
            tabHeight: 'calc(100vh - 255px)',
            rules: {
                dataType: [
                    {required: true, message: '请输入数据分类', trigger: 'blur'},
                    {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                ],
                name: [
                    {required: true, message: '请输入数据名称', trigger: 'blur'}
                ],
                otherName: [
                    {type: 'date', required: true, message: '请输入别名', trigger: 'blur'}
                ],
                showName: [
                    {type: 'date', required: true, message: '请输入展示名称', trigger: 'blur'}
                ],
                phase: [
                    {type: 'array', required: true, message: '请选择相别', trigger: 'blur'}
                ],
                unit: [
                    {required: true, message: '请输入单位', trigger: 'blur'}
                ],
                type: [
                    {required: true, message: '请输入基础数据类型', trigger: 'blur'}
                ],
                harmStart: [
                    {required: true, message: '请填写开始结束次数', trigger: 'blur'}
                ],
                statMethod: [
                    {required: true, message: '请选择统计方法', trigger: 'blur'}
                ],
                classId: [
                    {required: true, message: '请选择数据存储', trigger: 'blur'}
                ],
                resourcesId: [
                    {required: true, message: '请选择报表数据来源', trigger: 'blur'}
                ],
                sort: [
                    {required: true, message: '请填写序号', trigger: 'blur'}
                ],
            },
            rules2: {
                defaultValue: [
                    {required: true, message: '请输入参数缺省值', trigger: 'blur'},
                    {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                ],
                eventType: [
                    {required: true, message: '请输入事件类别', trigger: 'blur'}
                ],
                maxNum: [
                    {type: 'date', required: true, message: '请设置最大值', trigger: 'blur'}
                ],
                minNum: [
                    {type: 'date', required: true, message: '请设置最小值', trigger: 'blur'}
                ],
                setValue: [
                    {type: 'array', required: true, message: '请输入枚举序列', trigger: 'blur'}
                ],
                strlen: [
                    {required: true, message: '请输入字符串长度上限', trigger: 'blur'}
                ],
                tranRule: [
                    {required: true, message: '请填写上送规则', trigger: 'blur'}
                ],
                ctlSts: [
                    {required: true, message: '请选择是否可远程控制', trigger: 'blur'}
                ],
                storeFlag: [
                    {required: true, message: '请选择是否需遥控校验', trigger: 'blur'}
                ],
                tranFlag: [
                    {required: true, message: '请选择是否存储||是否加密', trigger: 'blur'}
                ],

            }
        }
    },
    computed: {
        vth() {
            return window.sessionStorage.getItem("appheight") - 145;
        },

    },
    created() {
        this.queryCsDictDataPage()
    },
    mounted() {
        const dictypeData = JSON.parse(localStorage.getItem('dictypeData'))
        if (dictypeData) {
            dictypeData.forEach((item) => {
                let arr = [
                    {
                        code: 'Data',
                        key: 'dataSelect',
                    },
                    {
                        code: 'Cs_Data_Type',
                        key: 'dataTypeSelect',
                    },
                    {
                        code: 'System_Type',
                        key: 'systemTypeSelect',
                    },
                    {
                        code: 'Data_Day',
                        key: 'resourcesIdSelect',
                    },
                    {
                        code: 'Type',
                        key: 'typeSelect',
                    },
                    {
                        code: 'Limit_Value_Judgment',
                        key: 'formulaSelect',
                    },
                ]
                arr.forEach((item2) => {
                    if (item.code == item2.code) {
                        this[item2.key] = item.children.map((item3) => {
                            return {
                                label: item3.name,
                                value: item3.id,
                                code: item3.code,
                            }
                        })
                    }
                })
            })
        }
        this.loading = false
    },
    methods: {
        closeDialog(){
            this.drawer=false
            this.resetForm()
        },
        resetForm() {
    
    if (this.$refs["form"]) {
      this.$refs["form"].resetFields();
      this.$refs["form2"].resetFields();
    }
  },
        // 数据过滤
        formFilter(row, column) {
            if (column.property == "classId") {
                let title = "";
                dicData("Data", []).forEach((item) => {
                    if (item.id == row.classId) {
                        title = item.name;
                    }
                });
                return title;
            } else if (column.property == "resourcesId") {
                let title = "";
                this.resourcesIdSelect.forEach((item) => {
                    if (item.value == row.resourcesId) {
                        title = item.label;
                    }
                });
                return title;
            }
        },
        formInlineChange() {
            setTimeout(() => {
                const formInlineHeight = this.$refs.formInline.$el.offsetHeight
                console.log(formInlineHeight)
                this.tabHeight = 'calc(100vh - ' + (213 + formInlineHeight) + 'px)'
            }, 20)
        },
        pageChange(e) {
            console.log('pageChange!')
            console.log(e)
            this.formInline.pageNum = e
            this.queryCsDictDataPage()
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.formInline.pageNum = 1
            this.formInline.pageSize = val
            this.queryCsDictDataPage()
        },
        onSearch() {
            this.formInline.pageNum = 1
            this.queryCsDictDataPage()
        },
        addCsDictData() {
            if (this.form.id) {
                this.editSave()
                return
            }
            addCsDictData(this.form).then((res) => {
                console.warn(res)
                if (res.code == 'A0000') {
                    this.$message({
                        type: 'success',
                        message: '添加成功!',
                    })
                    this.drawer = false
                    this.onSearch()
                } else {
                    this.$message({
                        type: 'error',
                        message: res.message,
                    })
                }
            })
        },
        queryCsDictDataPage() {
            queryCsDictDataPage(this.formInline).then((res) => {
                console.warn(res)
                this.tableData = res.data.records
                this.total = res.data.total
            })
        },
        resetFormInline() {
            this.formInline.searchValue = ''
            this.formInline.dataType = []
            this.formInline.classId = []
        },
        onSubmit() {
            console.log('submit!')
        },
        del(id) {
            this.$confirm('确定删除该字段吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    delCsDictData(id).then((res) => {
                        console.warn(res)
                        if (res.code == 'A0000') {
                            this.$message({
                                type: 'success',
                                message: '删除成功!',
                            })
                            this.onSearch()
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.message,
                            })
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },
        add() {
            const obj = {
                classId: null,
                ctlSts: null,
                curSts: null,
                dataType: null,
                defaultValue: null,
                eventType: null,
                harmEnd: null,
                harmStart: null,
                maxNum: null,
                minNum: null,
                name: null,
                otherName: null,
                phase: null,
                resourcesId: null,
                setValue: null,
                showName: null,
                sort: null,
                statMethod: null,
                storeFlag: null,
                strlen: null,
                systemType: null,
                tranFlag: null,
                tranRule: null,
                type: null,
                unit: null,
                formula: null,
                limitName: null,
                limitTable: "pq_overlimit",
            }
            this.dialogTitle = '新增字典数据'
            for (let key in this.form) {
                this.form[key] = obj[key]
            }
            delete this.form.id
            this.drawer = true
        },
        edit(item) {
            console.log(item)
            for (let key in this.form) {
                this.form[key] = item[key]
                if (key === 'statMethod' && item[key]) {
                    this.form[key] = item[key].split(',')
                } else if (key === 'phase') {
                    this.form[key] = ''
                }

            }
            this.form.id = item.id
            this.dialogTitle = '编辑字典数据'
            this.drawer = true
        },
        editSave() {
            updateCsDictData(this.form).then((res) => {
                console.warn(res)
                if (res.code == 'A0000') {
                    this.$message({
                        type: 'success',
                        message: '修改成功!',
                    })
                    this.drawer = false
                    this.onSearch()
                } else {
                    this.$message({
                        type: 'error',
                        message: res.message,
                    })
                }
            })
        },
    },
}
</script>
<style lang="less" scoped>
@import url("../../../../styles/comStyle.less");
</style>
<style lang="scss" scoped>
::v-deep .Cn-page .el-dialog__body .el-form {
    display: grid;
    padding-right: 30px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 10px 20px !important;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.page {
  .el-form-item {
    height: auto !important;
  }

  .dictionary-draw {
    .el-dialog__body {
      padding-top: 0;
    }
  }

  .input-2 {
    display: flex;
    width: 245px;

    .el-input {
      flex: 1;
    }
  }
}
</style>
