<template>
  <el-form
    v-loading="loading"
    ref="ruleForm"
    :model="ruleForm"
    status-icon
    :rules="rulesThis"
    :label-width="labelWidth || '110px'"
    class="demo-ruleForm-goodsOnline"
    :size="'mini'"
  >
    <el-row>
      <el-col :span="12"
        ><el-form-item label="平台商品编码" prop="plat_code">
          <el-input
            v-model="ruleForm.plat_code"
            placeholder="平台商品编码"
            maxlength="50"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" class="tr">
        <el-button :size="'mini'" type="primary" @click="submitForm"
          >保 存
        </el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import costFormAddEdit from "./costFormAddEdit";
import asyncRequest from "@/apis/service/goodStore/goodsOnline";
export default {
  name: "exam-form",
  props: ["size", "statusList", "disabled", "isMust", "labelWidth", "id"],
  components: {
    costFormAddEdit,
  },
  /**
   * 属性集合
   * @param {String}        size             : 组件大小             非必填
   * @param {Array}         statusList       : 驳回至备选项          必填
   * @param {Boolean}       disabled         : 是否禁用              必填
   * @param {Boolean}       isMust           : 是否需要展示驳回节点   必填
   *
   *
   */
  /**
   * 事件集合
   * @searchChange             : 选中值变化调用   抛出选中数据
   */
  data() {
    return {
      loading: false,

      showModelThis: this.showModel,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 60 * 60 * 24 * 1000;
        },
      },

      ruleForm: {
        plat_code: "",
      },
      rulesThis: this.rules,
      rules: {
        plat_code: [
          {
            required: true,
            message: "平台商品编码不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      this.loading = true;
      this.rulesThis = this.rules;
      await this.resetForm();
      this.loading = false;
    },

    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();

          this.ruleForm = {
            plat_code: "",
          };
        }
      });
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let model = JSON.parse(JSON.stringify(this.ruleForm));
          // 刷新
          this.$emit("resSuccess", model);
          // this.routeReGoto("goodsOnline", {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //图片上传成功
    async UploadSuccessEventproof_url(data) {
      const { url } = data;
      if (url === "noToken") {
        await this.logout();
      } else {
        this.ruleForm.proof_url = url;
        this.$refs.ruleForm.validateField("proof_url");
        this.$message.success("图片上传成功!");
      }
    },

    //图片上传失败
    UploadErrorEventproof_url(res) {
      if (res !== "break") {
        this.$message.error("图片上传失败!");
        this.$refs.ruleForm.validateField("proof_url");
      }
    },

    //判断图片规格
    beforeAvatarUpload(file) {
      let isJPG = false;
      if (
        file.type === "image/jpg" ||
        file.type === "image/png" ||
        file.type === "image/jpeg"
      ) {
        isJPG = true;
      }
      const 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>
.demo-ruleForm-goodsOnline {
  .shangchuan-ul {
    li {
      position: relative;
      width: 100%;
      &.tupian {
      }
    }
  }
}
</style>