<template>
  <div class="component-upload-agreement">
    <h1 :class="required ? 'required' : ''">{{ title }}</h1>
    <el-form ref="form" :rules="required ? RULE : null" :model="value" class="upload-agreement" label-position="top" inline>
      <el-form-item v-if="showWord" prop="word">
        <template #label>
          <span>Word文档</span>
          <el-link type="primary" icon="el-icon-download" style="margin-left: 16px;" @click="handleDownload">下载模板</el-link>
        </template>
        <PreviewFile v-if="preview" :value="value.word || {}" type="word" />
        <UploadFile v-else v-model="value.word" type="word" accept=".doc,.docx" tip="请上传docx格式文件，不大于2MB。" />
      </el-form-item>
      <el-form-item v-if="showVertical" :label="isLogo ? 'Web端' : '横版图片'" prop="vertical">
        <PreviewFile v-if="preview" :value="value.vertical || {}" :vertical="true" type="picture" :tip="isLogo ? '333px * 84px' : '用于平板端手写签名'" />
        <UploadFile v-else v-model="value.vertical" :vertical="true" type="picture" accept=".jpg,.jpeg,.png">
          <template #tip>
            <div>{{ isLogo ? '333px * 84px' : '用于平板端手写签名' }}</div>
            <div>请上传jpg/jpeg、png图片文件，不大于1MB。</div>
          </template>
        </UploadFile>
      </el-form-item>
      <el-form-item v-if="showHorizontal" :label="isLogo ? 'H5端' : '竖版图片'" prop="horizontal">
        <PreviewFile v-if="preview" :value="value.horizontal || {}" :vertical="false" type="picture" :tip="isLogo ? '621px * 144px' : '用于手机端手写签名'" />
        <UploadFile v-else v-model="value.horizontal" :vertical="false" type="picture" accept=".jpg,.jpeg,.png">
          <template #tip>
            <div>{{ isLogo ? '621px * 144px' : '用于手机端手写签名' }}</div>
            <div>请上传jpg/jpeg、png图片文件，不大于500KB。</div>
          </template>
        </UploadFile>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import UploadFile from './UploadFile'
import PreviewFile from './PreviewFile'

/**
 * 校验图片，word的方法
 * @param rule 当前规则
 * @param value 当前选中的值
 * @param callback 当前回调
 */
function validator(rule, value, callback) {
  if (!value.uuid) {
    callback(new Error('请上传文件'))
  } else {
    callback()
  }
}

export default {
  name: 'UploadAgreement',
  components: { UploadFile, PreviewFile },
  props: {
    title: {
      type: String,
      default: ''
    },
    value: {
      type: Object,
      default: () => ({})
    },
    preview: {
      type: Boolean,
      default: true
    },
    required: {
      type: Boolean,
      default: true
    },
    templateUrl: {
      type: String,
      default: ''
    },
    // 是否展示word上传
    showWord: {
      type: Boolean,
      default: true
    },
    // 是否展示红横版图片
    showVertical: {
      type: Boolean,
      default: true
    },
    // 展示竖版图片
    showHorizontal: {
      type: Boolean,
      default: true
    },
    // 是否是logo
    isLogo: {
      type: Boolean,
      default: false
    }
  },
  data() {
    // 规则拷贝
    const RULE_COPY = {}
    // 如果需要展示word
    if (this.showWord) {
      RULE_COPY['word'] = { validator }
    }
    // 如果需要展示横版图片
    if (this.showVertical) {
      RULE_COPY['vertical'] = { validator }
    }
    if (this.showHorizontal) {
      RULE_COPY['horizontal'] = { validator }
    }
    return { RULE: RULE_COPY }
  },
  methods: {
    async validate() {
      await this.$refs.form.validate()
    },

    /**
     * 下载链接
     */
    handleDownload() {
      // 如果当前没有链接
      if (!this.templateUrl) {
        this.$message.error('模板链接获取失败')
        return
      }
      // 开始下载
      window.location.href = this.templateUrl
    }
  }
}
</script>

<style lang="scss">
.component-upload-agreement {
  font-family: PingFangSC-Regular, PingFang SC;
  h1 {
    color: #71747B;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin: 0 0 24px;
    &.required {
      &:before {
        content: '*';
        color: #F56C6C;
        display: inline;
        margin-right: 6px;
      }
    }
  }
  .upload-agreement {
    .el-form-item__label {
      color: #71747B;
      height: 20px;
      line-height: 20px;
      margin-bottom: 10px;
    }
  }
}
</style>
