<template>
  <el-dialog
    title="绑定座位表区域&票种"
    :visible.sync="visible"
    width="640px"
    @close="handleClose">
    <el-form
      inline
      :model="form"
      ref="form"
      class="form-wrap"
      label-width="100px">
      <div class="dialog-info">
        <el-form-item
          verify
          label="选择座位表"
          prop="seat_config_id">
          <el-select
            v-model="form.seat_config_id"
            disabled
          >
            <el-option
              v-for="item in seatlist"
              :key="item.id"
              :value="item.id"
              :label="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          verify
          label="选择区域">
          <el-select v-model="seat_area_id">
            <el-option
              v-for="item in areaList"
              :key="item.id"
              :value="item.id"
              :label="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :verify="verifyTicket"
          label="绑定票种"
          prop="batchConfigTicketTypeMatrix"
          style="width:100%">
          <div
            style="margin-bottom:10px"
            v-for="(item,index) in form.batchConfigTicketTypeMatrix"
            :key="index">
            <el-select
              v-model="item.ticketTypeId"
              filterable
              placeholder="请选择"
              @change="handleTicketChange($event,item)">
              <el-option
                :disabled="handleDisable(ticketType)"
                v-for="ticketType in ticketTypeList"
                :key="ticketType.id"
                :label="ticketType.name"
                :value="ticketType.id">
              </el-option>
            </el-select>

            <el-button
              v-if="item.ticketTypeId"
              @click="$refs.priceCalendar.show(item.ticketTypeId,ticketPricePlanList,form.batch_config_id,seat_area_id)"
              type="primary"
              size="mini"
              style="margin-left:10px"
            >
              绑定价格日历
            </el-button>
            <el-button
              @click="form.batchConfigTicketTypeMatrix.splice(index, 1)"
              type="danger"
              size="mini"
            >
              删除
            </el-button>
          </div>

          <el-button
            type="primary"
            @click="handleAddTicketType">
            新增票种
          </el-button>
        </el-form-item>
      </div>
    </el-form>

    <div slot="footer">
      <el-button @click="handleClose">
        取 消
      </el-button>
      <el-button
        type="primary"
        :loading="loading"
        @click="handleSubmit">
        确 定
      </el-button>
    </div>
    <PriceCalendar ref="priceCalendar"></PriceCalendar>
  </el-dialog>
</template>

<script>
import { getBatchConfigSeatAreaTicketType, addBatchConfigSeatAreaTicketType } from '@/api/batch'
import { getSeatArea } from '@/api/seat'
import { strategyMap, weekdayMap } from '@/assets/staticData'
import PriceCalendar from './PriceCalendar'
import { getTicketPricePlanList } from '@/api/ticketPricePlan'
const defaultForm = {
  seat_config_id: '',
  batch_config_id: '',
  ticketTypeId: '',
  batchConfigTicketTypeMatrix: []
}
export default {
  components: {
    PriceCalendar
  },
  computed: {
    ticketTypeList () {
      return this.$store.state.app.ticketTypeList
    }
  },
  data () {
    return {
      visible: false,
      strategyMap,
      weekdayMap,
      loading: false,
      seat_area_id: null,
      seatlist: [], // 座位表
      areaList: [], // 区域表
      ticketPricePlanList: [], // 价格方案列表
      form: {
        ...defaultForm
      }
    }
  },
  watch: {
    seat_area_id (newName, oldName) {
      let obj = {}
      obj.seat_area_id = newName
      obj.batch_config_id = this.form.batch_config_id
      this.getBatchConfigSeatAreaTicketType(obj)
    }
  },
  methods: {
    // 获取区域
    getSeatArea (params) {
      getSeatArea(params).then(res => {
        this.areaList = res.list
        this.seat_area_id = this.areaList.length ? this.areaList[0].id : ''
      })
    },
    // 获取区域绑定票种
    getBatchConfigSeatAreaTicketType (params) {
      this.form.batchConfigTicketTypeMatrix = []
      getBatchConfigSeatAreaTicketType(params).then(res => {
        this.form.batchConfigTicketTypeMatrix = res.list
      })
    },
    // 区域绑定票种
    addBatchConfigSeatAreaTicketType (params) {
      this.loading = true
      addBatchConfigSeatAreaTicketType(params).then(res => {
      }).finally(() => {
        this.loading = false
      })
    },
    handleDisable (ticketType) {
      let selectTicket = this.form.batchConfigTicketTypeMatrix.map(i => i.ticketTypeId)
      return selectTicket.some(i => i === ticketType.id)
    },
    show (data, seatlist) {
      console.log(data)
      Object.assign(this.$data, this.$options.data())
      this.seatlist = seatlist
      this.form.seat_config_id = data.seat_config_id
      this.form.batch_config_id = data.id
      this.visible = true
      let params = { keyWords1: data.seat_config_id }
      this.getSeatArea(params)
      this.getTicketPricePlanList()
    },
    reset () {
      this.$refs.form.resetFields()
    },
    // 获取价格方案列表
    getTicketPricePlanList () {
      getTicketPricePlanList({ keyWords1: 1, pageSize: -1, pageNum: 0 }).then(res => {
        this.ticketPricePlanList = res.list
      })
    },
    handleClose () {
      this.visible = false
    },
    handleAddTicketType () {
      this.form.batchConfigTicketTypeMatrix.push({ batch_config_id: this.form.id || '', ticketTypeId: '', price: 0 })
    },
    handleTicketChange (e, item) {
      let t = this.ticketTypeList.find(i => i.id === e)
      item.price = t.price
    },
    verifyPeriod (rule, val, callback) {
      if (this.form.strategy === 'PERIOD') {
        if (val.length > 0) {
          if (val.some(i => i === null)) {
            callback(Error('内容不能为空'))
          } else {
            callback()
          }
        } else {
          callback(Error('请添加时间段'))
        }
      }

      if (this.form.strategy === 'WEEKDAY') {
        if (val.length > 0) {
          callback()
        } else {
          callback(Error('请选择星期'))
        }
      }
    },
    verifyTicket (rule, val, callback) {
      if (val.length > 0) {
        if (val.some(i => i.ticketTypeId === '')) {
          callback(Error('请选择票种'))
        } else {
          callback()
        }
      } else {
        callback(Error('请添加票种'))
      }
    },
    handleSubmit () {
      if (!this.areaList.length) {
        this.$message.error('座位表未设置区域，请先去-座位表管理=设置区域')
        return false
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          let form = JSON.parse(JSON.stringify(this.form))
          let params = []
          form.batchConfigTicketTypeMatrix.forEach(item => {
            params.push({
              batch_config_id: form.batch_config_id,
              seat_area_id: this.seat_area_id,
              ticketTypeId: item.ticketTypeId

            })
          })
          console.log('params', params)
          this.loading = true
          addBatchConfigSeatAreaTicketType({ list: params }).then(res => {
            this.$message.success('设置成功')
            // this.reset()
            // this.handleClose()
          }).finally(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.periodItem {
  display: flex;  margin: 0 10px 10px 0; align-items: center;
}
.form-wrap {
  .priceInput {
     margin: 0 10px;
    .el-input-number{
        width: 160px;
    }
    ::v-deep .el-input {
      width: 100%;
    }
  }
}

</style>
