<template>
    <div>
        <div class="currency-all">
            <div class="currency-head">
                <div class="head-ipt">
                    <div class="name-ipt">
                        <label>团组名称:</label>
                        <el-select v-model="state1" filterable placeholder="请选择">
                            <el-option
                              v-for="item in restaurants"
                              :key="item.id"
                              :label="item.groupName"
                              :value="item.id">
                            </el-option>
                          </el-select>
                    </div>
                    <div class="preserve-btn">
                        <el-button class="preserve" type="primary">保存数据</el-button>
                    </div>
                </div>
                <div class="currency-info">
                    <div class="currency-info-li">
                        <label>团 号：</label>
                        <span>9XGYL</span>
                    </div>
                    <div class="currency-info-li">
                        <label>客 户：</label>
                        <span>小熟悉熟悉</span>
                    </div>
                    <div class="currency-info-li">
                        <label>出访国家：</label>
                        <span>新加坡</span>
                    </div>
                    <div class="currency-info-li">
                        <label>起止日期：</label>
                        <span>2023-05-18 ～ 2023-05-27</span>
                    </div>
                    <div class="currency-info-li">
                        <label>天数/人数：</label>
                        <span>10天/6人</span>
                    </div>
                </div>
            </div>
            <div class="currency-com">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="酒店预订" name="hotel">
                        <div class="ipt-inif">
                            <div class="ipt" v-for="(item,index) in currencyArr" :key="index">
                                <label>{{item.remark}}({{item.name}})：</label>
                                <el-input v-model="item.rate" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="请输入内容"></el-input>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="行程" name="itinerary">行程</el-tab-pane>
                    <el-tab-pane label="车/导游地接" name="guide">车/导游地接</el-tab-pane>
                    <el-tab-pane label="签证" name="visa">签证</el-tab-pane>
                    <el-tab-pane label="邀请/公务活动" name="business">邀请/公务活动</el-tab-pane>
                    <el-tab-pane label="团组客户保险" name="insurance">团组客户保险</el-tab-pane>
                    <el-tab-pane label="机票预订" name="ticket">机票预订</el-tab-pane>
                    <el-tab-pane label="团组增减款项" name="payments">团组增减款项</el-tab-pane>
                    <el-tab-pane label="酒店早餐" name="breakfast">酒店早餐</el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
      return {
        restaurants: [],
        state1: '',
        activeName: 'hotel',
        currencyArr:[]
      };
    },
    methods: {
      //面包页
      handleClick(tab, event) {
        console.log(tab, event);
      },
      //获取团组汇率
      GetCurrency(){
        var url = "/api/Financial/GetGroupRateDataSources"
        var that = this
        this.$axios({
            method: 'post',
            url: url,
            headers: {
                Authorization: 'Bearer ' + this.token
            },
            data: {
                portType: 1,
                pageIndex: 0,
                pageSize: 0,
            }
        }).then(function (res) {
            console.log(res)
                that.restaurants = res.data.data.groupData
                that.currencyArr = res.data.data.teamRateData
                for (let i = 0; i < that.currencyArr.length; i++) {
                    that.currencyArr[i]["rate"] = "0.0000";
                }
                console.log(that.currencyArr)
        })
      }
    },
    mounted() {
      this.GetCurrency();
    }
}
</script>
<style>
    .currency-all{
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 0 5px #0005;
        border-radius: 10px;
        height: 100%;
    }
    .currency-info{
        display: flex;
    }
    .currency-info-li{
        margin-right: 30px;
    }
    .currency-info-li label{
        color: #606266;
        font-size: 15px;
        font-weight: 600;
    }
    .currency-info-li span{
        color: #606266;
        font-size: 14px;
    }
    .name-ipt label{
        color: #606266;
        font-size: 15px;
        font-weight: 600;
    }
    .head-ipt{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    .currency-head{
        margin-bottom: 10px;
    }
    .ipt-inif{
        display: flex;
        flex-wrap: wrap;
    }
    .ipt-inif .el-input__inner{
        width: 150px;
    }
    .ipt{
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    .ipt label{
        width: 150px;
        text-align: end;
        font-size: 12px;
        font-weight: 600;
    }
    .ipt .el-input{
        width: 150px;
    }
</style>