<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {departments, matterList} from "@/http/apis/commonApi.ts";

const route = useRoute()
const router = useRouter()
const tabList = ref([])
const tabActive = ref(0)

function tabChecked(index: number) {
  tabActive.value = index
  getMatterList()
}

const active = ref(0)
const menuList = ref(['增值服务', '政务服务'])

function menuActive(index: number) {
  active.value = index
  getMatterList()
}

onMounted(() => {
  getTabs()
})
const name = route.query.name || ''
const windowName = route.query.windowName || ''
const serviceList = ref([])
document.title = name as string
async function getTabs() {
  tabList.value = (await departments({zoneName: windowName, windowName: name})).data
  tabActive.value = 0
  getMatterList()
}

async function getMatterList() {
  const res = await matterList({
    zoneName: windowName, windowName: name,
    department: tabList.value[tabActive.value]?.name,
    type: active.value === 0 ? 2 : 1
  })
  serviceList.value = res.data
}

function serviceItemClick(item: any) {
  if (item.matterType === 1) {
    window.location.href = item.webApplyUrl
  } else {
    router.push({name: 'guide', query: {id: item.id}})
  }

}
</script>

<template>
  <div>
    <div class="tab-list">
      <div class="tab-item" @click="tabChecked(index)" :class="tabActive === index?'tab-item-checked':''"
           v-for="(item,index) in tabList"><span>{{ item.name }}</span></div>
    </div>
    <div class="menu-list">
      <div class="item" v-for="(item,index) in menuList" @click="menuActive(index)">
        <div class="title" :class="active === index?'title-checked':''">{{ item }}</div>
        <div class="line" v-if="active === index"></div>
        <!--          :style="active === index?'':'display: none'"-->
      </div>
    </div>


    <div class="service-zz">
      <van-cell-group inset>
        <van-cell
            size="large"
            :title="item.matterName"
            is-link
            v-for="item in serviceList"
            @click="serviceItemClick(item)"
            :label="['现场窗口办理', '全程网办'][item.handleChannel - 1]">
          <template #icon>
            <img src="@/assets/service/menu.png" class="menu-icon">
          </template>
        </van-cell>
      </van-cell-group>
      <van-empty description="暂无数据" v-if="serviceList.length === 0"/>
    </div>
  </div>

</template>

<style scoped lang="less">
.tab-list::-webkit-scrollbar {
  width: 0;
}

.tab-list {
  padding-left: 50px;
  margin-top: 30px;
  display: flex;
  flex-wrap: nowrap;
  overflow-y: auto;

  .tab-item-checked {
    background: #006FFF !important;
    color: #FFFFFF !important;
  }

  .tab-item {
    margin-right: 15px;
    flex-shrink: 0;
    background: #DAE6F8;
    border-radius: 12px;
    padding: 32px 100px;
    font-weight: 600;
    font-size: 40px;
    color: #2F313D;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.service-zz {
  .menu-icon {
    height: 70px;
  }
}


.menu-list {
  margin-top: 60px;
  margin-bottom: 60px;
  display: flex;
  margin-left: 50px;
  margin-right: 50px;

  .item {
    .title {
      margin-right: 16px;
      font-weight: 400;
      font-size: 42px;
      color: #2F313D;
      line-height: 60px;
      text-align: left;
      font-style: normal;
    }

    .title-checked {
      color: #2F313D !important;
      font-weight: 600 !important;
      font-size: 48px !important;
    }

    .line {
      margin-top: 10px;
      width: 192px;
      height: 10px;
      background: linear-gradient(270deg, rgba(0, 111, 255, 0) 0%, #006FFF 100%);
    }
  }
}

</style>