<template>
    <div>
        <el-dialog :title="title" :visible.sync="dialogVisible" width="60%" top="8vh" :before-close="close"
            append-to-body :close-on-click-modal="false" @submit.native.prevent>
            <el-form class="form-header" ref="superAllocationForm" :model="formData" label-width="auto"
                label-position="left" style="margin-bottom:10px" @submit.native.prevent size="small" :rules="rules">
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="发件人账号" prop="shipperAccount">
                            <el-input type="textarea" v-model="formData.shipperAccount" placeholder="请输入发件人账号，多个以“;”分割"
                                maxlength="50" rows="4" :disabled="disabled" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="航班号" prop="flightNo">
                            <el-input class="formItem" ref="flightNoFormItem" v-focus v-model="formData.flightNo"
                                maxlength="20" placeholder="请输入航班号" @change="getRoute" :disabled="disabled">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="航班日期" prop="flightDate">
                            <el-date-picker class="formItem" v-model="formData.flightDate" type="date"
                                placeholder="选择日期" value-format="yyyy-MM-dd" @change="getRoute" :disabled="disabled">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="航线" prop="flightRoute">
                            <el-select class="formItem" v-model="formData.flightRoute" placeholder="未设置"
                                :loading="routeLoading" :disabled="routeList.length == 0 || disabled"
                                @change="routeChange">
                                <el-option v-for="(item, index) in routeList" :label="item.route" :value="item.route"
                                    :key="item.id">
                                    <Tooltips :content="item.route" :refName="item.route"></Tooltips>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="预留舱位(KG)" prop="groupAllWeight">
                            <el-input class="formItem" v-model="formData.groupAllWeight" placeholder="请输入预留舱位"
                                oninput="value=value.replace(/[^\d\.\-]/g,'')">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="URSA包含" prop="includeUrsa">
                            <el-input class="formItem" v-model="formData.includeUrsa"
                                placeholder="URSA之间用分号分隔，例：F2;F3;P_" type="textarea" rows="3" maxlength="100">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="URSA不包含" prop="notIncludeUrsa">
                            <el-input class="formItem" v-model="formData.notIncludeUrsa"
                                placeholder="URSA之间用分号分隔，例：F2;F3;P_" type="textarea" rows="3" maxlength="100">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="申报类别" prop="classificationList">
                            <el-card shadow="never" style="width: 95%">
                                <el-checkbox-group v-model="formData.classificationList">
                                    <el-row>
                                        <el-col v-for="item in checkBoxItem.cargoType" :span="2" :key="item.id">
                                            <el-checkbox v-if="item.status === 1" :label="item.chineseName"
                                                :name="item.chineseName" :key="item.code">
                                                <Tooltips :content="item.chineseName" :refName="item.chineseName">
                                                </Tooltips>
                                            </el-checkbox>
                                        </el-col>
                                    </el-row>
                                </el-checkbox-group>
                            </el-card>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="Service Code" prop="serviceCodeList">
                            <el-card shadow="never" style="width: 95%">
                                <el-checkbox-group v-model="formData.serviceCodeList">
                                    <el-row>
                                        <el-col v-for="item in checkBoxItem.serviceCode" :span="2" :key="item.id">
                                            <el-checkbox
                                                v-if="item.status === 1 || checkBoxItem.serviceCode.includes(item.chineseName)"
                                                :label="item.chineseName" :name="item.chineseName"
                                                :disabled="checkBoxItem.serviceCode.includes(item.chineseName) && item.status == 0"
                                                :key="item.code">
                                                <Tooltips :content="item.chineseName" :refName="item.chineseName">
                                                </Tooltips>
                                            </el-checkbox>
                                        </el-col>
                                    </el-row>
                                </el-checkbox-group>
                            </el-card>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" :loading="loading" @click="submit">确 定</el-button>
                <el-button @click="close">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { findFlightRoute } from "@/api/cargoSelect";
import { allDictData } from "@/api/destinationFlight";
import { saveOrUpdate } from "@/api/supserAllocation"

export default {
    name: '',
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        ruleData: {
            type: Object,
            default: null
        },
        status: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            formData: {
                flightNo: '',
                flightDate: '',
                flightRoute: null,
                classificationList: [],
                serviceCodeList: []
            },
            routeList: [],
            checkBoxItem: {
                cargoType: [],
                serviceCode: []
            },
            rules: {
                shipperAccount: [
                    {
                        required: true,
                        message: "发件人账号不能为空",
                        trigger: "blur",
                    },
                ],
                flightDate: [
                    {
                        required: true,
                        message: "航班日期不能为空",
                        trigger: "blur",
                    },
                ],
                flightNo: [
                    {
                        required: true,
                        message: "航班号不能为空",
                        trigger: "blur",
                    },
                ],
                flightRoute: [
                    {
                        required: true,
                        message: "航线不能为空",
                        trigger: "change",
                    },
                ],
                groupAllWeight: [
                    {
                        required: true,
                        message: "预留舱位不能为空",
                        trigger: "blur",
                    },
                ],
                includeUrsa: [
                    {
                        required: true,
                        message: "URSA不能为空",
                        trigger: "blur",
                    },
                ],
            },
            title: '',
            loading: false,
            routeLoading: false,
            disabled: false
        }
    },
    created() {
        this.getCheckData()
    },
    watch: {
        dialogVisible(val) {
            if (val) {
                if (this.status == 'add') {
                    this.title = '新增'
                    this.$nextTick(() => {
                        this.$refs["superAllocationForm"].clearValidate();
                    })
                } else if (this.status == 'update') {
                    this.title = '修改'
                    this.formData = this.ruleData
                    this.disabled = true
                    this.getRoute(1)
                } else if (this.status == 'copy') {
                    this.title = '复制'
                    this.formData = this.ruleData
                    this.getRoute(1)
                }
            }
        }
    },
    methods: {
        //获取复选框数据
        getCheckData() {
            allDictData().then(res => {
                if (res.code === 200) {
                    this.checkBoxItem.cargoType = res.data.cargoType
                    this.checkBoxItem.serviceCode = res.data.serviceCode
                } else {
                    this.msgWarning(res.msg)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        //获取航线
        getRoute(val) {
            this.routeList = []
            this.routeLoading = true
            if (val != 1) {
                this.formData.flightRoute = null
            }
            this.formData.flightNo = this.formData.flightNo.toUpperCase()
            let obj = {
                fltNo: this.formData.flightNo,
                fltDate: this.formData.flightDate
            }
            findFlightRoute(obj).then(res => {
                this.routeLoading = false
                if (res.code === 200) {
                    this.routeList = res.data
                } else {
                    this.msgWarning(res.msg)
                }
                this.$refs['superAllocationForm'].clearValidate('flightRoute')
            }).catch(err => {
                this.routeLoading = false
                console.log(err)
            })
        },
        //提交
        submit() {
            this.$refs["superAllocationForm"].validate((valid) => {
                if (valid) {
                    this.loading = true
                    this.formData.shipperAccount = this.formData.shipperAccount.replace(/；/g, ";")
                    this.formData.includeUrsa = this.formData.includeUrsa.replace(/；/g, ";")
                    if (this.formData.notIncludeUrsa && this.formData.notIncludeUrsa != null && this.formData.notIncludeUrsa != '') {
                        this.formData.notIncludeUrsa = this.formData.notIncludeUrsa.replace(/；/g, ";")
                    }
                    saveOrUpdate(this.formData).then(res => {
                        this.loading = false
                        if (res.code === 200) {
                            this.msgSuccess('操作成功！')
                            this.close()
                        } else {
                            this.msgWarning(res.msg)
                        }
                    }).catch(err => {
                        this.loading = false
                        console.log(err)
                    })
                }
            })
        },
        routeChange() {
            this.$forceUpdate()
        },
        close() {
            this.formData = {
                flightNo: '',
                flightDate: '',
                classificationList: [],
                serviceCodeList: []
            }
            this.$refs["superAllocationForm"].clearValidate();
            this.routeList = []
            this.disabled = false
            this.$emit('close')
        }
    }
}
</script>

<style lang="scss" scoped>

</style>