<template>
  <a-modal
    :visible="value"
    title="编辑广告"
    @ok="handleOk"
    width="60%"
    @cancel="handleCancel"
  >
    <a-alert
      banner
      type="warning"
      message="资源尺寸建议：1080*250（px），图片大小不超过5M，视频不超过100M"
    ></a-alert>

    <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="[
            'link',
            {
              initialValue:formData.link
            }
          ]"
        ></a-input>
      </a-form-item>

      <a-form-item
        v-bind="formItemLayout"
        label="描述"
      >
        <a-input
          v-decorator="[
            'description',
            {
              initialValue:formData.description,
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        ></a-input>
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="内容"
      >
        <a-upload
          list-type="picture-card"
          :action="uploadUrl"
          :show-upload-list="false"
          :before-upload="beforeImageUpload"
          @change="handleImageChange"
        >
          <img
            style="max-width: 200px;min-height: 200px;"
            v-if="formData.content && isImage"
            :src="formData.content"
            alt="avatar"
          >
          <video
            style="width: 200px;"
            v-if="formData.content && isVideo"
            :src="formData.content"
          ></video>
          <div v-if="!formData.content">
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">
              上传
            </div>
          </div>
        </a-upload>
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="播放时长"
      >
        <a-input-number
          :disabled="!isImage"
          :min="1"
          v-decorator="[
            'duration',
            {
              initialValue: formData.duration,
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        >
        </a-input-number>
        秒
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="大小"
      >
        <span>{{ Math.round(formData.size / 1024) }} KB</span>
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="类型"
      >
        <span>{{ formData.type | fileType }}</span>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { editItem, getDetail } from '@/api/adv'
import advMixins from './advMixins'
export default {
  mixins: [advMixins],
  props: {
    advId: {
      type: Number,
      default: 0
    }
  },
  watch: {
    value (val) {
      if (!val || !this.advId) return
      getDetail(this.advId).then(res => {
        this.formData = res.extraInfo
        this.isImage = this.formData.type.indexOf('image') > -1
        this.isVideo = this.formData.type.indexOf('video') > -1
        console.log(this.formData)
      })
    }
  },
  methods: {
    handleOk (e) {
      e.preventDefault()
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log(values)
          const params = { ...this.formData, ...values }
          editItem(this.advId, params).then(res => {
            this.$message.success('修改成功')
            this.$emit('update')
            this.handleCancel()
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.ant-alert{
  margin-bottom: 20px;
}
.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>
