<template>
  <div class="mb30 leaderReimbursementTable_box" v-loading='loading'>
    <div v-if="isShow">
      <table class="leaderReimbursementTable" border="0" cellspacing="1" cellpadding="0">
        <tbody>
          <tr class="title">
            <td width="80" class="bgwhite" :rowspan="list.BusList.length+1">车辆使用</td>
            <td width="100">使用时间</td>
            <td width="150">车配号</td>
            <td width="150">车辆号</td>
            <td width="150">总金额</td>
            <td width="200">备注</td>
            <td width="200">凭证</td>
          </tr>
          <tr v-for='(item,index) in list.BusList'>
            <td>{{item.PlanDateStr}}</td>
            <td>{{item.BusCode}}</td>
            <td>{{item.BusNum}}</td>
            <td>
              {{busTotalPrice(item.ReimburseList.ReimburseDetailsList)}}
            </td>
            <td class="jdtd" valign="middle">
              {{item.Remarks}}
            </td>
            <td>
              <div class="uploadListDiv ownScrollbarStyle">
                <p v-for="(img,index) in item.VoucherPicList" @click="analyzeItem(item.VoucherPicList,index)">
                  {{img.FileName}}
                </p>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <table class="leaderReimbursementTable" border="0" cellspacing="1" cellpadding="0">
        <tr class="title">
          <td width="80" class="bgwhite" rowspan="50">酒店使用</td>
          <td width="100">使用时间</td>
          <td width="300">酒店名称</td>
          <td width="150">总金额</td>
          <td width="200">备注</td>
          <td width="200">凭证</td>
        </tr>
        <template v-for="(outItem,outIndex) in list.HotelOrderListReport">
          <tr class="HotelTr" v-for='(item,index) in outItem.HotelOrderList'>
            <td>{{item.CheckInDateStr}}</td>
            <td>
              <div class="itemName">{{item.HotelName}}</div>
            </td>
            <td>
              {{hotelTotalPrice(item.ReimburseList.ReimburseDetailsList)}}
            </td>
            <td class="jdtd" valign="middle">
              {{item.ReimburseList.Remarks}}
            </td>
            <td>
              <div class="uploadListDiv ownScrollbarStyle" style="overflow-y: auto;">
                <p v-for="(img,index) in item.ReimburseList.VoucherPicList" @click="analyzeItem(item.VoucherPicList,index)">
                  {{img.FileName}}
                </p>
              </div>
            </td>
          </tr>
        </template>
      </table>

      <table class="leaderReimbursementTable" border="0" cellspacing="1" cellpadding="0">
        <tbody>
          <tr class="title">
            <td width="80" class="bgwhite" :rowspan="list.DiningList.length+1">餐食使用</td>
            <td width="100">使用时间</td>
            <td width="300">餐厅名称</td>
            <td width="150">总金额</td>
            <td width="200">备注</td>
            <td width="200">凭证</td>
          </tr>
          <template v-for='(item,index) in list.DiningList'>
            <tr class="splitP ScenicTr" v-for='(titem,tindex) in item.DiningSummaryList'>
              <td>{{titem.UseTimeStr}}</td>
              <td>
                <div class="itemName" v-for="subItem in item.DiningSummaryList">
                  {{subItem.DiningName}}
                </div>
              </td>
              <td>
                <div v-for="subItem in item.DiningSummaryList">
                  {{diningTotalPrice(subItem.ReimburseList.ReimburseDetailsList)}}
                </div>
              </td>
              <td class="jdtd" valign="middle">
                {{titem.Remarks}}
              </td>
              <td>
                <div class="uploadListDiv ownScrollbarStyle" style="overflow-y: auto;">
                  <p v-for="(img,index) in titem.ReimburseList.VoucherPicList" @click="analyzeItem(titem.VoucherPicList,index)">
                    {{img.FileName}}
                  </p>
                </div>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
      <table class="leaderReimbursementTable" border="0" cellspacing="1" cellpadding="0">
        <tbody>
          <tr class="title">
            <td width="80" class="bgwhite" :rowspan="list.ScenicList.length+1">门票使用</td>
            <td width="100">使用时间</td>
            <td width="300">景点名称</td>
            <td width="150">总金额</td>
            <td width="200">备注</td>
            <td width="200">凭证</td>
          </tr>
          <template v-for='(item,index) in list.ScenicList'>
            <tr class="splitP ScenicTr">
              <td>{{item.UseTimeStr}}</td>
              <td>
                <div class="itemName" v-for="subItem in item.ScenicStatisticsList">
                  {{subItem.ScenicName}}
                </div>
              </td>
              <td>
                <div v-for="subItem in item.ScenicStatisticsList">
                  {{diningTotalPrice(subItem.ReimburseList.ReimburseDetailsList)}}
                </div>
              </td>
              <td>
                <template v-for='(sitem,sindex) in item.ScenicStatisticsList'>
                  {{sitem.Remarks}}
                </template>
              </td>
              <td>
                <div class="uploadListDiv ownScrollbarStyle" style="overflow-y: auto;">
                  <template v-for='(sitem,sindex) in item.ScenicStatisticsList'>
                    <p v-for="(img,index) in sitem.ReimburseList.VoucherPicList" @click="analyzeItem(sitem.VoucherPicList,index)">
                      {{img.FileName}}
                    </p>
                  </template>
                </div>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
      <table class="leaderReimbursementTable" border="0" cellspacing="1" cellpadding="0">
        <tbody>
          <tr class="title">
            <td width="80" class="bgwhite" :rowspan="list.OtherOrderInfo.OtherList.length+1">其他费用</td>
            <td width="100">使用时间</td>
            <td width="300">费用项目</td>
            <td width="100">总人数</td>
            <td width="150">单价</td>
            <td width="150">金额小计</td>
            <td width="80">返佣</td>
            <td width="300">总金额</td>
            <td>备注</td>
          </tr>
          <tr v-for='(item,index) in list.OtherOrderInfo.OtherList'>
            <td>
                {{item.UseDateStr}}
            </td>
            <td>
              {{getCostProjectStr(item.CostProject)}}
            </td>
            <td>
              {{item.TotalNum}}
            </td>
            <td>
              {{item.UnitPrice}}
            </td>
            <td>
              {{item.TotalNum*item.UnitPrice}}
            </td>
            <td>
              {{item.Rebate}}%
            </td>
            <td v-if='index==0' :rowspan='list.OtherOrderInfo.OtherList.length'>
              {{otherTotalPrice(list.OtherOrderInfo.OtherList)}}
            </td>
            <td class="jdtd">
              {{item.Remark}}
            </td>
          </tr>
        </tbody>
      </table>
      <table class="leaderReimbursementTable" border="0" cellspacing="1" cellpadding="0">
        <tbody>
          <tr class="title">
            <td width="80" class="bgwhite" rowspan="2">小费收入</td>
            <td width="100">人数</td>
            <td width="300">单价</td>
            <td width="100">总金额</td>
            <td>备注</td>
          </tr>
          <tr v-for='(item,index) in list.OtherOrderInfo.TipList'>
            <td>
              {{item.TotalNum}}
            </td>
            <td>
              {{item.UnitPrice}}
            </td>
            <td>{{item.TotalNum*item.UnitPrice}}</td>
            <td class="jdtd">
              {{item.Remark}}
            </td>
          </tr>
        </tbody>
      </table>
      <table class="leaderReimbursementTable" border="0" cellspacing="1" cellpadding="0">
        <tbody>
          <tr class="title">
            <td width="80" class="bgwhite" rowspan="2">团费小计</td>
            <td width="100">金额</td>
            <td>备注</td>
          </tr>
          <tr v-for='(item,index) in list.OtherOrderInfo.TeamList'>
            <td>
              {{item.UnitPrice}}
            </td>
            <td class="jdtd">
              {{item.Remark}}
            </td>
          </tr>
        </tbody>
      </table>
      <table class="leaderReimbursementTable" border="0" cellspacing="1" cellpadding="0">
        <tbody>
          <tr class="title">
            <td width="80" class="bgwhite" :rowspan="list.OtherOrderInfo.SelfPlayingIncomeList.length+1">自费收入</td>
            <td width="100">使用时间</td>
            <td width="300">人数</td>
            <td width="100">单价</td>
            <td width="150">金额小计</td>
            <td width="150">总金额</td>
            <td>备注</td>
          </tr>
          <tr v-for='(item,index) in list.OtherOrderInfo.SelfPlayingIncomeList'>
            <td>
              {{item.UseDate}}
            </td>
            <td>
              {{item.TotalNum}}
            </td>
            <td>
              {{item.UnitPrice}}
            </td>
            <td>{{item.TotalNum*item.UnitPrice}}</td>
            <td v-if='index==0' :rowspan="list.OtherOrderInfo.SelfPlayingIncomeList.length">
              {{otherTotalPrice(list.OtherOrderInfo.SelfPlayingIncomeList)}}
            </td>
            <td class="jdtd">
              {{item.Remark}}
            </td>
          </tr>
        </tbody>
      </table>
      <table class="leaderReimbursementTable" border="0" cellspacing="1" cellpadding="0">
        <tbody>
          <tr class="title">
            <td width="80" class="bgwhite" :rowspan="list.OtherOrderInfo.SelfPlayingExpendList.length+1">自费支出</td>
            <td width="100">使用时间</td>
            <td width="300">人数</td>
            <td width="100">单价</td>
            <td width="150">金额小计</td>
            <td width="150">返佣</td>
            <td width="80">总金额</td>
            <td>备注</td>
          </tr>
          <tr v-for='(item,index) in list.OtherOrderInfo.SelfPlayingExpendList'>
            <td>
              {{item.UseDate}}
            </td>
            <td>
              {{item.TotalNum}}
            </td>
            <td>
              {{item.UnitPrice}}
            </td>
            <td>{{item.TotalNum*item.UnitPrice}}</td>
            <td>
              {{item.Rebate}}%
            </td>
            <td v-if='index==0' :rowspan="list.OtherOrderInfo.SelfPlayingExpendList.length">
              {{otherTotalPrice(list.OtherOrderInfo.SelfPlayingExpendList)}}
            </td>
            <td class="jdtd">
              {{item.Remark}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isUpdate: false,
        loading: false,
        defaultSelectValue: 0,
        initialIndex: 0,

        picObj: [],
        TemporaryItem: {},
        msg: {
          TCIDs: '',
          NewCombinationNum: '',
          IsSelectAll: 1,
        },
        list: [],
        nav: [],
        TravelDayNum: 0,
        RealityNum: 0,
        isShow: false
      }
    },
    methods: {
      //获取自费项目类型字符串
      getCostProjectStr(type)
      {
          var str="";
          switch(type)
          {
            case "1" :str="导游津贴";break;
            case "2" :str="司机津贴";break;
            case "3" :str="其他支出";break;
          }
          return str;
      },
      addOtherList() {
        this.list.OtherOrderInfo.OtherList.push({
          OrderType: '1',
          ID: 0,
          UseDate: '',
          CostProject: 0,
          TotalNum: '0',
          UnitPrice: '0',
          Rebate: '0',
          TotalPrice: '0',
          Remark: '',
          TCIDs: this.list.OtherOrderInfo.OtherList[0].TCIDs,
          VoucherPicList: []
        })
      },
      deleteOtherListItem(index) {
        this.list.OtherOrderInfo.OtherList.splice(index, 1)
      },
      addSelfPlayingIncomeList() {
        this.list.OtherOrderInfo.SelfPlayingIncomeList.push({
          OrderType: '4',
          ID: 0,
          UseDate: '',
          CostProject: 0,
          TotalNum: '0',
          UnitPrice: '0',
          Rebate: '0',
          TotalPrice: '0',
          Remark: '',
          TCIDs: this.list.OtherOrderInfo.SelfPlayingIncomeList[0].TCIDs,
          VoucherPicList: []
        })
      },
      deleteSelfPlayingIncomeListItem(index) {
        this.list.OtherOrderInfo.SelfPlayingIncomeList.splice(index, 1)
      },
      addSelfPlayingExpendList() {
        this.list.OtherOrderInfo.SelfPlayingExpendList.push({
          OrderType: '5',
          ID: 0,
          UseDate: '',
          CostProject: '',
          TotalNum: '0',
          UnitPrice: '0',
          Rebate: '0',
          TotalPrice: '0',
          Remark: '',
          TCIDs: this.list.OtherOrderInfo.SelfPlayingExpendList[0].TCIDs,
          VoucherPicList: []
        })
      },
      deleteSelfPlayingExpendList(index) {
        this.list.OtherOrderInfo.SelfPlayingExpendList.splice(index, 1)
      },
      busTotalPrice(obj) {
        let totalPrice = 0
        obj.forEach(x => {
          totalPrice += x.UserNum * x.UnitPrice
        })
        return totalPrice
      },
      hotelTotalPrice(obj) {
        let totalPrice = 0
        obj.forEach(x => {
          totalPrice += x.UserNum * x.UnitPrice
        })
        return totalPrice
      },
      diningTotalPrice(obj) {
        let totalPrice = 0
        obj.forEach(x => {
          totalPrice += x.UserNum * x.UnitPrice
        })
        return totalPrice
      },
      scenicTotalPrice(obj) {
        let totalPrice = 0
        obj.forEach(x => {
          totalPrice += x.PeoplePrice * (x.UsePeopleNum - x.Discount) * (1 - x.DiscountPrice / 100)
        })
        return totalPrice
      },
      otherTotalPrice(obj) {
        let totalPrice = 0
        obj.forEach(item => {
          totalPrice += item.TotalNum * item.UnitPrice * (1 - item.Rebate / 100)
        })
        return totalPrice
      },
      saveitem(obj) {
        this.TemporaryItem = obj
      },
      analyzeItem(obj, index) { //预览
        this.picObj = []
        obj.forEach(item => {
          this.picObj.push(item.url)
        })
        this.initialIndex = index

      },
      peopleStrToWord(str) {
        if (str == '1')
          return '成人'
        if (str == '2')
          return '儿童'
        if (str == '3')
          return '婴儿'
      },
      UseDinnerTypeToWord(str) {
        if (str == 1)
          return '早餐'
        if (str == 2)
          return '午餐'
        if (str == 3)
          return '晚餐'
      },
      getNav() {
        this.apipost('dmcstatistics_post_GetHotelStaticsByTCIDs', {
          TCIDs: this.$route.query.id
        }, res => {
          if (res.data.resultCode == 1) {
            this.nav = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      getList() {
        this.loading = true
        this.apipost('dmcstatistics_post_GetNewLeaderPayMoneyStatics', this.msg, res => {
          if (res.data.resultCode == 1) {
            this.loading = false;
            this.isShow = true;
            this.list = res.data.data
            this.list.OtherOrderInfo.OtherList.forEach(item => {
              item.CostProject = item.CostProject.toString()
            })
          } else {
            this.loading = false
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
    },
    mounted() {
      this.isUpdate = this.$route.query.isUpdate;
      this.msg.TCIDs = this.$route.query.id;
      this.getNav();
      this.getList();
    }
  }
</script>

<style>
@media print{
  .alcenter{display:none}
}
.leaderReimbursementTable_box{
  width: 100%;
  height: 100%;
  background-color: white;
}
  .leaderReimbursementTableNav {
    background: #d6cece;
    width: 800px;
    margin: 20px 0;
  }

  .leaderReimbursementTableNav tr th {
    background: #E6E6E6;
    height: 40px;
    font-size: 12px;
    color: #333;
  }

  .leaderReimbursementTableNav tr {
    background: #fff;
    text-align: center;
    height: 40px;
    font-size: 12px;
  }

  .leaderReimbursementTableNav tr td {
    background: #fff;
    text-align: center;
    height: 40px;
    font-size: 12px;
    padding: 0 10px;
  }

  .leaderReimbursementTable {
    background: #d6cece;
    width: 1070px;
    margin: 20px 0;
  }

  .leaderReimbursementTable tbody {
    margin: 10px 0;
  }

  .leaderReimbursementTable tr th {
    background: #E6E6E6;
    height: 40px;
    font-size: 12px;
    color: #333;
  }

  .leaderReimbursementTable tr {
    background: #fff;
    text-align: center;
    height: 40px;
  }

  .leaderReimbursementTable tr.title td {
    background: #E6E6E6;
  }

  .leaderReimbursementTable tr td div {
    word-break: normal;
  }

  .leaderReimbursementTable tr td.bgwhite {
    background: #fff !important;
    font-weight: bold;
  }

  .leaderReimbursementTable tr td {
    font-size: 12px;
  }

  .leaderReimbursementTable tr td .pDateStyle {
    border-bottom: 1px solid #E6E6E6;
    min-height: 24px;
    line-height: 24px;
    margin-top: 0;
    box-sizing: content-box;
    padding: 0 10px;
  }

  .leaderReimbursementTable tr td .pDateStyle:last-child {
    border-bottom: none;
  }

  .leaderReimbursementTable tr td .pDateStyle>span:after {
    content: '/';
  }

  .leaderReimbursementTable tr td .pDateStyle>span:last-child:after {
    content: ''
  }

  .leaderReimbursementTable tr td .link p:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  .leaderReimbursementTable tr td .phoverStype:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  .leaderReimbursementTable tr td input[type='text'] {
    height: 20px !important;
    padding: 0;
    text-align: center;
  }

  .leaderReimbursementTable tr td .sel input {
    height: 34px !important;
  }

  .leaderReimbursementTable .splitP td>p {
    height: 20px;
    line-height: 20px;
    border-bottom: 1px solid #ccc;
  }

  .leaderReimbursementTable .splitP td>p:last-child {
    border-bottom: none;
  }

  .leaderReimbursementTable .ScenicTr td>div {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #ccc;
  }

  .leaderReimbursementTable .ScenicTr td>div:last-child {
    border-bottom: none;
  }

  .leaderReimbursementTable .ScenicTr td>div p {
    line-height: 20px;
    border-bottom: 1px solid #ccc;
  }

  .leaderReimbursementTable .ScenicTr td>div p:last-child {
    border-bottom: none;
  }

  .leaderReimbursementTable .HotelTr td>div {
    border-bottom: 1px solid #ccc;
  }

  .leaderReimbursementTable .HotelTr td>div:last-child {
    border-bottom: none;
  }

  .leaderReimbursementTable .HotelTr td>div p {
    line-height: 19px;
    border-bottom: 1px solid #ccc;
  }

  .leaderReimbursementTable .HotelTr td>div p:last-child {
    border-bottom: none;
  }

  .leaderReimbursementTable tr td .el-upload-list {
    display: none;
  }

  .leaderReimbursementTable .uploadListDiv {
    height: 100% !important;
    overflow-y: auto;
    width: 100%;
  }

  .leaderReimbursementTable .uploadListDiv>p {
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    width: 100% !important;
  }

  .leaderReimbursementTable .uploadListDiv>p:last-child {
    border-bottom: none;
  }

  .leaderReimbursementTable .uploadListDiv>p i {
    color: #999;
    vertical-align: sub;
    margin: 3px;
  }

  .leaderReimbursementTable .jdtd {
    padding: 0 10px;
    text-align: left;
  }

  .leaderReimbursementTable .leaderPayTable .el-input__prefix {
    display: none;
  }
  .leaderReimbursementTable .itemName{
    text-align:left; padding:0 10px;
  }
</style>