<template>
    <div style="padding:10px">
        <el-card style="margin-bottom:10px">
            <!-- cardHeader -->
            <div slot="header" class="clearfix">
                <span style="font-size:16px;font-weight:700">{{ (tableName == 'Site' ? '站点' : tableName ==
                        '虚拟航班' ? '虚拟航班' : tableName.replace(/( |^)[a-z]/g, L => L.toUpperCase())) + "表"
                }}</span>
                <div style="float: right; padding: 3px 0">
                    <span class="selectLabel mr10">切换字典表</span>
                    <el-select v-model="tableName" size="small" placeholder="不限" filterable @change="selectChange">
                        <el-option v-for="item in dictNameList" :label="item.chineseName" :value="item.code"
                            :key="item.id">
                        </el-option>
                        <el-option label="虚拟航班" value="虚拟航班"></el-option>
                    </el-select>
                </div>
            </div>
            <!-- 查询条件 -->
            <el-form ref="dictForm" label-width="auto" label-position="left" style="margin-bottom:10px"
                @submit.native.prevent>
                <el-row :gutter="10" v-if="tableName != 'serviceCode'">
                    <el-col :span="6">
                        <el-form-item label="航班名称" v-if="tableName === '虚拟航班'">
                            <el-input v-model="selectDict.flightNo" size="small" style="width:80%"
                                placeholder="请输入航班名称"></el-input>
                        </el-form-item>
                        <el-form-item label="数据名称" v-else>
                            <el-input v-model="selectDict.chineseName" size="small" style="width:80%"
                                placeholder="请输入数据名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div style="margin-bottom:10px">
                    <el-button type="primary" icon="el-icon-search" size="small" :loading="loading"
                        v-if="tableName != 'serviceCode'" @click="tableSelect(1)">查询</el-button>
                    <el-button type="primary" icon="el-icon-plus" size="small" @click="addDic({ status: 'add' })"
                        v-hasPermi="['system:dictionary:add']">
                        {{ tableName === 'serviceCode' ? '新增父级' : '新增' }}
                    </el-button>
                    <el-button type="primary" icon="el-icon-plus" size="small" @click="addDic({ status: 'allAdd' })"
                        v-hasPermi="['system:dictionary:add']">
                        {{ tableName === 'serviceCode' ? '批量新增父级' : '批量新增' }}
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" size="small" :disabled="nowSelect.length == 0"
                        @click="handleDelete" v-hasPermi="['system:dictionary:delete']">删除
                    </el-button>
                </div>
            </el-form>
            <!-- 表格 -->
            <Tables v-if="tableName != 'serviceCode' && tableName != '虚拟航班'" ductName="dictionary" :selection="true"
                :selectFixed="false" :order='true' :height="tableHeight" :data="tableData" :headerData="tableHeader"
                :page="selectDict.page" :pageSizes="[20]" :totalCount="total" :loading="loading"
                @currentChange="currentChange" layout="total,prev, pager, next, jumper, ->"
                @tableSelect="tableSelection" @tableSelectAll="tableSelectAll">
                <template slot="optionColumn">
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <!-- <el-button class="mr5" size="mini" type="text" icon="el-icon-edit"
                                @click="upDate({ status: 'update', data: scope.row })">修改
                            </el-button> -->
                            <el-button size="mini" type="text" style="color:#ff4949" icon="el-icon-delete"
                                @click="delDict(scope.row)" v-hasPermi="['system:dictionary:delete']">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </template>
            </Tables>
            <!-- 虚拟航班表 -->
            <Tables v-if="tableName === '虚拟航班'" ductName="dictionary" :selection="true" :selectFixed="false"
                :order='true' :height="tableHeight" :data="tableData" :headerData="flightHeader" :page="selectDict.page"
                :pageSizes="[20]" :totalCount="total" :loading="loading" @currentChange="currentChange"
                layout="total,prev, pager, next, jumper, ->" @tableSelect="tableSelection"
                @tableSelectAll="tableSelectAll">
                <template slot="optionColumn">
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <!-- <el-button class="mr5" size="mini" type="text" icon="el-icon-edit"
                                @click="upDate({ status: 'update', data: scope.row })">修改
                            </el-button> -->
                            <el-button size="mini" type="text" style="color:#ff4949" icon="el-icon-delete"
                                @click="delDict(scope.row)" v-hasPermi="['system:dictionary:delete']">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </template>
            </Tables>
            <!-- serviceCode表格（树形结构） -->
            <Tables v-show="tableName === 'serviceCode'" ductName="dictionary" :order='false' :height="tableHeight"
                :data="tableData" :headerData="serviceCodeHeader" :pageSize="selectDict.page" :pageSizes="[20]"
                :totalCount="total" :pagination="false" :loading="loading" @currentChange="currentChange">
                <template v-slot:serviceCodeMapperList="scope">
                    <!-- 二级表格 -->
                    <el-card>
                        <Tables v-show="tableName === 'serviceCode'" ductName="dictionary" :selection="true"
                            :order='false' :selectFixed="false" height="auto" :data="scope.row.serviceCodeMapperList"
                            :headerData="childrenTableHeader" :pageSize="selectDict.page" :pageSizes="[20]"
                            :totalCount="total" :pagination="false" :loading="loading" @currentChange="currentChange"
                            @tableSelect="serviceCodeTableSelection" @tableSelectAll="serviceCodeTableSelectAll">
                            <template slot="optionColumn">
                                <el-table-column label="操作" align="center" width="300">
                                    <template slot-scope="scope">
                                        <!-- <el-button class="mr5" size="mini" type="text" icon="el-icon-edit"
                                            @click="upDate({ status: 'update', data: props.row })">修改
                                        </el-button> -->
                                        <el-button size="mini" type="text" style="color:#ff4949" icon="el-icon-delete"
                                            @click="delDict(scope.row)" v-hasPermi="['system:dictionary:delete']">
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </template>
                        </Tables>
                    </el-card>
                </template>
                <template slot="optionColumn">
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button class="mr5" v-if="scope.row.serviceCodeMapperList" size="mini" type="text"
                                icon="el-icon-plus"
                                @click="addDic({ status: 'childrenAdd', data: scope.row.chineseName })"
                                v-hasPermi="['system:dictionary:add']">新增子集
                            </el-button>
                            <!-- <el-button class="mr5" size="mini" type="text" icon="el-icon-edit"
                                @click="upDate({ status: 'update', data: scope.row })">修改
                            </el-button> -->
                            <el-button v-if="!scope.row.serviceCodeMapperList" size="mini" type="text"
                                style="color:#ff4949" icon="el-icon-delete" @click="delDict(scope.row)"
                                v-hasPermi="['system:dictionary:delete']">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </template>
            </Tables>
        </el-card>
        <!-- 新增修改 -->
        <Dialog :dictName="tableName" :open="open" :addDictionary="addDictionary" :status="status" @close="close" />
    </div>
</template>

<script>
import Dialog from './dialog.vue'
import { getDictNameList, getDictionaryList, getServiceCodeList, delServiceCodeCihild, delDict, flightType, delFlight } from '@/api/system/dictionary.js'

export default {
    name: 'DictionaryConfig',
    components: {
        Dialog
    },
    data() {
        return {
            selectDict: {
                dictCode: this.tableName,
                chineseName: null,
                page: 1,
                size: 20
            },//字典查询条件
            tableData: [],
            tableHeader: this.tableHeaders['dict'],//表头
            flightHeader: [
                {
                    columnChineseName: "航班号",
                    columnName: "flightNo",
                    columnWidth: "",
                    align: "center",
                    status: 1
                }
            ],//虚拟航班表头
            serviceCodeHeader: this.tableHeaders['dictServiceCode'],//serviceCode主表头
            childrenTableHeader: this.tableHeaders['dictServiceCodeChildren'],//serviceCode子表头
            dictNameList: [],//主表数据
            addDictionary: {},//选择数据
            nowSelect: [],
            tableName: '',
            tableHeight: null,
            total: 0,
            status: null,
            loading: false,
            open: false,
        }
    },
    created() {
        this.dictNameSelect()
    },
    activated() {
        // if (this.$store.state.tagsView.cachedViews.length > 0) {
        // this.tableSelect()
        // }
    },
    mounted() {
        this.tableHeight = window.innerHeight - this.$refs.dictForm.$el.offsetHeight - 270
    },
    watch: {
        tableName(val, oldVal) {
            this.tableName = val
            this.selectDict = {
                page: 1,
                size: 20
            }
            this.tableSelect()
        },
    },
    methods: {
        //字典名称
        dictNameSelect() {
            getDictNameList().then(res => {
                if (res.code === 200) {
                    this.dictNameList = res.data
                    this.tableName = this.dictNameList[0].code
                } else {
                    this.msgWarning(res.msg)
                }
            }).catch(err => {
                console.log(err)
                this.msgWarning(err)
            })
        },
        //搜索
        tableSelect(val) {
            this.nowSelect = []
            if (val === 1) {
                this.selectDict.page = 1
            }
            this.selectDict.dictCode = this.tableName
            if (this.tableName === 'serviceCode') {
                getServiceCodeList().then(res => {
                    if (res.code === 200) {
                        this.tableData = res.data
                        this.tableData.forEach(item => {
                            item.serviceCodeMapperList.map((val, i) => {
                                val.index = i
                            })
                        })
                    } else {
                        this.msgWarning(res.msg)
                    }
                }).catch(err => {
                    console.log(err)
                })
            } else if (this.tableName === "虚拟航班") {
                flightType(this.selectDict).then(res => {
                    if (res.code === 200) {
                        this.tableData = res.data.list
                        this.total = res.data.total
                    }
                }).catch(err => {
                    console.log(err)
                })
            } else {
                getDictionaryList(this.selectDict).then(res => {
                    if (res.code === 200) {
                        this.tableData = res.data.list
                        this.total = res.data.total
                    } else {
                        this.msgWarning(res.msg)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        },
        //新增
        addDic(val) {
            this.status = val.status
            if (val.data) {
                this.addDictionary = {
                    serviceCodeKey: val.data
                }
            }
            this.open = true
        },
        //修改
        // upDate(val) {
        //     console.log(val)
        //     this.status = val.status
        //     this.addDictionary = val.data
        //     this.open = true
        // },
        //删除按钮
        delDict(val) {
            if (this.tableName == 'serviceCode') {
                this.serviceCodeCihildDel([val.id])
            } else if (this.tableName === '虚拟航班') {
                this.flightDel([val.id])
            } else {
                this.dicDel([val.id])
            }
        },
        //批量删除按钮
        handleDelete() {
            let arr = []
            this.nowSelect.forEach(item => {
                arr.push(item.id)
            })
            if (this.tableName == 'serviceCode') {
                this.serviceCodeCihildDel(arr)
            } else if (this.tableName === '虚拟航班') {
                this.flightDel(arr)
            } else {
                this.dicDel(arr)
            }
        },
        //数据字典删除
        dicDel(val) {
            this.$confirm("删除字典数据可能会对航班配舱设置产生影响，需手动对航班配舱设置进行维护。是否要删除", "注意!", {
                closeOnClickModal: false,
                confirmButtonText: "确定删除",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                delDict(val).then(res => {
                    if (res.code === 200) {
                        this.msgSuccess(res.msg)
                    } else {
                        this.msgWarning(res.msg)
                    }
                    this.tableSelect(1)
                }).catch(err => {
                    console.log(err)
                })
            }).catch(() => { })
        },
        //serviceCode子字典删除
        serviceCodeCihildDel(val) {
            this.$confirm("删除子字典数据可能会对航班配舱设置产生影响，需手动对航班配舱设置进行维护。是否要删除", "注意!", {
                closeOnClickModal: false,
                confirmButtonText: "确定删除",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                delServiceCodeCihild(val).then(res => {
                    if (res.code === 200) {
                        this.msgSuccess(res.msg)
                    } else {
                        this.msgWarning(res.msg)
                    }
                    this.tableSelect(1)
                }).catch(err => {
                    console.log(err)
                })
            }).catch((() => { }))
        },
        //虚拟航班删除
        flightDel(val) {
            this.$confirm("是否要删除此虚拟航班记录！", "注意!", {
                closeOnClickModal: false,
                confirmButtonText: "确定删除",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                delFlight(val).then(res => {
                    if (res.code === 200) {
                        this.msgSuccess(res.msg)
                    } else {
                        this.msgSuccess(res.msg)
                    }
                    this.tableSelect(1)
                }).catch(err => {
                    console.log(err)
                })
            }).catch(() => { })
        },
        //切换字典表
        selectChange(val) {
            this.tableName = val
        },
        //关闭状态修改
        close(val) {
            this.open = val
            this.addDictionary = {}
            this.tableSelect()
        },
        //翻页
        currentChange(val) {
            this.selectDict.page = val.page;
            this.tableSelect();
        },
        //多选
        tableSelection(val) {
            this.nowSelect = val.selection
        },
        serviceCodeTableSelection(val) {
            this.nowSelect = val.selection
        },
        //全选
        tableSelectAll(val) {
            this.nowSelect = val
        },
        serviceCodeTableSelectAll(val) {
            this.nowSelect = val
        },
    }
}
</script>

<style lang="scss" scoped>
.selectLabel {
    font-size: 14px;
    font-weight: 600;
}
</style>