<template>
  <div>
    <el-dialog
      :title="exData.id ? '编辑': '新增'"
      :visible.sync="dialog"
      width="900px"
      :close-on-click-modal="false"
      top="50px">
      <el-form
        ref="form"
        :model="form"
        :rules="formRules"
        label-width="100px">
        <el-form-item label="演出日期：">
          <el-date-picker
            v-model="plan_time"
            readonly
            align="right"
            type="date"
            placeholder="根据第1节开始时间生成"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item
          v-for="(part, index) in form.postData"
          :label="'第' + (index + 1) + '节'"
          :key="index"
          :prop="'postData.' + index + '.user_id'"
          :rules="singerNameRules">
          <el-row>
            <el-col :span="6">
              <el-select
                v-model="part.user_id"
                filterable
                placeholder="请选择演唱艺人">
                <el-option
                  v-for="item in singerData"
                  :key="item.id"
                  :label="item.user_song_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="14" :offset="1">
              <el-date-picker
                v-model="part.date"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                :default-time="['18:00:00', '19:00:00']"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-col>
            <el-col :span="3">
              <el-button
                type="warning"
                :disabled="form.postData.length <= 1"
                @click.prevent="removePostData(part)">删除
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer text-center">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button @click="addPostData">新增时间段</el-button>
        <el-button type="primary" :disabled="booLock" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    value: {
      type: Boolean,
      default: true
    },
    exData: {
      type: Object,
      default: function () {
        return {}
      }
    },
    singerData: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    const checkSingerName = (rule, value, callback) => {
      const index = rule.field.replace(/\w*\./, '').replace(/\.\w*/, '')
      const showTime = this.form.postData[index * 1].date
      if (value && showTime) {
        callback()
      } else {
        if (!value) {
          callback(new Error('请选择演唱艺人'))
        }
        if (!showTime) {
          callback(new Error('请选择演出时间段'))
        }
      }
    }

    return {
      dialog: !!this.value,
      // 演唱艺人及演唱时间段校验规则
      singerNameRules: [
        { required: true, validator: checkSingerName, trigger: ['blur', 'change'] }
      ],
      form: {
        postData: [
          {
            user_id: '', // 艺人ID
            date: null
          }
        ]
      },
      booLock: false
    }
  },
  computed: {
    plan_time: {
      get () {
        let planTime = ''
        const { postData } = this.form
        const date = postData[0].date
        if (Array.isArray(date)) {
          planTime = date[0].replace(/\s\w.*/, '')
        }
        return planTime
      },
      set () {}
    }
  },
  methods: {
    removePostData (item) {
      var index = this.form.postData.indexOf(item)
      if (index !== -1) {
        this.form.postData.splice(index, 1)
      }
    },
    addPostData () {
      this.form.postData.push({
        user_id: '',
        date: null
      })
    },
    handleSubmit () {
      // 不做修改，业务上是直接删除，然后重新添加
      const url = this.exData.id ? '' : '/v1/bar/show/plan/add'

      this.$refs.form.validate(async valid => {
        if (valid) {
          this.booLock = true
          const postData = this.form.postData.map(item => ({
            user_id: item.user_id,
            plan_time: this.plan_time,
            plan_start_time: item.date[0],
            plan_end_time: item.date[1]
          }))
          this.booLock = false
          const data = await this.$fetch(url, {
            plans: postData
          })
          if (data.code === 200) {
            this.$message.success('提交成功')
            this.$emit('success')
            this.dialog = false
          }
        }
      })
    }
  },
  mounted () {},
  watch: {
    dialog (val) {
      if (!val) this.$emit('input', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.af-el-date-editor {
  width: 220px;
  margin: 0 10px;
}
</style>
