<template>
  <div style="height: 100%" class="typical-ten">
    <cacp-group-container title="我的代办" v-loading="loading" class="cacp-group__box cacp-pd-m cacp-margin-l">
      <template #toolbar>
        <el-link type="primary">
          <el-icon>
            <Setting />
          </el-icon>
        </el-link>
      </template>
      <template #content>
        <el-scrollbar>
          <template v-for="d in data" :key="d.name">
            <div class="typical-ten-title">{{ d.name }}</div>
            <el-row>
              <div v-for="c in d.children" :key="d.name + '-' + c.name" class="typical-ten-card">
                <el-row>
                  <div class="typical-ten-card-icon" :style="{ 'background-color': hexToRgba(d.color) }">
                    <el-icon :color="d.color" size="36">
                      <component :is="c.icon" />
                    </el-icon>
                  </div>
                  <el-row class="typical-ten-card-detail">
                    <div>{{ c.name }}</div>
                    <div>
                      <span :style="{ color: d.color }">{{ c.num }}</span> 条
                    </div>
                  </el-row>
                </el-row>
              </div>
            </el-row>
          </template>
        </el-scrollbar>
      </template>
    </cacp-group-container>
  </div>
</template>
<script lang="ts" setup>
import { Setting } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import type { TypicalTenInfo } from '@/types/ten'
import { getTypicalTen } from '@/apis/mock'
import { SuccessResultCode, useLoading } from '@cacp/ui'

const data = ref<TypicalTenInfo[]>([])
const { loading, setLoading } = useLoading()

onMounted(() => {
  query()
})

async function query() {
  setLoading(true)
  const res = await getTypicalTen()
  if (res && res.code === SuccessResultCode) {
    data.value = res.data
  }
  setLoading(false)
}

function hexToRgba(hex: string, a = 0.1) {
  hex = hex.replace(/^#/, '')
  if (hex.length === 3) {
    hex = hex
      .split('')
      .map((c) => c + c)
      .join('')
  }
  const bigint = parseInt(hex, 16)
  const r = (bigint >> 16) & 255
  const g = (bigint >> 8) & 255
  const b = bigint & 255
  return `rgba(${r}, ${g}, ${b}, ${a})`
}
</script>
<style scoped lang="less">
.typical-ten {
  font-family: airial;
  color: #333;
  background: #fff;
  width: 100%;
  height: 100%;
  padding: 0 0 36px 0;
  overflow: hidden;
  :deep(.cacp-group__container) {
    height: 100%;
  }
  :deep(.cacp-group__content) {
    height: 100%;
    padding-bottom: 36px;
  }

  :deep(.cacp-group__header) {
    margin-bottom: 20px;
    margin-top: 8px;
  }

  :deep(.cacp-group__title) {
    margin: 0 16px 0 0;
  }

  :deep(.cacp-group__title) {
    border: 0;
    padding: 0;
  }

  &-title {
    margin: 0px 0 16px 0;
  }

  &-card {
    width: 280px;
    height: 78px;
    border: 1px solid #e1e2e6;
    border-radius: 3px;
    margin: 0 20px 20px 0;
    font-size: 14px;

    &:hover {
      background: rgba(247, 248, 250, 1);
    }

    &-detail {
      justify-content: center;
      flex-direction: column;
    }

    span {
      font-size: 20px;
      vertical-align: middle;
    }

    &-icon {
      height: 44px;
      width: 44px;
      margin: 17px;
      padding: 4px;
      border-radius: 8px;
    }
  }

  &-row {
    .typical-ten-card {
      width: auto;
      min-width: 280px;

      &-right {
        margin-left: auto;
        padding: 0 18px;
        display: flex;
        align-items: center;

        &::before {
          content: '';
          display: block;
          border-left: 1px solid #e1e2e6;
          height: 40px;
          margin-right: 10px;
        }
      }

      .el-row {
        align-items: center;
      }
    }
  }
}
</style>
