<template>
  <PageWrapper>
    <el-row :gutter="10" class="mt-3">
      <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3" class="mb-4">
        <el-card shadow="hover" class="mb-4 border-0 proCard" :style="{ height: docHeight + 'px' }">
          <div v-for="(item,index) in messageTypeList" :key="index" @click="handleClick(item,index)" class="type-item" :class="index==activeIndex?'active':''">
            <el-badge :value="item.number?item.number:''" :max="99" class="item">
             <span class="t1">{{item.name}}</span>
            </el-badge>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="21" :lg="21" :xl="21" class="mb-4">
        <el-card shadow="hover" class="mb-4 border-0 proCard">
          <BasicTable
            :columns="columns"
            :request="loadDataTable"
            :row-key="(row) => row.id"
            ref="tableRef"
            :actionColumn="actionColumn"
            @selection-change="onSelectionChange"
          >
            <template #tableTitle>
              <el-button type="primary" @click="handleSetRead()">
                批量确认
              </el-button>
              <el-button type="danger" @click="handleDelete()" :disabled="!selectionData.length">
                  <template #icon>
                    <el-icon class="el-input__icon">
                      <Delete />
                    </el-icon>
                  </template>
                  删除
                </el-button>
            </template>
          </BasicTable>
        </el-card>
      </el-col>
    </el-row>
    <editDialog
        v-if="editVisible"
        :messageId="messageId"
        v-model:visible="editVisible"
        @success="reloadTable('noRefresh')"
    >
    </editDialog>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { reactive, ref, h,nextTick,defineAsyncComponent,onMounted } from 'vue';
  import { TableAction } from '@/components/Table';
  import { getMessageProfile,messageDelete,messageBatchDelete,setRead } from '@/api/dashboard/message';
  import { columns } from './columns';
  import {message,confirm} from "@/utils/auth";
  const editDialog = defineAsyncComponent(() =>
    import('./edit.vue')
)
const messageId =ref(0)
const docHeight = ref(500)
const activeIndex = ref(0)
const messageTypeList = ref([
  {
    name:'系统通知',
    value:1
  },
  {
    name:'用户私信',
    value:2
  },
  {
    name:'代办事项',
    value:3
  },
])
const editVisible=ref(false)
  const selectionData = ref([])
  const tableRef = ref();
  const formParams = reactive({
    type:1
  });
  const actionColumn = reactive({
    width: 250,
    label: '操作',
    prop: 'action',
    fixed: 'right',
    render(record) {
      return h(TableAction, {
        style: 'button',
        actions: [
          {
            label: '确认',
            type: 'warning',
            onClick: handleSetRead.bind(null, record),
          },
          {
            label: '详情',
            icon:'View',
            type: 'warning',
            onClick: handleInfo.bind(null, record),
          },
          {
            label: '删除',
            icon:'Delete',
            type: 'danger',
            onClick: handleDelete.bind(null, record),
          },
        ],
      });
    },
  });

  const loadDataTable = async (res: any) => {
    const result = await getMessageProfile({ ...formParams, ...res });
    let item = messageTypeList.value.find((item,index)=>index==activeIndex.value)
    item.number = result.number
    return result;
  };

  function reloadTable(noRefresh='') {
    tableRef.value.reload(noRefresh?{}:{pageNo:1});
  }
const handleClick = (item,index)=>{
  activeIndex.value =index
  formParams.type = item.value
  reloadTable()
}

const handleInfo = async (record: Recordable) => {
  messageId.value=record.row.id
  await nextTick();
  editVisible.value=true
};

async function handleDelete(record: Recordable) {
    let ids = []
    if(!record){
      ids = selectionData.value.map(({id}) => id);
    }
    await confirm('确定要删除？');
    record? await messageDelete(record.row.id):await messageBatchDelete(ids);
    message("删除成功");
    reloadTable()
}
async function handleSetRead(record: Recordable) {
    let ids = []
    if(!record){
      ids = selectionData.value.map(({id}) => id);
    }
    await confirm('确定标记为已读？');
    record? await setRead({idList:[record.row.id]}):await setRead({idList:ids});
    message("标记成功");
    reloadTable()
}
function onSelectionChange(value){
    selectionData.value = value
  }
  onMounted(() => {
  docHeight.value =document.body.clientHeight - 165
})
</script>

<style lang="scss">
.type-item {
  height: 40px;
  line-height: 40px;
  padding:0 6px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  .t1 {
    width:100px;
    display: block;
  }
  &.active {
    background-color: #e8f1ff;
    border-radius: 3px;
    .t1 {
      color:#1677ff;
      .t2 {
        background-color: #ff4d4f;
        color: #ffffff;
      }
    }
  }
  .el-badge__content.is-fixed{
    top: 20px;
    right: calc(-10px + var(--el-badge-size)/ 2);
  }
}
</style>
