<template>
  <el-drawer
    :title="controlWindows.addInfo.title"
    direction="ltr"
    size="50%"
    :visible.sync="controlWindows.attestation"
    @opened="openDrawer"
    :before-close="closeWindow"
  >
    <div class="attestation">
      <el-form ref="form" :rules="rules" :model="form" label-width="100px">
        <el-row :gutter="2">
          <el-col :span="12">
            <el-form-item label="企业名称" prop="companyName">
              <el-input
                disabled
                v-model="form.companyName"
                placeholder="企业名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册省市区" prop="abbreviaName">
              <el-cascader
                placeholder="注册省市区"
                :options="areaTree"
                :props="{
                  value: 'id',
                  label: 'areaName',
                  children: 'childList',
                }"
                filterable
                clearable
                @change="changeAddress"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址" prop="address">
              <el-input
                v-model="form.address"
                clearable
                placeholder="不包含省市区"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册资本" prop="registeredCapital">
              <el-input
                v-model="form.registeredCapital"
                clearable
                placeholder="小写数字"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经营资质" prop="businessQualia">
              <el-input
                v-model="form.businessQualia"
                clearable
                placeholder="企业经营资质"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="contactPhone">
              <el-input
                v-model="form.contactPhone"
                clearable
                placeholder="联系方式"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业网址" prop="website">
              <el-input
                v-model="form.website"
                clearable
                placeholder="企业网址"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="营业执照号码" prop="businessLienceId">
              <el-input
                v-model="form.businessLienceId"
                clearable
                placeholder="营业执照号码"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item label="营业执照照片" prop="businessLienceImg">
              <el-input
                v-model="form.businessLienceId"
                clearable
                placeholder="营业执照号码"
              />
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="经营范围" prop="businessScope">
              <el-input
                v-model="form.businessScope"
                type="textarea"
                clearable
                placeholder="经营范围"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="营业执照照片" prop="businessLienceImg">
              <el-upload
                :action="uploadUrl"
                :data="{
                  ossKey: 'xingyou',
                  pathKey: 'other',
                  encrypt: 'PUBLIC',
                  code: 'A003',
                }"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                :before-upload="beforeHandle"
                :limit="1"
                :file-list="fileList"
              >
                <i class="el-icon-plus" />
              </el-upload>
              <el-dialog :visible.sync="imgDialog" :modal="false">
                <img width="100%" :src="form.businessLienceImg" alt="" />
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="buttons">
      <el-button @click="closeWindow">取消 </el-button>
      <el-button @click="submit">提交</el-button>
    </div>
  </el-drawer>
</template>
<script>
import serve from "api/customerManagement/companyManagement.js";
import commonServe from "api/common.js";

import autocomplete from "components/autocomplete/index.vue";
export default {
  components: {
    autocomplete,
  },
  props: {
    controlWindows: Object,
  },
  data() {
    let validatorParentId = (rule, value, callback) => {
      if (this.form.parentId) callback();
      else callback("请选择企业");
    };
    return {
      uploadUrl:
        process.env.VUE_APP_ENV === "development"
          ? "/api/lsm/ocr/business"
          : "/adminapi/oil-oss/obejct/uploadFile",
      fileList: [],
      imgDialog: false,
      areaTree: [],
      form: {},
      rules: {
        parentMark: [
          { required: true, message: "请选择是否主体公司", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.getTree();
  },
  methods: {
    changeAddress(val) {
      this.form.provinceCode = val[0] || "";
      this.form.cityCode = val[1] || "";
      this.form.areaCode = val[2] || "";
    },
    openDrawer() {
      // this.form = JSON.parse(JSON.stringify(this.controlWindows.addInfo));
      let { auditMark, title, companyId } = this.controlWindows.addInfo;
      if (auditMark != 0) {
        //回显
      } else {
        this.form = { auditMark, title, companyId };
      }
    },

    getTree() {
      serve.getTree().then((res) => {
        this.areaTree = res.data;
      });
    },

    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = {
            auditMark: this.form.auth ? 1 : 2,
            ...this.form,
          };

          this.judgeInterface(params).then((res) => {
            this.$message.success(res.msg);
            this.closeWindow();
          });
        }
      });
    },
    judgeInterface(form) {
      let { auditMark } = this.controlWindows.addInfo;
      if (auditMark != 0) return serve.updateAttestation(form);
      else return serve.saveAttestation(form);
    },
    beforeHandle(file) {
      if (file.type.indexOf("image/") === -1) {
        this.$message.error("上传的文件不是图片格式!");
        return false;
      } else if (file.size / 1024 / 1024 > 5) {
        this.$message.error("上传图片大小不能超过 5MB!");
        return false;
      }
      return true;
    },

    //img大图
    handlePictureCardPreview(file) {
      this.form.businessLienceImg = file.url;
      this.imgDialog = true;
    },
    // img remove
    handleRemove(file, fileList) {
      this.form.businessLienceImg = "";
    },
    // 上传成功
    handleSuccess(response, file, fileList) {
      if (response.code !== 20000) {
        this.$message.error(response.msg);
        this.fileList = [];
        return;
      }
      console.log("response", response);
      this.form.businessLienceImg = response.data.publicUrl;
    },
    closeWindow() {
      this.$emit("closeWindow");
      this.form = {};
      this.fileList = [];
      this.controlWindows.addInfo = {};
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
        this.controlWindows.attestation = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.attestation {
  padding: 20px;
  .el-input,
  .el-select,
  .el-cascader,
  .el-autocomplete {
    width: 230px;
  }
  // .el-textarea {
  //   width: 100%;
  // }
}
.buttons {
  position: absolute;
  left: 0;
  bottom: 0;
  padding-right: 40px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: right;
  border-top: 1px solid #f2f3f5;
  .el-button {
    text-align: right;
    font-size: 14px;
    border-radius: 5px;
  }
}
</style>
