<template>
  <a-modal
    :visible="value"
    title="编辑字幕"
    @ok="handleOk"
    width="60%"
    @cancel="handleCancel"
  >
    <a-form
      :form="form"
      v-if="formData"
    >
      <a-form-item
        v-bind="formItemLayout"
        label="名称"
      >
        {{ formData.name }}
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="内容"
      >
        <a-input
          v-decorator="[
            'content',
            {
              initialValue:formData.content,
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        ></a-input>
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="每次重复"
      >
        <a-input-number
          :min="1"
          v-decorator="[
            'count_per_time',
            {
              initialValue:formData.count_per_time,
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        >
        </a-input-number>
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="速度"
      >
        <a-input-number
          :min="1"
          :max="10"
          v-decorator="[
            'speed',
            {
              initialValue:formData.speed,
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        >
        </a-input-number>
        （范围：1-10，推荐：3）
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="颜色"
      >
        <div class="color-block">
          <el-color-picker
            v-model="fontColor"
          ></el-color-picker>
          <div
            class="color-label"
            :style="{color: fontColor}"
          >
            {{ fontColor }}
          </div>
        </div>
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="字体"
      >
        <a-select
          v-decorator="[
            'font',
            {
              initialValue:formData.font,
              rules: [{ required: true, message: '请选择' }]
            }
          ]"
        >
          <a-select-option
            v-for="(i,index) in fontType"
            :value="i.value"
            :key="index"
          >
            {{ i.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="字体大小"
      >
        <a-input-number
          :min="1"
          :max="100"
          v-decorator="[
            'fontsize',
            {
              initialValue:formData.fontsize,
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        >
        </a-input-number>
        px（推荐：40）
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="日期范围"
      >
        <a-range-picker
          v-decorator="[
            'timeRange',
            {
              initialValue:[moment(formData.start),moment(formData.end)],
              rules: [{ required: true, message: '请选择日期范围' }]
            }
          ]"
          format="YYYY-MM-DD"
        />
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="时间段"
      >
        <a-button
          type="primary"
          @click="addPeriod"
        >
          添加
        </a-button>
        <div
          class="time-block"
          v-for="(time, index) in periods"
          :key="index"
        >
          <a-time-picker
            v-model="time.start"
            format="HH:mm:ss"
          />
          ~
          <a-time-picker
            v-model="time.end"
            format="HH:mm:ss"
          />
          &emsp;
          <a-button
            type="danger"
            @click="delOnePeriod(index)"
          >
            删除
          </a-button>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { editMarquee } from '@/api/marquee'
import moment from 'moment'
export default {
  props: {
    currentItem: {
      type: Object,
      default: () => {}
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      form: this.$form.createForm(this),
      formData: null,
      periods: [],
      fontColor: '#000000',
      fontType: [
        {
          value: 'NORMAL',
          name: '常规'
        },
        {
          value: 'BOLD',
          name: '加粗'
        },
        {
          value: 'ITALIC',
          name: '斜体'
        },
        {
          value: 'BOLD_ITALIC',
          name: '斜体加粗'
        }
      ],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        }
      }
    }
  },
  watch: {
    value (val) {
      if (!val) return
      this.formData = { ...this.currentItem }
      this.periods = this.currentItem.periods.map(time => {
        return {
          start: moment(time.start, 'HH:mm:ss'),
          end: moment(time.end, 'HH:mm:ss')
        }
      })
      this.fontColor = this.formData.color
    }
  },
  methods: {
    moment,
    handleOk (e) {
      e.preventDefault()
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          const params = { ...values }
          params.start = moment(params.timeRange[0]).format('YYYY-MM-DD')
          params.end = moment(params.timeRange[1]).format('YYYY-MM-DD')
          params.periods = this.periods.map(time => {
            return {
              start: moment(time.start).format('HH:mm:ss'),
              end: moment(time.end).format('HH:mm:ss')
            }
          })
          params.color = this.fontColor
          editMarquee(this.currentItem.id, params).then(res => {
            this.$message.success('编辑成功')
            this.$emit('update')
            this.handleCancel()
          })
        }
      })
    },
    handleCancel () {
      this.$emit('input', false)
      this.form.resetFields()
    },
    addPeriod () {
      this.periods.push({
        start: moment('08:00:00', 'HH:mm:ss'),
        end: moment('20:00:00', 'HH:mm:ss')
      })
    },
    delOnePeriod (index) {
      this.periods.splice(index, 1)
    }
  }
}
</script>

<style scoped>
.ant-form-item{
  width: 50%; display: inline-block;
}
.color-block {
  display: flex;
}
.color-label {
  margin-left: 15px;
  font-size: 16px;
  font-weight: bold;
}
.time-block {
  display: flex;
  align-items: center;
}
</style>
