<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2024年9月11日 19:24:50
 */
import { ref } from "vue";
import { $api, $response } from "@/api";
import { onShow } from "@dcloudio/uni-app";
import { useStore } from "@/store";
const $store = useStore();

let list = ref([]);
const mountedAction = () => {
  AnalysisTypeGetList();
};

const AnalysisTypeGetList = async () => {
  const response = await $api("AnalysisTypeGetList");
  $response(response, () => {
    console.log(response);
    list.value = response.data.list;
  });
};

const toRouter = (id) => {
  uni.navigateTo({
    url: "/pages/main/bgcx/qsfx/qsfxxq?id=" + id,
  });
};

const config_ref = ref(null);
const configRef = (e) => {
  if (!config_ref.value) {
    config_ref.value = e;
    mountedAction();
  }
};

onShow(() => {
  if (!!config_ref.value) {
    mountedAction();
  }
});
</script>
<template>
  <view>
    <view v-if="!!$store.config">
      <view :ref="configRef"></view>
    </view>

    <view>
      <view
        v-for="(item, index) in list"
        :key="index"
        class="flex flex-col mt-25rpx"
      >
        <view
          class="w-180rpx rounded-r-full text-#0E0E0E text-25rpx px-40rpx center justify-start h-60rpx box-border bg-gradient-to-r from-#edf6f5 to-#bbdfe2"
        >
          {{ item.title }}
        </view>
        <view class="p-20rpx">
          <view
            v-for="(val, i) in item.list"
            :key="i"
            class="mb-10rpx p-[25rpx_20rpx_25rpx_10rpx] box-border between bg-#F1F7F7 rounded-10rpx"
            @click="toRouter(val.id)"
          >
            <view
              :style="{ 'background-color': val.color }"
              class="w-60rpx h-60rpx rounded-full mr-30rpx"
            ></view>
            <view class="flex flex-col mr-auto">
              <text class="text-#222222 text-28rpx">{{ val.name }}</text>
              <text class="text-#939898 text-22rpx">{{ val.desc }}</text>
            </view>
            <uni-icons type="right" size="15" color="#6A6A6A"></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<style scoped></style>
