<template>
  <div class="flexOne" style="min-width: 1200px;">
    <!-- 表格 -->
    <div style="width: 100%; height: auto;min-height:500px;overflow-x: auto;margin-top:20px" class="ownScrollbarStyle">
      <table class="groupTourOrderSearchTable" border="0" cellspacing="0" cellpadding="0" v-loading='loading'>
        <tr class="title_tr">
          <th>{{$t('sm.Date')}}</th>
          <th>{{$t('restaurant.res_resName')}}</th>
          <th>{{$t('objFill.v101.LeaderManagement.jihuajine')}}</th>
          <th>{{$t('objFill.leibie')}}</th>
          <th>{{$t('objFill.yongchanrenshu')}}</th>
          <th>{{$t('fnc.danjia')}}</th>
          <th>{{$t('fnc.jine')}}</th>
          <th>{{$t('fnc.sfjine')}}</th>
          <th>{{$t('hotel.hotel_Currency')}}</th>
          <th>{{$t('objFill.zffs')}}</th>
          <th>{{$t('objFill.fj')}}</th>
          <th>{{$t('pub.pubRemark')}}</th>
        </tr>
        <tr>
          <td v-show="dataList.length==0" colspan="16" align="center">{{$t('system.content_noData')}}</td>
        </tr>
        <template v-for='(item,index) in dataList'>
          <template v-for="(subItem,subIndex) in item.DiningSummaryList">
            <tr v-for="(childItem,childIndex) in subItem.DiningPriceList">
              <td v-if="childIndex==0" :rowspan="subItem.DiningPriceList.length">{{item.UseTimeStr}}</td>
              <td v-if="childIndex==0" :rowspan="subItem.DiningPriceList.length">
                {{subItem.DiningName}}
              </td>
              <td v-if="childIndex==0" :rowspan="subItem.DiningPriceList.length">
                {{childItem.TotalPrice}}
              </td>
              <td v-if="childIndex==0" :rowspan="subItem.DiningPriceList.length">
                {{subItem.UseDinnerTypeStr}}
              </td>
              <td>
                {{peopleStrToWord(childItem.PeopleType)}}:{{childItem.PeopleNum}}
              </td>
              <td>
                <p>
                  {{subItem.PayStyle === 1 ? moneyFormat(childItem.PeoplePrice) : 0}}
                </p>
              </td>
              <td v-if="childIndex==0" :rowspan="subItem.DiningPriceList.length">
                {{diningTotalPrice(subItem, subItem.DiningPriceList)}}
              </td>
              <td v-if="childIndex==0" :rowspan="subItem.DiningPriceList.length">
                {{diningTotalPrice2(subItem, subItem.ReimburseList.ReimburseDetailsList)}}
              </td>
              <td v-if="childIndex==0" :rowspan="subItem.DiningPriceList.length">
                {{urrencyTypeObj[subItem.ReimburseList.CurrencyId]}}
              </td>
              <td v-if="childIndex==0" :rowspan="subItem.DiningPriceList.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.DiningPriceList.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.DiningPriceList.length">
                {{subItem.ReimburseList.Remarks}}
              </td>
            </tr>
          </template>
        </template>
      </table>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: {
          TCIDs: '',
          date: ""
        },
        dataList: [],
        loading: false,
        urrencyTypeObj: {},
      };
    },
    components: {},
    created() {
      this.msg.TCIDs = this.$route.query.TCIDs ? this.$route.query.TCIDs : "";
      this.msg.date = this.$route.query.date ? this.$route.query.date : "";
      this.financeinfo_post_GetList();
    },
    methods: {
      peopleStrToWord(str) {
        if (str == 1)
          return this.$t('salesModule.Adult')
        if (str == 2)
          return this.$t('sm.ertong')
        if (str == 3)
          return this.$t('objFill.xiaoren')
      },
      diningTotalPrice(sObj, obj) {
        let totalPrice = 0
        obj.forEach(x => {
          totalPrice += x.PeoplePrice * (x.PeopleNum - x.Discount) * (1 - x.DiscountPrice / 100)
        })
        if (sObj.PayStyle !== 1) {
          totalPrice = 0
        }
        return this.moneyFormat(totalPrice)
      },
      //计算实付金额
      diningTotalPrice2(sObj, obj) {
        let totalPrice = 0
        obj.forEach(x => {
          totalPrice += x.UnitPrice * x.UserNum
        })
        return this.moneyFormat(totalPrice)
      },
      financeinfo_post_GetList() { // 币种类型
        this.apipost('financeinfo_post_GetList', {
          Name: ''
        }, res => {
          if (res.data.resultCode == 1) {
            let data = res.data.data;
            data.map(item => {
              this.urrencyTypeObj[item.ID] = item.Name;
            });
          }
        })
      },
      getList() {
        this.loading = true;
        this.apipost('dmcstatistics_post_GetNewLeaderPayMoneyStatics', this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.dataList = [];
            let data = res.data.data.DiningList;
            if (this.msg.date != 'all') {
              data.forEach(item => {
                if (item.UseTimeStr == this.msg.date) {
                  this.dataList.push(item);
                }
              });
            } else {
              this.dataList = data;
            }
            this.dataList.forEach(x => {
              x.DiningSummaryList.forEach(y => {
                y.listUrl = [];
                if (y.ReimburseList && y.ReimburseList.VoucherPicList && y.ReimburseList.VoucherPicList
                  .length > 0) {
                  y.ReimburseList.VoucherPicList.forEach(z => {
                    y.listUrl.push(z.url)
                  })
                }
              })
            });
          } else {
            this.Error(res.data.message);
          }
        })
      },
    },
    mounted() {
      this.getList();
    }
  };

</script>
<style scoped>
  .numSpan {
    display: inline-block;
    width: 60px;
  }

  .widthSpan {
    display: inline-block;
    width: 45px;
  }

  .groupTourOrderSearchTable {
    width: 100%;
    min-width: 1500px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
  }

  .groupTourOrderSearchTable 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;
  }

  .groupTourOrderSearchTable tr {
    background: #fff;
    text-align: left;
  }

  .groupTourOrderSearchTable tr td {
    padding: 8px;
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
  }

  .groupTourOrderSearchTable tr td p {
    line-height: 20px;
  }

  .groupTourOrderSearchTable .dowloadSpan:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  .groupTourOrderSearchTable span.personNo {
    text-decoration: underline;
    cursor: pointer;
  }

  .groupTourOrderSearchTable span.personNo:hover {
    font-weight: bold;
    color: #e95252;
  }

</style>
