<template>
  <div>
    <el-form
      ref="formRef"
      :model="form"
      label-width="120px"
      label-position="left"
    >
      <el-form-item
        label="事项主题:"
        :rules="[
          {
            required: true,
            message: '请输入事项主题',
            trigger: 'blur'
          }
        ]"
      >
        <el-input
          v-model="form.name"
          class="w-96"
          placeholder="请输入事项主题"
        />
      </el-form-item>
      <el-form-item label="回访事项:" required>
        <el-select
          v-model="form.node"
          placeholder="回访项目"
          style="width: 115px"
          filterable
          @change="handleSearchrRelatedNode"
        >
          <el-option
            v-for="item in state.nodeList"
            :label="item.properties.name"
            :value="item.id"
            :key="item.id"
          />
        </el-select>
        <el-select
          v-model="form.related"
          placeholder="请选择包含的回访项目"
          style="width: 315px"
          multiple
          filterable
        >
          <el-option
            v-for="item in state.relatedList"
            :label="item.properties.name"
            :value="item.properties.name"
            :key="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="待办日期:" required>
        <el-space wrap>
          <el-select
            v-model="form.frequencyType"
            placeholder="请选择回访周期/时间"
          >
            <el-option label="指定日期" :value="3" />
            <el-option label="每天" :value="0" />
            <el-option label="每周" :value="1" />
            <el-option label="每月" :value="2" />
          </el-select>
          <template v-if="form.frequencyType < 3">
            <!-- <el-date-picker
              value-format="YYYY-MM-DD"
              v-model="time"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            /> -->
          </template>
          <template v-else>
            <TagsDatePicker v-model:list="dayList" placeholder="请选择日期" />
          </template>
          <el-button type="primary" plain @click="handleAdd" class="ml-2"
            >确认添加</el-button
          >
        </el-space>
      </el-form-item>
    </el-form>
    <div>
      <ComponentTableSetItem
        :tableData="state.tableData"
        :config="config"
        @remove="handleRemove"
        date="2020-09-01"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { request } from "@/utils";

import TagsDatePicker from "@/components/TagsDatePicker.vue";
import { ElMessage } from "element-plus";
import ComponentTableSetItem from "./TableSetItem.vue";

const form = reactive({
  name: "",
  node: "", // 回访项目
  related: "",
  date: "",
  frequencyType: 3
});

const config = {
  name: { label: "回访类型", prop: "name" },
  content: { label: "回访内容", prop: "content" },
  duration: { label: "回访周期", prop: "duration", width: "420" },
  timePreview: { label: "回访时间预览", prop: "timePreview" },
  frequency: { label: "每次完成次数", prop: "frequency" },
  remark: { label: "备注信息", prop: "remark" },
  handle: { label: "操作", prop: "handle" }
};
const dayList = ref([]);
const authForm = ref([]);
const state = reactive({
  nodeList: [],
  relatedList: [],
  frequencyType: 3,
  tableData: []
  // tableData: []
});

const handleSearchrRelatedNode = id => {
  if (id == "patrol") {
    return (state.node = authForm.value);
  }
  request
    .get("/graphService/open/node/related", {
      params: {
        id: id,
        relationship: "回访表单信息"
      }
    })
    .then(resp => {
      state.relatedList = resp.data;
      form.related = [];
    });
};

const handleAdd = () => {
  if (!form.node || !form.related.length) {
    return ElMessage.error("请选择回访项目");
  }
  const config = {
    name: state.nodeList.find(v => v.id == form.node)?.properties.name,
    content: form.related?.join("、"),
    frequencyType: state.frequencyType,
    duration: state.frequencyType == 3 ? dayList.value.join(",") : "",
    timePreview: "",
    frequency: 1, // 完后次数
    remark: "",
    handle: "",
    type: 0
  };
  state.tableData.push(config);
  form.node = "";
  form.related = [];
  dayList.value = [];
};

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

const getNodeList = async () => {
  const { data } = await request.get(`/graphService/open/node/paginate`, {
    params: {
      page: 1,
      pageSize: 9999,
      tag: "可回访"
    }
  });
  const responseData = await request.get(
    `/idcService/mechanism/formConfig/get`
  );
  state.nodeList.value = [];

  if (responseData?.data?.list?.length) {
    state.nodeList.value = [
      {
        id: "patrol",
        properties: {
          name: "巡访"
        },
        key: "patrol"
      }
    ];
    authForm.value = responseData?.data?.list.map(v => {
      return {
        ...v,
        id: v.formId,
        properties: {
          name: v.formTitle
        }
      };
    });
  }
  state.nodeList.push(...data.list);
  console.log("state.nodeList", state.nodeList.value);
};
getNodeList();
</script>
<style lang="scss " scoped></style>
