<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.theme"
          class="w-96"
          placeholder="请输入随访主题，如高血压回访"
        />
      </el-form-item>
      <el-form-item label="随访日期:" required>
        <TagsDatePicker v-model:list="dayList" placeholder="随访日期" />
      </el-form-item>
    </el-form>

    <div class="flex-1 p-4 overflow-y-auto">
      <div class="flex items-center">
        <div class="flex-1">
          <div
            class="flex items-center w-fit border rounded-3xl border-solid border-gray-400 overflow-hidden"
          >
            <div
              v-for="(item, index) in [
                '随访问卷',
                '随访健康指导',
                '随访人员指导',
                '事项提醒备注'
              ]"
              :key="index"
              @click="curTab = index"
              class="relative after:absolute after:right-0 after:top-2.5 after:w-[1px] after:h-4 after:bg-gray-400 after:content-[''] text-xs"
            >
              <div
                class="cursor-pointer text-sm py-2 px-3 hover:bg-gray-100 first-of-type:pl-6 last-of-type:pr-6 flex items-center"
                :class="{
                  'bg-blue-500 hover:bg-blue-500 text-white': curTab == index
                }"
              >
                {{ item }}
              </div>
            </div>
          </div>
        </div>
        <div>
          <el-button
            v-if="!curTab && content?.questions?.length"
            type="primary"
            size="small"
            @click="editContentVisible.questions = true"
            >修改问卷</el-button
          >
          <el-button
            v-if="curTab == 1 && content?.healthGuidance"
            type="primary"
            size="small"
            @click="editContentVisible.healthGuidance = true"
            >修改随访健康指导</el-button
          >
          <el-button
            v-if="curTab == 2 && content?.visitGuidance"
            type="primary"
            size="small"
            @click="editContentVisible.visitGuidance = true"
            >修改随访人员指导</el-button
          >
        </div>

        <div>
          <el-button
            type="primary"
            link
            :icon="FolderOpened"
            class="ml-2"
            @click="visiblePageReviewTemplate = true"
            >在随访模版库中选择</el-button
          >
        </div>
      </div>
      <div v-if="curTab == 0" class="pt-6">
        <div v-if="content?.questions?.length">
          <div
            v-for="(item, index) in content?.questions"
            :key="index"
            class="m-1 bg-gray-100 rounded p-4 mb-3"
          >
            <SimpleQuestionItem :info="item" :id="item.id" :edit="false" />
          </div>
        </div>
        <div
          class="flex flex-col items-center px-4 py-6 mx-[14%] mt-[10%] rounded-lg bg-gray-100 space-y-4"
          v-else
        >
          <div>
            创建随访问卷，可对用户情况进行标准化信息回收，方便后期对比查看管理效果
          </div>
          <el-button type="primary" @click="editContentVisible.questions = true"
            >立即创建</el-button
          >
        </div>
      </div>
      <div v-else-if="curTab == 1" class="py-4 px-2">
        <div v-if="content?.healthGuidance" v-html="content?.healthGuidance" />
        <div
          v-else
          class="flex flex-col items-center px-4 py-6 mx-[14%] mt-[10%] rounded-lg bg-gray-100 space-y-4"
        >
          <div>
            设置健康指导内容，方便用户了解在不同时期如何进行自我管理，以及健康注意事项
          </div>
          <el-button
            type="primary"
            @click="editContentVisible.healthGuidance = true"
            >立即创建</el-button
          >
        </div>
      </div>
      <div v-else-if="curTab == 2" class="py-4 px-2">
        <div v-if="content?.visitGuidance" v-html="content?.visitGuidance" />
        <div
          v-else
          class="flex flex-col items-center px-4 py-6 mx-[14%] mt-[10%] rounded-lg bg-gray-100 space-y-4"
        >
          <div>设置随访人员指导内容，指导随访人员如何进行随访</div>
          <el-button
            type="primary"
            @click="editContentVisible.visitGuidance = true"
            >立即创建</el-button
          >
        </div>
      </div>
      <div v-else>
        <Editor
          class="mt-4"
          v-model:value="form.remark"
          placeholder="请输入事项提醒备注"
        />
      </div>
    </div>

    <el-drawer v-model="visiblePageReviewTemplate" direction="rtl" size="70%">
      <div>
        <PageReviewTemplate @onSelect="handleCurrentTemplate" />
      </div>
    </el-drawer>

    <DialogEditQuestion
      v-model:show="editContentVisible.questions"
      :initQuestions="content?.questions"
      :initRules="content?.logicCode"
      :submit-questions="saveQuestions"
      :submit-logic="saveLogicCode"
    />
    <el-dialog
      append-to-body
      v-model="editContentVisible.healthGuidance"
      title="随访健康指导"
    >
      <Editor v-model:value="content.healthGuidance" />
      <template #footer>
        <el-button type="primary" @click="saveCurValue('healthGuidance')"
          >保存</el-button
        >
      </template>
    </el-dialog>
    <el-dialog
      append-to-body
      v-model="editContentVisible.visitGuidance"
      title="随访人员指导"
    >
      <Editor v-model:value="content.visitGuidance" />
      <template #footer>
        <el-button type="primary" @click="saveCurValue('visitGuidance')"
          >保存</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, defineExpose } from "vue";
import { FolderOpened } from "@element-plus/icons-vue";

import DialogEditQuestion from "@/components/Survey/DialogEditQuestion.vue";
import TagsDatePicker from "@/components/TagsDatePicker.vue";
import Editor from "@/components/Editor.vue";
import SimpleQuestionItem from "@/components/Survey/SimpleQuestionItem.vue";
import PageReviewTemplate from "@/views/schemeLibrary/reviewTemplate.vue";

import { ElMessage } from "element-plus";

const form = reactive({
  theme: "",
  remark: ""
});
const content = reactive({
  healthGuidance: "",
  visitGuidance: "",
  questions: [],
  logicCode: [] // 问卷逻辑规则设置
});
const visiblePageReviewTemplate = ref(false);
const formRef = ref();
const dayList = ref([]);
const curTab = ref(0);

const editContentVisible = reactive({
  questions: false,
  healthGuidance: false,
  visitGuidance: false
});

const saveQuestions = async questions => {
  content.questions = questions;
  // ElMessage.success("保存成功");
  saveCurValue("questions");
};
const saveLogicCode = async rules => {
  content.logicCode = rules;
  saveCurValue("logicCode");
};
const saveCurValue = async prop => {
  editContentVisible[prop] = false;
};
const handleCurrentTemplate = template => {
  content.logicCode = template?.logicCode;
  content.questions = template?.questions;
  content.healthGuidance = template?.healthGuidance;
  content.visitGuidance = template?.visitGuidance;
  visiblePageReviewTemplate.value = false;
};
const onSubmit = callback => {
  if (!form.theme) {
    return ElMessage.error("请输入随访主题");
  }
  if (!dayList.value.length) {
    return ElMessage.error("随访日期间不能为空");
  }
  const params = {
    ...form,
    dates: dayList.value.join("、"),
    remark: form.remark == "<p><br></p>" ? "" : form.remark,
    frequencyType: 3,
    content: {
      ...content,
      healthGuidance:
        content.healthGuidance == "<p><br></p>" ? "" : content.healthGuidance,
      visitGuidance:
        content.visitGuidance == "<p><br></p>" ? "" : content.visitGuidance
    }
  };
  callback(params);
};
const onReset = () => {
  dayList.value = [];
  form.remark = "";
  curTab.value = 0;
  content.questions = [];
  content.healthGuidance = "";
  content.visitGuidance = "";
  formRef.value?.resetFields();
};
const onInitEditData = data => {
  onReset();
  form.theme = data.theme;
  dayList.value = data.dates?.split("、");
  form.remark = data.remark == "<p><br></p>" ? "" : data.remark;
  content.healthGuidance =
    data?.content.healthGuidance == "<p><br></p>"
      ? ""
      : data?.content.healthGuidance;
  content.visitGuidance =
    data?.content.visitGuidance == "<p><br></p>"
      ? ""
      : data?.content.visitGuidance;
  content.questions = data.content?.questions || [];
  content.logicCode = data.content?.logicCode || [];
};
defineExpose({
  onSubmit,
  onReset,
  onInitEditData
});
</script>
<style lang="scss " scoped></style>
