<template>
  <div class="infoWin">
    <div class="header-new"><img class="header-img" src="@/assets/images/mapSearch/驻勤点备份.png" alt="" />{{ info.name }}</div>
    <div v-if="returnWin?.infoType === 'rail'" class="back" @click="onClickRail(returnWin.info)">&lt; 返回电子围栏信息</div>
    <div v-if="returnWin?.infoType === 'station'" class="back" @click="onClickStation(returnWin.info)">
      &lt; 返回{{
        returnWin?.info?.resourceTypes.length === 2
          ? "驻勤点"
          : returnWin?.info?.resourceTypes[0] === "Security"
          ? "驻勤点"
          : "社区警务"
      }}信息
    </div>
    <div class="info-window-stationEmployees-people">
      <div v-for="(item, index) in info.stationEmployees" :key="index" style="border-bottom: 1px solid #bdcfde; margin-top: 16px">
        <el-popover placement="top" width="300" :ref="'popoverRef_' + index" trigger="click">
          <div>
            <div style="width: 100%; height: 60px; border-bottom: 1px solid #bdcfde">
              <div class="circle-style">{{ item.name.slice(-2) }}</div>
              <div style="line-height: 45px; padding-left: 6px; float: left">{{ item.name }}({{ item.dutyStatusText }})</div>
              <div style="float: right">
                <i class="el-icon-close" style="cursor: pointer" @click="closePopover(index)"></i>
              </div>
            </div>

            <div style="font-size: 12px; color: #5e5e5e; padding-top: 7px">所属公司：{{ currentEmployee.companyName }}</div>
            <div style="font-size: 12px; color: #5e5e5e; padding-top: 7px">
              所属驻勤点：{{ currentEmployee.securityStationName }}
            </div>
            <div style="font-size: 12px; color: #5e5e5e; padding-top: 7px">证件号码：{{ currentEmployee.idCardNo }}</div>
            <div style="font-size: 12px; color: #5e5e5e; padding-top: 7px">联系方式：{{ currentEmployee.contact }}</div>
            <div style="font-size: 12px; color: #5e5e5e; padding-top: 7px">
              实名认证：{{ currentEmployee.authenticatedStatusText }}
            </div>
            <div style="font-size: 12px; color: #5e5e5e; padding-top: 7px">
              持证情况：{{ currentEmployee.certificateSituation }}
            </div>
          </div>
          <div style="cursor: pointer" class="circle-style" slot="reference" @click="changeEmployee(item.id)">
            {{ item.name.slice(-2) }}
          </div>
        </el-popover>

        <div class="circle-detail">
          <el-tooltip class="box-item" popper-class="item-light-tooltip-el" effect="light" placement="left-start">
            <div slot="content" class="slot-style">
              <div style="cursor: pointer" @click="copy(item.name)">复制</div>
            </div>
            <div style="cursor: pointer" class="detail-item">
              {{ item.name }}<span v-if="item.stationResponsible">（负责人）</span>
            </div>
          </el-tooltip>

          <div class="detail-item">
            <div class="detail-item-label">证件号码：</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(item.idCardNo)">复制</div>
              </div>
              <div style="cursor: pointer" class="detail-item-value">
                {{ item.isIdCardNo ? item.idCardNo : "***********" }}
              </div>
            </el-tooltip>
            <span class="hide-show" @click.stop="item.isIdCardNo = !item.isIdCardNo">{{
              item.isIdCardNo ? "隐藏" : "显示"
            }}</span>
          </div>
          <div class="detail-item">
            <div class="detail-item-label">联系方式：</div>
            <div class="detail-item-value">
              {{ item.isPhone ? item.contact : "***********" }}
            </div>
            <span class="hide-show" @click.stop="item.isPhone = !item.isPhone">{{ item.isPhone ? "隐藏" : "显示" }}</span>
          </div>
          <div class="detail-item">
            <div class="detail-item-label">在岗情况：</div>
            <div class="detail-item-value">{{ item.dutyStatusText }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getEmployeeDetail } from "@/api/employee-controller";
export default {
  name: "OverlayStationEmployees",
  props: {
    info: {
      type: Object,
    },
    returnWin: {
      type: Object,
    },
  },
  computed: {},
  data() {
    return {
      isPhone: false,
      isIdCardNo: false,
      currentEmployee: {},
    };
  },
  methods: {
    /**
     * @返回驻勤点
     */
    onClickStation(info) {
      this.$bus.$emit("click-station", { info, infoType: "stationEmployees" });
    },
    /**
     * @返回电子围栏
     */
    onClickRail(info) {
      this.$bus.$emit("click-rail", { info, infoType: "stationEmployees" });
    },
    /**
     * 复制信息
     */
    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",
      });
    },
    changeEmployee(employeeId) {
      getEmployeeDetail(employeeId)
        .then((res) => {
          // res["companyNameSlice"] = textSlice(res.companyName); //多出部分省略号显示
          this.currentEmployee = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    closePopover(index) {
      console.log(this.$refs);
      this.$refs["popoverRef_" + index][0].doClose();
    },
  },
};
</script>

<style scoped lang="scss">
.circle-style {
  width: 60px;
  height: 60px;
  background: #0e71ff;
  border-radius: 30px 30px 30px 30px;
  opacity: 1;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  float: left;
  text-align: center;
  line-height: 60px;
}

.circle-detail {
  margin-left: 84px;

  .detail-item {
    display: flex;
    align-items: center;
    color: #000000;
    font-size: 14px;

    &:nth-last-child(1) {
      margin-bottom: 14px;
    }

    .detail-item-label {
      color: #000000;
    }

    .detail-item-value {
      float: left;
    }

    img {
      width: 16px;
      height: 16px;
      cursor: pointer;
      margin-left: 8px;
    }
  }
}
</style>
