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

<script>
import { STable, VSelect } from '@/components'
import { viewTimeSetting, saveTimeSetting } from '@/api/openTimeSetting.js'
import moment from 'moment'
export default {
  name: 'RoleModal',
  components: {
    STable,
    VSelect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: [String, Number],
      default: function () {
        return ''
      }
    }
  },
  data () {
    return {
      index: 0, // 用于增加时间列的全局变量
      titleText: '新增',
      isshow: this.visible,
      formData: {
        name: '',
        deliveryTimeRuleItemList: []
      },
      rules: {
        name: [{ required: true, message: '请输入投放时间段名称', trigger: 'blur' }]
      }
    }
  },
  methods: {
    moment,
    cancel (e) {
      this.clear()
      this.$emit('close')
    },
    // 查详情
    getDetailData (id) {
      viewTimeSetting({ id: id }).then(res => {
        if (res.status == 200) {
          this.formData = Object.assign({}, this.formData, res.data)
          this.formData.deliveryTimeRuleItemList.map(item => {
            item.closeTime = moment(item.closeTime, 'HH:mm')
            item.openTime = moment(item.openTime, 'HH:mm')
          })
        }
      })
    },
    // 删除
    remove (k) {
      this.formData.deliveryTimeRuleItemList.splice(k, 1)
    },
    // 增加
    add () {
      this.formData.deliveryTimeRuleItemList.push({
        openTime: '',
        closeTime: ''
      })
    },
    // 保存提交
    handleSubmit () {
      const _this = this
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.formData))
          params.deliveryTimeRuleItemList.map(item => {
            item.closeTime = moment(item.closeTime).format('HH:mm')
            item.openTime = moment(item.openTime).format('HH:mm')
            // 编辑
            if (this.id) {
              delete item.id
            }
          })
          console.log(params)
          saveTimeSetting(params).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.$refs.ruleForm.resetFields()
      this.formData.name = ''
      this.formData.deliveryTimeRuleItemList = []
    }
  },
  watch: {
    visible (newValue, oldValue) {
      this.isshow = newValue
    },
    isshow (newValue, oldValue) {
      if (newValue) {
        if (this.id) {
          // 编辑
          this.titleText = '编辑'
          // 查详情
          this.getDetailData(this.id)
        } else {
          this.titleText = '新增'
          this.add()
        }
      } else {
        this.cancel()
      }
    }
  }
}
</script>

<style scoped>
.modalBox {
}
.formCont {
	max-height: 600px;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}
.timeRow {
	flex: 1;
	overflow-y: scroll;
}
.ant-modal-footer {
  display: none;
}
.dynamic-delete-button {
  margin-right: 20px;
}
</style>
