<template>
    <div class="car_add">
        <div>
            <div class="communal-title">
                <div>{{ title }}</div>
            </div>

        </div>
        <hr style='background-color:#5555; height:1px; border:none;' />
        <div style="color:red;display: flex;">
            <div style="text-align:left;width:20%;">
                *团组成本预算 - 机票的预算:
            </div>
            <div style="margin-left:20px;color:red;" v-if="airGroupCostParameter != null">
                经济舱： {{ airGroupCostParameter.jjccb }}元/人 {{ airGroupCostParameter.jjcrs }}人
                共:{{ airGroupCostParameter.jjccb * airGroupCostParameter.jjcrs
                }}元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                公务舱： {{ airGroupCostParameter.gwccb }}元/人 {{ airGroupCostParameter.gwcrs }}人
                共:{{ airGroupCostParameter.gwccb * airGroupCostParameter.gwcrs
                }}元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <div style="margin-left:20px;color:red;" v-else>
                团组成本暂未开放此团数据！
            </div>
        </div>
        <div>
            <el-form :model="delegationInfo" ref="delegationInfo" label-width="100px" class="demo-ruleForm">
                <div style="display: flex;">
                    <div style="width: 33%;">
                        <el-form-item label="团组名称:" label-width="160px">
                            <el-select v-model="DiIdSelect" placeholder="团组选择" @change="AirTicketResChange"
                                style="width: 100%;">
                                <el-option v-for="item in AirTicketResSelectData" :key="item.id" :label="item.groupName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="width: 33%;">
                        <el-form-item label="团 号:" prop="tourCode" label-width="160px">
                            <el-input placeholder="团号" v-model="delegationInfo.tourCode" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 33%;">
                        <el-form-item label="客户:" prop="clientName" label-width="160px">
                            <el-input placeholder="客户" v-model="delegationInfo.clientName" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>

                </div>
                <div style="display: flex;">
                    <div style="width: 33%;">
                        <el-form-item label="出访国家:" prop="visitCountry" label-width="160px">
                            <el-input placeholder="出访国家" v-model="delegationInfo.visitCountry" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <el-form :model="opData" ref="opData" label-width="100px" class="demo-ruleForm">
                <div style="display: flex;">
                    <div style="width: 33%;">
                        <el-form-item label="舱类型:" label-width="160px">
                            <el-select v-model="DiIdSelect" placeholder="舱类型" style="width: 100%;">
                                <el-option v-for="item in ticketClass" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="width: 33%;">
                        <el-form-item label="机票单价:" prop="tourCode" label-width="160px">
                            <el-input placeholder="机票单价" v-model="delegationInfo.tourCode" style="width: 58%;">
                            </el-input>
                            <el-select v-model="DiIdSelect" style="width: 35%;">
                                <el-option v-for="item in currency" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="width: 33%;">
                        <el-form-item label="机票总价:" prop="clientName" label-width="160px">
                            <el-input placeholder="机票总价:" v-model="delegationInfo.tourCode" style="width: 58%;">
                            </el-input>
                            <el-select v-model="DiIdSelect" style="width: 35%;">
                                <el-option v-for="item in currency" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>


                </div>
                <div style="display: flex;">
                    <div style="width: 33%;">
                        <el-form-item label="此舱位人数:" prop="visitCountry" label-width="160px">
                            <el-input placeholder="此舱位人数:" v-model="delegationInfo.visitCountry">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 33%;">
                        <el-form-item label="是否值机: " label-width="160px">
                            <el-radio-group v-model="delegationInfo.isEu">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div style="width: 33%;">
                        <el-form-item label="是否选座:" label-width="160px">
                            <el-radio-group v-model="delegationInfo.isEu">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>

                </div>
                <div style="display: flex;">
                    <div style="width: 33%;">
                        <el-form-item label="是否购买行李:" label-width="160px">
                            <el-radio-group v-model="delegationInfo.isEu">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div style="width: 33%;">
                        <el-form-item label="是否行李直挂:" label-width="160px">
                            <el-radio-group v-model="delegationInfo.isEu">
                                <el-radio :label=1>是</el-radio>
                                <el-radio :label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div style="width: 33%;">
                        <el-form-item label="是否火车票出票选座:" label-width="160px">
                            <el-radio-group v-model="delegationInfo.isEu">
                                <el-radio label=1>是</el-radio>
                                <el-radio label=0>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 50%;">
                        <el-form-item label="航班简述:" label-width="160px">
                            <el-input placeholder="此舱位客人名称:" v-model="delegationInfo.visitCountry">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 50%;">
                        <el-form-item label="城市:" prop="tourCode" label-width="160px">
                            <el-input placeholder="此舱位客人名称:" v-model="delegationInfo.visitCountry">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 90%;">
                        <el-form-item label="此舱位客人名称:" prop="Remark" label-width="160px">
                            <el-input placeholder="此舱位客人名称:" v-model="delegationInfo.visitCountry">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div>
                    <span style="color: red; padding-left: 100px;">
                        请严格遵守此格式!!! 1. EK363 R1 WE08MAR CANDXB HK7 0015 0515 SEAME 2 3 (注意空格以及多条数据换行)
                    </span>
                </div>
                <div style="display: flex;">
                    <div style="width: 90%;">
                        <el-form-item label="航班描述:" prop="Remark" label-width="160px">
                            <el-input type="textarea" :rows="3" placeholder="航班描述"
                                v-model="delegationInfo.Remark"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 90%;">
                        <el-form-item label="费用描述:" prop="Remark" label-width="160px">
                            <el-input type="textarea" :rows="3" placeholder="费用描述"
                                v-model="delegationInfo.Remark"></el-input>
                        </el-form-item>
                    </div>
                </div>``
                <div style="display: flex;">
                    <div style="width: 90%;">
                        <el-form-item label="备 注:" prop="Remark" label-width="160px">
                            <el-input type="textarea" :rows="3" placeholder="备注" v-model="delegationInfo.Remark"></el-input>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            title: "新增机票费用录入",
            token: '',
            userId: 0,
            DiId: '',
            DiIdSelect: '',
            delegationInfo: {},
            AirTicketResSelectData: [],//团组下拉框
            ticketClass: [],//舱位下拉框
            currency: [],//币种下拉框
            payment: [],//支付方式下拉框
            cardType: [],//卡类型下拉框
            airGroupCostParameter: {},//机票成本预算
            jjccb: 0,
            jjcrs: 0,
            jjczj: 0,
            gwccb: 0,
            gwcrs: 0,
            gwczj: 0,
            opData: {},
        }
    },
    methods: {
        //团组下拉框
        AirTicketResSelect() {
            var url = "/api/Groups/AirTicketResSelect"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    userId: that.userId
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.AirTicketResSelectData = res.data.data.groupName;
                    that.ticketClass = res.data.data.ticketClass;//舱位下拉框
                    that.currency = res.data.data.currency;//币种下拉框
                    that.payment = res.data.data.payment;//支付方式下拉框
                    that.cardType = res.data.data.cardType;//卡类型下拉框
                    that.DiIdSelect = parseInt(that.DiId)
                    that.AirTicketResList()
                }

            })
        },
        AirTicketResChange() {
            this.AirTicketResList();
        },
        AirTicketResList() {
            var url = "/api/Groups/AirTicketResList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    diId: that.DiIdSelect
                }
            }).then(function (res) {

                if (res.data.code == 200) {
                    debugger
                    that.delegationInfo = res.data.data.delegationInfo
                    that.airGroupCostParameter = res.data.data.airGroupCostParameter
                }
            })
        },
    },

    mounted() {

        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.AirTicketResSelect();
        this.DiId = this.$route.query.DiId

    }
}
</script>
<style>
.communal-list {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
}

.car_add .communal-title {
    display: flex;
    font-size: 17px;
    font-weight: 600;
    color: #555;
    margin-bottom: 20px;
    justify-content: space-between;
    align-items: center;
}

.appraise-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 50px 0;
}

.appraise-box>div {
    width: 30%;
}

.communal-box {
    display: flex;
}

.communal-box>button {
    margin-left: 10px;
    padding: 8px 20px;
}

.car_add {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
}

@media screen and (max-width: 1700px) {
    .appraise-box>div {
        width: 48%;
    }

    .appraise-box>div el-form-item__content {
        width: 260px !important;
    }
}
</style>
