<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.status" 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>
    <div>
      <Icon icon="ep:info-filled" />
      <span>开发注意：</span>
      <div>列表排序 1 状态按照未完成在前、已关闭在后， 2优先级根据高中低排序 3截止日期正序</div>
      <div>
        表格全部操作按钮：创建人(修改、删除、催办->微信通知)、执行人(跟进);且与完成状态相关
      </div>
    </div>
    <el-tabs v-model="tabIndex" @tab-click="searchList">
      <el-tab-pane :name="1">
        <template #label>
          <el-badge :value="9" :max="99">
            <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="3" :max="99">
            <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="999" :max="99">
            <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="createUserName" label="创建人" />
      <el-table-column prop="createDate" label="创建日期" />
      <el-table-column prop="executorNames" label="执行人" />
      <el-table-column prop="dueDate" label="截止日期" />
      <el-table-column label="状态">
        <template #default="{ row }">
          <el-tag :type="statusFilter(row.status)">{{ statusNameFilter(row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="completeDate" label="关闭日期" />
      <el-table-column fixed="right" label="操作" width="140">
        <template #default="{ row }">
          <el-button
            v-if="row.executorIds.includes(currentUserId) && row.status == 1"
            style="padding: 0; margin-right: 10px"
            type="primary"
            text
            @click="handleDo(row)"
          >
            跟进
          </el-button>
          <el-button
            v-if="row.createUserId == currentUserId && row.status == 1"
            style="padding: 0; margin-right: 10px; margin-left: 0"
            type="primary"
            text
            @click="handleEdit(row)"
          >
            修改
          </el-button>
          <el-button
            v-if="!row.executorIds.includes(currentUserId) && row.status == 1"
            style="padding: 0; margin-right: 10px; margin-left: 0"
            type="primary"
            text
            @click="handleNotice(row)"
          >
            催办
          </el-button>
          <el-button
            v-if="row.createUserId == currentUserId && row.status == 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 DialogWait from './DialogWait.vue'

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

const message = useMessage()

const searchForm = ref({
  title: undefined,
  status: 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(() => {
  searchList()
})

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

const loading = ref(false)
const tableList = ref([])
const mentionedList = ref([])
const total = ref(0)
function getList() {
  loading.value = true
  try {
    // 用settimeout模拟网络请求
    setTimeout(() => {
      loading.value = false
      if (tabIndex.value == 4) {
        mentionedList.value = [
          {
            id: 1,
            content: '我是老六@张三',
            createUserName: '王二',
            createDate: '2025-03-07'
          }
        ]
      } else {
        const list = [
          {
            id: 1,
            title: '今日跟进数量达到100',
            description: '今日成交数量达到10',
            priority: 1,
            createUserId: 1,
            createUserName: '系统',
            createDate: '2025-03-07',
            executorIds: ['1818599239840960512'],
            executorNames: '张三',
            dueDate: '2025-03-07',
            status: 1,
            completeDate: ''
          },
          {
            id: 2,
            title: '今日跟进数量达到100',
            description: '今日成交数量达到10',
            priority: 1,
            createUserId: '1818599239840960512',
            createUserName: '张三',
            createDate: '2025-03-07',
            executorIds: ['1818599239840960512', '123'],
            executorNames: '张三，李四',
            dueDate: '2025-02-07',
            status: 1,
            completeDate: ''
          },
          {
            id: 3,
            title: '今日跟进数量达到100',
            description: '今日成交数量达到10',
            priority: 1,
            createUserId: '1818599239840960512',
            createUserName: '张三',
            createDate: '2025-03-07',
            executorIds: ['1818599239840960512'],
            executorNames: '张三',
            dueDate: '2025-03-17',
            status: 2,
            completeDate: '2025-03-07'
          },
          {
            id: 2,
            title: '今日跟进数量达到100',
            description: '今日成交数量达到10',
            priority: 1,
            createUserId: '1818599239840960512',
            createUserName: '张三',
            createDate: '2025-03-07',
            executorIds: ['123'],
            executorNames: '李四',
            dueDate: '2025-02-07',
            status: 1,
            completeDate: ''
          }
        ]
        tableList.value = list.filter((item) => {
          if (tabIndex.value == 1) {
            return item.status == 1
          } else {
            return item
          }
        })
      }
      total.value = 1
    }, 1000)
    // getWaitTargetList(searchForm.value).then((res) => {
    //   tableList.value = res.data
    //   total.value = res.total
    //   loading.value = false
    // })
  } catch (error) {}
}

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

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

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

function handleDelete(row) {
  console.log(row)
}

function handleNotice(row) {
  console.log(row)

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

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

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