<template>
  <div class="current-month-todo-items">
    <div v-for="(item, index) in props.list" :key="index" :id="item.date">
      <el-card class="mb-2">
        <template #header>
          <div
            :class="isToday(item.date) ? 'bg-orange-200 text-red-500' : ''"
            class="p-3 flex items-center"
          >
            <div class="h-6 w-6" v-if="isToday(item.date)">
              <CaretRight />
            </div>
            {{ item.date }}
          </div>
        </template>
        <div>
          <div v-if="item.schedules?.length">
            <div
              v-for="todoItem in item.schedules"
              :key="todoItem.id"
              class="bg-slate-100 mb-2 relative px-2 py-3 flex items-center justify-between w-full"
            >
              <div class="flex w-full">
                <el-button
                  type="primary"
                  class="absolute top-3 right-1"
                  link
                  :icon="Edit"
                  @click="handleEditRemark(todoItem, item.date)"
                  >完成情况备注</el-button
                >
                <div @click="handleDone(todoItem, item.date)" class="flex pt-1">
                  <el-icon
                    v-if="todoItem.done"
                    style="color: #67c23a; font-size: 20px"
                    class="mr-2"
                    ><SuccessFilled
                  /></el-icon>
                  <el-icon v-else style="font-size: 20px" class="mr-2"
                    ><CircleCheck
                  /></el-icon>
                </div>
                <div class="w-9/12">
                  <el-text :tag="todoItem.done ? 'del' : 'span'">
                    <el-text tag="b" :type="todoItem.done ? 'info' : ''" s>{{
                      todoItem.theme
                    }}</el-text>
                  </el-text>
                  <template v-if="[1, 3].includes(todoItem.type)">
                    <div class="my-2">
                      <el-text size="small" type="info"
                        >{{ typeMap[todoItem.type] }}内容：</el-text
                      >
                      <el-space wrap>
                        <div
                          v-for="(tag, index) in todoItem.content ||
                          todoItem.template"
                          :key="tag + index"
                        >
                          <el-tag plain> {{ tag.properties.name }}</el-tag>
                        </div>
                      </el-space>
                    </div>
                    <div v-if="todoItem.remark">
                      <el-text size="small" type="info">事项提醒：</el-text>
                      <el-button
                        type="primary"
                        size="small"
                        :icon="View"
                        link
                        @click="
                          () => {
                            state.visibleDetail = true;
                            state.rowData = todoItem;
                          }
                        "
                        >查看</el-button
                      >
                    </div>
                  </template>

                  <template v-else-if="todoItem.type == 2">
                    <div class="my-2">
                      <template
                        v-if="
                          todoItem.content?.questions?.length ||
                          todoItem.template?.questions?.length
                        "
                      >
                        <el-text size="small" type="info">随访问卷：</el-text>
                        <el-button
                          @click="handleEditQuestion(todoItem)"
                          type="primary"
                          size="small"
                          :icon="Edit"
                          link
                        >
                          {{ todoItem.content ? "查看/修改" : "去填写" }}
                        </el-button>
                      </template>
                    </div>
                    <div class="mb-2">
                      <template v-if="todoItem.content?.healthGuidance">
                        <el-text size="small" type="info"
                          >随访健康指导：</el-text
                        >
                        <el-button
                          type="primary"
                          size="small"
                          :icon="View"
                          link
                          @click="
                            () => {
                              editContentVisible.healthGuidance = true;
                              state.rowData = todoItem;
                            }
                          "
                        >
                          查看
                        </el-button>
                      </template>
                    </div>
                    <div v-if="todoItem.remark" class="mb-2">
                      <el-text size="small" type="info">事项提醒：</el-text>
                      <el-button
                        type="primary"
                        size="small"
                        :icon="View"
                        link
                        @click="
                          () => {
                            state.visibleDetail = true;
                            state.rowData = todoItem;
                          }
                        "
                        >查看</el-button
                      >
                    </div>
                    <div class="mb-2">
                      <template v-if="todoItem.content?.visitGuidance">
                        <el-text size="small" type="info"
                          >随访人员指导：</el-text
                        >
                        <el-button
                          type="primary"
                          size="small"
                          :icon="View"
                          link
                          @click="
                            () => {
                              editContentVisible.visitGuidance = true;
                              state.rowData = todoItem;
                            }
                          "
                        >
                          查看
                        </el-button>
                      </template>
                    </div>
                  </template>

                  <template v-else-if="todoItem.type == 0">
                    <div class="my-2">
                      <el-text size="small" type="info"
                        >事项内容：{{ todoItem.content }}</el-text
                      >
                    </div>
                    <div v-if="todoItem.remark">
                      <el-text size="small" type="info">事项提醒：</el-text>
                      <el-button
                        type="primary"
                        size="small"
                        :icon="View"
                        link
                        @click="
                          () => {
                            state.visibleDetail = true;
                            state.rowData = todoItem;
                          }
                        "
                        >查看</el-button
                      >
                    </div>
                  </template>
                  <div v-if="todoItem?.comment">
                    <el-text size="small" type="info"
                      >完成情况备注： {{ todoItem?.comment }}</el-text
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else>
            <el-empty />
          </div>
        </div>
      </el-card>
    </div>
    <el-dialog
      title="完成情况备注"
      append-to-body
      v-model="state.visibleRemark"
    >
      <div class="mt-2">
        <el-input
          v-model="state.rowData.comment"
          placeholder="选填，输入事项完成备注信息"
          :autosize="{ minRows: 6, maxRows: 10 }"
          type="textarea"
        />
      </div>
      <template #footer>
        <el-button type="primary" plain @click="state.visibleRemark = false"
          >取消</el-button
        >
        <el-button type="primary" @click="onSaveRemark()">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog title="事项提醒" append-to-body v-model="state.visibleDetail">
      <div>
        <div v-html="state.rowData.remark" />
      </div>
    </el-dialog>

    <el-dialog
      title="随访问卷"
      append-to-body
      v-model="editContentVisible.questions"
    >
      <!-- <div>
        <div v-if="state.rowData.content?.questions?.length">
          <div
            v-for="(item, index) in state.rowData.content?.questions"
            :key="index"
            class="m-1 bg-gray-100 rounded p-4 mb-3"
          >
            <SimpleQuestionItem :info="item" :id="item.id" :edit="true" />
          </div>
          <el-button type="primary" @click="onSaveQuestio">保存</el-button>
        </div>
      </div> -->

      <customSurvey
        :content="{
          content:
            state.rowData.content?.questions ||
            state.rowData.template?.questions,
          logicCode:
            state.rowData.content?.logicCode ||
            state.rowData.template?.logicCode
        }"
        @onSave="onSaveQuestion"
        ref="customSurveyRef"
      />
      <!-- <customSurvey
        :content="{
          content: state.rowData.template?.questions,
          logicCode: state.rowData.template?.logicCode
        }"
        @onSave="onSaveQuestion"
      /> -->
    </el-dialog>
    <el-dialog
      title="随访健康指导"
      append-to-body
      v-model="editContentVisible.healthGuidance"
    >
      <div>
        <div v-html="state.rowData.content.healthGuidance" />
      </div>
    </el-dialog>
    <el-dialog
      title="随访人员指导"
      append-to-body
      v-model="editContentVisible.visitGuidance"
    >
      <div>
        <div v-html="state.rowData.content.visitGuidance" />
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { defineProps, reactive, defineEmits, defineOptions, ref } from "vue";

import {
  CaretRight,
  SuccessFilled,
  CircleCheck,
  View,
  Edit
} from "@element-plus/icons-vue";
import { request } from "@/utils";
import { ElMessage } from "element-plus";
import customSurvey from "./customSurvey.vue";
const typeMap = ["其他", "复查", "随访", "监测", "检查", "回访"];
const props = defineProps({
  list: {
    type: Array
  },
  currentDate: {
    type: String
  },
  uncompleted: Boolean // 是否未完成
});
const emits = defineEmits(["success"]);
const state = reactive({
  visibleRemark: false,
  visibleDetail: false,
  visibleFollowUp: false,
  rowData: {},
  date: ""
});
const customSurveyRef = ref();
const editContentVisible = reactive({
  questions: false,
  healthGuidance: false,
  visitGuidance: false
});
const isToday = date => {
  return props.currentDate == date && props.uncompleted;
};
const handleEditRemark = (item, date) => {
  state.rowData = item;
  state.date = date;
  state.visibleRemark = true;
};
const onSaveRemark = () => {
  const item = state.rowData;
  request
    .post("dataService/schedule/todo/comment", {
      id: item.id,
      date: state.date,
      comment: item.comment
    })
    .then(resp => {
      ElMessage.success(resp.message);
      state.visibleRemark = false;
      emits("success");
    });
};
const handleEditQuestion = todoItem => {
  editContentVisible.questions = true;
  state.rowData = todoItem;
  setTimeout(() => {
    customSurveyRef.value?.init();
  }, 500);
};
const handleDone = (item, date) => {
  request
    .post("dataService/schedule/checkTodo", {
      id: item.id,
      date: date,
      status: item.done ? 0 : 1
    })
    .then(resp => {
      ElMessage.success(resp.message);
      emits("success");
    });
};
const onSaveQuestion = ({ questions, viewQuestions }) => {
  request
    .post("dataService/schedule/todo/content", {
      id: state.rowData.id,
      date: state.rowData.startDate,
      content: {
        ...state.rowData.content,
        questions: questions,
        viewQuestions: viewQuestions
      }
    })
    .then(resp => {
      ElMessage.success(resp.message);
      editContentVisible.questions = false;
      emits("success");
    });
};

defineOptions({
  name: "CurrentMonthTodoItems"
});
</script>
<style lang="scss" scoped>
.current-month-todo-items {
  ::v-deep {
    .el-card__header {
      padding: 0;
    }
  }
}
</style>
