<template>
  <el-dialog
    title="统一排班"
    :visible.sync="visible"
    width="800px"
    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="日期选择"
        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">
          <el-option
            v-for="item in activeBatchList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="班次"
        prop="scheduleConfigIds"
      >
        <el-select
          v-model="form.scheduleConfigIds"
          placeholder="请选择"
          multiple

        >
          <el-option
            v-for="item in allScheduleList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <div
        class="table-box">
        <el-table
          border
          stripe
          :data="form.scheduleList">
          <el-table-column
            prop="schedule_name"
            label="班次">
          </el-table-column>
          <el-table-column
            label="库存"
            min-width="90">
            <template slot-scope="scope">
              <el-input-number
                controls-position="right"
                :min="0"
                :precision="0"
                v-model="scope.row.number"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            class-name="align-item"
            label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="激活"
                inactive-text="禁用">
              </el-switch>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </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 { bindScheduleBatch } from '@/api/scheduleConfig'

const moment = extendMoment(Moment)

export default {
  props: {
    allScheduleList: {
      type: Array,
      default: () => []
    },
    batchList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      visible: false,
      form: {
        dateRange: [new Date(), new Date()],
        batch: '',
        scheduleConfigIds: [],
        scheduleList: []
      }
    }
  },
  computed: {
    activeBatchList () {
      return this.batchList.filter(i => i.is_schedule === 1)
    }
  },
  watch: {
    'form.scheduleConfigIds': {
      handler: function (newVal, oldVal) {
        // 根据班次选择增加or删除 班次列表
        if (newVal.length > oldVal.length) {
          const addScheduleId = newVal[newVal.length - 1]
          const addSchedule = this.allScheduleList.find(i => i.id === addScheduleId)
          addSchedule.schedule_config_id = addSchedule.id
          addSchedule.schedule_name = addSchedule.name
          this.form.scheduleList.push(addSchedule)
        } else {
          const removeScheduleId = oldVal.find(i => !newVal.includes(i))
          if (this.form.scheduleList) {
            this.form.scheduleList = this.form.scheduleList.filter(i => i.schedule_config_id !== removeScheduleId)
          }
        }
      }
    }
  },
  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)

      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
    },
    handleDelete () {
      if (!this.form.batch) {
        return this.$message.error('请选择场次')
      }

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

        bindScheduleBatch({ batchList, scheduleConfigIds: [] }).then(res => {
          this.$message.success('操作成功')

          this.$emit('update')

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

          bindScheduleBatch({ batchList, scheduleList: this.form.scheduleList }).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>
