<template>
  <div class="infoWin">
    <div class="header-new">
      <img class="header-img" src="@/assets/images/mapSearch/驻勤点备份.png" alt="" />

      <div class="header-details">
        <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">{{ name }}</div>
        </el-tooltip>
        <div style="float: left">
          <el-button
            class="follow-btn"
            v-if="!isFollowed"
            type="primary"
            plain
            size="mini"
            @click="followStation(info.id)"
            :disabled="readonly"
          >
            关注
          </el-button>
          <el-button
            class="follow-btn"
            v-if="isFollowed"
            type="primary"
            plain
            size="mini"
            @click="unFollowStation(info.id)"
            :disabled="readonly"
          >
            取消关注
          </el-button>
        </div>
      </div>
    </div>
    <div v-if="returnWin?.infoType === 'employee'" class="back" @click="onClickEmployee(returnWin.info)">
      &lt; 返回{{ employeeTypeName }}信息
    </div>
    <div v-else-if="returnWin?.info?.employee !== undefined" class="back" @click="onClickEmployee(returnWin?.info?.employee)">
      &lt; 返回{{ employeeTypeName }}信息
    </div>
    <div v-if="returnWin?.infoType === 'companyStations'" class="back" @click="onClickCompanyStations(info)">
      &lt; 返回驻勤点列表
    </div>
    <!-- <div
        v-if="returnWin?.infoType === 'company'"
        class="back"
        @click="onClickCompany(returnWin.info)"
    >
      &lt; 返回企业
    </div> -->
    <div class="content-new">
      <div class="content-new-label">公司名称：</div>
      <el-tooltip effect="dark" :content="companyName" placement="top">
        <div
          v-if="isSecurityAndPopulation || resourceType === 'Security'"
          class="content-new-value active"
          @click="clickCompany(info, 'station', returnWin?.info)"
        >
          {{ companyNameSlice }}
        </div>
        <div v-if="resourceType === 'Population'" class="content-new-value">
          {{ companyNameSlice }}
        </div>
      </el-tooltip>
    </div>
    <div class="content-new">
      <div class="content-new-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(info.principalName)">复制</div>
        </div>
        <div style="cursor: pointer" class="content-new-value">{{ principalName }}</div>
      </el-tooltip>
    </div>
    <div class="content-new">
      <div class="content-new-label">联系方式：</div>
      <div class="content-new-value">
        {{ isPhone ? principalContact : "***********" }}
        <span class="hide-show" @click.stop="isPhone = !isPhone" v-if="isPhone">隐藏</span>
        <span class="hide-show" @click.stop="isPhone = !isPhone" v-if="!isPhone">显示</span>
      </div>
    </div>
    <div class="content-new" v-if="isSecurityAndPopulation || resourceType === 'Security'">
      <div class="content-new-label">服务对象名称：</div>
      <div class="content-new-value">{{ serviceScope }}</div>
    </div>
    <div class="content-new">
      <div class="content-new-label">{{ stationTypeName }}监管机构：</div>
      <el-tooltip effect="dark" :content="superviseDepartName" placement="top">
        <div class="content-new-value">
          {{ superviseDepartNameSlice }}
        </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.address)">复制</div>
        </div>
        <div style="cursor: pointer" class="content-new-label">{{ stationTypeName }}地址：</div>
      </el-tooltip>
      <el-tooltip effect="dark" :content="address" placement="top">
        <div class="content-new-value">{{ addressSlice }}</div>
      </el-tooltip>
    </div>
    <div class="content-new">
      <div class="content-new-label">{{ stationTypeName }}人数：</div>
      <div class="content-new-value active" @click="clickStationEmployees(info, 'station', returnWin?.info)">
        {{
          isSecurityAndPopulation ? countOfSecurityMan : resourceType === "Security" ? countOfSecurityMan : countOfCommunityUser
        }}
      </div>
    </div>
    <div class="content-new" v-if="isSecurityAndPopulation || resourceType === 'Security'">
      <div class="content-new-label">驻勤点类型：</div>
      <div class="content-new-value">
        {{ stationTypes && stationTypes.length > 0 ? stationTypes[0].name : "" }}
      </div>
    </div>
  </div>
</template>

<script>
import { textSlice } from "@/api/common";
import { follow, unFollow } from "@/api/tenant-content-follow-controller";
export default {
  name: "OverlayStation",
  props: {
    info: {
      type: Object,
    },
    returnWin: {
      type: Object,
    },
    readonly: Boolean,
  },
  computed: {
    isSecurityAndPopulation() {
      //是否既是驻勤点，又是社区警务
      if (Object.prototype.hasOwnProperty.call(this.info, "resourceTypes")) {
        return this.info.resourceTypes.length === 2;
      } else {
        return false;
      }
    },
    resourceType() {
      if (Object.prototype.hasOwnProperty.call(this.info, "resourceTypes")) {
        return this.info.resourceTypes[0];
      } else {
        return "";
      }
    },
    stationTypeName() {
      const { resourceTypes } = this.info;
      if (resourceTypes) {
        if (resourceTypes.length === 2) {
          return this.stationTypeNameMap["Security"];
        } else {
          return this.stationTypeNameMap[resourceTypes[0]];
        }
      } else {
        return "";
      }
    },
    employeeTypeName() {
      const { resourceTypes } = this.info;
      if (resourceTypes) {
        if (resourceTypes.length === 2) {
          return this.employeeTypeNameMap["Security"];
        } else {
          return this.employeeTypeNameMap[resourceTypes[0]];
        }
      } else {
        return "";
      }
    },
    name() {
      return this.info?.name || "";
    },
    companyName() {
      return this.info?.companyName || "";
    },
    companyNameSlice() {
      return textSlice(this.companyName); //多出部分省略号显示
    },
    principalName() {
      return this.info?.principalName || "";
    },
    principalContact() {
      return this.info?.principalContact || "";
    },
    serviceScope() {
      return this.info?.serviceScope || "";
    },
    superviseDepartName() {
      return this.info?.superviseDepartName || "";
    },
    superviseDepartNameSlice() {
      return this.info?.superviseDepartNameSlice || "";
    },
    address() {
      return this.info?.address || "";
    },
    addressSlice() {
      return this.info?.addressSlice || "";
    },
    countOfSecurityMan() {
      return this.info?.countOfSecurityMan;
    },
    //社区警务人数
    countOfCommunityUser() {
      return this.info?.countOfCommunityUser;
    },
    stationTypes() {
      return this.info?.stationTypes || [];
    },
    isFollowed() {
      //是否关注
      return this.info.followed;
    },
  },
  data() {
    return {
      isPhone: false,
      stationTypeNameMap: {
        Security: "驻勤点",
        Population: "社区警务",
      },
      employeeTypeNameMap: {
        Security: "保安员",
        Population: "社会力量",
      },
    };
  },
  watch: {},
  methods: {
    onClickEmployee(info) {
      console.log("onClickEmployee", info);
      this.$bus.$emit("click-employee", { info, infoType: "station" });
    },
    /**
     * @返回驻勤点列表
     */
    onClickCompanyStations(info) {
      console.log("onClickCompanyStations", info);
      this.$bus.$emit("click-companyStations", { info, infoType: "station" });
    },

    /**
     * @跳转公司
     */
    clickCompany(info, infoType, employeeInfo) {
      if (this.returnWin?.infoType !== "employee") {
        employeeInfo = undefined;
      }
      this.$bus.$emit("click-company", { info, infoType, employeeInfo }); // 对应父组件 resource/index.vue eventBusBinding 方法中 this.$bus.$on("click-company", this.showCompanyInfo)
    },
    /**
     * @点击驻勤人数
     */
    clickStationEmployees(info, infoType, employeeInfo) {
      if (this.returnWin?.infoType !== "employee") {
        employeeInfo = undefined;
      }
      this.$bus.$emit("click-stationEmployees", { info, infoType, employeeInfo });
    },

    /**
     * @关注驻勤点
     */
    followStation(stationId) {
      follow("Station", stationId).then(() => {
        this.$message({
          type: "success",
          message: "关注成功!",
        });
        this.info.followed = true;
      });
    },
    /**
     * @取消关注保安员
     */
    unFollowStation(stationId) {
      this.$confirm("是否取消关注状态", "提示", {
        confirmButtonText: "取消关注",
        customClass: "del-model",
        type: "warning",
      })
        .then(() => {
          unFollow("Station", stationId);
          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">
.follow-btn {
  margin-left: 6px;
}
</style>
