<template>
    <div>
        <el-dialog :title="title" :visible.sync="open" width="25%" :close-on-click-modal="false" :show-close="false"
            append-to-body center>
            <el-form ref="add" :model="newDictionary" label-width="auto" label-position="left" size="small"
                :rules="rules" @submit.native.prevent>
                <!-- 新增虚拟航班 -->
                <div v-if="dictName == '虚拟航班'">
                    <el-form-item label="所属口岸" prop="portName">
                        <el-select v-model="newDictionary.portName" placeholder="选择口岸" disabled>
                            <el-option v-for="item in $store.state.user.portNames" :label="item" :value="item"
                                :key="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="航班名称" v-if="status == 'allAdd'" prop="flightNo">
                        <el-input type="textarea" v-model="flightNo" :rows="7" maxlength="255" show-word-limit
                            placeholder="用;分隔，单条航班名长度25">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="航班名称" prop="flightNo" v-else>
                        <el-input type="text" v-model="flightNo" placeholder="请输入数据名称" maxlength="25"></el-input>
                    </el-form-item>
                </div>
                <!-- 新增航线 -->
                <div v-else-if="dictName == '航线'">
                    <div v-if="status == 'add'">
                        <el-form-item label="航班号" prop="fltNo">
                            <el-input type="text" v-model="newDictionary.fltNo" placeholder="请输入航班号" maxlength="20">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="航线" prop="route">
                            <el-input type="text" v-model="newDictionary.route" placeholder="请输入航线" maxlength="40">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div v-else-if="status == 'sort'">
                        <el-form-item label="航班号" prop="fltNo">
                            <el-input type="text" v-model="newDictionary.fltNo" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="航线">
                            <Drag :routes="routeList" @drag="drag"></Drag>
                        </el-form-item>
                    </div>
                    <el-form-item>
                        <div style="color:#ff4949;line-height: 30px;">注意：此处不能添加虚拟航班！</div>
                    </el-form-item>
                </div>
                <!-- 新增数据字典 -->
                <div v-else>
                    <el-form-item label="所属父级" v-if="newDictionary.serviceCodeKey">
                        <el-input type="text" v-model="newDictionary.serviceCodeKey" placeholder="用回车分隔" disabled>
                        </el-input>
                    </el-form-item>
                    <!-- 批量新增 -->
                    <el-form-item label="数据名称" v-if="status == 'allAdd' || status == 'childrenAdd'" prop="chineseName">
                        <el-input type="textarea" v-model="newDictionary.chineseName" :rows="7" maxlength="255"
                            show-word-limit placeholder="用回车分隔">
                        </el-input>
                    </el-form-item>
                    <div v-else>
                        <!-- 单条新增 -->
                        <el-form-item label="数据名称" prop="chineseName">
                            <el-input type="text" v-model.trim="newDictionary.chineseName" placeholder="请输入数据名称"
                                maxlength="50"></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="字典CODE" prop="code" v-show="addDictionary.chineseName">
                        <el-input type="text" v-model.trim="newDictionary.code" placeholder="请输入字典CODE" disabled>
                        </el-input>
                    </el-form-item> -->
                        <el-form-item label="描述" prop="description">
                            <el-input type="textarea" v-model="newDictionary.description" :row="3" maxlength="125"
                                show-word-limit></el-input>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" :loading="loading" @click="submit">确 定</el-button>
                <el-button @click="close">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { addDict, addDictBatch, addServiceCodeBatch, addFlight, addRoute, queryRoute, orderRoute } from '@/api/system/dictionary.js'

export default {
    props: {
        open: {
            type: Boolean,
            default: false,
        },
        dictName: {
            type: String,
            default: ''
        },
        addDictionary: {
            type: Object,
            default: null
        },
        status: {
            type: String,
            default: null
        }
    },
    data() {
        return {
            newDictionary: { flightNo: undefined, chineseName: undefined, route: undefined },
            rules: {
                chineseName: [
                    {
                        required: true,
                        message: "数据名称不能为空",
                        trigger: "blur",
                    }
                ],
                flightNo: [
                    {
                        required: true,
                        message: "航班名称不能为空",
                        trigger: "blur",
                    },
                ],
                fltNo: [
                    {
                        required: true,
                        message: "航班号不能为空",
                        trigger: "blur",
                    }
                ],
                route: [
                    {
                        required: true,
                        message: "航线不能为空",
                        trigger: "blur",
                    }
                ],
            },
            routeList: [],
            title: '',
            loading: false,
        }
    },
    watch: {
        open(val, oldVal) {
            if (val) {
                this.newDictionary = { flightNo: undefined, chineseName: undefined }
                if (this.status == 'add') {
                    this.title = '新增'
                } else if (this.status == 'allAdd') {
                    this.title = '批量新增'
                } else if (this.status == 'childrenAdd') {
                    this.newDictionary = this.addDictionary
                    this.title = '新增子集'
                } else if (this.status == 'sort') {
                    this.newDictionary = this.addDictionary.serviceCodeKey
                    this.title = '航线排序'
                    queryRoute({ fltNo: this.newDictionary.fltNo }).then(res => {
                        if (res.code === 200) {
                            this.routeList = res.data.list
                        } else {
                            this.msgWarning(res.msg)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }
                // else if (this.status == 'update') {
                //     if (this.addDictionary.serviceCodeValue) {
                //         this.newDictionary = {
                //             chineseName: this.addDictionary.serviceCodeValue,
                //             fname: this.addDictionary.serviceCodeKey,
                //             code: this.addDictionary.serviceCodeValue,
                //         }
                //     } else {
                //         this.newDictionary = this.addDictionary
                //     }
                //     this.title = '修改'
                // }
                if (this.dictName == '虚拟航班') {
                    this.newDictionary.portName = this.$store.state.user.activePortName
                }
            }
        },
    },
    methods: {
        //确定
        submit() {
            this.$refs['add'].validate((val) => {
                if (val) {
                    this.loading = true
                    this.newDictionary.dictCode = this.dictName
                    //新增字典
                    if (this.status == 'add') {
                        if (this.dictName === '虚拟航班') {
                            this.flightAdd()
                        } else if (this.dictName === '航线') {
                            let obj = {
                                fltNo: this.upCase(this.newDictionary.fltNo),
                                route: this.upCase(this.newDictionary.route)
                            }
                            addRoute(obj).then(res => {
                                this.loading = false
                                if (res.code === 200) {
                                    this.msgSuccess(res.msg)
                                    this.close()
                                } else {
                                    this.msgWarning(res.msg)
                                }
                            }).catch(err => {
                                this.loading = false
                                console.log(err)
                            })
                        } else {
                            addDict(this.newDictionary).then(res => {
                                this.loading = false
                                if (res.code === 200) {
                                    this.msgSuccess(res.msg)
                                    this.close()
                                } else {
                                    this.msgWarning(res.msg)
                                }
                            }).catch(err => {
                                this.loading = false
                                console.log(err)
                            })
                        }
                    }
                    //批量新增 
                    else if (this.status == 'allAdd') {
                        if (this.dictName === '虚拟航班') {
                            this.flightAdd()
                        } else {
                            let obj = {
                                nameList: [],
                                dictCode: this.dictName
                            }
                            this.newDictionary.chineseName.split("\n").forEach(item => {
                                if (item != null && item != undefined && item != '') {
                                    obj.nameList.push(item)
                                }
                            })
                            addDictBatch(obj).then(res => {
                                this.loading = false
                                if (res.code === 200) {
                                    this.msgSuccess(res.msg)
                                    this.close()
                                } else {
                                    this.msgWarning(res.msg)
                                }
                            }).catch(err => {
                                this.loading = false
                                console.log(err)
                            })
                        }
                    }
                    //新增子集
                    else if (this.status == 'childrenAdd') {
                        let arr = []
                        this.newDictionary.chineseName.split("\n").forEach(item => {
                            arr.push({
                                serviceCodeKey: this.newDictionary.serviceCodeKey,
                                serviceCodeValue: item
                            })
                        })
                        addServiceCodeBatch(arr).then(res => {
                            this.loading = false
                            if (res.code === 200) {
                                this.msgSuccess(res.msg)
                                this.close()
                            } else {
                                this.msgWarning(res.msg)
                            }
                        }).catch(err => {
                            this.loading = false
                            console.log(err)
                        })
                    }
                    //航线排序
                    else if (this.status == 'sort') {
                        let arr = []
                        this.routeList.forEach(item => {
                            arr.push(item.id)
                        })
                        orderRoute(arr).then(res => {
                            this.loading = false
                            if (res.code === 200) {
                                this.msgSuccess(res.msg)
                                this.close()
                            } else {
                                this.msgWarning(res.msg)
                            }
                        }).catch(err => {
                            this.loading = false
                            console.log(err)
                        })
                    }
                }
            })
        },
        //新增虚拟航班
        flightAdd() {
            let flightNo = []
            flightNo = this.newDictionary.flightNo.toUpperCase().split(';')
            addFlight(flightNo).then(res => {
                this.loading = false
                if (res.code === 200) {
                    this.msgSuccess(res.msg)
                    this.close()
                } else {
                    this.msgWarning(res.msg)
                }
            }).catch(err => {
                this.loading = false
                console.log(err)
            })
        },
        //航线排序
        drag(val) {
            this.routeList = val
        },
        //关闭
        close() {
            this.newDictionary = { chineseName: null, code: null, remark: null }
            this.routeList = []
            this.clearValidate('add')
            this.$emit('close', false)
        },
        //清除表单验证
        clearValidate(formName) {
            this.$refs[formName].clearValidate();
        },
    },
    computed: {
        chineseName: {
            get: function () {
                return this.newDictionary.chineseName
            },
            set: function (val) {
                const reg = /^([a-zA-Z0-9]{0,25}(\n[a-zA-Z0-9]{0,25})*)$/
                if (reg.test(val)) {
                    this.newDictionary.chineseName = val
                }
            },
        },
        flightNo: {
            get: function () {
                return this.newDictionary.flightNo
            },
            set: function (val) {
                const reg = /^([a-zA-Z0-9]{0,25}(\;[a-zA-Z0-9]{0,25})*)$/
                if (reg.test(val)) {
                    this.newDictionary.flightNo = val
                }
            },
        },
        fltNo: {
            get: function () {
                return this.newDictionary.fltNo
            },
            set: function (val) {
                this.newDictionary.fltNo = this.upCase(val)
            },
        },
        route: {
            get: function () {
                return this.newDictionary.route
            },
            set: function (val) {
                const reg = /^([0-9a-zA-Z!@#$%^&*()`]{0,100})$/
                if (reg.test(val)) {
                    this.newDictionary.route = val
                }
            },
        }
    }
}
</script>

<style>

</style>