<style>
</style>

<template>
  <div class="flexOne leaderPayHotelDetail">

    <div class="clearfix"></div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>{{$t('sm.Date')}}</th>
        <th>{{$t('objFill.v101.LeaderManagement.jindianm')}}</th>
        <th>{{$t('scen.sc_type_name')}}</th>
        <th>{{$t('restaurant.res_Number')}}</th>
        <th>{{$t('objFill.v101.LeaderManagement.danjiaren')}}</th>
        <th>{{$t('objFill.jingexj')}}</th>
        <th>{{$t('objFill.zffs')}}</th>
        <th>{{$t('hotel.hotel_Currency')}}</th>
        <th>{{$t('objFill.fj')}}</th>
        <th>{{$t('pub.pubRemark')}}</th>
      </tr>
      <template v-for='(item,index) in dataList'>
        <template v-for="(subItem,subIndex) in item.ScenicStatisticsList">
          <tr v-for="(childItem,childIndex) in subItem.ReimburseList.ReimburseDetailsList">
            <td v-if="childIndex==0" :rowspan="subItem.ReimburseList.ReimburseDetailsList.length">{{item.UseTimeStr}}
            </td>
            <td v-if="childIndex==0" :rowspan="subItem.ReimburseList.ReimburseDetailsList.length">
              {{subItem.ScenicName}}
            </td>
            <td>
              {{childItem.UserTypeStr}}
            </td>
            <td>{{childItem.UserNum}}</td>
            <td>
              {{subItem.PayStyle === 1 ? moneyFormat(childItem.UnitPrice) : 0}}
            </td>
            <td>
              {{moneyFormat(childItem.UnitPrice*childItem.UserNum)}}
            </td>
            <td v-if="childIndex==0" :rowspan="subItem.ReimburseList.ReimburseDetailsList.length">
              <span v-if="subItem.PayStyle === 1">{{$t('objFill.xianfu')}}</span>
              <span v-else-if="subItem.PayStyle === 2">{{$t('ground.gsjiesuan')}}</span>
              <span v-else-if="subItem.PayStyle === 3">{{$t('objFill.yufu')}}</span>
              <span v-else-if="subItem.PayStyle === 6">{{$t('objFill.gongsihtzf')}}</span>
              <span v-else></span>
              <br />
              <span v-show="subItem.PayStyle==6">{{$t('objFill.v101.hote.fukuanth')}}：{{subItem.PayTypeTCNUM}}</span>
            </td>
            <td v-if="childIndex==0" :rowspan="subItem.ReimburseList.ReimburseDetailsList.length">
              {{getCurrencyStr(subItem.ReimburseList.CurrencyId)}}
            </td>
            <td v-if="childIndex==0" :rowspan="subItem.ReimburseList.ReimburseDetailsList.length">
              <div v-if="subItem.ReimburseList.VoucherPicList.length">
                <div v-for="(vou, vouIndex) in subItem.ReimburseList.VoucherPicList" :key="vouIndex">
                  <el-image style="width: 20px;height: 20px;" :src="vou.url" :preview-src-list="subItem.listUrl">
                  </el-image>
                </div>
              </div>
              <div v-else>
                {{$t('fnc.no')}}
            </div>
            </td>
            <td v-if="childIndex==0" :rowspan="subItem.ReimburseList.ReimburseDetailsList.length">
              {{subItem.ReimburseList.Remarks}}
            </td>
          </tr>
        </template>
      </template>
    </table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: true,
        dataList: [],
        currencyList: [],
      };
    },
    mounted() {
      let TCIDs = this.$route.query.TCIDs;
      let date = this.$route.query.date;
      this.getList(TCIDs, date);
    },
    created() {
      this.apipost("financeinfo_post_GetList", {
        Name: ""
      }, res => {
        if (res.data.resultCode === 1) {
          let data = res.data.data;
          this.currencyList = data
        }
      }, null)
    },
    filters: {},

    methods: {
      getCurrencyStr: function (id) {
        for (let i = 0; i < this.currencyList.length; i++) {
          if (this.currencyList[i].ID == id) {
            return this.currencyList[i].Name
          }
        }
      },
      //获取数据
      getList(TCIDs, date) {
        this.loading = true;
        this.apipost(
          "dmcstatistics_post_GetNewLeaderPayMoneyStatics", {
            TCIDs: TCIDs
          },
          res => {
            this.loading = false;
            if (res.data.resultCode === 1) {
              let data = res.data.data.ScenicList;
              let dataList = [];
              if (date !== 'all') {
                data.map(x => {
                  if (x.UseTimeStr == date) {
                    dataList.push(x)
                  }
                })
              } else {
                dataList = data
              }
              dataList.forEach(x => {
                x.ScenicStatisticsList.forEach(y => {
                  y.listUrl = []
                  y.ReimburseList.VoucherPicList && y.ReimburseList.VoucherPicList.forEach(z => {
                    y.listUrl.push(z.url)
                  })
                })
              });
              this.dataList = dataList;
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
    }
  };

</script>