
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { getMessageList, setMessageStatus, setAllMessageStatus, deleteMessageById } from '@/api/message/index'
import Page from '@/components/Pagination/page.vue'
const emit = defineEmits(['update:dialogVisible'])
const props = defineProps({
  dialogVisible: {
    type: Boolean
  },
});
const active = ref('0')
const loading = ref(false)
const tableData = ref([])
const tableDataSel = ref([])
const isLookOver = ref(false)
const info = ref({
  title: '',
  createtime: '',
  content: ''
})
const queryParams = ref({
  current: 1,
  size: 10,
  title: '',
  type: '',
  status: active.value,
  startDate: '',
  endDate: ''
});
const createtime = ref('')
const total = ref()
const handleClose = () => {
  emit(
    'update:dialogVisible',
    false
  );
}
function handleSelectionChange(val: any) {
  tableDataSel.value = val;
}
function reset() {
  queryParams.value.title = ''
  queryParams.value.type = ''
  queryParams.value.startDate = ''
  queryParams.value.endDate = ''
  createtime.value = ''
  init()
}
function init() {
  loading.value = true
  queryParams.value.status = active.value
  if(createtime.value) {
    queryParams.value.startDate = createtime.value[0]
    queryParams.value.endDate = createtime.value[1]
  }
  if(Number(active.value) == 0) {
    queryParams.value.title = ''
    queryParams.value.type = ''
    createtime.value = ''
  }
  getMessageList(queryParams.value).then((result) => {
    loading.value = false
    tableData.value = result.data.records
    total.value = result.data.total
    queryParams.value.size = result.data.size;
    queryParams.value.current =  result.data.current
  }).catch(() => {
    loading.value = false
  });
}
function open(row: any) {
  const id = [row.id]
  setMessageStatus(id.join(',')).then(() => {
    init()
  })
  isLookOver.value = true
  info.value = JSON.parse(JSON.stringify(row))
}
function del(row:any) {
  ElMessageBox.confirm(
    '确定删除此消息吗',
    '删除提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then( async () => {
      const id = [] as any[]
      if(row.id == null) {
        tableDataSel.value.forEach((element:any) => {
          id.push(element.id)
        });
      } else {
          id.push(row.id)
      }
      deleteMessageById(id.join(',')).then(() => {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        init()
      })
    })
}
function tabClick() {
  ElMessageBox.confirm(
    '确定将全部消息标记为已阅吗？',
    '提示信息',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then( async () => {
      setAllMessageStatus().then(() => {
        ElMessage({
          message: "已读成功",
          type: "success",
        });
        init()
      })
    })
}
defineExpose({
  init
});
onMounted(() => {
})
</script>
<template>
  <el-dialog class="dialog" draggable v-model="props.dialogVisible" width="1100" top="3vh" append-to-body
    :before-close="handleClose" :show-close="!isLookOver">
    <el-tabs v-show="!isLookOver" v-model="active" @tab-change="init" type="border-card">
      <el-tab-pane label="最新消息">
      </el-tab-pane>
      <el-tab-pane label="历史消息">
        <div class="flex justify-between mb-4">
          <div class="flex items-center ">
            <el-input v-model="queryParams.title" placeholder="请输入消息标题" clearable style="width: 200px;margin-right:10px" @keyup.enter="init" />
            <el-select v-model="queryParams.type" clearable default-first-option placeholder="消息类型" style="width: 200px;margin-right:10px" @change="init">
              <el-option label="定时任务" value="1" />
              <el-option label="工作流触发" value="2" />
              <el-option label="人工任务" value="3" />
            </el-select>
            <el-date-picker
              v-model="createtime"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD"
              @change="init"
            />
            <el-button type="primary" style="margin-left: 10px;" @click="init">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </div>
          <el-button :disabled="tableDataSel.length==0" type="primary" @click="del">
            <span>删除</span>
          </el-button>
        </div>
      </el-tab-pane>
      <el-table v-loading="loading" :data="tableData" style="width: 100%; margin-bottom: 20px;overflow:hidden;" height="400px"
          row-key="id" border @selection-change="handleSelectionChange" default-expand-all
          :header-cell-style="{ background: 'rgb(250 250 250)', height: '50px' }">
          <el-table-column v-if="active == '1'" type="selection" align="center" width="50" />
          <el-table-column type="index" label="序号" align="center" width="70" />
          <el-table-column prop="title" label="消息标题">
            <template #default="scope">
              <span class="title" @click="open(scope.row)">{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="消息类型" width="100">
            <template #default="scope">
              {{ scope.row.type == '1' ? '定时任务' : (scope.row.type == '2' ? '工作流触发' : '人工触发') }}
            </template>
          </el-table-column>
          <el-table-column prop="senderName" label="发送者" width="120"></el-table-column>
          <el-table-column prop="createtime" label="通知时间" width="180"></el-table-column>
          <el-table-column label="状态" width="180">
            <template #default="scope">
              <span :style="{color:scope.row.status == '2'?'rgb(55, 196, 122)':scope.row.status == '9'?'rgb(255, 153, 0)':''}">{{ scope.row.status != '1'?'●':''}} {{ scope.row.status == '1' ? '初始创建' : (scope.row.status == '2' ? '消息已阅' : '消息过期') }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="active == '1'" fixed="right" align="center" label="操作" width="80">
            <template #default="scope">
              <img src="@/assets/MenuIcon/lbcz_sc.png" alt="" @click="del(scope.row)" 
                title="删除" style="cursor: pointer;margin-left:10px">
            </template>
          </el-table-column>
        </el-table>
        <div class="flex justify-between items-center mb-4">
          <Page :total="total" v-model:size="queryParams.size" v-model:current="queryParams.current" @pagination="init()" ></Page>
          <el-button v-if="active == '0'" type="primary" @click="tabClick">
            <span>全部已读</span>
          </el-button>
        </div>
    </el-tabs>
    <div v-show="isLookOver" class="p-6">
      <div class="flex justify-between">
        <span class="font-black" style="color: #000;font-size: 20px;">{{ info.title }}</span>
        <el-button type="primary" plain @click="isLookOver = false">
          返回
        </el-button>
      </div>
      <div style="height:50px;line-height: 50px;border-bottom: 1px solid #e4e4e4;">
        <span style="color: rgb(148, 148, 148);font-size:14px;">{{ info.createtime }}</span>
      </div>
      <div style="color:rgb(80, 80, 80);font-size: 14px;padding-top:15px;overflow:auto">
        {{ info.content }}
      </div>
    </div>
  </el-dialog>
</template>
<style lang="scss">
.title{
  color:rgb(64, 158, 255);
  cursor: pointer;
  &:hover{
    text-decoration: underline;
  }
}
.dialog {
  height: 500px;

  img {
    display: inline-block;
  }

  .el-tabs__content,
  .el-tabs--border-card {
    border: none !important;
  }

  .el-tabs__item {
    height: 50px !important;
    line-height: 50px !important;
  }

  .el-dialog__headerbtn {
    z-index: 100;
    top: 0px;
  }

  .el-dialog__header {
    padding: 0 !important;
  }

  .el-dialog__body {
    padding: 0 !important;
  }
}
</style>
