<template>
  <div>
    <div class="flex items-center mb-6">
      设置其他事项：
      <el-input
        placeholder="请输入其他事项内容"
        v-model="state.content"
        clearable
      ></el-input>
      <el-select
        v-model="state.frequencyType"
        placeholder="请选择检查周期/时间"
      >
        <el-option label="每天" :value="0"> </el-option>
        <el-option label="每周" :value="1"> </el-option>
        <el-option label="每月" :value="2"> </el-option>
        <el-option :label="`指定时间后 ${props.date}`" :value="3"> </el-option>
      </el-select>
      <el-button type="primary" plain @click="handleAdd" class="ml-2"
        >确认添加</el-button
      >
    </div>
    <div>
      <ComponentTableSetItem
        :tableData="props.tableData"
        :config="config"
        @remove="handleRemove"
        :date="props.date"
      ></ComponentTableSetItem>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { ElMessage } from "element-plus";
import { onMounted, reactive, defineProps } from "vue";
import ComponentTableSetItem from "./TableSetItem.vue";

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  date: {
    type: String,
    default: ""
  }
});
const emits = defineEmits(["add"]);
const state = reactive({
  content: "", // 检查项目
  nodeList: [],
  relatedList: [],
  frequencyType: 3
  // tableData: []
});
const config = {
  content: { label: "事项内容", prop: "content" },
  duration: { label: "完成周期", prop: "duration", width: "320" },
  timePreview: { label: "完成时间预览", prop: "timePreview" },
  frequency: { label: "完成次数", prop: "frequency" },
  remark: { label: "备注信息", prop: "remark" },
  handle: { label: "操作", prop: "handle" }
};

const handleAdd = () => {
  if (!state.content) {
    return ElMessage.error("请输入内容");
  }
  let config = {
    content: state.content,
    frequencyType: state.frequencyType,
    duration: state.frequencyType == 3 ? props.date : state.frequencyType,
    timePreview: "",
    frequency: 1, // 完后次数
    remark: "",
    handle: "",
    type: 1
  };
  console.log(props.tableData);

  emits("add", config);

  state.content = "";
};
const handleRemove = index => {
  props.tableData.splice(index, 1);
};
const onReset = () => {
  state.content = "";
};

//这里需要暴露出去不然父组件调用不到这个方法
const getTableData = () => {
  return {
    name: "检查项目",
    list: props.tableData
  };
};
defineExpose({
  getTableData,
  onReset
});
</script>
