<template>
  <div>
    <el-dialog
      title="待办事项"
      v-model="dialogVisible"
      fullscreen
      :show-close="false"
    >
      <template #header>
        <el-card border>
          <template #header>
            <div class="flex items-center justify-between">
              <h3>待办事项</h3>
              <div class="text-right">
                <el-button type="danger" plain @click="dialogVisible = false"
                  >关闭</el-button
                >
              </div>
            </div>
          </template>
          <div>
            <div>
              <el-row :gutter="40">
                <el-col :span="6">
                  <div>
                    <ComponentProfileCard :id="currentArchiveId" />
                    <div class="pt-5" />
                    <div
                      v-for="(menu, menuIdx) in menus"
                      :key="menuIdx"
                      class="flex items-center justify-between py-3 px-4 border-0 border-b border-solid border-gray-100 cursor-pointer text-sm hover:bg-gray-50"
                      :class="{
                        'bg-gray-50 text-blue-500': curMenu === menu.key
                      }"
                      @click="curMenu = menu.key"
                    >
                      <span>{{ menu.label }}</span>
                      <ArrowRight class="w-4" />
                    </div>
                    <div class="pt-3">
                      <el-text tag="b">选择指定月份或日期处理待办</el-text>
                      <div
                        class="border border-solid border-gray-100 pt-3 mt-3"
                      >
                        <div class="flex justify-between">
                          <el-date-picker
                            v-model="state.date"
                            type="month"
                            placeholder="选择月份"
                            value-format="YYYY-MM"
                            @change="handleMonth"
                            class="ml-2"
                          />
                          <div class="pr-2">
                            <el-button
                              type="primary"
                              link
                              @click="handleBackToday"
                              >返回今天</el-button
                            >
                          </div>
                        </div>
                        <el-calendar
                          v-model="state.calendarValue"
                          ref="calendarRef"
                        >
                          <template #header>
                            <div />
                          </template>
                        </el-calendar>
                      </div>
                      <div class="pt-3">
                        <el-text tag="b" class="text-base">说明</el-text>
                        <div class="flex items-center pt-2">
                          <div
                            class="bg-red-600 w-2.5 h-2.5 rounded-full inline-block mr-2"
                          />
                          <span class="text-sm"
                            >表示当天用户有待办事项需完成</span
                          >
                        </div>
                        <div class="flex items-center mb-3 mt-3">
                          <div
                            class="bg-green-600 w-2.5 h-2.5 rounded-full inline-block mr-2"
                          />
                          <span class="text-sm"
                            >表示当天用户所有待办事项已完成</span
                          >
                        </div>
                        <div class="flex items-center">
                          <div
                            class="bg-blue-600 w-2.5 h-2.5 rounded-full inline-block mr-2"
                          />
                          <span class="text-sm"
                            >表示当天用户还有部分待办事项需完成</span
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="18" class="border-0 border-l-8 border-gray-100">
                  <el-form label-width="120px" label-position="left">
                    <el-form-item label="选择事项类别:" required>
                      <el-radio-group v-model="state.itemType">
                        <el-radio
                          v-for="(item, index) in itemTypeList"
                          :key="index"
                          :label="item.value"
                        >
                          {{ item.key }}</el-radio
                        >
                      </el-radio-group>
                    </el-form-item>
                  </el-form>
                  <component :is="cmps[state.itemType]" />
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </template>
    </el-dialog>
    <ComponentDialogBacklogCheckbox
      v-model:show="state.visibleBacklogHandle"
      :date="state.time"
      :type="props.type"
      @success="getList"
    />
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import moment from "moment";
import { ArrowRight } from "@element-plus/icons-vue";
import {
  ref,
  computed,
  defineProps,
  defineEmits,
  watch,
  reactive,
  defineAsyncComponent
} from "vue";
import ComponentDialogBacklogCheckbox from "./DialogBacklogCheckbox.vue";
import ComponentProfileCard from "./ProfileCard.vue";
import { useManageProjectStoreHook } from "@/store/modules/manageProject";
const useManageProject = useManageProjectStoreHook();

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

const itemTypeList = ref([
  {
    key: "复查",
    value: 1
  },
  {
    key: "随访",
    value: 2
  },
  {
    key: "日常监测",
    value: 3
  },

  {
    key: "其他",
    value: 4
  },

  {
    key: "检查",
    value: 5
  },

  {
    key: "回访",
    value: 6
  }
]);
const cmps = {
  1: defineAsyncComponent(() => import("./TodoItemCheck.vue")), // 复查
  2: defineAsyncComponent(() => import("./TodoItemFollowUp.vue")) // 随访
};
const calendarRef = ref();
const menus = [
  {
    label: "新增待办事项",
    key: "NewTodoItems"
  },
  {
    label: "待办事项管理",
    key: "TodoManagement"
  },
  {
    label: "本月待办处理",
    key: "HandleMonthTodo"
  }
];
const state = reactive({
  date: moment().format("YYYY-MM"),
  calendarValue: "",
  visibleBacklogHandle: false,
  time: "",
  itemList: {},
  itemDateList: [],
  itemType: 1 // 事项类别
});
const currentArchiveId = computed(() => {
  return useManageProjectStoreHook()?.currentArchiveId;
});
watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      getList();
    } else {
    }
  }
);
const getList = () => {
  request
    .get("/platformApi/dataService/diseaseManage/todoList", {
      params: {
        archiveId: currentArchiveId.value,
        date: state.date
      }
    })
    .then(resp => {
      const itemObj = {};
      resp.data.map(v => {
        itemObj[v.date] = v;
      });

      state.itemList = itemObj;

      state.itemDateList = resp.data
        .filter(v => {
          return v.checkItems;
        })
        .map(v => v.date);
    });
};
const handleMonth = date => {
  state.calendarValue = date;
  getList();
};
const handleBackToday = () => {
  calendarRef.value.selectDate("today");
};

const handleCheckDate = date => {
  state.time = date.day;
  state.visibleBacklogHandle = true;
};
</script>
<style scoped lang="scss">
::v-deep .el-calendar__button-group {
  display: none;
}
::v-deep .el-calendar-table .el-calendar-day {
  text-align: center;
}
.item-card {
  height: 100%;
}
</style>
