<template>
  <div v-loading="batchLoading">
    <div class="table-box">
      <div class="block-title">
        请选择要改签的门票
      </div>
      <el-table
        style="margin-bottom: 20px"
        stripe
        border
        :data="tickets"
        @selection-change="handleSelectionChange">
        <el-table-column
          :selectable="selectable"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="票号"
          prop="ticketNo"
        >
        </el-table-column>

        <template v-if="tickets[0]">
          <el-table-column
            v-if="tickets[0].performName"
            label="节目"
          >
            <template slot-scope="scope">
              {{ scope.row.performName }}
            </template>
          </el-table-column>

          <el-table-column
            v-if="tickets[0].batchConfigName"
            label="场次"
          >
            <template slot-scope="scope">
              {{ scope.row.batchConfigName }}
            </template>
          </el-table-column>

          <el-table-column
            v-if="tickets[0].seatRowTag"
            label="座位号"
          >
            <template slot-scope="scope">
              {{ `${scope.row.seatNameNew}${scope.row.seatRowTag }排${scope.row.seatName}座` }}
            </template>
          </el-table-column>
        </template>

        <el-table-column
          label="预订游玩日期"
          prop="payDateBegin"
        >
        </el-table-column>
        <el-table-column
          label="状态"
          prop="status"
        >
          <template slot-scope="props">
            <OrderStatusTag :value="props.row.status"></OrderStatusTag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="padding: 0 20px">
      <div class="block-title">
        改签信息
      </div>

      <el-form
        inline
        ref="form"
        :model="form"
        label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="改签至"
              prop="changeDate"
              :rules="{
                required: true, message: '请选择日期'
              }">
              <el-date-picker
                type="date"
                :clearable="false"
                @change="handleDateChange"
                v-model="form.changeDate"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <!-- 场次票选择 -->
          <el-col
            :span="12"
            v-if="this.tickets[0].batch_config_id">
            <el-form-item
              label="选择场次"
              prop="newBatchConfigId"
              :rules="{
                required: true, message: '请选择场次'
              }">
              <el-select
                v-model="form.newBatchConfigId"
                placeholder="请选择场次">
                <el-option
                  v-for="item in batchList"
                  :key="item.batch_config_id"
                  :label="item.name"
                  :value="item.batch_config_id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="btn-line dialog-btn-wrap">
      <el-button
        :loading="loading"
        @click="submit"
        type="primary"
      >
        确定
      </el-button>
    </div>
  </div>
</template>

<script>
import { getBatchList } from '@/api/batch'
import { apiOrder } from '@/api/order'
import moment from 'moment'

export default {
  props: {
    tickets: {
      type: Array,
      default: () => []
    },
    ticketTypeInfo: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      visible: false,
      loading: false,
      batchLoading: false,
      batchList: [],
      pickerOptions: {
        disabledDate () {
          return false
        }
      },
      batchId: '',
      form: {
        creator: this.$store.state.user.name,
        changeDate: new Date(),
        newBatchConfigId: '',
        ticketList: []
      }
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.form.changeDate = new Date()
        this.form.newBatchConfigId = ''
        this.getBatchList()

        console.log(this.ticketTypeInfo)

        this.$refs.form.resetFields()

        this.pickerOptions.disabledDate = (time) => {
          // 今天之前
          let situation1 = moment(time).isBefore(moment().format('YYYY-MM-DD'))
          // 可玩开始日期之前
          let situation2 = moment(time).isBefore(this.ticketTypeInfo.useDateStart)
          // 可玩结束日期之后
          let situation3 = moment(time).isAfter(this.ticketTypeInfo.useDateEnd)
          // 原预订日期
          let situation4 = moment(time).format('YYYY-MM-DD') === this.tickets[0].payDateBegin
          return situation1 || situation2 || situation3 || (!this.tickets[0].batch_config_id && situation4)
        }
      }
    }
  },
  methods: {
    selectable (row, index) {
      return row.status !== 'USED'
    },
    handleClose () {
      this.$parent.handleClose()
    },
    handleSelectionChange (val) {
      this.form.ticketList = val.map(t => t.ticketNo)
    },
    handleDateChange () {
      this.form.newBatchConfigId = ''
      this.getBatchList()
    },
    getBatchList () {
      this.batchLoading = true

      getBatchList({ keyWords1: moment(this.form.changeDate).format('YYYY-MM-DD') }).then(res => {
        this.batchList = res.list
      }).finally(() => {
        this.batchLoading = false
      })
    },
    submit () {
      if (this.form.ticketList.length === 0) {
        this.$message.error('请选择门票')
        return
      }

      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          apiOrder('modifyOrder', this.form).then(res => {
            this.$emit('updateList')

            this.$message({
              type: 'success',
              message: '改签成功'
            })

            this.handleClose()
          }).catch(() => {
            this.$message({
              type: 'error',
              message: '改签失败'
            })
          }).finally(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>
