<template>
  <div class="form-wrap">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
      label-width="100px">
      <el-form-item
        prop="pay_manager_name"
        label="缴款人姓名">
        <el-select v-model="form.keyWords1">
          <el-option
            label="全部"
            value=""></el-option>
          <el-option
            v-for="item in salesList"
            :key="item.id"
            :label="item.nickName"
            :value="item.nickName">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        prop="receive_manager_name"
        label="收款人姓名">
        <el-select v-model="form.keyWords2">
          <el-option
            label="全部"
            value=""></el-option>
          <el-option
            v-for="item in list2"
            :key="item.id"
            :label="item.nickName"
            :value="item.nickName">
          </el-option>
        </el-select>
      </el-form-item>

      <!-- <el-form-item label="缴款银行">
        <el-input
          v-model="form.keyWords3"
          clearable></el-input>
      </el-form-item> -->

      <!-- <el-form-item
        prop="hand_in_channel"
        label="结算方式">
        <el-select v-model="form.keyWords4">
          <el-option
            label="全部"
            value=""></el-option>
          <el-option
            v-for="item in channelOptions"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item> -->

      <el-form-item label="缴款开始时间">
        <el-date-picker
          type="datetime"
          v-model="form.startDate"
          placeholder="选择日期时间"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="缴款结束时间">
        <el-date-picker
          default-time="23:59:59"
          type="datetime"
          v-model="form.endDate"
          placeholder="选择日期时间"
        ></el-date-picker>
      </el-form-item>

      <div class="btn-wrap">
        <el-button
          type="primary"
          @click="getList"
        >
          查询
        </el-button>
      </div>
    </el-form>
    <div class="table-box">
      <div class="block-title">
        查询结果
      </div>
      <el-table
        border
        stripe
        :data="tableData">
        <el-table-column
          prop="pay_manager_name"
          label="缴款人姓名"
        >
        </el-table-column>

        <el-table-column
          prop="receive_manager_name"
          label="收款人姓名"
        >
        </el-table-column>

        <el-table-column
          prop="hand_in_channel"
          label="结算方式"
        >
        </el-table-column>

        <el-table-column
          prop="fee"
          label="缴款金额"
        >
        </el-table-column>

        <!-- <el-table-column
          prop="bank"
          label="缴款银行"
        >
        </el-table-column>

        <el-table-column
          prop="account"
          label="缴款账号"
        >
        </el-table-column> -->

        <el-table-column
          prop="remark"
          label="备注"
        >
        </el-table-column>

        <el-table-column
          prop="createTime"
          label="创建时间"
        >
          <template slot-scope="scope">
            {{ scope.row.createTime | formatTime }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page.sync="form.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="form.pageSize"
        @size-change="handleSizeChange"
        @current-change="getList()"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getAccountList } from '@/api/systemSetting/account'
import { getPaymentHandInList } from '@/api/paymentHandIn'

export default {
  data () {
    return {
      bankOptions: [],
      userList: [],
      list1: [],
      list2: [],
      form: {
        keyWords1: '',
        keyWords2: '',
        keyWords3: '',
        keyWords4: '现金支付',
        startDate: '',
        endDate: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      tableData: [],
      channelOptions: [
        '现金支付',
        '网上支付',
        '银联支付',
        '签单'
      ]
    }
  },
  computed: {
    salesList () {
      return this.$store.state.user.salesList
    }
  },
  async mounted () {
    this.getList()
    this.getAccountList()
  },
  methods: {
    getAccountList () {
      getAccountList({ pageNum: 0, pageSize: -1 }).then(res => {
        this.userList = res.list

        this.list2 = res.list.filter(i => i.roles.find(j => j.name === 'finance'))
        if (this.list2.length === 0) {
          this.list2 = res.list
        }
      })
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getList()
    },
    getList (goFirst) {
      goFirst && (this.form.pageNum = 1)
      getPaymentHandInList(this.form).then(res => {
        console.log(res)
        this.total = res.total
        this.tableData = res.list
      })
    },
    checkInfo (item) {
      this.logId = item.id
      this.userInfo = item
      this.dialogVisible = true
    },
    downloadLog (data) {
      if (!data.downloadUrl) {
        this.$message.error('暂无下载地址')
        return
      }
      window.location.href = data.downloadUrl
    }
  }
}
</script>
