<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      width="1200px"
      :visible.sync="showDialog"
      :before-close="cancel"
      :close-on-click-modal="false"
    >
      <el-steps
        :active="active - 0"
        finish-status="success"
        v-if="dialogTitle === '添加'"
      >
        <el-step title="基本信息" icon="el-icon-warning-outline"></el-step>
        <el-step title="补充信息" icon="el-icon-more"></el-step>
      </el-steps>
      <el-tabs v-model="active" v-else :before-leave="leaveTab">
        <el-tab-pane label="基本信息" name="0"></el-tab-pane>
        <el-tab-pane label="补充信息" name="1"></el-tab-pane>
      </el-tabs>
      <el-form
        v-if="active == 0"
        :model="form"
        :rules="rules"
        ref="form"
        label-width="130px"
        label-position="right"
        class="marTop"
      >
        <div class="flex">
          <el-form-item label="账号名称" prop="username" style="flex: 0.5">
            <el-input
              v-model.trim="form.username"
              placeholder="请输入账号名称（企业简称）"
            />
          </el-form-item>
          <el-form-item label="密码" prop="password" style="flex: 0.5">
            <el-input show-password v-model.trim="form.password" />
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="管理员姓名" prop="nickname" style="flex: 0.5">
            <el-input v-model.trim="form.nickname" />
          </el-form-item>
          <el-form-item label="管理人手机号" prop="phone" style="flex: 0.5">
            <el-input
              v-model.trim="form.phone"
              maxlength="11"
              show-word-limit
            />
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item
            label="企业全称"
            prop="enterpriseFullName"
            style="flex: 0.5"
          >
            <el-input v-model.trim="form.enterpriseFullName" />
          </el-form-item>
          <!-- <el-form-item
            label="企业简称"
            prop="enterpriseSimpleName"
            style="flex: 0.5"
          >
            <el-input v-model.trim="form.enterpriseSimpleName" />
          </el-form-item> -->
          <el-form-item label="详细地址" prop="address" style="flex: 0.5">
            <el-input v-model.trim="form.address" />
          </el-form-item>
        </div>
        <el-form-item label="是否可被搜索" prop="isCanSearch">
          <el-radio-group v-model="form.isCanSearch">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item
          v-if="isOpenPrivateArea === 1"
          label="是否开启私有区域"
          style="flex: 0.5"
          prop="isOpenPrivateArea"
        >
          <el-radio-group v-model="form.isOpenPrivateArea">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="2">停用</el-radio>
          </el-radio-group>
        </el-form-item>-->
      </el-form>
      <el-form
        v-if="active == 1"
        :model="form"
        :rules="rules"
        ref="form"
        label-width="120px"
        label-position="right"
        class="marTop"
      >
        <div class="flex">
          <el-form-item
            label="实际控制人姓名"
            prop="actualName"
            style="flex: 0.5"
          >
            <el-input v-model.trim="form.actualName" />
          </el-form-item>
          <el-form-item
            label="实际控制人电话"
            prop="actualPhone"
            style="flex: 0.5"
          >
            <el-input
              v-model.trim="form.actualPhone"
              maxlength="11"
              show-word-limit
            />
          </el-form-item>
        </div>

        <div class="flex">
          <el-form-item label="公司代码" prop="companyCode" style="flex: 0.5">
            <el-input v-model.trim="form.companyCode" />
          </el-form-item>

          <!-- <el-form-item label="公司规模" prop="companySize" style="flex: 0.5">
            <el-input v-model.trim="form.companySize" />
          </el-form-item> -->

          <el-form-item label="公司法人" prop="legalPerson" style="flex: 0.5">
            <el-input v-model.trim="form.legalPerson" />
          </el-form-item>
        </div>
        <!-- <el-form-item label="营业执照" prop="img">
          <div class="upload">
            <el-image
              v-if="form.img"
              class="img"
              style="width: 100px; height: 100px"
              :src="form.img"
              fit="contain"
            >
            </el-image>
            <div class="deleteLogo" v-if="form.img" @click="deleteImage">
              <i class="el-icon-close"></i>
            </div>
            <a href="javascript:;" class="file" v-if="!form.img">
              <i class="el-icon-upload2"></i>
              <input
                type="file"
                name="file"
                ref="file"
                @change="upload($event)"
              />
            </a>
          </div>
        </el-form-item> -->

        <el-form-item label="主营范围" prop="mainBusinessScope">
          <el-input
            v-model.trim="form.mainBusinessScope"
            type="textarea"
            :rows="2"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
        <div class="flex">
          <el-form-item
            label="注册资金"
            prop="registeredCapital"
            style="flex: 0.5"
          >
            <el-input v-model.trim="form.registeredCapital" />
          </el-form-item>
          <el-form-item
            label="注册地址"
            prop="registrationAddress"
            style="flex: 0.5"
          >
            <el-input v-model.trim="form.registrationAddress" />
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item
            label="注册时间"
            prop="registrationTimeStr"
            style="flex: 0.5"
          >
            <el-date-picker
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              v-model="form.registrationTimeStr"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="员工人数"
            prop="employeesNumber"
            style="flex: 0.5"
          >
            <el-select
              placeholder="请选择员工人数"
              filterable
              clearable
              v-model="form.employeesNumber"
              class="margin-left input"
            >
              <el-option
                v-for="item in employeesNum"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>

        <div class="flex">
          <el-form-item label="租赁楼幢" prop="leaseBuilding" style="flex: 0.5">
            <el-input v-model.trim="form.leaseBuilding" />
          </el-form-item>
          <el-form-item label="租赁楼层" prop="leaseFloor" style="flex: 0.5">
            <el-input v-model.trim="form.leaseFloor" />
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="租赁房间号" prop="roomNumber" style="flex: 0.5">
            <el-input v-model.trim="form.roomNumber" />
          </el-form-item>
          <el-form-item
            label="租赁有效期至"
            prop="leaseTermStr"
            style="flex: 0.5"
          >
            <el-date-picker
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              v-model="form.leaseTermStr"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </div>
      </el-form>

      <el-button
        type="primary"
        class="float"
        @click="next"
        v-if="active < 1 && dialogTitle === '添加'"
        >下一步</el-button
      ><el-button
        type="primary"
        plain
        class="float"
        @click="step"
        v-if="active > 0 && dialogTitle === '添加'"
        >上一步</el-button
      >

      <span slot="footer" class="dialog-footer" v-if="active == 1">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="handleSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { picture, doEditAdmin } from "@/api/user";
import { saveEnterpriseAccount } from "@/api/user_manage";
export default {
  name: "",
  components: {},
  props: {
    dialogTitle: {
      type: String,
    },
    showDialog: {
      type: Boolean,
    },
    updateList: {
      type: Object,
    },
  },
  data() {
    return {
      isOpenPrivateArea: this.$store.getters.isOpenPrivateArea,
      active: "0",
      // password1: null,
      adminId: null,
      // 对话框参数
      form: {
        username: null,
        password: null,
        nickname: null,
        phone: null,
        enterpriseFullName: null,
        address: null,
        actualName: null,
        actualPhone: null,
        mainBusinessScope: null,
        companyCode: null,
        legalPerson: null,
        registeredCapital: null,
        registrationAddress: null,
        registrationTimeStr: null,
        employeesNumber: null,
        leaseBuilding: null,
        leaseFloor: null,
        roomNumber: null,
        leaseTermStr: null,
        isOpenPrivateArea: 1, //是否开启企业私有
        isCanSearch: 1, //是否可被搜索
      },
      // 验证规则
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern:
              /^(((?=.*\d)(?=.*[a-z])(?=.*[A-Z]))|((?=.*\d)(?=.*[a-z])(?=.*[~!@#$%^&*]))|((?=.*\d)(?=.*[A-Z])(?=.*[~!@#$%^&*]))|((?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*]))|((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*]))).{10,32}$/,
            message:
              "必须大小写字母、数字、特殊字符,4种组合中至少满足3种，且密码长度在10-32位之间",
          },
        ],
        nickname: [
          { required: true, message: "请输入管理员姓名", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入管理人手机号", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式错误",
          },
        ],
        enterpriseFullName: [
          { required: true, message: "请输入企业全称", trigger: "blur" },
        ],
        enterpriseSimpleName: [
          { required: true, message: "请输入企业简称", trigger: "blur" },
        ],
      },
      // 员工人数
      employeesNum: [
        {
          name: "1-50人",
        },
        {
          name: "50-100人",
        },
        {
          name: "100-500人",
        },
        {
          name: "500-1000人",
        },
        {
          name: "1000人以上",
        },
      ],
    };
  },
  created() {
    if (this.dialogTitle === "编辑") {
      this.form = Object.assign(this.form, this.updateList);
    }
  },
  methods: {
    // 上一步
    step() {
      this.active--;
    },
    // 下一步
    next() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.active++ > 2) this.active = 0;
        }
      });
    },
    // 取消
    cancel(a) {
      this.$emit("closeDialog");
      // this.$nextTick(() => {
      this.$refs["form"].clearValidate();
      // });
    },
    // 确认添加企业
    handleSure() {
      if (this.dialogTitle == "编辑" && !this.form.password)
        return this.$message.error("请填写基本信息中的密码");
      saveEnterpriseAccount(this.form).then((res) => {
        this.$emit("closeDialog", 1);
        this.$message({
          type: "success",
          message: `${this.dialogTitle}成功!`,
        });
      });
    },
    leaveTab(activeName, oldActiveName) {
      //   // let p = new Promise((resolve, reject) => {
      //   //   this.$refs["form"].validate((valid) => {
      //   //     valid ? resolve() : reject();
      //   //   });
      //   // });
      //   // return p;
    },
    // // 上传营业执照
    // upload(e) {
    //   var files = e.currentTarget.files;
    //   if (!files.length) {
    //     return;
    //   }
    //   const loading = this.$loading({
    //     lock: true,
    //     text: "上传营业执照中...",
    //     spinner: "el-icon-loading",
    //     background: "rgba(0, 0, 0, 0.7)",
    //   });
    //   var formData = new FormData(); // 必需声明一个FormData对象
    //   formData.append("file", files[0]);
    //   picture(formData)
    //     .then((res) => {
    //       loading.close();
    //       this.form.img = res.data;
    //       // this.fetchData();
    //     })
    //     .catch((err) => {
    //       loading.close();
    //       // this.fetchData();
    //     });
    // },
    // // 删除营业执照
    // deleteImage() {
    //   this.form.img = "";
    // },
  },
  computed: {},
  watch: {},

  mounted() {},
};
</script>

<style scoped lang="scss">
.float {
  display: block;
  margin: 0 auto;
}
::v-deep .el-dialog__footer {
  margin-top: 10px;
}
.el-steps {
  margin: 0 40px 40px;
  box-sizing: border-box;
}
.flex {
  display: flex;
  // justify-content: center;
  align-items: center;
}
/*上传文件按钮*/
.upload {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.file {
  /*margin: 10px 0 0 10px;*/
  position: absolute;
  /*background: #D0EEFF;*/
  border: 1px solid #909399;
  /*border-radius: 4px;*/
  /*padding: 10px 20px;*/
  box-sizing: border-box;
  overflow: hidden;
  color: #909399;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  /*text-decoration: none;*/
  /*text-indent: 0;*/
}

.file input {
  position: absolute;
  font-size: 14px;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}

.file:hover {
  background: rgba(0, 0, 0, 0.1);
  color: white;
  text-decoration: none;
  border: none;
}

.deleteLogo {
  position: absolute;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
  /*border: 1px solid red;*/
  color: white;
}

.deleteLogo:hover {
  cursor: pointer;
}
.el-date-editor.el-input {
  width: 100%;
}
.el-select {
  width: 100%;
}
</style>
