<template>
  <div class="home-container layout-pd">
    <el-row :gutter="15" class="home-card-one mb10">
      <el-col :span="24">
        <el-card shadow="hover">
          <el-radio-group v-model="state.radio" @change="radioChange">

            <el-radio
              v-for="(item, index) in state.options"
              :key="index"
              :label="'' + item.value + ''"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-card>
      </el-col>
    </el-row>
    <total :radio="state.radio"></total>
    <year :radio="state.radio"></year>
    <residence :radio="state.radio"></residence>
  </div>
</template>

<script setup lang="ts" name="enterIndex">
import {
  reactive,
  onMounted,
  ref,
  watch,
  nextTick,
  onActivated,
  markRaw,
  defineAsyncComponent,
} from "vue";
import { entApi } from "/@/api/ent/index";

// 引入组件
const residence = defineAsyncComponent(
  () => import("/@/views/statistics/housing/components/residence.vue")
);
const total = defineAsyncComponent(
  () => import("/@/views/statistics/housing/components/total.vue")
);
const year = defineAsyncComponent(
  () => import("/@/views/statistics/housing/components/year.vue")
);

const state: any = reactive({
  radio: "",
  options: [] as any,
});

onMounted(() => {
  loadData();
});

async function loadData() {
  let itemQx = await entApi().typeApi();
  state.options = itemQx.data;
  state.radio = state.options[0].value.toString()
}
const radioChange = (e: any) => {
  state.radio = e;
};
</script>

<style lang="scss">
.title {
  font-weight: bold;
  font-size: 14px;
  padding-left: 10px;
  border-left: 3px solid #409efe;
}
</style>
