<template>
  <div class="infoWin">
    <div class="header-new">
      <div class="photo">{{ info.nameSlice }}</div>
      <el-tooltip class="box-item" popper-class="item-light-tooltip-el" effect="light" placement="top">
        <div slot="content" class="slot-style">
          <div style="cursor: pointer" @click="copy(info.name)">复制</div>
        </div>
        <div style="cursor: pointer; float: left; height: 30px; line-height: 30px">
          {{ info.name }}({{ info.dutyStatusText }})
        </div>
      </el-tooltip>

      <el-button class="follow-btn" v-if="!isFollowed" type="primary" plain size="mini" @click="followEmployee(info.id)">
        关注
      </el-button>
      <el-button class="follow-btn" v-if="isFollowed" type="primary" plain size="mini" @click="unFollowEmployee(info.id)">
        取消关注
      </el-button>
    </div>
    <div class="content-new" v-if="platform === '2' && info?.resourceTypes?.includes('ProprietorManaged')">
      <div class="content-new-label">所属内保单位：</div>
      <el-tooltip effect="dark" :content="info.proprietorCompanyName" placement="top">
        <div class="content-new-value active" @click="clickCompany(info, 'employee', 'Proprietor')">
          {{ info.proprietorCompanyName }}
        </div>
      </el-tooltip>
    </div>
    <div class="content-new">
      <div class="content-new-label">所属公司：</div>
      <el-tooltip effect="dark" :content="info.companyName" placement="top">
        <div
          v-if="isSecurity && info.institutional !== '0104'"
          class="content-new-value active"
          @click="clickCompany(info, 'employee')"
        >
          {{ info.companyNameSlice }}
        </div>
        <div v-if="!isSecurity || info.institutional === '0104'" class="content-new-value">
          {{ info.companyNameSlice + (info.institutional === "0104" ? "/自招" : "") }}
        </div>
      </el-tooltip>
    </div>

    <div class="content-new">
      <el-tooltip class="box-item" popper-class="item-light-tooltip-el" effect="light" placement="top">
        <div slot="content" class="slot-style">
          <div style="cursor: pointer" @click="copy(info.securityStationName)">复制</div>
        </div>
        <div style="cursor: pointer" class="content-new-label">
          所属{{ isSecurity || isProprietor ? "驻勤点" : "社区警务" }}：
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" :content="info.securityStationName" placement="top">
        <div class="content-new-value active" @click="clickStation(info, 'employee')">
          {{ info.securityStationNameSlice }}
        </div>
      </el-tooltip>
    </div>
    <div class="content-new">
      <div class="content-new-label">证件号码：</div>
      <div class="content-new-value">
        <el-tooltip class="box-item" popper-class="item-light-tooltip-el" effect="light" placement="top">
          <div slot="content" class="slot-style">
            <div style="cursor: pointer" @click="copy(info.idCardNo)">复制</div>
          </div>
          <div style="cursor: pointer; float: left; height: 30px; line-height: 30px">
            {{ isIdCardNo ? info.idCardNo : "***************" }}
          </div>
        </el-tooltip>
        <div class="hide-show" @click.stop="isIdCardNo = !isIdCardNo" v-if="isIdCardNo">隐藏</div>
        <div class="hide-show" @click.stop="isIdCardNo = !isIdCardNo" v-if="!isIdCardNo">显示</div>
      </div>
    </div>
    <div class="content-new">
      <div class="content-new-label">联系方式：</div>
      <div class="content-new-value">
        {{ isContact ? info.contact : "***********" }}
        <div class="hide-show" @click.stop="isContact = !isContact" v-if="isContact">隐藏</div>
        <div class="hide-show" @click.stop="isContact = !isContact" v-if="!isContact">显示</div>
      </div>
    </div>
    <div class="content-new" v-if="isSecurity || isProprietor">
      <div class="content-new-label">实名认证：</div>
      <div class="content-new-value">{{ info.authenticatedStatusText }}</div>
    </div>
    <div class="content-new" v-if="isSecurity || isProprietor">
      <div class="content-new-label">持证情况：</div>
      <div class="content-new-value">{{ info.certificateSituation }}</div>
    </div>
    <div class="content-new">
      <div class="content-new-label">人员类型：</div>
      <div class="content-new-value">
        {{ info.occupationType }}
      </div>
    </div>
  </div>
</template>

<script>
import { follow, unFollow } from "@/api/tenant-content-follow-controller";
export default {
  name: "OverlayEmployee",
  props: {
    info: {
      type: Object,
    },
    returnWin: {
      type: Object,
    },
  },
  computed: {
    isFollowed() {
      //是否关注
      return this.info.followed;
    },
    // isSecurityAndPopulation() {
    //   //是否既是保安员，又是社会力量
    //   if (Object.prototype.hasOwnProperty.call(this.info, "resourceTypes")) {
    //     return this.info.resourceTypes.length === 2;
    //   } else {
    //     return false;
    //   }
    // },
    isSecurity() {
      //是否保安员
      if (Object.prototype.hasOwnProperty.call(this.info, "resourceTypes")) {
        return this.info.resourceTypes.includes("Security");
      } else {
        return false;
      }
    },
    isProprietor() {
      //是否保卫管理员
      if (Object.prototype.hasOwnProperty.call(this.info, "resourceTypes")) {
        return this.info.resourceTypes.includes("Proprietor");
      } else {
        return false;
      }
    },
  },
  data() {
    return {
      platform: localStorage.getItem("platform") || "1",
      isPhone: false,
      isContact: false,
      isIdCardNo: false,
      stationTypeNameMap: {
        Security: "驻勤点",
        Population: "社区警务",
      },
      peopleType: "",
      // isFollowed: this.info.followed, //是否关注
    };
  },
  watch: {
    // "info.followed"(val) {
    //   this.isFollowed = val;
    // },
  },
  methods: {
    resetVisible() {
      this.isPhone = false;
      this.isIdCardNo = false;
      this.isContact = false;
    },
    onClickEmployee() {},
    /**
     * @跳转公司
     */
    clickCompany(info, infoType) {
      this.$bus.$emit("click-company", { info, infoType }); // 对应父组件 resource/index.vue eventBusBinding 方法中 this.$bus.$on("click-company", this.showCompanyInfo)
    },
    /**
     * @点击驻勤点人员，显示驻勤人员信息
     */
    clickStationEmployees(info) {
      console.log(info);
    },
    /**
     * @跳转驻勤点
     */
    clickStation(info, infoType) {
      this.$bus.$emit("click-station", { info, infoType });
    },

    /**
     * @关注保安员
     */
    followEmployee(employeeId) {
      follow("Employee", employeeId).then(() => {
        this.$message({
          type: "success",
          message: "关注成功!",
        });
        this.info.followed = true;
      });
    },
    /**
     * @取消关注保安员
     */
    unFollowEmployee(employeeId) {
      this.$confirm("是否取消关注状态", "提示", {
        confirmButtonText: "取消关注",
        customClass: "del-model",
        type: "warning",
      })
        .then(() => {
          unFollow("Employee", employeeId);
          this.info.followed = false;
        })
        .catch(() => {});
    },
    /**
     * @复制保安员名称和身份证号
     */
    copy(message) {
      var aux = document.createElement("input");
      aux.setAttribute("value", message);
      document.body.appendChild(aux);
      aux.select();
      document.execCommand("copy");
      document.body.removeChild(aux);
      this.$message({
        message: "复制成功",
        type: "success",
      });
    },
  },
};
</script>

<style scoped lang="scss">
// .photo {
//   width: 28px;
//   height: 38px;
//   background: #0e71ff;
//   border-radius: 50%;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   font-size: 14px;
//   color: #fff;
//   margin: 0 auto;
// }
.header-new {
  .photo {
    width: 70px;
    height: 70px;
    background: #0e71ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    margin-left: 10px;
    margin-right: 10px;
    float: left;
  }
}
.follow-btn {
  margin-left: 6px;
}
</style>
