<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.jiudianm')}}</th>
        <th>{{$t('hotel.product_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-if="item.ReimburseList && item.ReimburseList.ReimburseDetailsList.length">
          <tr v-for="(childItem,childIndex) in item.ReimburseList.ReimburseDetailsList">
            <td v-if="childIndex==0" :rowspan="item.ReimburseList.ReimburseDetailsList.length">{{item.CheckInDateStr}}
            </td>
            <td v-if="childIndex==0" :rowspan="item.ReimburseList.ReimburseDetailsList.length">
              {{item.HotelName}}
            </td>
            <td>
              {{childItem.UserTypeStr}}
            </td>
            <td>{{childItem.UserNum}}</td>
            <td>
              <p>
                {{item.PayStyle === 1 ? moneyFormat(childItem.UnitPrice) : 0}}
              </p>
            </td>
            <td>
              {{moneyFormat(childItem.UnitPrice*childItem.UserNum)}}
            </td>
            <td v-if="childIndex==0" :rowspan="item.ReimburseList.ReimburseDetailsList.length">
              <span v-if="item.PayStyle === 1">{{$t('objFill.xianfu')}}</span>
              <span v-else-if="item.PayStyle === 2">{{$t('ground.gsjiesuan')}}</span>
              <span v-else-if="item.PayStyle === 3">{{$t('objFill.yufu')}}</span>
              <span v-else-if="item.PayStyle === 6">{{$t('objFill.gongsihtzf')}}</span>
              <span v-else></span>
              <br />
              <span v-show="item.PayStyle==6">{{$t('objFill.v101.hote.fukuanth')}}：{{item.PayTypeTCNUM}}</span>
            </td>
            <td v-if="childIndex==0" :rowspan="item.ReimburseList.ReimburseDetailsList.length">
              {{getCurrencyStr(item.ReimburseList.CurrencyId)}}
            </td>
            <td v-if="childIndex==0" :rowspan="item.ReimburseList.ReimburseDetailsList.length">
              <div v-if="item.ReimburseList.VoucherPicList.length">
                <div v-for="(vou, vouIndex) in item.ReimburseList.VoucherPicList" :key="vouIndex">
                  <el-image style="width: 20px;height: 20px;" :src="vou.url" :preview-src-list="item.listUrl">
                  </el-image>

                </div>
              </div>
              <div v-else>
                {{$t('fnc.no')}}
            </div>
            </td>
            <td v-if="childIndex==0" :rowspan="item.ReimburseList.ReimburseDetailsList.length">
              {{item.ReimburseList.Remarks}}
            </td>
          </tr>
        </template>
        <tr v-else>
          <td colspan="9">{{$t('system.content_noData')}}</td>
        </tr>
      </template>
    </table>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: true,
        dataList: [],
        currencyList: [],
      };
    },
    created() {
      this.apipost("financeinfo_post_GetList", {
        Name: ""
      }, res => {
        if (res.data.resultCode === 1) {
          let data = res.data.data;
          this.currencyList = data
        }
      }, null)
    },
    mounted() {
      let TCIDs = this.$route.query.TCIDs;
      let date = this.$route.query.date;
      this.getList(TCIDs, date);
    },
    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
          }
        }
      },
      openImg(src) {
        window.open(src, "_blank");
      },
      //获取数据
      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.HotelOrderListReport;
              let dataList = [];
              if (date !== 'all') {
                data.map(x => {
                  if (x.UseTimeStr == date) {
                    dataList.push(...x.HotelOrderList)
                  }
                })
              } else {
                data.map(x => {
                  dataList.push(...x.HotelOrderList)
                })
              }
              dataList.forEach(x => {
                x.listUrl = [];
                if (x.ReimburseList && x.ReimburseList.VoucherPicList && x.ReimburseList.VoucherPicList) {
                  x.ReimburseList.VoucherPicList.forEach(z => {
                    x.listUrl.push(z.url);
                  })
                }
              });
              this.dataList = dataList;
            } else {
              this.Error(res.data.message);
            }
          },
          null
        );
      },
    }
  };

</script>