<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>关于协会</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>中国跆拳道协会介绍</h3>
            <div>
              <div v-html="detail.introduce" />
            </div>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="mt20 mb20">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabChange">
          <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="second">
            <div class="imgbox">
              <img src="@/assets/v1/about/zz.png">
            </div>
          </el-tab-pane>
          <el-tab-pane label="部门介绍" name="third">
            <tab3 />
          </el-tab-pane>
          <el-tab-pane label="执委会组成" name="fourth">
            <h3 class="text-center">(按姓氏拼音排序)</h3>

            <div class="mauto">
              <!--              <img src="@/assets/v1/about/123.jpg">-->
              <tab4 />
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>

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

    <div class="forWei h5-panel">
      <el-carousel class="h5carousel" height="200px">
        <el-carousel-item><img :src="fillImgUrl_webSite(detail.pic)"></el-carousel-item>
      </el-carousel>

      <el-row class="wPanel mt20">
        <el-col :span="6">
          <div class="quickTab" @click="drawer1 = true">
            <img src="@/assets/h5/btn01@2x.png">
            协会领导
          </div>
        </el-col>
        <el-col :span="6">
          <div class="quickTab" @click="drawer2 = true">
            <img src="@/assets/h5/btn02@2x.png">
            组织机构
          </div>
        </el-col>
        <el-col :span="6">
          <div class="quickTab" @click="drawer3 = true">
            <img src="@/assets/h5/btn03@2x.png">
            部门介绍
          </div>
        </el-col>
        <el-col :span="6">
          <div class="quickTab" @click="drawer4 = true">
            <img src="@/assets/h5/btn04@2x.png">
            执委会组成
          </div>
        </el-col>
      </el-row>

      <el-card class="mt20 mb20" shadow="never" style="border: none">
        <template #header>
          <div class="imgCardHead">
            <img src="@/assets/h5/bt@2x.png">
          </div>
        </template>
        <div v-html="detail.introduce" />
      </el-card>
      <div style="height: 90px" />
      <div class="fixed-b-Bar">
        <div class="btns">
          <a @click="showZC"><i class="icon1" />协会章程</a>
          <a @click="showContact"><i class="icon2" />联系我们</a>
        </div>
      </div>
      <el-drawer v-model="drawer1" size="80%" title="协会领导" direction="btt">
        <div>
          <div v-for="(pc,key) in personComposeObj" 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)">

                <img :src="fillImgUrl_webSite(p.picUrl)">
                {{ p.name }}
                <el-icon>
                  <ArrowRight />
                </el-icon>
              </a>
            </div>
          </div>
        </div>
      </el-drawer>
      <el-drawer v-model="drawer2" size="80%" title="组织机构" direction="btt">
        <div class="imgbox">
          <el-image
            src="@/assets/v1/about/zz.png"
            :zoom-rate="1.2"
            :preview-src-list="srcList"
            fit="cover"
          />
        </div>
      </el-drawer>
      <el-drawer v-model="drawer3" size="80%" title="部门介绍" direction="btt">
        <tab3 />
      </el-drawer>
      <el-drawer v-model="drawer4" size="80%" title="执委会组成" direction="btt">
        <div class="mauto">
          <el-image
            style="width: 100%"
            src="@/assets/v1/about/123.jpg"
            :zoom-rate="1.2"
            :preview-src-list="srcList2"
            fit="cover"
          />
        </div>
      </el-drawer>
    </div>
  </div>
</template>
<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { getCurrentInstance, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getAboutDept } from '@/apiPc/webSite'
import Tab3 from './components/tab3'
import Tab4 from './components/tab4'
import DialogZc from './dialog/zc'
import DialogContact from './dialog/contact'


const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
const activeName = ref('first')
const detail = ref({})
const personComposeObj = ref({})

const drawer1 = ref(false)
const drawer2 = ref(false)
const drawer3 = ref(false)
const drawer4 = ref(false)
const srcList = ref(['@/assets/v1/about/zz.png'])
const srcList2 = ref(['@/assets/v1/about/123.jpg'])


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

  init()
})

function init() {
  getAboutDept().then(res => {
    detail.value = res.data
    personComposeObj.value = JSON.parse(res.data.personCompose)
  })
}

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

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

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

</script>
<style lang="scss" scoped>
.info {
  h3 {
    font-size: 24px;
    color: var(--el-color-primary);
  }

  p {
    text-indent: 2em;
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #0D0D0D;
  }
}

.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%);
  }
}

.tab1 {
  background: url("@/assets/v1/about/tab1.png") no-repeat right bottom #FEFDFB;
  background-size: contain;
}


.forWei {
  display: none;
}

@media (max-width: 500px) {
  .forWei {
    display: block;
  }
  .box {
    display: none;
  }

}
</style>