<template>
  <div>
    <div class="flexBody">
      <el-tabs v-model="activeName" tab-position="left" @tab-change="changeTab">

        <el-tab-pane v-for="(n,index) in list" :key="n.deptId" :name="index">
          <template #label>
            <span class="custom-tabs-label">
              <span class="tabFont">{{ n.deptName }}</span>
            </span>
          </template>
        </el-tab-pane>
      </el-tabs>
      <div class="tab3">
        <table class="dashed-table">
          <tr>
            <td colspan="4" class="longText">
              <label>{{ nowTab.deptName }}</label>
              <p v-html="nowTab.introduce" />
              <h5>联系电话：{{ nowTab.phone }}</h5>
            </td>
          </tr>
          <tr v-for="(pc,key) in personCompose" :key="key">
            <th>
              <span v-show="pc">{{ pc?.name }}</span>
            </th>
            <td>
              <a v-for="p in pc?.person" :key="p.id" @click="goLeaderInfo(p.id,pc.name)">
                {{ p.name }}
                <el-icon><Link /></el-icon>
              </a>
            </td>
          </tr>
        </table>
      </div>


    </div>
    <div class="forWei">
      <el-tabs v-model="activeName" class="weTab" @tab-change="changeTab">
        <el-tab-pane v-for="(n,index) in list" :key="n.deptId" :label="n.deptName" :name="index">
          <div class="wPanel">
            <p v-html="nowTab.introduce" />
            <h5>联系电话：{{ nowTab.phone }}</h5>
          </div>
          <div>
            <div v-for="(pc,key) in personCompose" v-show="pc.person?.length>0" :key="key">
              <div>
                <p class="text-primary-l-border">{{ pc?.name }}</p>
              </div>
              <div class="linkBox mb20">
                <a v-for="(p) in pc?.person" :key="p.id" class="item" @click="goLeaderInfo(p.id,pc.name)">
                  {{ p.name }}
                  <el-icon>
                    <ArrowRight />
                  </el-icon>
                </a>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>

</template>

<script setup>
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import { getDept } from '@/apiPc/webSite'

const router = useRouter()
const activeName = ref(0)
const list = ref([])
const nowTab = ref({})
const personCompose = ref({})

const props = defineProps({
  deptCode: {
    type: String,
    default: ''
  }
})

onMounted(() => {
  init()
})

const init = () => {
  getDept(props.deptCode).then(res => {
    list.value = res.data

    if (res.data && res.data.length > 0) {
      changeTab(0)
    }
  })
}
const changeTab = (n) => {
  nowTab.value = list.value[n]
  personCompose.value = JSON.parse(list.value[n].personCompose)
}
function goLeaderInfo(id, name) {
  router.push({
    path: `/about/leader/${id}`,
    query: {
      name: encodeURIComponent(name)
    }
  })
}
</script>

<style scoped lang="scss">

.custom-tabs-label {display: flex;align-items: center;}
:deep(.el-tabs--left .el-tabs__item.is-left){    margin: 0 0 20px;}
:deep(.el-tabs--left .el-tabs__active-bar.is-left){left: 0!important;right: auto!important;}
:deep(.el-tabs--left .el-tabs__nav-wrap.is-left::after){display: none;}
:deep(.el-tabs__item.is-left.is-active){font-size: 15px;background: #fff;}
:deep(.el-tabs--left){background: #f6f6f5;}
:deep(.el-tabs--left .el-tabs__header.is-left){  min-width:200px;   padding: 30px 0 30px 30px;
  height: 70vh;margin: 0}
.tabFont{margin-left: 20px;}
.tab3{width: 60vw}
.flexBody{display: flex}
.forWei {
  display: none;
}
@media (max-width: 500px) {
  .forWei {
    display: block;

  }
  .flexBody{display: none}
}
</style>