<template>
  <div class="h-full">
    <el-card shadow="never" class="h-full" v-if="state.options?.length">
      <template #header>
        <div>
          <el-select
            v-model="state.value"
            placeholder="请选择随访主题"
            class="w-full"
          >
            <el-option
              v-for="item in state.options"
              :key="item.id"
              :label="`【${item.theme}】 （${item.date}）`"
              :value="item.idx"
            />
          </el-select>
        </div>
      </template>
      <el-scrollbar height="calc(77vh)">
        <div>
          <div
            v-if="state.options[state.value]?.content?.viewQuestions?.length"
          >
            <div
              v-for="(item, index) in state.options[state.value].content
                ?.viewQuestions"
              :key="index"
              class="m-1 bg-gray-100 rounded p-4 mb-3"
            >
              <SimpleQuestionItem :info="item" :id="item.id" :edit="false" />
            </div>
          </div>
          <div v-else>
            <el-empty description="暂无随访数据" />
          </div>
        </div>
      </el-scrollbar>
    </el-card>
    <el-card v-else shadow="never" class="h-full">
      <el-empty description="暂无数据" />
    </el-card>
  </div>
</template>
<script setup>
import { request } from "@/utils";
import { reactive, ref } from "vue";
import SimpleQuestionItem from "@/components/Survey/SimpleQuestionItem.vue";
import { useRoute } from "vue-router";
const [route] = [useRoute()];

const archivesId = ref(route.query.archivesId);
const state = reactive({
  value: undefined,
  list: [],
  options: []
});
const getList = () => {
  request
    .get(`dataService/schedule/todo/visitList?archiveId=${archivesId.value}`)
    .then(resp => {
      console.log("list", resp);
      state.options = resp.data?.map((item, index) => {
        return {
          ...item,
          idx: index
        };
      });
    });
};
const initData = () => {
  getList();
};
initData();
</script>
