<template>
  <div>
    <el-card shadow="never">
      <template #header>
        <el-row class="flex items-center">
          <h4 class="mr-4">待办事项短信通知</h4>
          <el-switch
            v-model="status"
            style="--el-switch-on-color: #13ce66"
            :active-value="1"
            :inactive-value="0"
            @change="handleChangeStatus"
          />
        </el-row>
        <span class="text-yellow-600 text-sm"
          >开启后，系统将在每周末自动统计用户下周的待办事项，如果有，将会给用户发送短信通知消息</span
        >
      </template>
      <div>
        <el-row>
          <div class="text-right w-full">
            <el-space wrap>
              <el-date-picker
                v-model="filter.time"
                type="datetimerange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
              <el-select v-model="filter.status" placeholder="请选择">
                <el-option label="全部状态" :value="-1" />
                <el-option
                  v-for="item in statusList"
                  :key="item.v"
                  :label="item.k"
                  :value="item.v"
                />
              </el-select>

              <SearchArchivesSelect
                style="width: 100%"
                v-model="filter.archiveId"
                placeholder="请选择档案"
              />
              <el-button type="primary" :icon="Search" @click="onSearch"
                >搜索</el-button
              >
            </el-space>
          </div>
        </el-row>
        <el-table :data="state.list" style="width: 100%" class="mt-10">
          <el-table-column prop="archiveId" label="短信通知对象档案号" />
          <el-table-column prop="archiveName" label="短信通知对象姓名" />
          <el-table-column prop="noticeTime" label="短信通知时间">
            <template #default="{ row }">
              <el-text>{{ row.noticeTime || "-" }}</el-text>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="短信通知状态">
            <template #default="{ row }">
              <el-text :class="statusList[row.status - 1]?.c"
                >{{ statusList[row.status - 1]?.k || "-" }}
              </el-text>
            </template>
          </el-table-column>
          <el-table-column prop="noticeTime" label="备注信息">
            <template #default="{ row }">
              <el-text>{{ row.remark }}</el-text>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import SearchArchivesSelect from "@/components/Archives/SearchArchivesSelect.vue";

import { request } from "@/utils";
import { Search, Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import moment from "moment";

import { reactive } from "vue";
import { ref } from "vue";

const status = ref(0);
const filter = reactive({
  time: "",
  status: -1,
  page: 1,
  pageSize: 15,
  archiveId: ""
});
const state = reactive({
  list: [],
  total: 0
});
const statusList = ref([
  {
    k: "发送成功",
    v: 1,
    c: "text-green-600"
  },
  {
    k: "发送失败",
    v: 2,
    c: "text-red-600"
  },
  {
    k: "用户接收成功",
    v: 3,
    c: "text-green-600"
  },
  {
    k: "用户接收失败",
    v: 4,
    c: "text-red-600"
  }
]);
const onSearch = () => {
  filter.page = 1;
  getList();
};
const handleChangeStatus = () => {
  ElMessageBox.confirm(
    status.value
      ? `确定要开启吗？开启后，系统将于${moment().format(
          "YYYY年MM月DD日"
        )}开始，每个周末统计所有用户下周的待办事项，并依次发送短信通知`
      : "确定要关闭吗？关闭后系统不会再给用户发送待办事项提醒短信",
    "",
    {
      distinguishCancelAndClose: true,
      confirmButtonText: "确定",
      cancelButtonText: "取消"
    }
  )
    .then(async () => {
      await request.post("dataService/diseaseManage/todo/notice/status", {
        status: status.value
      });
      ElMessage.success("操作成功");
      getNoticeStatus();
    })
    .catch(err => {
      status.value = status.value ? 0 : 1;
    });
};
const getList = () => {
  request
    .get("dataService/diseaseManage/todo/notice/paginate", {
      params: filter
    })
    .then(resp => {
      state.list = resp.data.list;
      state.total = resp.data.total;
    });
};
const getNoticeStatus = () => {
  request.get("dataService/diseaseManage/todo/notice/status", {}).then(resp => {
    status.value = resp.data.status;
  });
};
const initData = () => {
  getList();
  getNoticeStatus();
};
initData();
</script>
