<template>
  <div>
    <el-dialog title="新增事项" v-model="dialogVisible" width="80%">
      <div class="mb-3">
        请选择事项类别：
        <el-select v-model="state.itemType">
          <el-option label="检查事项" :value="1"></el-option>
          <el-option label="回访事项" :value="2"></el-option>
          <el-option label="其他事项" :value="3"></el-option>
        </el-select>
      </div>
      <div v-if="state.itemType == 1">
        <ComponentSetCheckItem
          ref="setCheckItemRef"
          :tableData="state.checkItemTableData"
          @add="handleAddCheckItemTable"
          :date="props.date"
        ></ComponentSetCheckItem>
      </div>

      <div class="mt-8" v-else-if="state.itemType == 2">
        <ComponentSetRetrun
          ref="setOtherReturnRef"
          :tableData="state.returnItemTableData"
          @add="handleAddReturnItemTable"
          :date="props.date"
        ></ComponentSetRetrun>
      </div>
      <div class="mt-8" v-else-if="state.itemType == 3">
        <ComponentSetOtherItem
          ref="setOtherItemRef"
          :tableData="state.otherItemTableData"
          @add="handleAddOtherItemTable"
          :date="props.date"
        ></ComponentSetOtherItem>
      </div>
      <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSave">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { ref, computed, defineProps, defineEmits, watch, reactive } from "vue";
import ComponentSetCheckItem from "./SetCheckItem.vue";
import ComponentSetOtherItem from "./SetOtherItem.vue";
import ComponentSetRetrun from "./SetRetrun.vue";

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  date: {
    type: String,
    default: ""
  }
});
const emits = defineEmits(["update:show", "save"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      onReset();
    } else {
    }
  }
);
const state = reactive({
  checkItemTableData: [],
  otherItemTableData: [],
  returnItemTableData: [],
  itemType: 1
});
const setCheckItemRef = ref();
const setOtherItemRef = ref();
const setOtherReturnRef = ref();
const handleAddCheckItemTable = config => {
  state.checkItemTableData.push(config);
};

const handleAddOtherItemTable = config => {
  state.otherItemTableData.push(config);
};
const handleAddReturnItemTable = config => {
  state.returnItemTableData.push(config);
};
const onSave = () => {
  let tableData = [];
  if (state.itemType == 1) {
    tableData = state.checkItemTableData;
  } else if (state.itemType == 2) {
    // 回访数据
    tableData = state.returnItemTableData;
  } else {
    tableData = state.otherItemTableData;
  }
  // request.post('/platformApi/dataService/diseaseManage/todos', {
  //   todos: []
  // })
  emits("save", tableData);
  dialogVisible.value = false;
};
const onReset = () => {
  state.checkItemTableData = [];
  state.otherItemTableData = [];
  state.returnItemTableData = [];
  state.itemType = 1;
  setCheckItemRef.value?.onReset();
  setOtherItemRef.value?.onReset();
  setOtherReturnRef.value?.onReset();
};
</script>
