<!-- 首页列表 - 已处理未处理 -->
<script lang="ts" setup name="getBoardApprove">
import { ElMessage } from 'element-plus'
import { getBoardApprove, setRead } from '@/api/eqpt/dashboard/index'

export interface menuType {
  name: string
  comp: any
}
const proxy = getCurrentInstance() as any
const menu = ref<any[]>([
  { name: '未处理', status: '0' },
  { name: '已处理', status: '1' },
])
const current = ref('未处理')
const listQuery = reactive({
  offset: 1,
  limit: 20,
  sourceModule: '',
  messageStartTime: '',
  messageEndTime: '',
  readStatus: '0',
})
// 开始结束时间
const datetimerange = ref()
watch(() => datetimerange.value, (newVal) => {
  listQuery.messageStartTime = ''
  listQuery.messageEndTime = ''
  if (Array.isArray(newVal)) {
    if (newVal.length) {
      listQuery.messageStartTime = `${newVal[0]} 00:00:00`
      listQuery.messageEndTime = `${newVal[1]} 23:59:59`
    }
  }
})
const columns = ref([
  {
    text: '创建时间',
    value: 'messageTime',
    align: 'center',
  },
  {
    text: '主题',
    value: 'messageTopic',
    align: 'center',
  },
  {
    text: '来源模块',
    value: 'sourceModule',
    align: 'center',
  },
])
const list = ref([])
const total = ref(0)
const listLoading = ref(true)
// 获取数据
const fetchData = (isNowPage = true) => {
  listLoading.value = true
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    listQuery.offset = 1
  }
  getBoardApprove(listQuery).then((response) => {
    list.value = response.data.rows
    total.value = parseInt(response.data.total)
    listLoading.value = false
  })
}
fetchData()
// 查询数据
const search = () => {
  fetchData(false)
}
watch(() => current.value, (newVal) => {
  if (newVal === '未处理') {
    listQuery.readStatus = '0'
  }
  else {
    listQuery.readStatus = '1'
  }
  search()
})
// 重置
const reset = () => {
  datetimerange.value = []
  listQuery.sourceModule = ''
  listQuery.messageStartTime = ''
  listQuery.messageEndTime = ''
  listQuery.offset = 1
  listQuery.limit = 20
  search()
}
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size: number; page: number }) => {
  if (val && val.size) {
    listQuery.limit = val.size
  }
  if (val && val.page) {
    listQuery.offset = val.page
  }
  fetchData()
}
const $router = useRouter()
// 新建编辑操作
const handler = (row: any) => {
  if (row.formId) {
    if (row.formId === 'sbtzgl' && row.messageTopic.includes('tzsb')) {
      $router.push({
        path: '/speciallist/detail',
        query: {
          row: JSON.stringify({ id: row.bizId, equipmentId: row.bizId, taskId: row.taskId }),
          id: row.bizId,
          statusName: current.value === '未处理' ? '待审批' : '已审批',
        },
      })
    }
    else {
      $router.push({
        path: window.$pathDict[row.formId],
        query: {
          row: JSON.stringify({ id: row.bizId, equipmentId: row.bizId, taskId: row.taskId }),
          id: row.bizId,
          statusName: current.value === '未处理' ? '待审批' : '已审批',
        },
      })
    }
  }
  else {
    ElMessage.warning('暂无详情')
  }
}
</script>

<template>
  <div class="container">
    <div class="btns">
      <!-- 三级菜单 -->
      <el-radio-group v-model="current">
        <el-radio-button v-for="item in menu" :key="item.name" :label="item.name">
          {{ item.name }}
        </el-radio-button>
      </el-radio-group>
    </div>
    <!-- 展示区域 -->
    <app-container>
      <!-- 筛选条件 -->
      <search-area :need-clear="true" @search="search" @clear="reset">
        <search-item>
          <el-date-picker
            v-model="datetimerange" type="daterange" value-format="YYYY-MM-DD"
            format="YYYY-MM-DD" range-separator="至" start-placeholder="创建开始时间" end-placeholder="证创建结束时间"
          />
        </search-item>
        <search-item>
          <el-input v-model.trim="listQuery.sourceModule" placeholder="来源模块" clearable />
        </search-item>
      </search-area>
      <table-container>
        <!-- <template #btns-right>
          <icon-button icon="icon-add" title="新增" @click="handler({}, 'create')" />
        </template> -->
        <!-- 普通表格 -->
        <normal-table
          :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="listLoading"
          :is-showmulti-select="false" @change="changePage"
        >
          <template #columns>
            <el-table-column label="处理情况" width="140" align="center">
              <template #default="scope">
                {{ scope.row.readStatus }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="140" align="center">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="handler(scope.row)">
                  查看
                </el-button>
              </template>
            </el-table-column>
          </template>
        </normal-table>
      </table-container>
    </app-container>
  </div>
</template>

<style lang="scss" scoped>
.container {
  position: relative;

  .btns {
    position: fixed;
    top: 68px;
    right: 15px;
    z-index: 999;
  }
}
</style>

