<template>
  <el-dialog
    title="统一排片"
    :visible.sync="visible"
    width="500px"
    class="wrap"
    append-to-body
    @close="handleClose">
    <el-form
      :model="form"
      ref="form"
      label-width="80px"
      style="padding:20px"
      size="normal">
      <el-form-item
        verify
        label="日期选择"
        label-width="80px"
        prop="dateRange">
        <el-date-picker
          :clearable="false"
          v-model="form.dateRange"
          type="daterange"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item
        verify
        label="场次"
        prop="batch">
        <el-select
          v-model="form.batch"
          multiple>
          <el-option
            v-for="item in performbatchList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        verify
        label="节目"
        prop="perform_id"
      >
        <el-select
          collapse-tags
          v-model="form.perform_id"
        >
          <el-option
            v-for="item in performList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

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

<script>
import Moment from 'moment'
import { extendMoment } from 'moment-range'
import { bindPerformWithBatch, deleteBatchPerformMatrix } from '@/api/perform'

const moment = extendMoment(Moment)

export default {
  props: {
    performList: {
      type: Array,
      default: () => []
    },
    performbatchList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      visible: false,
      form: {
        dateRange: [new Date(), new Date()],
        batch: '',
        perform_id: ''
      }
    }
  },
  methods: {
    show () {
      this.visible = true
    },
    handleClose () {
      this.visible = false
    },
    getBatchList () {
      const start = moment(this.form.dateRange[0])
      const end = moment(this.form.dateRange[1])
      const range = moment.range(start, end)
      let batchLists = []
      this.form.batch.forEach((item, index) => {
        const batchList = Array.from(range.by('day')).map(i => {
          return { batch_config_id: item, batch_date: i.format('YYYY-MM-DD') }
        })
        batchLists.push(...batchList)
      })
      // const batchList = Array.from(range.by('day')).map(i => {
      //   return { batch_config_id: this.form.batch, batch_date: i.format('YYYY-MM-DD') }
      // })
      // return batchList
      return batchLists
    },
    handleDelete () {
      if (!this.form.batch) {
        return this.$message.error('请选择场次')
      }

      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const batchList = this.getBatchList()

        deleteBatchPerformMatrix({ batchList, perform_id: '' }).then(res => {
          this.$message.success('操作成功')

          this.$emit('update')

          this.handleClose()
        })
      })
    },
    handleSubmit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          const batchList = this.getBatchList()

          bindPerformWithBatch({ batchList, perform_id: this.form.perform_id }).then(res => {
            this.$message.success('操作成功')

            this.$emit('update')

            this.handleClose()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog .el-form-item {
  display: block;
}

::v-deep .wrap .form-wrap {
  .el-input {
    width: auto;
  }
}

</style>
