<template>
  <div>
    <div class="box">
      <el-breadcrumb class="mt20" :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">
          <el-icon>
            <HomeFilled />
          </el-icon>
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/local' }">地方协会</el-breadcrumb-item>
        <el-breadcrumb-item>地方协会介绍</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card class="mt20">
        <el-row :gutter="30">
          <el-col :span="8" :xs="24" :lg="8">
            <div class="imgbox">
              <el-image :src="fillImgUrl_webSite(detail.pic)" />
            </div>
            <div class="btns">
              <a @click="showZC"><i class="icon1" />协会章程</a>
              <a @click="showContact"><i class="icon2" />联系我们</a>
            </div>
          </el-col>
          <el-col class="info" :span="16" :xs="24" :lg="16">
            <h3 class="primary-border">{{ detail.deptName }} 介绍</h3>
            <div v-html="detail.introduce" />
          </el-col>
        </el-row>
      </el-card>
      <el-card class="mt20 mb20">
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="协会领导" name="first">
            <div class="tab1">
              <table class="dashed-table">
                <tr v-for="(pc,key) in personComposeObj" v-show="pc.person?.length>0" :key="key">
                  <th>
                    <span>{{ pc.name }}</span>
                  </th>
                  <td>
                    <a v-for="(p) in pc.person" :key="p.id" @click="goLeaderInfo(p.id,pc.name)">
                      <img :src="fillImgUrl_webSite(p.picUrl)">
                      {{ p.name }}
                      <el-icon>
                        <Link />
                      </el-icon>
                    </a>
                  </td>
                </tr>
              </table>
            </div>
          </el-tab-pane>
          <!--          <el-tab-pane label="组织机构" name="two">-->
          <!--            <div class="content">-->
          <!--              <img src="@/assets/v1/eg/local.png">-->
          <!--            </div>-->
          <!--          </el-tab-pane>-->
          <el-tab-pane label="部门介绍" name="three">
            <tab3 :dept-code="route.params.id" />
          </el-tab-pane>
          <!--          <el-tab-pane label="人文特色" name="four">-->
          <!--            <div>-->
          <!--              <el-row class="newsimgcover" gutter="20">-->
          <!--                <el-col v-for="n in 6" :span="8" class="mb20">-->
          <!--                  <div class="item">-->
          <!--                    <div class="imgbox"><img></div>-->
          <!--                    <div class="info backinfo">-->
          <!--                      <h3 class="esp">湖南省跆拳道大奖赛总决赛</h3>-->
          <!--                    </div>-->
          <!--                  </div>-->
          <!--                </el-col>-->
          <!--              </el-row>-->
          <!--            </div>-->
          <!--          </el-tab-pane>-->

        </el-tabs>
      </el-card>
    </div>

    <dialog-zc ref="dialogZCRef" />
    <dialog-contact ref="dialogContactRef" />
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import Tab3 from '@/viewsPc/about/components/tab3'
import DialogZc from '@/viewsPc/about/dialog/zc'
import DialogContact from '@/viewsPc/about/dialog/contact'
import { useRoute, useRouter } from 'vue-router'
import { getAboutDeptLocal } from '@/apiPc/webSite'

const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()

const activeName = ref('first')
const detail = ref({})
const personComposeObj = ref({})

onMounted(() => {
  activeName.value = route.params.activeName
  init()
})

function init() {
  getAboutDeptLocal(route.params.id).then(res => {
    detail.value = res.data || {}
    if (res.data?.personCompose) {
      personComposeObj.value = JSON.parse(res.data.personCompose)
    }
  })
}

function showZC() {
  proxy.$refs['dialogZCRef'].open()
}

function showContact() {
  proxy.$refs['dialogContactRef'].open(route.params.id)
}

function goLeaderInfo(id, name) {
  router.push({
    path: `/about/leader/${id}`,
    query: {
      name: encodeURIComponent(name)
    }
  })
}

</script>

<style scoped lang="scss">
.primary-border {
  margin: 0;
  padding: 0 0 10px;
  color: var(--el-color-primary);
  border-bottom: 1px solid #e1e1e1;
}

.news-l-r-big {
  border-right: 1px dashed #e1e1e1;
}

.newsCommon {
  padding-left: 20px;
  height: 100%;

  .item {
    height: 30%;
  }
}
.btns {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;

  a {
    width: 48%;
    display: block;
    text-align: center;
    color: #fff;
    height: 45px;
    line-height: 45px;
    background: linear-gradient(270deg, #FCD258 0%, #D3AA5A 0%, #E4C889 99%);
    border-radius: 2px;
    font-size: 18px;
  }

  i {
    padding: 0 15px;
  }

  i.icon1 {
    background: url("@/assets/v1/about/icon01.png") no-repeat left;
    background-size: contain;
  }

  i.icon2 {
    background: url("@/assets/v1/about/icon02.png") no-repeat left;
    background-size: contain;
  }

  a:hover {
    background: linear-gradient(90deg, #FCD258 0%, #D3AA5A 0%, #E4C889 99%);
  }
}
.backinfo{
  background: #F6F9FA;padding: 10px;}
</style>