<template>
  <a-modal
    title="新增开放时间"
    :visible="value"
    class="workTimesModal"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <a-form-item
        label="是否允许"
        v-bind="formItemLayout"
      >
        <a-switch
          checked-children="允许开放"
          un-checked-children="禁止开放"
          v-decorator="[
            'permit',
            {
              initialValue:true,
              valuePropName: 'checked'
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="优先级"
        v-bind="formItemLayout"
      >
        <a-input-number
          v-decorator="[
            'priority',
            {
              initialValue:0,
              rules: [{ required: true, message: '请输入优先级' }]
            }
          ]"
          :min="0"
          :precision="0"
        ></a-input-number>

        <a-popover>
          <template slot="content">
            <p>数字越大优先级越高，默认0不限制</p>
          </template>
          <a-icon type="info-circle" theme="filled" style="margin-left:10px" />
        </a-popover>
      </a-form-item>

      <a-form-item
        label="开放时间类型"
        v-bind="formItemLayout"
      >
        <a-select
          @change="handleWorkTimesTypeChange"
          v-decorator="[
            'type',
            {
              initialValue:'SPECIAL_DAY'
            }
          ]"
        >
          <a-select-option
            v-for="item in worktimesType"
            :key="item.value"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="日期范围"
        v-bind="formItemLayout"
        v-if="form.getFieldValue('type')==='SPECIAL_DAY'"
      >
        <a-range-picker
          v-decorator="[
            'dayRange',
            {
              rules: [{ required: true, message: '请选择开放日期' }]
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="开放日期"
        v-bind="formItemLayout"
        v-if="form.getFieldValue('type')==='SPECIAL_WEEKDAY'"
      >
        <a-checkbox-group
          :options="weeksDay"
          v-decorator="[
            'day',
            {
              rules: [{ required: true, message: '请选择开放日期' }]
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="开放日期"
        v-bind="formItemLayout"
        v-if="form.getFieldValue('type')==='SPECIAL_MONTHDAY'"
      >
        <a-checkbox-group
          v-decorator="[
            'day',
            {
              rules: [{ required: true, message: '请选择开放日期' }]
            }
          ]"
        >
          <a-row>
            <a-col
              :span="4"
              v-for="(item,index) in monthDays"
              :key="index"
            >
              <a-checkbox :value="item.value">
                {{ item.label }}
              </a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </a-form-item>

      <a-form-item
        label="类型"
        v-bind="formItemLayout"
        v-if="form.getFieldValue('type')==='LEGAL_HOLIDAY'"
      >
        <a-select
          v-decorator="[
            'legal_type',
            {
              initialValue:'EVERYDAY'
            }
          ]"
        >
          <a-select-option
            v-for="item in legalType"
            :key="item.value"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-row
        class="ant-form-item"
        style="margin-bottom:0"
        v-for="(item,index) in periods"
        :key="index"
      >
        <a-col
          span="6"
          class="ant-form-item-label"
        >
          <label v-if="index===0">
            开放时间段
          </label>
        </a-col>
        <a-col span="16">
          <a-button
            v-if="index===0"
            type="dashed"
            @click="addTimeRange"
            style="display:block"
          >
            <a-icon type="plus" /> 新增时间段
          </a-button>
          <a-form-item class="time-item">
            <a-time-picker
              v-decorator="[
                `start${index}`,
                {
                  initialValue:item.start,
                  rules: [{ required: true, message: '请选择结束时间' }]
                }
              ]"
            />
          </a-form-item>
          <span class="split-item">
            ~
          </span>
          <a-form-item class="time-item">
            <a-time-picker
              v-decorator="[
                `end${index}`,
                {
                  initialValue:item.end,
                  rules: [{ required: true, message: '请选择结束时间' }]
                }
              ]"
            />
          </a-form-item>

          <a-icon
            class="dynamic-delete-button"
            type="minus-circle-o"
            v-if="index > 0"
            @click="removeTimeRange(index)"
          />
        </a-col>
      </a-row>

      <a-form-item
        label="禁止开放提示语"
        v-bind="formItemLayout"
      >
        <a-textarea
          v-decorator="[
            'no_permit_prompt',
            {
              initialValue:null
            }
          ]"
        ></a-textarea>
      </a-form-item>

    </a-form>
  </a-modal>
</template>

<script>
import moment from 'moment'
const worktimesType = [
  {
    name: '日期范围',
    value: 'SPECIAL_DAY'
  },
  {
    name: '法定日',
    value: 'LEGAL_HOLIDAY'
  },
  {
    name: '每周',
    value: 'SPECIAL_WEEKDAY'
  },
  {
    name: '每月',
    value: 'SPECIAL_MONTHDAY'
  }
]

const legalType = [
  {
    name: '每天',
    value: 'EVERYDAY'
  },
  {
    name: '节假日',
    value: 'HOLIDAY'
  },
  {
    name: '休息日',
    value: 'REST'
  },
  {
    name: '工作日',
    value: 'WORKING'
  }
]

// 整月日期
const monthDays = Array.from({ length: 31 }).map((v, i) => {
  return { label: i + 1 < 10 ? '0' + (i + 1) : i + 1, value: i + 1 }
})

export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
    this.form.getFieldDecorator('type', {
      initialValue: 'SPECIAL_DAY'
    })
  },
  data () {
    return {
      legalType,
      worktimesType,
      monthDays,
      weeksDay: [
        { label: '周一', value: 0 },
        { label: '周二', value: 1 },
        { label: '周三', value: 2 },
        { label: '周四', value: 3 },
        { label: '周五', value: 4 },
        { label: '周六', value: 5 },
        { label: '周日', value: 6 }
      ],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      startTime: {
        help: '请输入',
        validateStatus: ''
      },
      periods: [
        {
          start: moment('08:00:00', 'HH:mm:sss'),
          end: moment('20:00:00', 'HH:mm:sss')
        }
      ]
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    moment,
    handleCancel () {
      this.$emit('input', false)
      this.form.resetFields()
    },
    handleWorkTimesTypeChange () {
      // 修改类型
      this.form.setFieldsValue({
        'day': []
      })
    },
    addTimeRange () {
      this.periods = this.periods.concat(
        {
          start: moment('08:00:00', 'HH:mm:sss'),
          end: moment('20:00:00', 'HH:mm:sss')
        }
      )
    },
    removeTimeRange (index) {
      this.periods.splice(index, 1)
    },
    handleOk () {
      this.form.validateFields((err, values) => {
        // console.log(values)
        if (!err) {
          const params = this.getParams(values)
          // this.form.resetFields()
          this.$emit('change', params)
          this.$emit('input', false)
        }
      })
    },
    getParams (values) {
      const periods = this.periods.map((item, index) => {
        return {
          start: values[`start${index}`].format('HH:mm:ss'),
          end: values[`end${index}`].format('HH:mm:ss')
        }
      })
      switch (values.type) {
        // 日期时段
        case 'SPECIAL_DAY':
          return {
            type: values.type,
            permit: values.permit,
            start: values.dayRange[0].format('YYYY-MM-DD'),
            end: values.dayRange[1].format('YYYY-MM-DD'),
            periods,
            priority: values.priority,
            no_permit_prompt: values.no_permit_prompt
          }
        // 每周、每月
        case 'SPECIAL_MONTHDAY':
        case 'SPECIAL_WEEKDAY':
          return {
            type: values.type,
            permit: values.permit,
            day: values.day,
            periods,
            priority: values.priority,
            no_permit_prompt: values.no_permit_prompt
          }
        // 法定日
        case 'LEGAL_HOLIDAY':
          return {
            type: values.type,
            permit: values.permit,
            legal_type: values.legal_type,
            periods,
            priority: values.priority,
            no_permit_prompt: values.no_permit_prompt
          }
      }
    }
  },
  watch: {
    value (val) {
      if (val) {
        this.form = this.$form.createForm(this)
        this.form.getFieldDecorator('type', {
          initialValue: 'SPECIAL_DAY'
        })
        this.periods = [{
          start: moment('08:00:00', 'HH:mm:sss'),
          end: moment('20:00:00', 'HH:mm:sss')
        }]
      }
    }
  }
}
</script>

<style scoped>
.time-item{
    display:inline-block;vertical-align: middle;
}
.dynamic-delete-button{
    display:inline-block;vertical-align: top; margin: 3px 0 0 3px;
}
.split-item{
    display:inline-block;vertical-align: top; margin:10px
}
textarea{
  resize: none;
}
</style>

<style>
.workTimesModal .ant-checkbox + span{
    padding:0 8px 0 3px;
}
</style>
