<template>
  <div>
    <div class="box" style="caret-color: transparent;padding: 0 10%">
      <div class=" mt30" />
      <div class="flexBody">
        <el-tabs v-model="activeIndex" class="forPc" tab-position="left" @tab-change="changeTab">
          <el-tab-pane v-for="(tab,index) in tabList" :label="tab.label" :name="index">
            <template #label>
              <span class="custom-tabs-label">
                <span class="tabFont">{{ tab.label }}</span>
              </span>
            </template>
          </el-tab-pane>
        </el-tabs>
        <div v-loading="loading" class="infoPart">
          <h3 class="leftboderTT">{{ nowTab.name }}</h3>
          <div class="content">
            <div v-if="content" v-html="content" />
            <div v-else>
              <el-empty />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ArrowRight, Search } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { getNewsListById } from '@/apiPc/webSite'
import { useRouter } from 'vue-router'
import {useStorage} from "@vueuse/core/index";
import * as match from "@/apiPc/match";

const language = useStorage('language', 1)
const languageLibrary = ref([{
  a:'关于我们',
  b:'联系我们',
  c:'联系人',
  d:'邮箱',
  e:'留言',
  f:'提交',
},{
  a:'About US',
  b:'Contact Us',
  c:'Contact person',
  d:'Email',
  e:'Message',
  f:'Submit',
},{
  a:'회사 소개',
  b:'문의하기',
  c:'담당자',
  d:'이메일',
  e:'메시지',
  f:'Submit',
},{
  a:'会社概要',
  b:'お問い合わせ',
  c:'担当者',
  d:'メールアドレス',
  e:'メッセージ',
  f:'Submit',
},{
  a:'Giới thiệu',
  b:'Liên hệ',
  c:'Người liên hệ',
  d:'Email',
  e:'Tin nhắn',
  f:'Submit',
}])
const router = useRouter()
const form = ref({
  paymentName:'',
  payDeptName:'',
})

const tabList = ref([{
  name:'俱乐部1'
}])
const noteId = ref()
const itemData = ref({})

onMounted(() => {
  getMain()
})

const getMain = () => {
  match.getNewsTree({
    code:6000
  }).then(res => {
    if (res.code === 200) {
      tabList.value = res.data[0].children
      changeTab(0)
    }
  })
}

const getList = (id) => {
  match.getNoteDetail(id).then(res => {
    if (res.code === 200) {
      itemData.value = res.data
    }
  })
}

const activeIndex = ref(0)
const loading = ref(false)
const nowTab = ref({})
const content = ref()
const changeTab = (n) => {
  n = Number(n)

  activeIndex.value = n

  loading.value = true

  match.getNoteList({
    sortId:tabList.value[n].code
  }).then(res => {
    loading.value = false
    if (res.code == 200 && res.rows.length > 0) {
      match.getNoteDetail(res.rows[0].noteId).then(res => {
        loading.value = false
        if (res.data) {
          content.value = res.data.content
        } else {
          content.value = ''
        }
      })
    } else {
      content.value = ''
    }
  })


}
</script>

<style lang="scss" scoped>
.content {
  margin: 20px 0 0;
  text-indent: 2em;
  line-height: 1.8;
  font-weight: 400;
  font-size: 16px;
  color: #fff;

  img {
    max-width: 100%;
    margin: 20px auto;
    display: block;
  }

  h4 {
    text-indent: 0
  }
}

h4.leftboderTT {
  text-indent: 0;
  font-size: 20px;
  color: var(--el-color-primary);

  span {
    color: #929AA0;
    font-size: 16px;
    margin-left: 5px;
  }
}

.custom-tabs-label {
  display: flex;
  font-size: 21px;
  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;
  display: none;
}

:deep(.el-tabs--left .el-tabs__nav-wrap.is-left::after) {
  display: none;
}

:deep(.el-tabs__nav) {
  float: none;
}

:deep(.el-tabs) {
  background:#1f2644;
}

:deep(.el-tabs__item) {
  color: #fff;
  border-radius: 10px;
  background: #303758;
  padding: 22px 20px;
}

:deep(.el-tabs__item.is-active) {
  background: linear-gradient(90deg, #f2db82, #c29c39);
  color: #161d39;
}

:deep(.el-tabs__item:hover) {
  background: linear-gradient(90deg, #f2db82, #c29c39);
  color: #161d39;
}

:deep(.el-tabs--left .el-tabs__header.is-left) {
  padding: 30px 0 30px 30px;
  background: #1f2644;
  min-width: 280px;
}

:deep(.el-tabs--left .el-tabs__item.is-left, .el-tabs--right .el-tabs__item.is-left) {
  justify-content:center;
}

.tabFont {
  margin-left: 20px;
}

.flexBody {
  display: flex;
  background: #fff;
  margin-bottom: 20px;
  min-height:74vh;
}

.infoPart {
  background: #1f2644;
  padding: 20px;
  flex: 1;

  & > h3 {
    font-size: 24px;
    color: var(--el-color-primary);
  }
}

.forWei {
  display: none;
}

@media (max-width: 500px) {
  .box {
    width: 100%
  }
  .forWei {
    display: block;
  }
  .forPc {
    display: none
  }
  :deep(.el-tabs__nav-scroll) {
    overflow: auto;
  }
  .flexBody {
    display: block;
    background: transparent;
  }
  .infoPart {
    background: #fff;
    padding: 10px;
    margin: 0 15px
  }
  .newsLine {
    .item {
      height: 50px;

      .date {
        height: 34px;
        width: 44px;
        margin: 0;

        .day {
          font-size: 16px;
        }

        p {
          font-size: 12px;
        }
      }

      h3 {
        font-size: 14px;
      }
    }

    .go {
      display: none;
    }

    .item-body {
      width: 80%;
    }
  }
}

.wTabtop {
  :deep(.el-tabs__header) {
    background: #fff;
    padding: 10px 15px 0;
  }

  :deep(.el-tabs__content) {
    padding: 0 10px;
  }

}

@media (max-width: 768px) {
  .infoPart .leftboderTT {
    font-size: 16px;
  }
}
</style>