<template>
  <el-form
    ref="ruleForm"
    v-loading="loading"
    :model="ruleForm"
    status-icon
    :rules="rulesThis"
    :label-width="labelWidth || '100px'"
    class="demo-ruleForm bargain-list-exam-form"
    :size="'mini'"
  >
    <el-row>
      <el-col :span="8"
        ><el-form-item label="审核状态" prop="state">
          <el-radio-group
            v-model="ruleForm.state"
            placeholder="审核状态"
            style="width: 100%"
            :disabled="disabled"
            @change="stateChange"
          >
            <el-radio v-for="item in stateList" :key="item.value" :label="item.value">{{
              item.label
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="附件" prop="adjunct">
          <div
            class="adjunct"
            :class="{
              disabled: disabled,
            }"
          >
            <p v-if="ruleForm.adjunct">
              <el-link :underline="false" :href="ruleForm.adjunct" target="_blank">{{
                ruleForm.adjunct_name
              }}</el-link>
              <el-link class="fr" type="info" :underline="false" v-if="!disabled"
                ><i class="el-icon-circle-close" @click="close_url" :size="'mini'"></i
              ></el-link>
            </p>
            <p v-else class="no">支持pdf格式文件</p>
            <div v-if="ruleForm.adjunct === ''">
              <file-upload-pdf
                class="Upload"
                :accept="'.pdf'"
                :multiple="false"
                :size="'mini'"
                :uploadcondition="beforeAvatarUpload"
                @UploadErrorEvent="UploadErrorEvent"
                @UploadSuccessEvent="UploadSuccessEvent"
              />
            </div>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-button
          v-if="!disabled"
          :size="'mini'"
          type="primary"
          class="fr"
          @click="submitForm"
          >保 存
        </el-button>
      </el-col>
      <el-col :span="24">
        <el-form-item label="审核备注" prop="remark">
          <el-input
            v-model="ruleForm.remark"
            type="textarea"
            placeholder="审核备注"
            :disabled="disabled"
            maxlength="250"
            :autosize="{ minRows: 2, maxRows: 2 }"
            show-word-limit
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { replaceTextWrapAndSpace } from "@/utils";
export default {
  name: "ExamForm",
  props: ["size", "disabled", "labelWidth", "sitem"],
  /**
   * 属性集合
   * @param {String}        size             : 组件大小             非必填
   * @param {Array}         statusList       : 驳回至备选项          必填
   * @param {Boolean}       disabled         : 是否禁用              必填
   * @param {Boolean}       isMust           : 是否需要展示驳回节点   必填
   *
   *
   */
  /**
   * 事件集合
   * @searchChange             : 选中值变化调用   抛出选中数据
   */
  data() {
    return {
      loading: false,
      stateList: [
        {
          value: "1",
          label: "通过",
        },
        {
          value: "0",
          label: "驳回",
        },
      ],
      showModelThis: this.showModel,
      ruleForm: {
        state: "1", // 通过or驳回
        adjunct: "", // 驳回至
        adjunct_name: "",
        remark: "",
      },
      rulesThis: this.rules,
      rules: {
        state: [
          {
            required: true,
            message: "请选择审核状态",
            trigger: "change",
          },
        ],

        remark: [{ required: true, message: "请输入审核备注", trigger: "blur" }],
      },
    };
  },
  watch: {
    newTime: function () {
      this.initForm();
    },
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      this.loading = true;
      this.rulesThis = this.rules;
      await this.resetForm();
      this.stateChange();
      this.loading = false;
    },
    stateChange() {
      this.rulesThis.remark[0].required = this.ruleForm.state !== "1";
    },
    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          const { status, remark, adjunct, adjunct_name } = this.sitem;
          this.ruleForm = {
            state: status + "" || "1", // 通过or驳回
            adjunct: adjunct || "",
            adjunct_name: adjunct_name || "",
            remark: remark || "",
          };
        }
      });
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const { remark } = this.ruleForm;
          this.ruleForm.remark = replaceTextWrapAndSpace(remark);
          this.$emit("searchChange", this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    close_url() {
      this.ruleForm.adjunct_name = "";
      this.ruleForm.adjunct = "";
      this.$refs.ruleForm.validateField("adjunct");
    },
    //附件上传失败
    async UploadErrorEvent(e) {
      console.log(e);
      if (e !== "break") {
        this.$message.error("附件上传失败!");
        this.$refs.ruleForm.validateField("adjunct");
      }
    },
    //附件上传成功
    async UploadSuccessEvent(data) {
      console.log(data);
      const { url, name } = data;
      if (url === "noToken") {
        await this.logout();
      } else {
        this.ruleForm.adjunct_name = name;
        this.ruleForm.adjunct = url;
        this.$message.success("附件上传成功!");
        this.$refs.ruleForm.validateField("adjunct");
      }
    },
    //判断附件规格
    beforeAvatarUpload(file) {
      console.log(file);
      let isJPG = false,
        isLt2M = false;
      if (file) {
        if (file.type === "application/pdf") {
          isJPG = true;
        }
        isLt2M = file.size / 1024 / 1024 < 1;
        if (!isJPG) {
          this.$message.error("附件格式不正确！");
        }
        if (!isLt2M) {
          this.$message.error("附件大小不能超过 1MB!");
        }
      }

      return isJPG && isLt2M;
    },
  },
};
</script>

<style lang="scss" scoped>
.bargain-list-exam-form {
  .exa {
    margin: 20px 0 0 30px;
    font-size: 14px;
    font-weight: bold;
  }

  .adjunct {
    position: relative;
    width: 100%;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    //
    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
    p {
      // width: calc(100% - 100px);
      width: 100%;
      padding: 0 10px;
      height: 38px;
      line-height: 38px;
      overflow: hidden;
      color: #606266;
      &.no {
        color: #c0c4cc;
      }
    }
    &.disabled {
      p {
        background-color: #f5f7fa;
        border-color: #dfe4ed;

        cursor: not-allowed;
        color: #c0c4cc;
      }
    }

    .Upload {
      z-index: 5;
      // width: ;
    }
    .yulan {
      position: absolute;
      width: 50px;
      text-align: center;
      right: 0;
      top: 0;
      cursor: pointer;
      // background: chocolate;
    }
  }
}
</style>
