<template>
  <div class="mainView">
    <BreadCrumb />
    <div class="leaderBox">
      <div class="topBox">
        <div class="character">
          <img :src="leaderData.leaderPhoto" alt="" />
          <p class="name">{{ leaderData.leaderName }}</p>
          <p class="position">
            {{ leaderData.specificPositions }}
          </p>
        </div>
        <div class="introduce">
          <div class="titleBox">
            <span>个人简介</span>
          </div>
          <p>{{ leaderData.introduction }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import api from "@/api/jggk.js";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import BreadCrumb from "@/components/breadcrumbModule/index.vue";
import dictStore from "@/store/dictionary.js"; //引入仓库
const unitDict = dictStore().DICT_ZW;
const leaderId = useRouter().currentRoute.value.query.id;
const leaderData = ref({});

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

function getLeaderInfo() {
  api.leaderInfo({ id: leaderId }).then((res) => {
    if (res.code == 200) {
      res.data.specificPositions = filterPosition(res.data);
      leaderData.value = res.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);
}
</script>
<style scoped lang="less">
.leaderBox {
  padding: 20px 51px 60px 56px;

  .topBox {
    .character {
      float: left;
      width: 180px;
      margin-right: 30px;

      img {
        display: block;
        height: 233px;
        padding: 8px 8px 7px 7px;
        background: #eff7fd;
        box-sizing: border-box;
      }

      p {
        color: #333333;
        font-size: 14px;
        line-height: 25px;
        text-align: center;
        word-wrap: break-word;
      }

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

    .introduce {
      width: calc(100% - 210px);
      float: left;

      .titleBox {
        span {
          padding: 10px;
          margin-bottom: -1px;
          height: 50px;
          line-height: 50px;
          font-size: 18px;
          color: #0176c9;
          font-weight: bold;
          border-bottom: 2px #0176c9 solid;
        }
      }

      p {
        text-align: left;
        font-family: 宋体, SimSun;
        font-size: 19px;
        margin-top: 5px;
        margin-bottom: 5px;
        line-height: 2em;
        text-indent: 2em;
      }
    }
  }
}
</style>
