<template>
  <div>
    <a-modal
      class="modalBox"
      :title="titleText"
      v-model="isshow"
      :footer="null"
      @cancle="cancel"
      :width="800"
      :centered="true">
      <a-form :form="form" @submit="handleSubmit">
        <!-- 投放时间段名称 -->
        <a-form-item label="投放时间段名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
          <a-input
            placeholder="请输入投放时间段名称(最多30个字符)"
            allowClear
            :maxLength="30"
            id="roleModal-name"
            v-decorator="['formData.name', {
              initialValue: formData.name,getValueFromEvent: $filterEmpty,
              rules: [{ required: true, message: '请输入投放时间段名称(最多30个字符)!' }] }]" />
        </a-form-item>
        <!-- 投放时间区间 -->
        <a-row
          type="flex"
          align="middle"
          v-for="(k, index) in form.getFieldValue('keys')"
          :key="k">
          <a-col span="10">
            <!-- 投放开始时间 -->
            <a-form-item
              :label="index === 0 ? '投放时间区间' : ''"
              :required="true"
              :label-col=" { span: 12 }"
              :wrapper-col="index ===0 ? { span: 12 }:{span:12,offset:12}"
            >
              <a-time-picker
                placeholder="开始时间"
                v-decorator="[
                  `times[${k}].startTime`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true, message: '请选择投放开始时间!'
                      },
                      {
                        validator: changeTimeValidator
                      },
                    ],
                  },
                ]"
                format="HH:mm" />
            </a-form-item>
          </a-col>
          <a-col span="1">
            <a-form-item >至</a-form-item>
          </a-col>
          <a-col span="6">
            <!-- 投放结束时间 -->
            <a-form-item
              :label="''"
              :required="false"
              :wrapper-col="{ span: 18 }">
              <a-time-picker
                placeholder="结束时间"
                v-decorator="[
                  `times[${k}].endTime`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      { required: true, message: '请选择投放结束时间!' }
                    ],
                  },
                ]"
                format="HH:mm" />
            </a-form-item>
          </a-col>
          <a-form-item>
            <a-icon
              :style="{fontSize: '18px',color: 'red'}"
              v-if="form.getFieldValue('keys').length > 1"
              class="dynamic-delete-button"
              type="minus-circle-o"
              :disabled="form.getFieldValue('keys').length === 1"
              @click="() => remove(k)" />
            <a-icon
              v-if="index === form.getFieldValue('keys').length-1"
              :style="{fontSize: '18px'}"
              type="plus-circle"
              @click="add" />
          </a-form-item>
        </a-row>
        <a-form-item :wrapper-col="{ span: 24, offset: 10 }">
          <a-button type="primary" @click="handleSubmit()" id="roleModal-handleSubmit" :style="{ marginRight: '15px' }">
            保存
          </a-button>
          <a-button :style="{ marginLeft: '15px' }" @click="handleCancel()" id="roleModal-handleCancel">
            取消
          </a-button>
        </a-form-item>
      </a-form>

    </a-modal>
  </div>
</template>

<script>
import {
  STable,
  VSelect
} from '@/components'
import {
  saveRolePower
} from '@/api/power-role.js'
import moment from 'moment'
export default {
  name: 'RoleModal',
  components: {
    STable,
    VSelect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      id: 0,
      titleText: '新增',
      isshow: this.visible,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, {
        name: 'addTimeModal'
      }),
      formData: {
        name: '',
        isEnable: '', // 活动状态
        remarks: ''
      },
      keys: []
    }
  },
  methods: {
    moment,
    cancel (e) {
      this.clear()
      this.$emit('close')
    },
    // 校验
    changeTimeValidator (rule, value, callback) {
	  console.log('value', value, rule)
	  const times = this.form.getFieldValue('times')
	  if (value === null) {
	    callback(new Error('请输入密码'))
	  }
	  callback()
    },
    // 删除
    remove (k) {
      const {
        form
      } = this
      const keys = form.getFieldValue('keys')
      if (keys.length === 1) {
        return
      }
      form.setFieldsValue({
        keys: keys.filter(key => key !== k)
      })
    },
    // 增加
    add () {
      const {
        form
      } = this
      const keys = form.getFieldValue('keys')
      console.log(keys, 'kkkkkk')
      const nextKeys = keys.concat(this.id++)
      form.setFieldsValue({
        keys: nextKeys
      })
    },
    // 保存提交
    handleSubmit () {
      const _this = this
      this.form.validateFields((err, values) => {
		  console.log(values, ' formData.type222222222')
        if (!err) {
          saveRolePower(Object.assign(this.formData, values.formData)).then(res => {
            console.log(res, 'res--save')
            if (res.status + '' === '200') {
              this.$message.success(res.message ? res.message : '保存成功')
              this.$emit('refresh')
              setTimeout(function () {
                _this.cancel()
              }, 300)
            } else {
              // this.$message.error(res.message)
            }
          })
        }
      })
    },
    // 取消
    handleCancel () {
      this.cancel()
    },
    clear () {
      this.form.resetFields()
      delete this.formData.id
      this.formData.name = ''
      this.formData.isEnable = ''
      this.formData.remarks = ''
    }

  },
  mounted () {},
  beforeCreate () {
    this.form = this.$form.createForm(this, {
      name: 'addTimeModal'
    })
  },
  watch: {
    visible (newValue, oldValue) {
      this.isshow = newValue
    },
    isshow (newValue, oldValue) {
      if (newValue) {
        this.form.getFieldDecorator('keys', {
          initialValue: [],
          preserve: true
        })
        this.id = 0
        this.add()
        const keys = this.form.getFieldValue('keys')
        console.log(keys, 'kkkkkk')
        if (this.data.id) { // 编辑
          this.titleText = '编辑'
          this.formData = Object.assign({}, this.data)
          delete this.formData.no
          this.formData.isEnable = Number(this.formData.isEnable)
          console.log(this.formData, 'this.formData')
        } else {
          this.titleText = '新增'
        }
      } else {
        this.cancel()
      }
    }
  }
}
</script>

<style scoped>
	.modalBox {}

	.ant-modal-footer {
		display: none;
	}
	.dynamic-delete-button {
		margin-right: 20px;
	}
</style>
