<template>
  <div class="form-wrap">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
      label-width="100px">
      <el-form-item
        prop="keyWords1"
        label="缴款人姓名">
        <el-select
          @change="handleChange"
          v-model="params.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="keyList1"
        label="售票点">
        <el-select
          v-model="params.keyList1"
          multiple
          collapse-tags
          clearable
          placeholder="请选择"
          @change="selectAll">
          <el-option
            :value="0"
            label="全部售票点">
          </el-option>
          <el-option
            v-for="item in ticketSpotList"
            :key="item.id"
            :value="item.id"
            :label="item.name">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <div class="table-box">
      <div class="block-title">
        交班记录
      </div>
      <el-table
        border
        stripe
        v-loading="loading"
        :data="tableData">
        <el-table-column
          prop="ticketSpotName"
          label="售票点"
        >
        </el-table-column>
        <el-table-column
          prop="nickName"
          label="售票员"
        ></el-table-column>
        <el-table-column
          label="上班时间"
        >
          <template slot-scope="scope">
            {{ scope.row.hand_over_start_time | formatTime }}
          </template>
        </el-table-column>
        <el-table-column
          label="交班时间"
        >
          <template slot-scope="scope">
            {{ scope.row.hand_over_time | formatTime }}
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.is_payment_hand_in?'success':'info'">
              {{ scope.row.is_payment_hand_in?'已缴款':'未缴款' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              v-if="!scope.row.is_payment_hand_in"
              @click="$refs.addPayment.show(scope.row)"
            >
              现金缴款
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page.sync="params.pageNum"
        @current-change="getList()"
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="10"
        :total="total"
      >
      </el-pagination>
    </div>

    <AddDialog
      @update="getList"
      :pay-manager="form.pay_manager_name"
      ref="addPayment"></AddDialog>
  </div>
</template>

<script>
import { getHandOverList, getHandOverStatisticsById } from '@/api/systemSetting/manager.js'
import { getAccountList } from '@/api/systemSetting/account'
import { createPaymentHandIn } from '@/api/paymentHandIn'
import { getTicketSpotList } from '@/api/ticketSpot'
import AddDialog from './addPayment/Dialog'

export default {
  data () {
    return {
      loading: false,
      userList: [],
      list1: [],
      list2: [],
      bankOptions: [],
      tableData: [],
      ticketSpotList: [],
      oldTicketTypeOptions: [[]],
      total: 0,
      scenic: '',
      channelOptions: [
        '现金支付',
        '网上支付',
        '银联支付',
        '签单'
      ],
      form: {
        pay_manager_name: '',
        receive_manager_name: '',
        hand_in_channel: '现金支付',
        bank: '',
        account: '',
        fee: '',
        remark: ''
      },
      params: {
        keyWords1: '',
        // keyWords2: '',
        keyList1: [],
        startDate: '',
        endDate: '',
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  components: {
    AddDialog
  },
  computed: {
    salesList () {
      return this.$store.state.user.salesList
    }
  },
  async mounted () {
    this.getAccountList()
    this.getList()
  },
  methods: {
    getHandOverList,
    getHandOverStatisticsById,
    selectAll (val) {
      let allValues = this.ticketSpotList.map(i => i.id)
      allValues.unshift(0)
      // 用来储存上一次的值，可以进行对比
      const oldVal = this.oldTicketTypeOptions.length === 1 ? [] : this.oldTicketTypeOptions[1]

      // 若是全部选择
      if (val.includes(0)) this.params.keyList1 = allValues

      // 取消全部选中  上次有 当前没有 表示取消全选
      if (oldVal.includes(0) && !val.includes(0)) this.params.keyList1 = []

      // 点击非全部选中  需要排除全部选中 以及 当前点击的选项
      // 新老数据都有全部选中
      if (oldVal.includes(0) && val.includes(0)) {
        const index = val.indexOf(0)
        val.splice(index, 1) // 排除全选选项
        this.params.keyList1 = val
      }

      // 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
      if (!oldVal.includes(0) && !val.includes(0)) {
        if (val.length === allValues.length - 1) this.params.keyList1 = [0].concat(val)
      }

      // 储存当前最后的结果 作为下次的老数据
      this.oldTicketTypeOptions[1] = this.params.keyList1

      this.getList(true)
    },
    handleChange (e) {
      this.getList(true)
    },
    handleScenicChange (e) {
      this.params.keyList1 = e ? [e] : []
      this.getList(true)
    },
    getTicketSpotList () {
      return getTicketSpotList({
        pageNum: 1,
        pageSize: 10000
      }).then(res => {
        let list = res.list
        this.ticketSpotList = list
      })
    },
    async getList (flag) {
      this.loading = true
      await this.getTicketSpotList()

      flag && (this.params.pageNum = 1)

      getHandOverList(this.params).then(res => {
        this.total = res.total
        res.list.forEach(item => {
          let spot = this.ticketSpotList.find(s => s.id === item.ticket_spot_id)
          item.ticketSpotName = spot ? spot.name : ''
        })
        this.tableData = res.list
      }).finally(() => {
        this.loading = false
      })
    },
    getAccountList () {
      getAccountList({ pageNum: 0, pageSize: -1 }).then(res => {
        this.userList = res.list
        this.list1 = res.list.filter(i => i.roles.find(j => j.name === 'sale'))
        if (this.list1.length === 0) {
          this.list1 = res.list
        }
        this.list2 = res.list.filter(i => i.roles.find(j => j.name === 'finance'))
        if (this.list2.length === 0) {
          this.list2 = res.list
        }
      })
    },
    checkInfo (item) {
      this.logId = item.id
      this.userInfo = item
      this.dialogVisible = true
    },
    submit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          createPaymentHandIn(this.form).then(res => {
            this.$message.success('操作成功')
            this.handleClose()
            this.$emit('update')
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
