<template>
  <div class="home-container layout-pd">
    <el-row :gutter="15" class="home-card-one mb10">
      <el-col :span="24">
        <el-card shadow="hover" class="mb10">
          <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>
    <headon :states="state.state"></headon>
    <contenton :list="state.list"></contenton>
    <div class="noticedivs">
      <div class="noticediv">
        <img src="../../../assets/notices.svg" alt="" />
        <p>
          {{ state.content }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  reactive,
  onMounted,
  defineAsyncComponent,
} from "vue";
import { entApi } from "/@/api/ent/index";
import { getApi } from "/@/api/early/index";
import { useCurrentInstance } from "/@/method/get";
const { proxy } = useCurrentInstance();
import ucharts from "/@/components/BaseEchart/index.vue";
import { startChart } from "/@/components/BaseEchart/option";
import { useRouter } from 'vue-router';
const router = useRouter();
// 引入组件
const headon = defineAsyncComponent(
  () => import("/@/views/early/index/components/head.vue")
);
// 引入组件
const contenton = defineAsyncComponent(
  () => import("/@/views/early/index/components/content.vue")
);



const state: any = reactive({
  radio: "",
  msg: "",
  state: "",
  content: '',
  list: [],
  // 总数
  montable: {
    data: [],
    loading: false,
  },
});

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

async function loadData() {
  let itemQx = await entApi().typesApi();
  state.options = itemQx.data;
  state.radio = state.options[0].value.toString()
  loadlist();
}

// 获取列表
async function loadlist() {
  let item = await getApi().get({ district: state.radio });
  state.state = item.data.level;
  state.list = item.data.homeModelList;
  state.content = item.data.content
}
const radioChange = (e: any) => {
  state.radio = e;
  loadlist();
};
</script>

<style scoped lang="scss">
.noticedivs {
  // padding: 20px 0;
  background-color: #fff;
  padding: 20px;
}

.noticediv {
  display: flex;
  align-items: center;
  font-size: 15px;

  span {
    font-weight: bold;
  }

  img {
    height: 25px;
    margin-right: 10px;
  }
}

.ustitle {
  font-weight: bold;
  font-size: 15px;
  padding-left: 10px;
  border-left: 3px solid #409efe;
  margin-bottom: 10px;
}

.earlyindex {
  .earlyindexcon {
    border: 1px solid #eee;
  }

  .earlyindexitem {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    height: 100px;

    p {
      font-size: 14px;
      flex: 0 0 40%;
      padding: 20px 0;
      text-align: center;
      background-color: #f4f4f4;
    }

    .txt {
      font-size: 15px;
      padding-left: 10px;
    }
  }
}
</style>