<template>
  <div class="container">
    <div class="filter">
      <span style="font-size: 14px;font-weight: bold;margin-right: 10px;">历史付款记录</span>
      <DatePicker v-model="params.beginTime" @on-change="filterChange" type="month" placeholder="开始日期" style="width: 150px"></DatePicker>
      <span style="padding: 0 10px">-</span>
      <DatePicker v-model="params.endTime" @on-change="filterChange" type="month" placeholder="结束日期" style="width: 150px"></DatePicker>
      <span style="margin-left: 10px;">
        共有
        <span style="color: red;">{{ data.supplierNum }}</span>
        个供应商付款，
        <span style="color: red;">{{ data.contractNum }}</span>
        个合同，合同金额
        <span style="color: red;">{{ data.contractAmount }}</span>
        元，总计付款
        <span style="color: red;">{{ data.totalAmount }}</span>
        元
      </span>
      <span style="float: right;cursor: pointer;" @click="back">&lt;&lt;返回</span>
    </div>
    <div class="table">
      <my-table :data="data.payItems" :columns="columns" :is-show-filter="false" :table-page="params" @on-change="changePage"></my-table>
    </div>
  </div>
</template>

<script>
import MyTable from '_c/my-table/my-table'
import { GetHistoryPaymentSum } from '@/api/applyPurchase'
export default {
  name: 'pay_history',
  components: {
    MyTable
  },
  data () {
    return {
      data: {
        payItems: []
      },
      columns: [
        // {
        //   title: '序号',
        //   type: 'index',
        //   width: 60,
        //   align: 'center'
        // },
        {
          title: '付款时间',
          key: 'payTime',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '供应商',
          key: 'supplierName',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '付款金额',
          key: 'payAmount',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          minWidth: 100,
          render: (h, params) => {
            let _this = this
            return h('span', {
              style: {
                color: 'blue',
                textDecoration: 'underline',
                cursor: 'pointer'
              },
              on: {
                click (e) {
                  e.stopPropagation()
                  _this.$router.push({
                    name: 'pay_history_detail',
                    query: {
                      supplierId: params.row.supplierId,
                      supplierList: _this.data.payItems.map(item => {
                        return {
                          label: item.supplierName,
                          value: item.supplierId
                        }
                      }),
                      beginTime: (_this.params.beginTime && _this.$dayjs(_this.params.beginTime).format('YYYY-MM')) || '',
                      endTime: (_this.params.endTime && _this.$dayjs(_this.params.endTime).format('YYYY-MM')) || ''
                    }
                  })
                }
              }
            }, '查看详情')
          }
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0,
        beginTime: '',
        endTime: ''
      }
    }
  },
  methods: {
    filterChange () {
      this.params.pageIndex = 1
      this.getList()
    },
    back () {
      this.$store.commit('closeTag', this.$route)
      setTimeout(() => {
        this.$router.push('material_pay')
      }, 500)
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getList () {
      GetHistoryPaymentSum({
        ...this.params
      }).then(res => {
        if (res.code === 0) {
          this.data = res.result
          this.params.total = res.result.supplierNum
        }
      })
    }
  },
  mounted () {
    this.params.beginTime = this.$dayjs().format('YYYY-MM')
    this.params.endTime = this.$dayjs().format('YYYY-MM')
    this.getList()
  }
}
</script>

<style lang="less" scoped>
 .container {
   height: 100%;
   display: flex;
   flex-direction: column;
   .filter {
     margin-bottom: 10px;
     height: 32px;
     line-height: 32px;
   }
   .table {
     flex: 1;
     overflow: hidden;
   }
 }
</style>
