<template>
  <div>
    <BaseDialog
      width="900px"
      :isShow.sync="isCompanyDialog"
      :title="dialogTitle"
      @close="close"
      @submit="submitForm"
      :appendToBody="true"
      :confirmStatus="false"
    >
      <div class="content">
        <div class="left-box">
          <el-form
            label-position="right"
            label-width="80px"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
          >
            <el-form-item label="企业名称" prop="companyName">
              <el-input
                v-model="ruleForm.companyName"
                placeholder="请输入企业名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="企业类型" prop="companyType">
              <el-select v-model="ruleForm.companyType" placeholder="请选择">
                <el-option
                  v-for="(item, index) in getCompanyTypeList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="信用代码" prop="creditCode">
              <el-input
                v-model="ruleForm.creditCode"
                placeholder="请输入信用代码"
              ></el-input>
            </el-form-item>
            <el-form-item label="注册资本" prop="registeredCapital">
              <el-input
                style="width: 120px"
                v-model="ruleForm.registeredCapital"
                placeholder="请输入注册资本"
              ></el-input>
              万元（人民币）
            </el-form-item>
            <el-form-item label="法定代表" prop="legalRepresentative">
              <el-input
                v-model="ruleForm.legalRepresentative"
                placeholder="请输入法定代表"
              ></el-input>
            </el-form-item>
            <el-form-item label="企业地址" prop="companyAddress">
              <el-input
                v-model="ruleForm.companyAddress"
                placeholder="请输入企业地址"
              ></el-input>
            </el-form-item>
            <el-form-item label="成立日期" prop="establishDate">
              <el-date-picker
                v-model="ruleForm.establishDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="营业期限" prop="operateDate">
              <el-date-picker
                style="width: 155px"
                v-model="ruleForm.operateDate"
                type="date"
                placeholder="选择日期"  
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
                :disabled="ruleForm.longFlag == 1"
              >
              </el-date-picker>
              <el-checkbox
                style="margin-left: 10px;"
                v-model="ruleForm.longFlag"
                :true-label="1"
                :false-label="0"
              >
                长期
              </el-checkbox>
            </el-form-item>
            <el-form-item label="登记机关" prop="registrationAuthority">
              <el-input
                v-model="ruleForm.registrationAuthority"
                placeholder="请输入登记机关"
              ></el-input>
            </el-form-item>
            <el-form-item label="经营范围" prop="experienceScope">
              <el-input
                type="textarea"
                :rows="4"
                v-model="ruleForm.experienceScope"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div
          style="
            width: 1px;
            height: 600px;
            background: #dddddd;
            align-self: center;
          "
        ></div>
        <div class="right-box">
          <el-form
            label-position="right"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="80px"
          >
            <el-form-item label="联系人" prop="companyContacts">
              <el-input
                v-model="ruleForm.companyContacts"
                placeholder="请输入联系人"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="contactPhone">
              <el-input
                v-model="ruleForm.contactPhone"
                placeholder="请输入联系电话"
              ></el-input>
            </el-form-item>
            <el-form-item label="所属部门" prop="department">
              <el-input
                v-model="ruleForm.department"
                placeholder="请输入所属部门"
              ></el-input>
            </el-form-item>
            <el-form-item label="所属岗位" prop="position">
              <el-input
                v-model="ruleForm.position"
                placeholder="请输入所属岗位"
              ></el-input>
            </el-form-item>
            <el-form-item label="营业执照" props="businessImg">
              <div
                style="
                  width: 230px;
                  height: 170px;
                  border: 2px dashed #999;
                  border-radius: 15px;
                  line-height: 170px;
                  text-align: center;
                "
                v-if="!ruleForm.businessImg"
              >
                <label for="businessImg" @click="uploadImg">
                  <i class="el-icon-circle-plus-outline iconStsz"></i>
                </label>
              </div>

              <div v-else class="img">
                <el-image
                  style="width: 200px; height: 180px; object-fit: contain;"
                  :src="$methodsTools.splitImgHost(ruleForm.businessImg)"
                  :preview-src-list="[
                    $methodsTools.splitImgHost(ruleForm.businessImg),
                  ]"
                >
                </el-image>
                <div class="sign" @click="clearImgs()">X</div>
              </div>
              <p style="color: #999">（支持格式：jpg、jpeg、png、gif）</p>
            </el-form-item>
            <el-form-item label="备注" prop="companyRemarks">
              <el-input
                type="textarea"
                :rows="4"
                v-model="ruleForm.companyRemarks"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </BaseDialog>
  </div>
</template>
  
<script>
import { addCompany, updateCompany } from '@/api/company';
import { getCompanyTypeList } from "@/views/companyManagement/component/typeList";
export default {
  data() {
    return {
      rules: {
        companyName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        companyType: [
          { required: true, message: "企业类型", trigger: "change" },
        ],
      },
      ruleForm: {
        companyName: ''
      },
      isCompanyDialog: false,
      dialogTitle: "新增",
      isOperateDate: false, // 营业期限是否为长期
      getCompanyTypeList: getCompanyTypeList()
    };
  },

  mounted() {
  },

  methods: {
    openBoxs(row, type) {
      this.isCompanyDialog = true;
      if (type === "add") {
        this.dialogTitle = "新增公司";
        this.ruleForm = {}
        return;
      }
      this.dialogTitle = "修改公司";
      this.ruleForm = JSON.parse(JSON.stringify(row));
      this.ruleForm.establishDate = this.$methodsTools.timestampTo1013('show', this.ruleForm.establishDate)
      this.ruleForm.operateDate = this.$methodsTools.timestampTo1013('show', this.ruleForm.operateDate)
    },
    submitForm() {
      this.ruleForm.establishDate = this.$methodsTools.timestampTo1013('save', this.ruleForm.establishDate)
      this.ruleForm.operateDate = this.$methodsTools.timestampTo1013('save', this.ruleForm.operateDate)
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          const _request = this.dialogTitle === "新增公司" ? addCompany : updateCompany;
          _request(this.ruleForm).then(res => {
            this.$message.success(res.msg);
            this.isCompanyDialog = false;
            this.$emit('refresh')
          }).finally(() => {
            return false;
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    close() {
    },
    // 上传主图操作
    async uploadImg(e) {
      // console.log(this.$methodsTools.submitUpload(1).then(res => res), 'submitUpload')
      this.$set(this.ruleForm, 'businessImg', await this.$methodsTools.submitUpload(1).then(res => res))
    },
    // 清除上传图片
    clearImgs() {
        this.$set(this.ruleForm, 'businessImg', "")
    },
  },
};
</script>
  
<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
.img {
  text-align: center;
  position: relative;
  margin-top: 5px;

  .sign {
    z-index: 9;
    top: -15px;
    right: -15px;
    position: absolute;
    border-radius: 50%;
    font-size: 14px;
    transform: scale(0.7);
    color: red;
    background: #fafafa;
    font-weight: bold;
    padding:0 13px;
    cursor: pointer;
    &:hover {
      background: red;
      color: #fafafa;
    }
  }
}
</style>