<template>
    <div class="visaPayment">
        <div class="visaPayment_btn">
            <div class="visaPayment_btn_check" @click="getData()">{{$t('pub.searchBtn')}}</div>
            <div class="visaPayment_btn_excel" @click="exportExcel()">EXCEL {{$t('visa.v_daochu')}}</div>
        </div>
        <div class="visaPayment_condition">
            <el-form ref="msgform" :model="msg" label-width="80px">
                <el-form-item :label="$t('objFill.riqifanw')">
                    <el-date-picker
                        v-model="msg.dateSection"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        :range-separator="$t('OrderList.zhi')"
                        :start-placeholder="$t('OrderList.star')"
                        :end-placeholder="$t('OrderList.end')"
                        :clearable="false"
                        @change="dateChange">
                    </el-date-picker>
                </el-form-item>
            </el-form>
        </div>
        <div class="visaPayment_tableHeader">
            <div>{{$t('fnc.a_zongjine')}}：{{totalMoney}}</div>
        </div>
        <div class="visaPayment_tableBox">
            <table class="visaPayment_table" border="0" cellspacing="0" cellpadding="0" :loading="loading">
                <thead>
                    <tr>
                        <th width="20%">{{$t('fnc.tuanqi')}}</th>
                        <th width="20%">{{$t('objFill.v101.Rest.daidiandan')}}</th>
                        <th width="20%">{{$t('fnc.fyshuoming')}}</th>
                        <th width="20%">{{$t('fnc.jine')}}</th>
                        <th width="20%">{{$t('leader.leader_Leader')}}</th>
                    </tr>
                </thead>
                <tbody v-show="tableList.length>0">
                    <tr v-for="(item,index) in tableList" :key="index">
                        <!-- 团期 -->
                        <td><span class="visaPayment_url" @click="goUrlR(item)">{{item.TCNUM}}</span></td>
                        <!-- 代垫单 -->
                        <td v-if="item.FinanceType===1" :rowspan="finance[item.FinanceId]">
                            <span class="visaPayment_tickets">
                                <span class="visaPayment_tickets_red" @click="goUrlT('财务单据','FinancialDocumentsDetail',item.FinanceId,'')">P{{item.FinanceId}}</span>
                            </span>
                        </td>
                        <td v-if="item.FinanceType===0"></td>
                        <!-- 费用说明 -->
                        <td v-if="item.FinanceType===1" :rowspan="finance[item.FinanceId]">{{item.CostName}}</td>
                        <td v-if="item.FinanceType===0">{{item.CostName}}</td>
                        <!-- 金额 -->
                        <td v-if="item.FinanceType===1" :rowspan="finance[item.FinanceId]">{{item.Money}}</td>
                        <td v-if="item.FinanceType===0"></td>
                        <!-- 领队 -->
                        <td>{{item.VisaType===1?$t('visa.v_gvisa'):item.LeaderName}}</td>
                    </tr>
                </tbody>
                <tbody v-show="tableList.length===0" class="visaPayment_table_noInfo">
                    <tr>
                        <td colspan="10" class="">{{$t('system.content_noData')}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            msg: {
                dateSection: [],
                StartTime: '',
                EndTime: ''
            },
            totalMoney: 0,
            tableList:[],
            finance: {}
        };
    },
    methods: {
        dateChange: function (date) {
            this.msg.StartTime = date[0]
            this.msg.EndTime = date[1]
        },
        exportExcel: function () {
            let nowDate = new Date().Format('yyyy-MM-dd')
            this.GetLocalFile('Visa_get_GetVisaMonthTJForExcel',{
                StartTime: this.msg.StartTime,
                EndTime: this.msg.EndTime,
                EmpId:this.getLocalStorage().EmployeeId
            },nowDate+this.$t('objFill.v101.Rest.qizhengbzdan'))
        },
        getData: function () {
            this.loading = true
            this.apipost("dmc_get_visa_GetVisaMonthTJForList", this.msg, res => {
                if (res.data.resultCode == 1) {
                    this.finance = {}
                    this.totalMoney = res.data.data.TotalMoney
                    let dataList = res.data.data.list
                    for (let i = 0; i < dataList.length; i++) {
                        if (dataList[i].FinanceId === 0) {
                            dataList[i]['FinanceType'] = 0
                        } else {
                            if (this.finance[dataList[i].FinanceId]) {
                                dataList[i]['FinanceType'] = 2
                                this.finance[dataList[i].FinanceId]++
                            } else {
                                dataList[i]['FinanceType'] = 1
                                this.finance[dataList[i].FinanceId] = 1
                            }
                        }
                    }
                    this.tableList = dataList
                } else {
                    this.$message.error(res.data.message)
                }
                this.loading = false
            });
        },
        goUrlR(item) {
            if (item.VisaType === 1) {
                this.$router.push({ name: 'VisaProductOrder', query: { id: item.Pid, blank:'y', tab: '签证详情'} });
            } else if (item.VisaType === 2) {
                this.$router.push({ name: 'groupInquiry', query: { tcnum: item.TCNUM, startDate: '', blank:'y', tab: '团期查询'} });
            }
        },
        goUrlT(name, path, id, tcmun) {
            this.$router.push({ name: path, query: { id: id, tcmun: tcmun, blank: 'y', tab: name} });
        }
    },
    created: function () {
        let nowDate = new Date().Format('yyyy-MM-dd')
        this.msg.dateSection = [nowDate, nowDate]
        this.msg.StartTime = nowDate
        this.msg.EndTime = nowDate
    },
    mounted: function (){
        this.getData()
    }
};
</script>

<style>
.visaPayment {
  width: 100%;
}
.visaPayment_btn {
    position: fixed;
    top: 36px;
    right: 20px;
    text-align: right;
    margin: 20px 0 0 0;
}
.visaPayment_btn .visaPayment_btn_check {
    display: inline-block;
    vertical-align: top;
    background: #ffffff;
    color: #E95252;
    padding: 0 15px;
    height: 30px;
    line-height: 28px;
    font-size: 13px;
    border: 1px solid #E95252;
    border-radius: 15px;
    cursor: pointer;
}
.visaPayment_btn .visaPayment_btn_excel{
    display: inline-block;
    vertical-align: top;
    background: #E95252;
    color: #ffffff;
    margin: 0 0 0 10px;
    padding: 0 15px;
    height: 30px;
    line-height: 28px;
    font-size: 13px;
    border: 1px solid #E95252;
    border-radius: 15px;
    cursor: pointer;
}
.visaPayment_condition{
    padding: 20px 0 0 0;
}
.visaPayment_condition .el-date-editor .el-range-separator {
    width: 10%;
}
.visaPayment_tableHeader{
    position: relative;
    padding: 0 20px;
    height: 41px;
    border-top: 1px solid #E5E5E5;
}
.visaPayment_tableHeader::before{
    content: '';
    position: absolute;
    left: 0px;
    top: 13px;
    width: 2px;
    height: 14px;
    background-color: #E95252;
}
.visaPayment_tableHeader>div{
    position: relative;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
}
.visaPayment_tableBox {
  padding: 0 0 0 0;
  width: 100%;
}
.visaPayment_table {
  width: 100%;
  color: #333;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
}
.visaPayment_table tr {
  border-bottom: 2px solid #333;
  background: #fff;
}
.visaPayment_table tr th {
  background: #e6e6e6;
  height: 30px;
  font-size: 12px;
  text-align: left;
  text-indent: 15px;
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
}
.visaPayment_table tr td {
  padding: 10px;
  height: 37px;
  font-size: 12px;
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
}
.visaPayment_table_noInfo tr td {
  height: 30px;
  text-align: center;
  font-size: 12px;
  color: #999999;
}
.visaPayment_url{
  text-decoration: underline;
  cursor: pointer;
}

.visaPayment_tickets{
    margin: 5px 5px 0 0;
    cursor: pointer;
}
.visaPayment_tickets_red{
	color: #FF0000;
	text-decoration: underline;
}
.visaPayment_tickets_blue{
	color: #0000FF;
	text-decoration: underline;
}
.visaPayment_tickets_green{
	color: #008000;
	text-decoration: underline;
}
</style>