<template>
  <div>
    <el-form :model="searchForm" inline label-width="0" @submit.prevent="searchList">
      <el-form-item>
        <el-input v-model="searchForm.title" placeholder="输入标题" />
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchForm.priority" placeholder="选择优先级" clearable filterable>
          <el-option
            v-for="item in priorityOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item>
        <el-select
          v-model="searchForm.completeStatus"
          placeholder="选择完成状态"
          clearable
          filterable
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button @click="searchList"> 搜索</el-button>
        <el-button type="primary" @click="handleAdd"> 新增</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="tabIndex" @tab-change="searchList">
      <el-tab-pane :name="1">
        <template #label>
          <el-badge :value="tabCount.dayEndAgentWorkNum" :max="99" :show-zero="false">
            <el-tooltip content="截止日在今日及之前的未关闭事项" placement="top" effect="dark">
              <Icon icon="ep:question-filled" />
            </el-tooltip>
            <span>今日截止</span>
          </el-badge>
        </template>
      </el-tab-pane>
      <el-tab-pane :name="2">
        <template #label>
          <el-tooltip content="需要我执行的全部事项" placement="top" effect="dark">
            <Icon icon="ep:question-filled" />
          </el-tooltip>
          <span>我的待办</span>
        </template>
      </el-tab-pane>
      <el-tab-pane :name="3">
        <template #label>
          <el-badge :value="tabCount.urgeAgentWorkNum" :max="99" :show-zero="false">
            <el-tooltip content="指派他人去办的事项" placement="top" effect="dark">
              <Icon icon="ep:question-filled" />
            </el-tooltip>
            <span>催办事项</span>
          </el-badge>
        </template>
      </el-tab-pane>
      <!-- <el-tab-pane :name="4">
        <template #label>
          <el-badge :value="tabCount.notifyNum" :max="99" :show-zero="false">
            <el-tooltip content="特指OKR中@我的消息" placement="top" effect="dark">
              <Icon icon="ep:question-filled" />
            </el-tooltip>
            <span>通知我的</span>
          </el-badge>
        </template>
        <el-table :data="mentionedList">
          <el-table-column type="index" width="50" />
          <el-table-column prop="content" label="okr标题" />
          <el-table-column prop="createUserName" label="创建人" />
          <el-table-column prop="createDate" label="创建日期" />
          <el-table-column fixed="right" label="操作" width="140">
            <template #default="{ row }">
              <el-button style="padding: 0" type="primary" text @click="handleShow(row)">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane> -->
    </el-tabs>

    <el-table v-if="tabIndex != 4" :data="tableList">
      <el-table-column type="index" width="50" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="priority" label="优先级">
        <template #default="{ row }">
          <el-tag :type="priorityFilter(row.priority)">
            {{ priorityNameFilter(row.priority) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="creatorName" label="创建人" />
      <el-table-column prop="createTime" label="创建日期" :formatter="dateFormatter" />
      <el-table-column prop="userNameStr" label="执行人" />
      <el-table-column prop="endDate" label="截止日期" :formatter="dateFormatter" />
      <el-table-column label="状态">
        <template #default="{ row }">
          <el-tag :type="statusFilter(row.completeStatus)">{{
            statusNameFilter(row.completeStatus)
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="completedDate" label="关闭日期" :formatter="dateFormatter" />
      <el-table-column fixed="right" label="操作" width="140">
        <template #default="{ row }">
          <el-button
            v-if="row.userIdList.includes(currentUserId) && row.completeStatus == 1"
            style="padding: 0; margin-right: 10px"
            type="primary"
            text
            @click="handleDo(row)"
          >
            跟进
          </el-button>
          <el-button
            v-if="!row.userIdList.includes(currentUserId) && row.completeStatus == 1"
            style="padding: 0; margin-right: 10px; margin-left: 0"
            type="primary"
            text
            @click="handleNotice(row)"
          >
            催办
          </el-button>
          <el-button
            v-if="row.creator == currentUserId && row.completeStatus == 1"
            style="padding: 0; margin-right: 10px; margin-left: 0"
            type="primary"
            text
            @click="handleEdit(row)"
          >
            修改
          </el-button>
          <el-button
            v-if="row.completeStatus == 2"
            style="padding: 0; margin-right: 10px; margin-left: 0"
            type="primary"
            text
            @click="handleDetail(row)"
          >
            详情
          </el-button>
          <el-button
            v-if="row.creator == currentUserId && row.completeStatus == 1"
            style="padding: 0; margin-right: 10px; margin-left: 0"
            type="danger"
            text
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-model:limit="searchForm.pageSize"
      v-model:page="searchForm.pageNo"
      :total="total"
      @pagination="getList"
    />

    <DialogWait ref="waitDialogRef" @success="getList" />
  </div>
</template>

<script setup name="WaitTarget">
import { useUserStore } from '@/store/modules/user'
import { dateFormatter } from '@/utils/formatTime'
import DialogWait from './Components/DialogWait.vue'

import { getWaitPage, deleteWait, getWaitCount, urgeWait } from '@/api/okr/wait'

const route = useRoute()
const userStore = useUserStore()
const currentUserId = userStore.getUser.id

const message = useMessage()

const searchForm = ref({
  title: undefined,
  completeStatus: undefined,
  priority: undefined,
  pageNo: 1,
  pageSize: 50
})

const statusOptions = [
  { label: '未完成', value: 1, tagType: 'warning' },
  { label: '已关闭', value: 2, tagType: 'success' }
]

const statusFilter = (status) => {
  return statusOptions.find((item) => item.value == status)?.tagType
}

const statusNameFilter = (status) => {
  return statusOptions.find((item) => item.value == status)?.label
}

const priorityOptions = [
  { label: '高', value: '1', tagType: 'danger' },
  { label: '中', value: '2', tagType: 'warning' },
  { label: '低', value: '3', tagType: 'info' }
]

const priorityFilter = (priority) => {
  return priorityOptions.find((item) => item.value == priority)?.tagType
}

const priorityNameFilter = (priority) => {
  return priorityOptions.find((item) => item.value == priority)?.label
}

const tabIndex = ref(1)

onMounted(() => {
  if (route?.query?.type) {
    tabIndex.value = Number(route.query.type)
  } else {
    tabIndex.value = 1
  }
  searchList()
})

function searchList() {
  searchForm.value.pageNo = 1
  getList()
}

const tabCount = ref({
  dayEndAgentWorkNum: 0,
  myAgentWorkNum: 0,
  urgeAgentWorkNum: 0,
  notifyNum: 0
})
function getTabCount() {
  getWaitCount({
    title: searchForm.value.title,
    priority: searchForm.value.priority
  }).then((res) => {
    tabCount.value = res
  })
}

const loading = ref(false)
const tableList = ref([])
// const mentionedList = ref([])
const total = ref(0)
function getList() {
  loading.value = true
  try {
    searchForm.value.queryType = tabIndex.value
    getWaitPage(searchForm.value).then((res) => {
      tableList.value = res.list
      total.value = res.total
      loading.value = false
    })
    getTabCount()
  } catch (error) {}
}

function handleDo(row) {
  waitDialogRef.value.open('do', row.workId)
}

const waitDialogRef = ref()
function handleAdd() {
  waitDialogRef.value.open('create')
}

function handleEdit(row) {
  waitDialogRef.value.open('update', row.workId)
}

function handleDetail(row) {
  waitDialogRef.value.open('detail', row.workId)
}

function handleDelete(row) {
  message.confirm('确定删除待办事项吗？').then(() => {
    deleteWait(row.workId).then(() => {
      message.success('删除成功')
      getList()
    })
  })
}

function handleNotice(row) {
  message.confirm('即将发送微信通知提醒执行人，是否继续？').then(() => {
    urgeWait(row.workId).then(() => {
      message.success('发送成功')
    })
  })
}

// function handleShow(row) {
//   console.log(row)
//   message.success('打开okr详情页')
// }
</script>

<style lang="scss" scoped></style>
