<!-- 首页列表 - 未读已读 -->
<script lang="ts" setup name="BoardIndex">
import { ElMessage } from 'element-plus'
import { getBoardMessage, setRead } from '@/api/eqpt/dashboard/index'
export interface menuType {
  name: string
  comp: any
}
const $route = useRoute()
const menu = ref<any[]>([
  { name: '未读', status: '0' },
  { name: '已读', status: '1' },
])
const TypeMap: { [key: string]: string } = {
  verification: '检定通知',
  notice: '通知公告',
  work: '工作提醒',
}

const listQuery = reactive({
  messageType: '', // 类型
  sourceModule: '', // 来源模块
  offset: 1,
  messageModule: TypeMap[$route.params.type as string],
  limit: 20,
  readStatus: '0',
  messageEndTime: '',
  messageStartTime: '',
})
// 开始结束时间
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: 'messageType',
    align: 'center',
  },
  {
    text: '来源模块',
    value: 'messageModule',
    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
  }
  getBoardMessage(listQuery).then((response) => {
    list.value = response.data.rows
    total.value = parseInt(response.data.total)
    listLoading.value = false
  })
}
fetchData()
// 查询数据
const search = () => {
  fetchData(false)
}
const current = ref('未读')
watch(() => current.value, (newVal) => {
  if (newVal === '未读') {
    listQuery.readStatus = '0'
  }
  else {
    listQuery.readStatus = '1'
  }
  search()
})

// 重置
const reset = () => {
  datetimerange.value = []
  listQuery.messageEndTime = ''
  listQuery.messageStartTime = ''
  listQuery.messageType = ''
  listQuery.sourceModule = ''
  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) => {
  function nav(path: string) {
    $router.push({
      path,
      query: {
        row: JSON.stringify({ id: row.bizId, equipmentId: row.bizId }),
        id: row.bizId,
        statusName: '审批',
      },
    })
  }
  function handler() {
    if (row.messageType || row.messageModule) {
      if (window.$pathDict[row.messageType]) {
        if (row.messageModule.includes('tzsb')) {
          nav('/speciallist/detail')
        }
        else {
          nav(window.$pathDict[row.messageType])
        }
      }
      if (window.$pathDict[row.messageModule]) {
        if (row.messageModule.includes('tzsb')) {
          nav('/speciallist/detail')
        }
        else {
          nav(window.$pathDict[row.messageModule])
        }
      }
    }
    else {
      ElMessage.warning('暂无详情')
    }
  }
  if (current.value.includes('未')) {
    setRead(row).then((res) => {
      handler()
    })
  }
  else {
    handler()
  }
}
</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-item>
          <el-input v-model.trim="listQuery.messageType" 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 === '0' ? '未读' : '已读' }}
              </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>