<template>
    <div>
        <div class="overspendedit-all">
            <div class="overspendedit-form">
                <el-form ref="form" :rules="rules" :model="form" label-width="100px">
                    <el-form-item label="团队名称">
                        <el-select filterable @change="getheadtitle" :disabled="disableds" v-model="DiId"
                            placeholder="请选择团队名称">
                            <el-option v-for="(item, index) in cTablelist" :key="index" :label="item.teamName"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="团 号">
                        <el-input disabled v-model="form.tourNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="客 户">
                        <el-input disabled v-model="form.customers"></el-input>
                    </el-form-item>
                    <el-form-item label="出访国家">
                        <el-input disabled v-model="form.countriesVisited"></el-input>
                    </el-form-item>
                    <el-form-item prop="priceName" label="费用名称">
                        <el-input v-model="form.priceName"></el-input>
                    </el-form-item>
                    <el-form-item prop="nation" label="地区">
                        <el-select filterable v-model="form.nation" placeholder="请选择地区">
                            <el-option v-for="(item, index) in nationarr" :key="index"
                                :label="item.country + '-' + item.city" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="currency" label="费用金额">
                        <div style="display: flex;justify-content: space-between;">
                            <el-input-number style="width:60%" :precision="2" placeholder="费用金额" v-model="form.price"
                                :controls='false'>
                            </el-input-number>
                            <el-select style="width:38%" v-model="form.currency" filterable placeholder="币种">
                                <el-option v-for="(item, index) in currencyType" :key="index" :label="item.currencyCode"
                                    :value="item.currencyId"></el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item prop="priceCount" label="数量">
                        <el-input-number style="width:100%" :precision="0" placeholder="数量" v-model="form.priceCount"
                            :controls='false'>
                        </el-input-number>
                    </el-form-item>
                    <el-form-item prop="priceDt" label="产生日期">
                        <el-date-picker style="width:100%" v-model="form.priceDt" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item prop="payee" label="收款方">
                        <el-input v-model="form.payee"></el-input>
                    </el-form-item>
                    <el-form-item prop="costSign" label="费用标识">
                        <el-select v-model="form.costSign" placeholder="请选择费用标识">
                            <el-option label="公转" value='0'></el-option>
                            <el-option label="私转" value='1'></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="payType" label="支付方式">
                        <el-select v-model="form.payType" placeholder="请选择支付方式">
                            <el-option v-for="(item, index) in payment" :key="index" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="form.payType == 72" prop="payCardId" label="卡类型:">
                        <el-select v-model="form.payCardId" placeholder="请选择卡类型">
                            <el-option v-for="(item, index) in cardType" :key="index" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="priceType" label="费用类型">
                        <el-select @change="priceTypechanges" v-model="form.priceType" placeholder="请选择费用类型">
                            <el-option v-for="(item, index) in priceType" :key="index" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="priceDetailType" v-if="priceDetailTypes.length > 0" label="详细类型">
                        <el-select @change="xxtypechange()" v-model="form.priceDetailType" placeholder="请选择详细类型">
                            <el-option v-for="(item, index) in priceDetailTypes" :key="index" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-show="userId == 22" prop="coefficient" label="费用系数">
                        <el-input-number style="width:100%" :precision="2" placeholder="费用系数" v-model="form.coefficient"
                            :controls='false'>
                        </el-input-number>
                    </el-form-item>
                    <el-form-item style="width:100%" label="备注">
                        <el-input type="textarea" :rows="5" v-model="form.remark"></el-input>
                    </el-form-item>
                    <el-form-item style="width:100%;text-align: right;">
                        <el-button type="primary" @click="submitForm('form')">保 存</el-button>
                        <el-button @click="returnbtn">返 回</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            disableds: true,
            DiId: '',
            Id: '',
            pageId: '',
            token: '',
            userId: '',
            form: {
                tourNumber: '',//团号
                customers: '',//客户
                countriesVisited: '',//出访国家
                priceName: '',//费用名称
                price: 0,//金额
                priceType: '',//费用类型Id
                priceDetailType: '',//费用详细类型Id
                coefficient: 1,//系数
                currency: '',//费用币种
                payee: '',//收款方
                costSign: '',//费用标识
                payType: '',//支付方式
                payCardId: '',//卡类型，支付方式为刷卡时有效
                filePath: '',//附件路径
                remark: '',//备注
                createUser: '',//操作人员
                priceCount: 1,//数量
                priceDt: '',//产生日期
                nation: ''//国家
            },
            nationarr: [],
            payment: [],
            priceType: [],
            priceDetailType: [],
            priceDetailTypes: [],
            cardType: [],
            currencyType: [],
            cTablelist: [],
            rules: {
                priceName: [
                    { required: true, message: '请输入费用名称', trigger: 'blur' },
                ],
                currency: [
                    { required: true, message: '请选择币种', trigger: 'change' }
                ],
                payee: [
                    { required: true, message: '请输入收款方', trigger: 'blur' }
                ],
                costSign: [
                    { required: true, message: '请选择费用标识', trigger: 'change' }
                ],
                payType: [
                    { required: true, message: '请选择支付方式', trigger: 'change' }
                ],
                payCardId: [
                    { required: true, message: '请选择卡类型', trigger: 'change' }
                ],
                priceType: [
                    { required: true, message: '请选择费用类型', trigger: 'change' }
                ],
                priceDetailType: [
                    { required: true, message: '请选择详细类型', trigger: 'change' }
                ],
                coefficient: [
                    { required: true, message: '请输入费用系数', trigger: 'blur' }
                ]
                ,
                priceCount: [
                    { required: true, message: '请输入数量', trigger: 'blur' }
                ]
                ,
                priceDt: [
                    { required: true, message: '请选择日期费', trigger: 'change' }
                ],
                nation: [
                    { required: true, message: '国家', trigger: 'change' }
                ]
            },
            coefficientarr: []
        }
    },
    methods: {
        onSubmit() {
            this.datetime(this.form.priceDt)
        },
        //处理日期
        datetime(val) {
            var date = new Date(val);
            var y = date.getFullYear();
            var m = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1).toString();
            var d = date.getDate() >= 10 ? date.getDate() : '0' + (date.getDate()).toString();
            return y + '-' + m + '-' + d
        },
        //获取国家基础数据
        OpCarCityResult() {
            var url = "/api/Groups/OpCarCityResult"
            var that = this
            this.$axios({
                method: 'get',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.nationarr = res.data.data;
                } else {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                    });
                }
            })
        },
        //切换详细类型
        xxtypechange() {
            console.log(this.form.priceDetailType);
            for (let i = 0; i < this.coefficientarr.length; i++) {
                if (this.form.priceDetailType == this.coefficientarr[i].id) {
                    this.form.coefficient = this.coefficientarr[i].coefficient;
                }
            }
        },
        //获取系数
        QueryCoefficientConfig() {
            var url = "/api/Financial/QueryCoefficientConfig"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },

            }).then(function (res) {
                if (res.data.code == 200) {
                    that.coefficientarr = res.data.data;
                } else {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                    });
                }
            })
        },
        //获取超支基础数据
        PostGroupExtraCost_ListDataInit() {
            var url = "/api/Financial/PostGroupExtraCost_ListDataInit"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userId
                },
                data: {
                    portType: 1,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.payment = res.data.data.payment;
                    that.priceDetailType = res.data.data.priceDetailType;
                    that.priceType = res.data.data.priceType;
                    that.cardType = res.data.data.card;
                    that.OpCarCityResult();
                    that.QueryCoefficientConfig();
                } else {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                    });
                }
            })
        },
        //费用类型changes
        priceTypechanges(val) {
            this.form.coefficient = 1;
            this.form.priceDetailType = '',
                this.priceDetailTypes = [];
            var priceDetailTypearr = [];
            for (var i = 0; i < this.priceDetailType.length; i++) {
                if (val + '' == this.priceDetailType[i].remark) {
                    priceDetailTypearr.push(this.priceDetailType[i])
                }
            }
            this.priceDetailTypes = priceDetailTypearr;
        },
        //费用类型change
        priceTypechange(val) {
            console.log(val)
            // this.form.priceDetailType='',
            this.priceDetailTypes = [];
            var priceDetailTypearr = [];
            for (var i = 0; i < this.priceDetailType.length; i++) {
                if (val + '' == this.priceDetailType[i].remark) {
                    priceDetailTypearr.push(this.priceDetailType[i])
                }
            }
            this.priceDetailTypes = priceDetailTypearr;
        },
        //获取团号
        getheadtitle() {
            for (let i = 0; i < this.cTablelist.length; i++) {
                if (this.DiId == this.cTablelist[i].id) {
                    this.form.tourNumber = this.cTablelist[i].tourCode;
                    this.form.customers = this.cTablelist[i].clientName;
                    this.form.countriesVisited = this.cTablelist[i].visitCountry;
                }
            }
        },
        //获取cTable
        PostPageLinkCTable() {
            var url = "/api/Business/PostPageLinkCTable"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userId
                },
                data: {
                    pageId: that.pageId,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.cTable = res.data.data.cTable;
                    //调用获取币种、
                    that.PostGroupTeamRateByDiIdAndCTableId()
                    //调用获取可以操作的团
                    that.PostGroupListByCTableAndUserId();
                } else {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                    });
                }
            })
        },
        //获取可操作的团
        PostGroupListByCTableAndUserId() {
            var url = "/api/Business/PostGroupListByCTableAndUserId"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userId
                },
                data: {
                    portType: 1,
                    pageIndex: 1,
                    pageSize: 10000,
                    cTable: that.cTable,
                    userId: that.userId
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.cTablelist = res.data.data;
                    that.getheadtitle();
                } else {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                    });
                }
            })
        },
        //获取详情
        PostGroupExtraCost_Detail() {
            if (this.Id != this.Id) {
                return
            }
            var url = "/api/Financial/PostGroupExtraCost_Detail"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userId
                },
                data: {
                    portType: 1,
                    id: that.Id,
                }
            }).then(function (res) {
                if (res.data.code) {
                    that.form.coefficient = res.data.data.coefficient;
                    that.form.payee = res.data.data.payee;
                    that.form.price = res.data.data.price;
                    that.form.currency = res.data.data.priceCurrency;
                    that.form.priceName = res.data.data.priceName;
                    that.form.priceType = res.data.data.priceType;
                    that.form.priceDetailType = res.data.data.priceDetailType;
                    that.form.payType = res.data.data.payDId;
                    that.form.costSign = res.data.data.orbitalPrivateTransfer + '';
                    that.form.payCardId = res.data.data.ctdId == 0 ? '' : res.data.data.ctdId;
                    that.form.priceCount = res.data.data.priceCount;
                    that.form.remark = res.data.data.remark;
                    that.form.priceDt = res.data.data.priceDt;
                    that.form.nation = res.data.data.area;
                    that.priceTypechange(that.form.priceType)


                    // setTimeout(that.priceTypechange(that.form.priceType),5000)
                } else {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                    });
                }
            })
        },
        //获取币种
        PostGroupTeamRateByDiIdAndCTableId() {
            var url = "/api/Business/PostGroupTeamRateByDiIdAndCTableId"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userId
                },
                data: {
                    portType: 1,
                    diId: that.DiId,
                    cTable: that.cTable,
                }
            }).then(function (res) {
                if (res.data.code) {
                    that.currencyType = res.data.data.teamRates;
                    if (that.currencyType.length == 0) {
                        that.$message({
                            message: '未设置超支汇率',
                            type: 'warning',
                        });
                    }
                } else {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                    });
                }
            })
        },
        //超支费用api
        PostGroupExtraCost_Operator() {
            var url = "/api/Financial/PostGroupExtraCost_Operator"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userId
                },
                data: {
                    portType: 1,
                    editType: that.Id != that.Id ? 1 : 2,
                    id: that.Id != that.Id ? 0 : that.Id,
                    diId: that.DiId,
                    priceName: that.form.priceName,
                    price: that.form.price,
                    priceType: that.form.priceType,
                    priceDetailType: that.priceDetailTypes.length != 0 ? that.form.priceDetailType : 0,
                    coefficient: that.form.coefficient,
                    currency: that.form.currency,
                    payee: that.form.payee,
                    costSign: Number(that.form.costSign),
                    payType: that.form.payType,
                    payCardId: that.form.payType == 72 ? that.form.payCardId : 0,
                    filePath: '',
                    remark: that.form.remark,
                    createUser: that.userId,
                    priceCount: that.form.priceCount,
                    area: that.form.nation,
                    priceDt: that.datetime(that.form.priceDt),
                    "supervisorConfirm": 1,
                    "managerConfirm": 1
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    setTimeout(that.returnbtn, 1000)
                } else {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                    });
                }
            })
        },
        //保存
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.PostGroupExtraCost_Operator();
                } else {
                    this.$message({
                        message: '请将红框补充完整！',
                        type: 'warning',
                    });
                }
            });
        },
        //返回
        returnbtn() {
            this.$router.push({
                path: "/home/Overspend",
                query: {
                    DiId: this.DiId,
                }
            })
        }
    },
    created() {
        this.pageId = localStorage.getItem('indexs').split('-')[1];
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.DiId = Number(this.$route.query.DiId);
        this.Id = Number(this.$route.query.Id);
        if (this.Id != this.Id) {
            this.disableds = false
        } else {
            this.disableds = true
        }
        //调用获取超支基础数据
        this.PostGroupExtraCost_ListDataInit();
    },
    mounted() {
        //hguoquctb
        this.PostPageLinkCTable();
        //调用获取详情
        this.PostGroupExtraCost_Detail();

    }

}
</script>
<style>
.overspendedit-all {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 830px;
}

.overspendedit-form .el-form-item {
    width: 25%;
    min-width: 370px;
}

.overspendedit-form .el-form {
    display: flex;
    flex-wrap: wrap;

}

.overspendedit-form .el-select {
    width: 100%;
}

.overspendedit-form .el-input-number.is-without-controls .el-input__inner {
    text-align: left;
}
</style>.