<template>
  <!-- 项目信息页面 -->
  <div class="main-content whiteBlock">
    <div class="btn_wrap">
      <el-button type="primary" size="medium" @click="openInfoDialog"
        >基本信息填报</el-button
      >
    </div>
    <div class="custom_tab">
      <div class="flex4">
        <div class="type_content" style="z-index: 2">
          <div class="flex3">
            <!-- <span class="width_35">{{
              $t("message.qualificationApply.companyName")
            }}</span> -->
            <span class="width_35">企业名称</span>
            <span class="width_65">{{ supplierDetail.enterpriseName }}</span>
          </div>
          <div class="flex3">
            <span class="width_35 bg_color">企业类型</span>
            <span class="width_65 bg_color">{{
              supplierDetail.companyTypeName
            }}</span>
          </div>
          <div class="flex3">
            <span class="width_35">开户行</span>
            <span class="width_65">{{ supplierDetail.bankname }}</span>
          </div>
          <div class="flex3">
            <span class="width_35 bg_color">注册人申请电话</span>
            <span class="width_65 bg_color">{{
              supplierDetail.registerPersonPhoneTel
            }}</span>
          </div>
          <div class="flex3">
            <span class="width_35">法人电话</span>
            <span class="width_65">{{ supplierDetail.legalPersonTel }}</span>
          </div>
          <div class="flex3">
            <span class="width_35 bg_color">营业执照截止日期</span>
            <span class="width_65 bg_color">{{
              supplierDetail.businessLicenseEndDate
            }}</span>
          </div>
          <div class="flex3">
            <span class="width_35">企业邮箱</span>
            <span class="width_65">{{ supplierDetail.enterpriseEmail }}</span>
          </div>
          <div class="flex3">
            <span class="width_35 bg_color">劳资证书号</span>
            <span class="width_65 bg_color">{{
              supplierDetail.qualificationNumber
            }}</span>
          </div>
          <div class="flex3">
            <span class="width_35">单位性质</span>
            <span class="width_65" style="white-space: nowrap">{{
              supplierDetail.enterpriseProperty == 1
                ? "国有企业"
                : supplierDetail.enterpriseProperty == 2
                ? "三资企业"
                : supplierDetail.enterpriseProperty == 3
                ? "集体企业"
                : supplierDetail.enterpriseProperty == 4
                ? "私营企业"
                : ""
            }}</span>
          </div>
          <div class="flex3">
            <span class="width_35 bg_color">项目负责人</span>
            <span class="width_65 bg_color">{{
              supplierDetail.projectDirectorName
            }}</span>
          </div>
        </div>
        <div class="type_content">
          <div class="flex3">
            <span class="width_35 border_l">资质图片</span>
            <span class="width_65"
              ><img
                :src="supplierDetail.enterpriseQualificationUrl"
                style="
                          width: 40px;
                          height: 40px;
                          margin-top: 2px;
                          cursor: pointer;
                        "
                @click="
                  bigImageDialog = true;
                  bigImageUrl = supplierDetail.enterpriseQualificationUrl;
                "
            /></span>
          </div>
          <div class="flex3">
            <span class="width_35 bg_color border_l">法定代表人</span>
            <span class="width_65 bg_color">{{
              supplierDetail.enterpriseLegalPerson
            }}</span>
          </div>
          <div class="flex3">
            <span class="width_35 border_l">统一社会信用代码</span>
            <span class="width_65">{{ supplierDetail.socialCode }}</span>
          </div>
          <div class="flex3">
            <span class="width_35 bg_color border_l">注册资金(万元)</span>
            <span class="width_65 bg_color">{{
              supplierDetail.registeredCapital
            }}</span>
          </div>
          <div class="flex3">
            <span class="width_35 border_l">银行账号</span>
            <span class="width_65">{{ supplierDetail.bankcardnumber }}</span>
          </div>
          <div class="flex3">
            <span class="width_35 bg_color border_l">营业执照注册号</span>
            <span class="width_65 bg_color">{{
              supplierDetail.businessNumber
            }}</span>
          </div>
          <div class="flex3">
            <span class="width_35 border_l">企业地址</span>
            <span class="width_65">{{ supplierDetail.enterpriseAddress }}</span>
          </div>
          <div class="flex3">
            <span class="width_35 bg_color border_l">安全生产许可证</span>
            <span class="width_65 bg_color">{{
              supplierDetail.enterpriseSafeAllow
            }}</span>
          </div>
          <div class="flex3">
            <span class="width_35 border_l">logo</span>
            <span class="width_65"
              ><img
                :src="supplierDetail.logo"
                style="
                          width: 40px;
                          height: 40px;
                          margin-top: 2px;
                          cursor: pointer;
                        "
                @click="
                  bigImageDialog = true;
                  bigImageUrl = supplierDetail.logo;
                "
            /></span>
          </div>
          <div class="flex3">
            <span class="width_35 bg_color border_l">项目负责人电话</span>
            <span class="width_65 bg_color">{{
              supplierDetail.projectDirectorPhone
            }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 基本信息弹框 -->
    <el-dialog
      class="projectDialog"
      :title="infoDialogTitle"
      :visible.sync="addInfoDialog"
      width="1100px"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <div class="dialog_content">
        <el-form
          size="medium"
          :model="addInfoForm"
          ref="addInfoForm"
          :rules="addInfoFormRules"
          label-width="150px"
          class="dialogFormBox big"
          :inline="true"
        >
          <el-form-item label="项目负责人" prop="projectDirectorName">
            <el-input
              v-model="addInfoForm.projectDirectorName"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目负责人电话" prop="projectDirectorPhone">
            <el-input
              v-model="addInfoForm.projectDirectorPhone"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业名称" prop="enterpriseName">
            <el-input
              v-model="addInfoForm.enterpriseName"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="法定代表人" prop="enterpriseLegalPerson">
            <el-input
              v-model="addInfoForm.enterpriseLegalPerson"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业类型" prop="xzSupplierTypeId">
            <el-select
              v-model="addInfoForm.xzSupplierTypeId"
              :placeholder="$t('message.companyDiagram.PleaseSelect')"
            >
              <el-option
                v-for="item in companyTypeList"
                :key="item.id"
                :label="item.companyTypeName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="统一社会信用代码" prop="socialCode">
            <el-input
              v-model="addInfoForm.socialCode"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
              type="number"
            ></el-input>
          </el-form-item>
          <el-form-item label="开户行" prop="bankname">
            <el-input
              v-model.number="addInfoForm.bankname"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="注册资金(万元)" prop="registeredCapital">
            <el-input
              v-model.number="addInfoForm.registeredCapital"
              :placeholder="
                $t('message.companyDiagram.dialog_ProjectPop_up.placeholder')
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="注册人申请电话" prop="registerPersonPhoneTel">
            <el-input
              v-model.number="addInfoForm.registerPersonPhoneTel"
              :placeholder="
                $t('message.companyDiagram.dialog_ProjectPop_up.placeholder')
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="银行账号" prop="bankcardnumber">
            <el-input
              v-model.number="addInfoForm.bankcardnumber"
              :placeholder="
                $t('message.companyDiagram.dialog_ProjectPop_up.placeholder')
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="法人电话" prop="legalPersonTel">
            <el-input
              v-model.number="addInfoForm.legalPersonTel"
              :placeholder="
                $t('message.companyDiagram.dialog_ProjectPop_up.placeholder')
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="营业执照注册号" prop="businessNumber">
            <el-input
              v-model.number="addInfoForm.businessNumber"
              :placeholder="
                $t('message.companyDiagram.dialog_ProjectPop_up.placeholder')
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="营业执照截止日期" prop="businessLicenseEndDate">
            <el-date-picker
              v-model="addInfoForm.businessLicenseEndDate"
              type="date"
              placeholder="请选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="企业地址" prop="enterpriseAddress">
            <el-input
              v-model.number="addInfoForm.enterpriseAddress"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业邮箱" prop="enterpriseEmail">
            <el-input
              v-model.number="addInfoForm.enterpriseEmail"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="安全生产许可证" prop="enterpriseSafeAllow">
            <el-input
              v-model.number="addInfoForm.enterpriseSafeAllow"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="劳资证书号" prop="qualificationNumber">
            <el-input
              v-model.number="addInfoForm.qualificationNumber"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item label="单位性质" prop="enterpriseProperty">
            <el-select
              v-model="addInfoForm.enterpriseProperty"
              :placeholder="$t('message.companyDiagram.PleaseSelect')"
            >
              <el-option
                v-for="item in unitType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <br />
          <el-form-item
            label="资质照片"
            prop="enterpriseQualificationUrl"
          >
            <div style="width: 280px">
              <el-upload
                class="avatar-uploader"
                :action="$store.state.UPLOADURL"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :on-success="(file) => handleUploadSuccess(file, 1)"
                name="files"
              >
                <div v-if="addInfoForm.enterpriseQualificationUrl" class="imgBox">
                  <img :src="addInfoForm.enterpriseQualificationUrl" class="avatar" />
                  <i
                    class="el-icon-error redText"
                    @click.stop="addInfoForm.enterpriseQualificationUrl = ''"
                  ></i>
                </div>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item
            label="logo"
            prop="logo"
          >
            <el-upload
              class="avatar-uploader"
              :action="$store.state.UPLOADURL"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :on-success="(file) => handleUploadSuccess(file, 2)"
              name="files"
            >
              <div v-if="addInfoForm.logo" class="imgBox">
                <img :src="addInfoForm.logo" class="avatar" />
                <i
                  class="el-icon-error redText"
                  @click.stop="addInfoForm.logo = ''"
                ></i>
              </div>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <div class="dialog-footer">
            <el-button
              class="cancleBtn"
              @click="addInfoDialog = false"
              icon="el-icon-circle-close"
              size="medium"
              >{{ $t("message.companyDiagram.cancel") }}</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="saveInfoFn"
              size="medium"
              >{{ $t("message.companyDiagram.determine") }}</el-button
            >
          </div>
        </el-form>
      </div>
    </el-dialog>
    <!-- 查看大图 -->
    <el-dialog
      :modal-append-to-body="false"
      title="查看大图"
      :visible.sync="bigImageDialog"
    >
      <img width="100%" :src="bigImageUrl" alt />
    </el-dialog>
  </div>
</template>
<script>
import { getSupplierInfoApi, getCompanyTypeApi, infoReportSaveApi } from "@/assets/js/api/supplier.js";
export default {
  name: "baseInfo",
  data() {
    return {
      infoDialogTitle: "基本信息填报",
      addInfoDialog: false,
      addInfoForm: {
        enterpriseName: "",
        enterpriseQualificationUrl: "",
        companyTypeName: "",
        xzSupplierTypeId: "",
        enterpriseLegalPerson: "",
        bankname: "",
        socialCode: "",
        registerPersonPhoneTel: "",
        registeredCapital: "",
        legalPersonTel: "",
        bankcardnumber: "",
        businessLicenseEndDate: "",
        businessNumber: "",
        enterpriseEmail: "",
        enterpriseAddress: "",
        qualificationNumber: "",
        enterpriseSafeAllow: "",
        enterpriseProperty: "",
        logo: "",
        projectDirectorName: "",
        projectDirectorPhone: "",
      },
      supplierDetail: {
        enterpriseName: "",
        enterpriseQualificationUrl: "",
        companyTypeName: "",
        xzSupplierTypeId: "",
        enterpriseLegalPerson: "",
        bankname: "",
        socialCode: "",
        registerPersonPhoneTel: "",
        registeredCapital: "",
        legalPersonTel: "",
        bankcardnumber: "",
        businessLicenseEndDate: "",
        businessNumber: "",
        enterpriseEmail: "",
        enterpriseAddress: "",
        qualificationNumber: "",
        enterpriseSafeAllow: "",
        enterpriseProperty: "",
        logo: "",
        projectDirectorName: "",
        projectDirectorPhone: "",
      },
      addInfoFormRules: {
        projectDirectorName: [
          {
            required: true,
            message: '请输入',
            trigger: "blur",
          },
        ],
        projectDirectorPhone: [
          {
            required: true,
            message: '请输入',
            trigger: "blur",
          },
        ],
        enterpriseName: [
          {
            required: true,
            message: '请输入',
            trigger: "blur",
          },
        ],
        enterpriseLegalPerson: [
          {
            required: true,
            message: '请输入',
            trigger: "blur",
          },
        ],
        xzSupplierTypeId: [
          {
            required: true,
            message: '请选择',
            trigger: "change",
          },
        ],
        socialCode: [
          {
            required: true,
            message: '请输入',
            trigger: "blur",
          },
        ]
      },
      bigImageDialog: false,
      bigImageUrl: "",
      unitType: [
        {id: 1, name: '国有企业'},
        {id: 2, name: '三资企业'},
        {id: 3, name: '集体企业'},
        {id: 4, name: '私营企业'},
      ],
      companyTypeList: [],
    };
  },
  created() {
    this.getBasicInfo();
    this.getCompanyTypeList();
  },
  props: ["activeTabName"],
  methods: {
    // 打开信息填报弹窗
    openInfoDialog(){
      this.addInfoForm = {...this.supplierDetail}
      this.addInfoDialog = true
      // this.$nextTick(() => {
      //   // this.$refs.addInfoForm.resetFields();
      // })
    },
    // 获取企业类型列表
    getCompanyTypeList(){
      getCompanyTypeApi({}).then((res) => {
        console.log(res, "企业类型列表");
        if(res.result){
          this.companyTypeList = res.result;
        }
      });
    },
    // 获取基本信息
    getBasicInfo() {
      getSupplierInfoApi({
        userId: this.$store.state.userInfo.userId,
      }).then((res) => {
        console.log(res, "基本信息");
        if (res.result) {
          for(let i in this.supplierDetail){
            this.supplierDetail[i] = res.result[i]
          }
        }
      });
    },
    // 文件上传前
    beforeAvatarUpload(file) {
      if (
        file.type != "image/jpeg" &&
        file.type != "image/png" &&
        file.type != "image/jpg" &&
        file.type != "image/bmp"
      ) {
        this.$message.error(this.$t("message.companyDiagram.uploadMsg")); //只能上传图片
        return false;
      } else {
        return true;
      }
    },
    //文件上传成功
    handleUploadSuccess(res, type) {
      console.log(res);
      if (type == 1) {
        this.addInfoForm.enterpriseQualificationUrl =
          this.$store.state.FILEURL + res.data[0].imageUrl;
      } else {
        this.addInfoForm.logo =
          this.$store.state.FILEURL + res.data[0].imageUrl;
      }
    },
    //编辑保存项目
    saveInfoFn() {
      this.$refs["addInfoForm"].validate((valid) => {
        if (valid) {
          let requestData = {
            ...this.addInfoForm,
            userId: this.$store.state.userInfo.userId,
          }
          infoReportSaveApi(requestData).then((res) => {
            console.log(res,'信息保存成功')
            this.addInfoDialog = false;
            this.getBasicInfo();
            this.$message.success(
              this.$t("message.companyDiagram.editSuccess")
            ); //编辑成功！
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  watch: {
    activeTabName(newValue) {
      if(newValue == 'first'){
        this.getBasicInfo();
        this.getCompanyTypeList();
      }
    }
  }
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex2 {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.flex3 {
  display: flex;
  align-items: center;
}
.flex4 {
  display: flex;
  justify-content: space-between;
}
.flex5 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-content {
  width: 100%;
  height: 100%;
  // background: #ffffff;
  box-sizing: border-box;
  .btn_wrap {
  }
  .custom_tab {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(148, 148, 148, 0.5);
    border-bottom: none;
    margin-top: 20px;
    // color: #333;
    .title {
      width: 100%;
      font-size: 14px;
      padding: 12px 20px;
      border-bottom: 1px solid rgba(148, 148, 148, 0.5);
      box-sizing: border-box;
      height: 44px;
      background: #eeeeee;
    }

    .type_content {
      width: 50%;
      div {
        font-size: 14px;
        padding: 12px 0;
        height: 44px;
        line-height: 44px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(148, 148, 148, 0.5);
      }
    }

    .width_65 {
      width: 80%;
      display: inline-block;
      box-sizing: border-box;
      height: 44px;
      padding: 0 15px;
    }
    .width_35 {
      width: 20%;
      display: inline-block;
      box-sizing: border-box;
      border-right: 1px solid rgba(148, 148, 148, 0.5);
      padding: 0 15px;
      text-align: left;
    }
  }
  .bg_color {
    background: rgba(235, 234, 234, 0.5);
    display: inline-block;
    box-sizing: border-box;
  }
  .border_l {
    border-left: 1px solid rgba(148, 148, 148, 0.5);
  }
  /deep/ .el-dialog {
    margin-top: 10vh !important;
  }

  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    // overflow: hidden;
    height: 178px;
    width: 178px;
  }

  .avatar-uploader:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .imgBox {
    position: relative;

    .el-icon-error {
      font-size: 20px;
      position: absolute;
      right: -10px;
      top: -10px;
      cursor: pointer;
    }
  }
}
.dialogFormBox.big{
  width: 900px;
}
::v-deep .el-input__inner {
  line-height: 1px !important;
}
</style>
