<template>
  <view class="smart_body_box" v-if="dataConfig">
    <view class="header_card_box">
      <view class="item_num_box" v-for="(item,index) in dataConfig.board" :key="index">
        <text class="num_ti">{{item.value}}</text>
        <view class="lab_ti">{{item.title}}</view>
      </view>
    </view>
    <view class="menu_body_box">
      <view class="menu_label_box">
        <text class="la_ti">海保服务</text>
        <view class="more_box" @click="changeMore('menus')" v-if="menus.length > 4">
          更多
          <wd-icon name="arrow-down" size="12px" color="#3F8C8B" class="ml-3 "
            :class="showOption.menus ?'more_up' : 'more_down'"></wd-icon>
        </view>
      </view>
      <view class="menu_icon_box" :style="{height: showOption.menus ?  'auto': '100px'}">
        <view class="menu_item_box " v-for="(item,index) in dataConfig.menus" :key="index" @click="jumpUrl(item.url)">
          <image :src="item.img" class="menu_img"></image>
          <view class="title_box">{{item.name}}</view>
        </view>
      </view>
    </view>
    <view class="menu_body_box">
      <view class="menu_label_box">
        <text class="la_ti">物流跟踪</text>
        <view class="more_box" @click="changeMore('menusLogisticsTracking')" v-if="menusLogisticsTracking.length > 4">
          更多
          <wd-icon name="arrow-down" size="12px" color="#3F8C8B" class="ml-3"
            :class="showOption.menusLogisticsTracking ?'more_up' : 'more_down'"></wd-icon>
        </view>
      </view>
      <view class="menu_icon_box" :style="{height: showOption.menusLogisticsTracking ?  'auto': '100px'}">
        <view class="menu_item_box " @click="jumpUrl(item.url)"
          v-for="(item,index) in dataConfig.menusLogisticsTracking" key="index">
          <image :src="item.img" class="menu_img"></image>
          <view class="title_box">{{item.name}}</view>
        </view>
      </view>
    </view>
    <view class="menu_body_box">
      <view class="menu_label_box">
        <text class="la_ti">查询工具</text>
        <view class="more_box" @click="changeMore('menusSearchTool')" v-if="menusSearchTool.length > 4">
          更多
          <wd-icon :class="showOption.menusSearchTool ?'more_up' : 'more_down'" name="arrow-down" size="12px"
            color="#3F8C8B" class="ml-3"></wd-icon>
        </view>
      </view>
      <view class="menu_icon_box" :style="{height: showOption.menusSearchTool ?  'auto': '100px'}">
        <view class="menu_item_box " @click="jumpUrl(item.url)" v-for="(item,index) in dataConfig.menusSearchTool">
          <image :src="item.img" class="menu_img"></image>
          <view class="title_box">{{item.name}}</view>
        </view>
      </view>
    </view>
    <view class="menu_body_box">
      <view class="menu_label_box">
        <text class="la_ti">增值服务</text>
        <view class="more_box" @click="changeMore('menusAddedServices')" v-if="menusAddedServices.length > 4">
          更多
          <wd-icon :class="showOption.menusAddedServices ?'more_up' : 'more_down'" name="arrow-down" size="12px"
            color="#3F8C8B" class="ml-3"></wd-icon>
        </view>
      </view>
      <view class="menu_icon_box" :style="{height: showOption.menusAddedServices ?  'auto': '100px'}">
        <view class="menu_item_box " @click="jumpUrl(item.url)" v-for="(item,index) in dataConfig.menusAddedServices">
          <image :src="item.img" class="menu_img"></image>
          <view class="title_box">{{item.name}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { postDataSmartApi } from '@/api/customs'
  const dataConfig = ref({})
  const showOption = reactive({
    menusHbsm: false,
    menusLogisticsTracking: false,
    menusSearchTool: false,
    menusAddedServices: false
  })
  // 海保服务
  const menus = ref([])
  const menusAddedServices = ref([])
  const menusLogisticsTracking = ref([])
  const menusSearchTool = ref([])
  const params = {
    page: 1,
    page_size: 10,
  }
  onLoad(async () => {
    await getData()
  })

  const getData = () => {
    postDataSmartApi(params).then(res => {
      if (res.code == 1) {
        dataConfig.value = res.data
        menus.value = res.data.menus
        menusAddedServices.value = res.data.menusAddedServices
        menusLogisticsTracking.value = res.data.menusLogisticsTracking
        menusSearchTool.value = res.data.menusSearchTool
      }
    })
  }
  const jumpUrl = (url) => {
    if (url && url != '#') {
      uni.navigateTo({
        url,
        fail: () => {
          uni.reLaunch({
            url
          })
        }
      })
    }
  }
  const changeMore = (data) => {
    showOption[data] = !showOption[data]
  }
</script>

<style>
  page {
    height: 100vh;
    background: #F9FAFB;
  }
</style>
<style lang="scss" scoped>
  .smart_body_box {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;

    .menu_body_box {
      width: 100%;
      background: #FFFFFF;
      padding: 40rpx 0;
      box-sizing: border-box;
      margin-top: 14px;
      border-radius: 6px;

      .menu_icon_box {
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        overflow: hidden;

        .menu_item_box {
          width: calc(100% / 4);
          display: flex;
          flex-direction: column;
          align-items: center;
          align-items: center;
          justify-content: center;
          margin-top: 18px;

          .title_box {
            width: 56px;
            height: 38px;
            text-align: center;
            margin-top: 6px;
            font-size: 14px;
            color: #333333;
          }

          .menu_img {
            width: 48px;
            height: 48px;
          }
        }
      }

      .menu_label_box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 18px;
        box-sizing: border-box;

        .more_box {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #3F8C8B;
          transition: all .3s linear;

          .more_up {
            transform: rotate(-180deg);
            transition: all .3s linear;

          }

          .more_down {
            transform: rotate(0deg);
            transition: all .3s linear;
          }
        }

        .la_ti {
          font-size: 16px;
          color: #333333;
          font-weight: 700 !important;
        }
      }
    }

    .header_card_box {
      width: 100%;
      margin-top: 16px;
      background: linear-gradient(47deg, #45908F 0%, #338382 100%);
      border-radius: 6px;
      padding: 11px 30px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .item_num_box {
        width: 90px;
        height: 102px;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0px 0px 4px 0px rgba(35, 83, 83, 0.2);
        border-radius: 4px;
        border: 1px solid;
        border-image: linear-gradient(137deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) 1 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .lab_ti {
          width: 48px;
          height: 38px;
          text-align: center;
          color: #D2EDED;
          font-size: 12px;
          font-weight: 500;
          margin-top: 10rpx;
        }

        .num_ti {
          font-size: 28px;
          color: #FFFFFF;
          font-weight: 700 !important;
        }
      }
    }
  }
</style>
