<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 width="300">日期</th>
          <th>{{$t('fnc.jine')}}</th>
          <th>{{$t('pub.pubRemark')}}</th>
          <th>附件</th>
        </tr>
        <template v-for='(item, index) in dataList'>
          <tr :key="index">
            <td>{{item.UseDate ? item.UseDate.replace('T', ' ') : ''}}</td>
            <td>{{item.UnitPrice}}</td>
            <td>{{item.Remark}}</td>
            <td>
              <div v-if="item.VoucherPicList.length">
                <div v-for="(vou, vouIndex) in item.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>
                无
              </div>
            </td>
          </tr>
        </template>
        <tr>
          <td v-show="dataList.length==0" colspan="16" align="center">{{$t('system.content_noData')}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
  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 : "";
    },
    methods: {
      openImg(src) {
        window.open(src, "_blank");
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      openImg(src) {
        window.open(src, "_blank");
      },
      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.OtherOrderInfo.OtherList;
            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.listUrl = [];
              if (x.VoucherPicList && x.VoucherPicList.length > 0) {
                x.VoucherPicList.forEach(z => {
                  x.listUrl.push(z.url)
                })
              }
            });
          } 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>
