<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>日期</th>            
          <th>餐厅名称</th>
          <th>计划金额</th>
          <th>类别</th>
          <th>用餐人数</th>
          <th>单价</th>
          <th>金额</th>
          <th>币种</th>
          <th>支付方式</th>
          <th>备注</th>
        </tr>
        <tr>
          <td v-show="dataList.length==0" colspan="16" align="center">暂无数据</td>
        </tr>
        <!-- <tbody v-for="(item,index) in dataList" :key="index">
        <tr>
          <td>{{item.UseTimeStr}}</td>
          <td>
              <p v-for="(i,index) in item.DiningSummaryList" :key="index">{{i.DiningName}}({{i.UseDinnerTypeStr}})</p>
          </td>
          <td>
              <p v-for="(i,index) in item.DiningSummaryList" :key="index">{{i.TotalPrice}}</p>
            </td>
          <td>
              <div v-for="(i,index) in item.DiningSummaryList" :key="index">
                <p><span class="widthSpan">成人</span>人数：<span class="numSpan">{{i.DiningPriceList[0].PeopleNum}}</span>单价：{{i.DiningPriceList[0].PeoplePrice}}</p>
                <p><span class="widthSpan">儿童</span>人数：<span class="numSpan">{{i.DiningPriceList[1].PeopleNum}}</span>单价：{{i.DiningPriceList[1].PeoplePrice}}</p>
                <p><span class="widthSpan">婴儿</span>人数：<span class="numSpan">{{i.DiningPriceList[2].PeopleNum}}</span>单价：{{i.DiningPriceList[2].PeoplePrice}}</p>
              </div>
              
          </td>
          <td>
              <p v-for="(i,index) in item.DiningSummaryList" :key="index">
                  {{diningTotalPrice(i,i.DiningPriceList)}}
              </p>
          </td>
          <td>
              {{urrencyTypeObj[item.DiningSummaryList[0].ReimburseList.CurrencyId]}}
            </td>          
          <td>
            <span v-if="item.DiningSummaryList[0].PayStyle === 1">现付</span>
            <span v-else-if="item.DiningSummaryList[0].PayStyle === 2">公司结算</span>
            <span v-else-if="item.DiningSummaryList[0].PayStyle === 3">预付</span>
            <span v-else-if="item.DiningSummaryList[0].PayStyle === 6">公司合团支付</span>
          </td>
          <td>{{item.Remarks}}</td>
        </tr>
        
        </tbody> -->
        <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">
                    <span v-if="subItem.PayStyle === 1">现付</span>
                    <span v-else-if="subItem.PayStyle === 2">公司结算</span>
                    <span v-else-if="subItem.PayStyle === 3">预付</span>
                    <span v-else-if="subItem.PayStyle === 6">公司合团支付</span>
                    <span v-else></span>
                    </br>
                    <span v-show="subItem.PayStyle==6">付款团号：{{subItem.PayTypeTCNUM}}</span>
                    </td>
                    <td v-if="childIndex==0" :rowspan="subItem.DiningPriceList.length">
                    {{urrencyTypeObj[subItem.ReimburseList.CurrencyId]}}
                    </td> 
                    <td v-if="childIndex==0" :rowspan="subItem.DiningPriceList.length">
                    {{subItem.ReimburseList.Remarks}}
                    </td> 
                </tr>
            </template>
        </template>
      </table>
    </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>
import payURL from "../commonPage/payURL.vue";
import moment from "moment";
export default {
  data() {
    return {
      msg: {
        TCIDs:''

      },
      dataList: [],
      loading: false,
      total: 0,
      currentPage: 1,
      showID: -1,
      companyList:[],
      employeeList:[],
      urrencyTypeObj:{},
    };
  },
  components: {},
  created() {
    let userInfo = this.getLocalStorage();
    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 '成人'
      if (str == 2)
        return '儿童'
      if (str == 3)
        return '小人'
    },
    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)
    },
    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[0]="不限";
                    this.urrencyTypeObj[item.ID]=item.Name;
                });
            }else{

            }
        },err=>{})
    },
    goUrl: function(name, path, id) {
      this.$router.push({
        name: path,
        query: { id: id, blank: "y", tab: name }
      });
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    resetPageIndex() {
      this.msg.pageIndex = 1;
      this.currentPage = 1;
    },
    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;
            }
            
            // console.log("this.dataList",this.dataList);
        } else {
            this.Error(res.data.message);
        }
        }, err => {})
      
    },
   
  },
  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;
  /* border-collapse: collapse; */
}

.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>