<style>
.page_VisaAccounting .leftDate {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  background-color: #e3e3e3;
  border-radius: 4px;
  float: left;
  width: 103px;
  height: 30px;
  text-align: center;
  margin:20px 0 20px 20px;
  line-height: 30px;
}
.page_VisaAccounting{font-size: 14px;}
.page_VisaAccounting .leftDate {
  float: left;
  margin:20px 0 20px 20px;
  line-height: 30px;
}
.page_VisaAccounting .listSpan span {
  display: inline-block;
  margin-right: 50px;
  font-size: 12px;
  color: #333333;
}
.page_VisaAccounting .backBtn{float:right;margin:20px 20px 0 0;}
.page_VisaAccounting .BusCode{float:left;width:auto;height:auto;background-color: #F5F5F5;font-size: 16px;padding: 2px 5px;
  border-radius:4px;text-align: center;line-height: 30px;font-weight: bold;color:#333333;margin:15px 0 0 20px;position: relative;}
  .page_VisaAccounting .AccountList{width:100%;height:60px;background-color: #fff;margin-bottom:10px;font-size:12px;margin-top:20px;min-width: 1125px;}
  
  .page_VisaAccounting .suplier{float:left;width:15%;text-align: center;line-height: 60px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;border-right: 1px dashed #D7D7D7;padding: 0 2%;}
  .page_VisaAccounting .suplier span{display: inline-block;height:26px;border-radius:50%;
  margin-right:5px;text-align: center;line-height: 26px;}
  .page_VisaAccounting .suplier i{color:#4CC0FC;}
  .page_VisaAccounting .JieSong{float: left;width:10%;min-width: 150px;border-right:1px dashed #D7D7D7;overflow: hidden;
    text-align: center;text-overflow: ellipsis;white-space: nowrap;line-height: 60px;}
    .page_VisaAccounting .TCList{width:25%;float:left;min-width:200px;line-height: 60px;border-right: 1px dashed #D7D7D7;white-space: nowrap;padding: 0 2%;}
    .page_VisaAccounting .TCList>span{display: inline-block;margin-right:10px;width: 50%;}
    .page_VisaAccounting .teamName{width:26px;height:26px;background-color: #FF793E;
    margin:0 10px;color:#fff;display:inline-block;border-radius: 50%;text-align: center;line-height: 26px;}
    .page_VisaAccounting .__priceList{float:left;width:100px;text-align: center;line-height: 60px;}
    .page_VisaAccounting .CreateDate{float:left;text-align: center;line-height: 60px;    border-left: 1px dashed #D7D7D7;padding: 0 1%;}
    .page_VisaAccounting .listSpan>span:first-child{margin-left:20px;}
    .page_VisaAccounting .CreateDate i{color:#CCCCCC;margin-right:5px;position: relative;top:1px;}
    .page_VisaAccounting .CostPrice{color: #E95252}
    .page_VisaAccounting .ExchangePrice{color:#4BCA81;}
    .page_VisaAccounting{overflow: auto;}
    .page_VisaAccounting::-webkit-scrollbar {width: 4px;height: 8px;}
    .page_VisaAccounting::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
      border-radius: 4px;
      background: #ededed;
    }
    .page_VisaAccounting::-webkit-scrollbar-thumb {
      border-radius: 4px;
      -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
      background: #c9c9c9;
    }
 .page_VisaAccounting ._tripDetails{padding: 0;box-shadow: 0px 1px 3px 0px #dedede;position: absolute;z-index: 10;top: 100%;width: 270px;left: 0px;}
.page_VisaAccounting ._tripDetails .popper__arrow::after{border-bottom-color: #EDEDED !important;}
.page_VisaAccounting ._tripDetails table{padding: 10px 0 0 20px;background-color: #EDEDED;border-collapse: collapse;border: 1px solid #D2D2D2;font-size: 12px;}
.page_VisaAccounting ._tripDetails table th{background-color: #EDEDED;padding: 5px;}
.page_VisaAccounting ._tripDetails table td{background-color: #FFFFFF;padding: 9px 15px;color: #333333;border: 1px solid #D2D2D2;line-height: 15px;}
.page_VisaAccounting ._tripDetails table ._color_666{color: #666666;}
.page_VisaAccounting ._tripDetails table tr._color_666 th{padding: 9px 15px;    line-height: 15px;}
.page_VisaAccounting .mainPopDiv{overflow:auto;max-height:200px;}
.page_VisaAccounting .mainPopDiv::-webkit-scrollbar{/*滚动条整体样式*/width: 4px;/*高宽分别对应横竖滚动条的尺寸*/height: 1px;}
.page_VisaAccounting .mainPopDiv::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 4px;-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;}
.page_VisaAccounting .mainPopDiv::-webkit-scrollbar-track{/*滚动条里面轨道*/-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;}
.page_VisaAccounting .page_VisaAccounting ._text_di{text-decoration:underline;cursor: pointer;}
.page_VisaAccounting .page_VisaAccounting .PingFangSC{font-weight: bold}
.page_VisaAccounting ._post{position: relative;overflow: initial}
.page_VisaAccounting ._cu{cursor: pointer;text-decoration: underline}
.page_VisaAccounting ._cu:hover{color: #E95252;}
.page_VisaAccounting .PingFangSC{font-weight: bold;font-size: 16px}
.page_VisaAccounting ._radius {display: inline-block;width: 24px;height: 24px;background-color: #FF793E;color: #fff;border-radius: 50%;text-align: center;line-height: 22px;font-size: 12px;}
.page_VisaAccounting ._radius._tuan{background-color: #3EABFF}

</style>
<template>
    <div class='flexOne page_VisaAccounting'>
            <div class="dataIn clearfix">
                <div class="leftDate">{{YearStr}}{{$t('pub.year')}}{{MonthStr}}{{$t('pub.month')}}</div>
                <input type="button" class="hollowFixedBtn backBtn" @click="goUrl('VisaAccounting')" :value="$t('pub.returnBack')"/>
            </div>
            <div class="listSpan">
                <span>{{$t('restaurant.res_income')}}：￥{{TotalPrice}}</span>
                <span>{{$t('restaurant.res_outcome')}}：￥{{CostPrice}}</span>
                <span>{{$t('restaurant.res_profit')}}：￥{{Profit}}</span>
            </div>
        <div class="tbDiv" v-loading='loading'>
          <div class="AccountList clearfix" v-for="(item,index) in DataList" :key="index">
              <div class="BusCode">
                  <span class="_radius" v-if="item.SignStatus==1">{{$t('visa.v_dan')}}</span>
                  <span class="_radius _tuan" v-if="item.SignStatus==2">{{$t('visa.v_tuan')}}</span>
                  {{item.CountryTypeName}}
              </div>
              <div class="suplier _post">
                  <span><i class="iconfont icon-tongxunlun"></i></span> <span class="_text_di _cu" @click="showID == item.Id?showID=-1:showID=item.Id">{{item.PeopleNameAndNum}}</span> 
                  <div class="_tripDetails" v-if="showID == item.Id">
                      <div class="mainPopDiv">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="popTable">
                            <tr class="_color_666">
                                <th>{{$t('system.query_name')}}</th>
                                <th>{{$t('system.table_sex')}}</th>
                                <th>{{$t('visaT.result')}}</th>
                            </tr>
                            <tr v-for="subItem in item.PeopleList">
                                <td>{{subItem.Name}}</td>
                                <td>{{subItem.Sex}}</td>
                                <td>
                                  <img src="../../assets/img/fail@2x.png" v-if="subItem.ApplyStatus==2" alt="">
                                  <img src="../../assets/img/pass@2x.png" v-if="subItem.ApplyStatus==1" alt="">
                                </td>
                            </tr>
                        </table>
                      </div>
                    </div>
              </div>
              <div class="TCList ">
                    <!-- <div class="_tripDetails" v-if="showID == item.OrderId">
                      <div class="mainPopDiv">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="popTable">
                            <tr class="_color_666">
                                <th>姓名</th>
                                <th>性别</th>
                                <th>结果</th>
                            </tr>
                            <tr v-for="subItem in item.PeopleList">
                                <td>{{subItem.Name}}</td>
                                <td>{{subItem.Sex}}</td>
                                <td>
                                  <img src="../../assets/img/fail@2x.png" v-if="subItem.ApplyStatus==2" alt="">
                                  <img src="../../assets/img/pass@2x.png" v-if="subItem.ApplyStatus==1" alt="">
                                </td>
                            </tr>
                        </table>
                      </div>
                    </div> -->
                    <span  ><span class="teamName" >{{$t('visa.v_tuan')}}</span><span ><span>{{item.OrderId}}</span></span></span>
                  <!-- <span><span class="teamName">订</span ><span>{{item.OrderId}}</span></span> -->
                  <span><span class="teamName">{{$t('visaT.sale')}}</span ><span>{{item.CreateBy}}</span></span>
              </div>
              <div class="__priceList">
                  <span class="ExchangePrice PingFangSC">{{item.TotalPrice}}</span>
              </div>
              <div class="__priceList">
                  <span class="CostPrice PingFangSC">-{{item.ExpendPrice}}</span>
              </div>
              <div class="__priceList">
                  <span class="ExchangePrice PingFangSC">{{item.SurplusPrice}}</span>
              </div>
              <div class="CreateDate">
                  <i class="iconfont icon-img_shijian"></i>{{item.CreateTime}}
              </div>
          </div>
        </div>
        <div class="noData" v-show="noData">
            {{$t('system.content_noData')}}
        </div>
          <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
		</el-pagination>
    </div>
</template>
<script>
export default {
  data() {
    return {
      msg: {
        pageIndex: 1,
        pageSize: 8,
        Year: "",
        Month: ""
      },
      month:new Date(),
      noData: false,
      loading: true,
      currentPage: 1,
      total: 0,
      DataList: "",
      YearStr: this.$route.query.YearStr,
      MonthStr: this.$route.query.MonthStr,
      TotalPrice: "",
      CostPrice: "",
      Profit: "",
      TCInfoList:'',
      showID:-1,
    };
  },
  methods: {
    getList() {
      this.loading = true;
      this.apipost("dmc_post_visa_GetStatisticsPageList",this.msg,res => {
          if (res.data.resultCode == 1) {
            this.loading = false;
            if (res.data.data.count > 0) {
              this.total = res.data.data.count;
              this.noData = false;
              res.data.data.pageData.forEach(x => {
                x.infoShow = false;
              });
              this.DataList = res.data.data.pageData;
            } else {
              this.DataList=[]
              this.noData = true;
            }
          } else {
            this.loading = false;
          }
        },err => {});
    },
    handleCurrentChange(val) {
      //翻页功能按钮
      this.msg.pageIndex = val;
      this.getList();
    },
    goUrl(path) {
      this.$router.push({ path: path });
    },
    showTip(index) {
      this.DataList.forEach(x => {
        x.infoShow = false;
      });
      this.DataList[index].infoShow = true;
    },
    closeTip() {
      this.DataList.forEach(x => {
        x.infoShow = false;
      });
    },

  },
  mounted() {
    this.msg.Year = this.$route.query.YearStr;
    this.msg.Month = this.$route.query.MonthStr;
    this.TotalPrice = this.$route.query.TotalPrice;
    this.CostPrice = this.$route.query.CostPrice;
    this.Profit = this.$route.query.Profit;
    this.getList()
  }
};
</script>