<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 == '航线' ? '航线' : 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-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 === '虚拟航班' || 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="mini" :loading="loading"
                        v-if="tableName != 'serviceCode'" @click="tableSelect(1)">查询</el-button>
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="addDic({ status: 'add' })"
                        v-hasPermi="['system:dictionary:add']">
                        {{ tableName === 'serviceCode' ? '新增父级' : '新增' }}
                    </el-button>
                    <el-button v-if="tableName != '航线'" type="primary" icon="el-icon-plus" size="mini"
                        @click="addDic({ status: 'allAdd' })" v-hasPermi="['system:dictionary:add']">
                        {{ tableName === 'serviceCode' ? '批量新增父级' : '批量新增' }}
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="nowSelect.length == 0"
                        @click="handleDelete" v-hasPermi="['system:dictionary:delete']">删除
                    </el-button>
                </div>
            </el-form>
            <!-- 表格 -->
            <Tables v-if="tableName != 'serviceCode' && tableName != '虚拟航班' && 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>
            <!-- 航线表 -->
            <Tables v-if="tableName === '航线'" ductName="dictionary" :selection="true" :selectFixed="false"
                :order='true' :height="tableHeight" :data="tableData" :headerData="routeTable" :page="selectDict.page"
                :pageSizes="[20]" :totalCount="total" :loading="loading" @currentChange="currentChange"
                layout="total,prev, pager, next, jumper, ->" @tableSelect="tableSelection"
                @tableSelectAll="tableSelectAll">
                <template v-slot:fltNo="scope">
                    <el-link type="primary" @click="addDic({ data: scope.row, status: 'sort' })">
                        {{
                                scope.row.fltNo
                        }}<i class="el-icon-link"></i> </el-link>
                </template>
                <template slot="optionColumn">
                    <el-table-column label="是否为ET86航线" align="center">
                        <template slot-scope="scope">
                          <el-checkbox v-model="scope.row.isEtesRoute" @change="checkboxIsEtesRoute(scope)"></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <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">
                            <div v-hasPermi="['system:dictionary:add']">
                                <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 })">新增子集
                                </el-button>
                            </div>
                            <!-- <el-button class="mr5" size="mini" type="text" icon="el-icon-edit"
                                @click="upDate({ status: 'update', data: scope.row })">修改
                            </el-button> -->
                            <div v-hasPermi="['system:dictionary:delete']">
                                <el-button v-if="!scope.row.serviceCodeMapperList" size="mini" type="text"
                                    style="color:#ff4949" icon="el-icon-delete" @click="delDict(scope.row)">删除
                                </el-button>
                            </div>
                        </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, queryRoute, delRoute, checkFlightRoute, updateRoute } 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'],//表头
            serviceCodeHeader: this.tableHeaders['dictServiceCode'],//serviceCode主表头
            childrenTableHeader: this.tableHeaders['dictServiceCodeChildren'],//serviceCode子表头
            routeTable: this.tableHeaders['fltRoute'],//航线表头
            flightHeader: [
                {
                    columnChineseName: "航班号",
                    columnName: "flightNo",
                    columnWidth: "",
                    align: "center",
                    status: 1
                }
            ],//虚拟航班表头
            dictNameList: [],//主表数据
            addDictionary: {},//选择数据
            nowSelect: [],
            tableName: '',
            tableHeight: null,
            total: 0,
            status: null,
            loading: false,
            open: false,
        }
    },
    created() {
        this.dictNameSelect()
        // this.$nextTick(()=>{
        //   let height = window.innerHeight - this.$refs.dictForm.$el.offsetHeight - 270;
        //   if(height < 300){
        //     this.tableHeight = 300;
        //   }else{
        //     this.tableHeight = height;
        //   }
        // })
    },
    activated() {
        // if (this.$store.state.tagsView.cachedViews.length > 0) {
        // this.tableSelect()
        // }
    },
    mounted() {
        this.tableHeight = window.innerHeight - this.$refs.dictForm.$el.offsetHeight - 270
    },
    filters: {
      // 是否为ET86航线
    isEtesRoute(val) {
        if(val == "N"){
          return "否"
        }else{
          return "是"
        }
    },
  },
    watch: {
        tableName(val, oldVal) {
            this.tableName = val
            this.selectDict = {
                page: 1,
                size: 20
            }
            this.tableSelect()
        },
    },
    methods: {
        /*
         【更新航线】
         更新路由成功后不用去调查询接口，
         因为即便不去刷新页面调查询接口，
         当前checkBox都是当前操作的状态；
         所以调不调查询接口没有意义，反而消耗后台服务；
        */
       async updateRouteSubmit(params){
            await updateRoute(params).then(res=>{
              if(res.code == 200){
                this.msgSuccess(res.msg)
              }else{
                this.msgError(res.msg);
              }
             }).catch(err => {
                console.log(err)
                this.msgWarning(err)
            })
        },
        //字典名称
        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 if (this.tableName === '航线') {
                let obj = {
                    fltNo: this.selectDict.flightNo,
                    page: this.selectDict.page,
                    size: this.selectDict.size
                }
                queryRoute(obj).then(res => {
                    if (res.code === 200) {
                      res.data.list.map(item=>{
                        if(item.isEtesRoute == "N"){
                           item.isEtesRoute = false;
                        }else{
                           item.isEtesRoute = true;
                        }
                      })
                        this.tableData = res.data.list
                        this.total = res.data.total
                    } else {
                        this.msgWarning(res.msg)
                    }
                }).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) {
        //     this.status = val.status
        //     this.addDictionary = val.data
        //     this.open = true
        // },
        //删除按钮
        delDict(val) {
          console.log(val)
            if (this.tableName == 'serviceCode') {
                this.serviceCodeCihildDel([val.id])
            } else if (this.tableName === '虚拟航班') {
                this.flightDel([val.id])
            } else if (this.tableName === '航线') {
               /*
                 如果该航线是普通航线直接删，如果是ET86航线，那么要查询该航线有没有设置维度，
                 如果没有直接删，如果已经设置了维度是否考虑将该航线下的维度删掉再进行操作;
               */
                if(!val.isEtesRoute){ // 普通航线
                    this.routeDel({ data: [val], id: [val.id] })
                }else{ // ET86航线
                    this.$confirm("该航线是ET86航线。是否要删除", "注意!", {
                        closeOnClickModal: false,
                        confirmButtonText: "确定删除",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {
                      this.msgWarning('待联调！')
                        // delDict(val).then(res => {
                        //     if (res.code === 200) {
                        //         this.msgSuccess(res.msg)
                        //     } else {
                        //         this.msgWarning(res.msg)
                        //     }
                        //     this.tableSelect() // 回调查询
                        // }).catch(err => {
                        //     console.log(err)
                        // })
                    }).catch(() => { })
                }
            } 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 if (this.tableName === '航线') {
                this.routeDel({ data: this.nowSelect, id: 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.msgWarning(res.msg)
                    }
                    this.tableSelect(1)
                }).catch(err => {
                    console.log(err)
                })
            }).catch(() => { })
        },
        //航线删除
        routeDel(val) {
            this.$confirm("是否要删除记录？", "注意!", {
                closeOnClickModal: false,
                confirmButtonText: "确定删除",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                let arr = []
                val.data.forEach(item => {
                    arr.push({
                        fltNo: item.fltNo,
                        route: item.route
                    })
                })
                checkFlightRoute(arr).then(res => {
                    if (res.code === 202) {
                        this.$confirm(res.msg, "注意!", {
                            closeOnClickModal: false,
                            confirmButtonText: "确定删除",
                            cancelButtonText: "取消",
                            type: "warning",
                        }).then(() => {
                            delRoute(val.id).then(res => {
                                if (res.code === 200) {
                                    this.msgSuccess(res.msg)
                                } else {
                                    this.msgWarning(res.msg)
                                }
                                this.tableSelect(1)
                            }).catch(err => {
                                console.log(err)
                            })
                        }).catch()
                    } else if (res.code === 200) {
                        delRoute(val.id).then(res => {
                            if (res.code === 200) {
                                this.msgSuccess(res.msg)
                            } else {
                                this.msgWarning(res.msg)
                            }
                            this.tableSelect(1)
                        }).catch(err => {
                            console.log(err)
                        })
                    } else {
                        this.msgWarning(res.msg)
                    }
                }).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
        },
        // 确认消息提示
        confirmHandle($index, row){
          this.$confirm(row.msg, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                center: true,
            })
        .then(() => {
         this.updateRouteSubmit(row.id);
        })
        .catch(() => {
          this.tableData[$index].isEtesRoute = !this.tableData[$index].isEtesRoute;
        });
        },
        // checkBox是否设置ET86航线
        checkboxIsEtesRoute({ $index, row }){
          if(!row.isEtesRoute){
            /*
               将ET86设置成普通航线要查询校验该航线有没有设置维度，
               如果该航线设置了ET86维度是否考虑将该航线下的维度删掉再进行操作;
             */
             row.msg = "是否将该航线设置为非ET86航线？";
             this.confirmHandle($index, row)
          }else{
             row.msg = "是否将该航线设置为ET86航线？";
             this.confirmHandle($index, row)
          }
        }
    }
}
</script>

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