<template>
  <div class="container">
    <el-dialog
      :visible.sync="dialogvisible"
      width="60%"
      @close="closeDialogHandle"
    >
      <div class="dialogInfo">
        <div class="dialogInfoLeft">
          <el-form
            :model="formData"
            :rules="uploadFormRules"
            ref="formData"
            label-position="left"
            label-width="150px"
          >
            <el-form-item
              label-width="0"
              style="display: flex;justify-content: center"
              prop="img"
            >
              <UpLoad
                @getUploadData="getUploadDataHandle"
                :certificateId="certificateId"
                :updateImgUrl="updateImgUrl"
                ref="uploadRef"
                @changeLoadingTrue="changeLoadingTrueHandle"
                @changeLoadingFlase="changeLoadingFlaseHandle"
              />
            </el-form-item>
            <el-form-item label="商品大类：" prop="productCate1Name">
              {{formData.productCate1Name}}
            </el-form-item>
            <el-form-item label="商品中类：" prop="productCate2Name">
               {{formData.productCate2Name}}
            </el-form-item>
            <el-form-item label="证件类型：" prop="certificateId">
              <el-radio-group v-model="formData.certificateId" disabled>
                <el-radio label="1">商品资质</el-radio>
                <el-radio label="2">供应商资质</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="证件名称：商品名+" prop="name">
              <el-input v-model="formData.name" placeholder="请输入证件名称" />
            </el-form-item>
            <el-form-item label="统一社会信用代码：">
              <el-input
                v-model.number="formData.code"
                placeholder="请输入统一社会信用代码："
              />
            </el-form-item>
            <el-form-item label="设置提醒日期：">
              <el-date-picker
                v-model="formData.remindTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                @change="changeDataHandle"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <div
          class="dialogInfoRight"
          v-loading="distinguishLoading"
          element-loading-text="识别中..."
        >
          <span v-if="imgPrms.name">名称：{{ imgPrms.name }}</span>
          <span v-if="imgPrms.type">类型：{{ imgPrms.type }}</span>
          <span v-if="imgPrms.owner">法定代表人：{{ imgPrms.owner }}</span>
          <span v-if="imgPrms.code">统一社会信用代码：{{ imgPrms.code }}</span>
          <span v-if="imgPrms.createMoney"
            >注册资本：{{ imgPrms.createMoney }}</span
          >
          <span v-if="imgPrms.createDate"
            >成立日期：{{ imgPrms.createDate }}</span
          >
          <span v-if="imgPrms.yyqx">营业期限：{{ imgPrms.yyqx }}</span>
          <span v-if="imgPrms.address">住所：{{ imgPrms.address }}</span>
          <span v-if="imgPrms.around">经营范围：{{ imgPrms.around }}</span>
        </div>
      </div>

      <div class="dialog-footer">
        <el-button @click="saveDetail('formData')" type="primary"
          >确定</el-button
        >
        <el-button @click="closeDialogHandle">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Const from "@/api/Const.js";
import UpLoad from "@/components/UpLoad.vue";
export default {
  name: "LookImgDetailComponent",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    currentObj: {
      type: Object,
      default: () => {}
    },
    type: {
      type: String,
      default: ""
    },
    parentId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      dialogvisible: false,
      distinguishLoading: false,
      imgPrms: {},
      updateImgUrl: "",
      formData: {
        productCate1Name: "",
        productCate2Name: "",
        productId: "",
        certificateId: "",
        name: "",
        remindTime: "",
        code: "",
        img: ""
      },
      certificateId: "",
      uploadFormRules: {
        img: [{ required: true, message: "请上传证件", trigger: "blur" }],
        certificateId: [
          { required: true, message: "请选择证件类型", trigger: "blur" }
        ],

        name: [{ required: true, message: "请输入证件名称", trigger: "blur" }]
      }
    };
  },
  watch: {
    visible: {
      handler(newValue, oldValue) {
        this.dialogvisible = newValue;
      }
    },
    currentObj: {
      handler(newValue, oldValue) {
        this.formData = JSON.parse(
          JSON.stringify({
            productCate1Name: newValue.productCate1Name,
            productCate2Name: newValue.productCate2Name,
            productId: newValue.productId,
            certificateId: newValue.certificateId,
            name: newValue.productionName,
            remindTime: newValue.remindTime,
            code: newValue.code,
            pngImg: newValue.pngImg,
            img: newValue.img
          })
        );
        if (newValue.img) {
          this.updateImgUrl = this.formData.pngImg;
        }
        this.certificateId = this.formData.certificateId;
      },
      deep: true
    }
  },
  methods: {
    closeDialogHandle() {
      this.dialogVisible = false;
      this.imgPrms = {};
      this.updateImgUrl = "";
      this.certificateId = "";
      this.$refs.uploadRef.reset();
      this.$emit("update:visible", false);
      this.$emit("update:currentObj", {});
    },
    saveDetail(formName) {
      var that = this
      if (this.type === "edit") {
        this.formData.id = this.parentId;
      } else {
        delete this.formData.id;
      }

      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios
            .get(Const.api.save_product_data, {
              params: this.formData
            })
            .then(res => {
              if (res.data.code == 0) {
                this.$message({
                  message: "保存成功！",
                  type: "success"
                });
                this.$axios.get(Const.api.saveOprateLog,{
                  params:{
                    model:'商品档案管理',
                    oprate: that.type==="edit"?'修改':'新增'
                  }
                });
                this.dialogVisible = false;
                this.$emit("update:visible", false);
                this.$emit("reload");
                // location.reload();


              } else {
                 this.$message({
                   message: "保存失败！",
                   type: "warm"
                 });
              }
            });
        } else {
          return false;
        }
      });
    },
    getUploadDataHandle(data) {
      if (data.info) {
        this.imgPrms = data.info;
      } else {
        this.imgPrms = {};
      }
      if (data.img) {
        this.formData.img = data.img;
      } else {
        this.formData.img = "";
      }
    },
    changeLoadingTrueHandle() {
      this.distinguishLoading = true;
    },
    changeLoadingFlaseHandle() {
      this.distinguishLoading = false;
    },
    changeDataHandle() {
      if (!date) {
        this.formData.remindTime = "";
      } else {
        this.formData.remindTime = date;
      }
    }
  },
  components: {
    UpLoad
  }
};
</script>

<style lang="scss" scoped>
.upflieBox {
  .fileBox {
    display: flex;
    .formBox {
      width: 70%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      // align-items: center;
      .uploadImage {
        width: 100%;
        margin: 10px 10px 20px 10px;
      }
    }
    .rightText {
      width: 170%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      margin: 0 20px 40px 20px;
      border-radius: 10px;
      p {
        padding: 10px 20px;
        font-size: 18px;
        font-weight: 700;
      }
    }
  }
}
.dialogInfo {
  display: flex;
  > div {
    padding: 0 20px;
    flex: 1;
    &.dialogInfoRight {
      display: flex;
      flex-direction: column;
      padding: 30px;
      display: flex;
      flex-direction: column;
      margin-left: 40px;
      flex: 1;
      border: 1px dashed #dadbdc;
      border-radius: 30px;
      overflow: hidden;
      > span {
        font-weight: 700;
        font-size: 18px;
        line-height: 38px;
      }
    }
  }
}
.dialog-footer {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
.dialogVisibleBtns {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .el-button {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    i.el-icon-sort {
      transform: rotateZ(90deg) !important;
    }
  }
}
</style>