<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>