<template>
  <el-dialog
    title="绑定售票点"
    :visible.sync="visible"
    @close="handleClose">
    <div style="padding:10px">
      <el-table
        :data="ticketSpotList"
        border>
        <el-table-column
          prop="name"
          label="售票点"
        >
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.checked">
              {{ scope.row.name }}
            </el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          prop="pay_param"
          label="支付参数"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.pay_param"
              style="width:100%"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <span slot="footer">
      <el-button @click="visible= false">取 消</el-button>
      <el-button
        type="primary"
        @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { updatePayChannel2 } from '@/api/payChannel'
import { getTicketSpotList } from '@/api/ticketSpot'

export default {
  data () {
    return {
      visible: false,
      form: {},
      ticketSpotList: []
    }
  },
  methods: {
    async show (data) {
      this.visible = true
      const { list } = await getTicketSpotList({ pageNum: 1, pageSize: 999 })
      this.ticketSpotList = list.map(v => {
        return { id: v.id, name: v.name, checked: false, pay_param: '' }
      })
      this.$nextTick(() => {
        this.form = Object.assign({}, this.form, JSON.parse(JSON.stringify(data)))
        if (!data.payChannelSpots.length) return
        this.ticketSpotList.forEach(v => {
          const spot = data.payChannelSpots.find(w => w.spot_id === v.id)
          if (spot) {
            v.checked = true
            v.pay_param = spot.pay_param
          }
        })
      })
    },
    handleClose () {
      this.visible = false
      this.ticketSpotList = []
    },
    async handleSubmit () {
      const payChannelSpots = this.ticketSpotList.filter(v => v.checked).map(w => {
        return {
          spot_id: w.id,
          pay_param: w.pay_param
        }
      })
      const params = {
        id: this.form.id,
        name: this.form.name,
        status: this.form.status,
        payChannelSpots: payChannelSpots
      }
      await updatePayChannel2(params)
      this.$message.success('操作成功')
      this.handleClose()
      this.$emit('update')
    }
  }
}
</script>

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