<template>
  <div class="tissue">
    <div class="leader">
      <div
        class="people"
        :key="item.id"
        v-for="item in leaderList"
        @click="lookIntro(item)"
      >
        <img :src="item.leaderPhoto" :alt="item.leaderName" />
        <p class="name">{{ item.leaderName }}</p>
        <p class="introduce">{{ filterPosition(item) }}</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import api from "@/api/jggk.js";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import dictStore from "@/store/dictionary.js"; //引入仓库
const unitDict = dictStore().DICT_ZW;

let router = useRouter();
const leaderList = ref([]);

onMounted(() => {
  getLeaderInfo();
});

function getLeaderInfo() {
  api.leaderList({ size: 1000, current: 1, status: 2 }).then((res) => {
    if (res.code == 200) {
      leaderList.value = res.data.records;
      leaderList.value = res.data.records;
      leaderList.value.map((item, index) => {
        // 把局长放第一位
        if (item.leaderPositionId == "1795638501398618113") {
          let data = leaderList.value[0];
          leaderList.value[0] = leaderList.value[index];
          leaderList.value[index] = data;
        }
      });
    }
  });
}

// 过滤职位
function filterPosition(data) {
  let positionStr = "";
  let positionList = data.specificPositions.split(",");
  positionList.unshift(data.leaderPositionId);
  positionList.map((item) => {
    unitDict.map((dic) => {
      if (item == dic.id) {
        positionStr = positionStr + "、" + dic.dictLabel;
      }
    });
  });
  return positionStr.slice(1);
}

// 查看领导详情
function lookIntro(data) {
  router.push({
    path: "/jggk/details/leaderIntro",
    query: {
      id: data.id,
    },
  });
}
</script>

<style scoped lang="less">
.tissue {
  .leader {
    padding-top: 30px;

    .people {
      width: calc(50% - 10px);
      float: left;
      cursor: pointer;
      display: block;
      text-align: center;
      margin-bottom: 30px;
      &:first-child {
        width: 100%;
      }

      img {
        width: 130px;
        padding: 10px;
        height: 166px;
        display: block;
        margin: 0 auto;
        background: #eff7fd;
        box-sizing: border-box;
      }

      .name {
        color: #0176c9;
        font-size: 18px;
        line-height: 35px;
      }

      .introduce {
        height: 35px;
        color: #333333;
        font-size: 14px;
      }
    }
  }
}
</style>
