<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>
          <th>支付方式</th>
          <th style="width:150px;">附件</th>
          <th>{{$t('pub.pubRemark')}}</th>
        </tr>
        <tr>
          <td v-show="dataList.length==0" colspan="16" align="center">{{$t('system.content_noData')}}</td>
        </tr>
        <tbody v-for="(item,index) in dataList" :key="index">
          <tr>
            <td>{{item.PlanDateStr}}</td>
            <td>
              <p class="fz12">姓名:{{item.DriverName}}</p>
              <p class="fz12">电话号码:{{item.DriverTel}}</p>
            </td>
            <td>{{item.TotalPrice}}</td>
            <td class="fz12">{{item.BusCode}}</td>
            <td>{{item.BusNum}}</td>
            <td class="fz12">{{item.AirportPickUpStr}}</td>
            <td class="fz12">
              <p v-for="(s,index) in item.ReimburseList.ReimburseDetailsList" :key="index+500">
                {{s.StartPlace}}
              </p>
            </td>
            <td class="fz12">
              <p v-for="(s,index) in item.ReimburseList.ReimburseDetailsList" :key="index+700">
                {{s.EndPlace}}
              </p>
            </td>
            <td class="fz12">
              <p v-for="(s,index) in item.ReimburseList.ReimburseDetailsList" :key="index+800">
                {{s.UnitPrice*s.UserNum}}
              </p>
            </td>
            <td>{{urrencyTypeObj[item.ReimburseList.CurrencyId]}}</td>
            <td>
              <p v-if="item.ReimburseList.SettlementType==1">现金支付</p>
              <p v-if="item.ReimburseList.SettlementType==2">公司结算</p>
            </td>
            <td>
              <template 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>
              </template>
              <div v-else>
                无
              </div>
            </td>
            <td>{{item.ReimburseList.Remarks}}</td>
          </tr>

        </tbody>
      </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: {
      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.BusList;
            if (this.msg.date != 'all') {
              data.forEach(item => {
                if (item.UseTime == this.msg.date) {
                  this.dataList.push(item);
                }
              });
            } else {
              this.dataList = data;
            }
            this.dataList.forEach(x => {
              x.listUrl = [];
              if (x.ReimburseList && x.ReimburseList.VoucherPicList && x.ReimburseList.VoucherPicList.length >
                0) {
                x.ReimburseList.VoucherPicList.forEach(z => {
                  x.listUrl.push(z.url)
                })
              }
            });
          } else {
            this.Error(res.data.message);
          }
        })
      },
    },
    mounted() {
      this.getList();
    }
  };

</script>
<style scoped>
  .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>
