<template>
  <a-list-layout
    ref="pageRef"
  >
    <template #search>
      <pro-query :searchParam="searchParam" @on-search="search"></pro-query>
    </template>
      <!-- 岗位列表 -->
    <pro-table ref="tableRef" :fetch="fetch" :columns="columns" :toolbar="toolbar" :operate="operate"
      :param="state.param" :pagination="pagination"
      :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }">
    </pro-table>
    <save :visible="state.visibleSave" @close="closeSave"></save>
    <edit :visible="state.visibleEdit" @close="closeEdit" :record="state.recordEdit"></edit>
    <info :visible="state.visibleInfo" @close="closeInfo" :record="state.recordInfo"></info>
  </a-list-layout>
</template>

<script>
  import save from './modal/save.vue';
  import edit from './modal/edit.vue';
  import info from './modal/info.vue';
  import {
    message,
    Modal as modal
  } from '@hwork/ant-design-vue';
  import {
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';
  import {
    page,
    remove,
    removeBatch
  } from "@/api/module/inbox";
  import {
    reactive,
    createVNode,
    ref,
    onMounted
  } from 'vue';
  import {
    useStore
  } from 'vuex';

  const removeKey = "remove";
  const removeBatchKey = "removeBatch";

  export default {
    components: {
      save,
      edit,
      info,
    },
    setup() {

      const tableRef = ref();
      /// 开关
      const converFormat = [{
        label: "已读",
        value: true
      }, {
        label: "未读",
        value: false
      }];
      /// 列配置
      const columns = [{
        dataIndex: "index",
        key: "index",
        title: "序号",
        width: 60,
        fixed: 'left',
        align: 'center'
      },
      {
          dataIndex: "content",
          key: "content",
          title: "消息内容"
        },
        {
          dataIndex: "createName",
          key: "createName",
          title: "发送者"
        },
        {
          dataIndex: "recipientName",
          key: "recipientName",
          title: "接收者"
        },
        {
          dataIndex: "createTime",
          key: "createTime",
          title: "发送时间"
        },
        {
          dataIndex: "dialogueId",
          key: "dialogueId",
          title: "所属对话"
        },
        {
          dataIndex: "isRead",
          key: "isRead",
          title: "是否已读",
          conver: converFormat
        },
      ];

      //获取用户信息
      const {
        getters
      } = useStore();
      const userId = ref();
      const getCurrentUserId = () => {
        var userInfo = getters.userInfo.id
        console.log("获取用户信息", userInfo)
        userId.value = getters.userInfo.id
      };
      onMounted(() => {
        //查询所有的仓库节点信息
        getCurrentUserId();

      });
      /// 数据来源 [模拟]
      const fetch = async (param) => {
        param.userId= userId.value
          var response = await page(param);
        return {
          total: response.data.total,
          data: response.data.record,
        };
      };

      /*  const queryInboxInfo = async (userId) => {
          console.log("获取指定用户的私信", queryInboxInfo)
          var response = await page({
            "userId": userId
          })
          return {
            total: response.data.total,
            data: response.data.record,
          }
        }; */
      /// 删除配置
      const removeMethod = (record) => {
        message.loading({
          content: "提交中...",
          key: removeKey
        });
        remove({
          "id": record.id
        }).then((response) => {
          if (response.success) {
            message.success({
              content: "删除成功",
              key: removeKey,
              duration: 1
            })
            tableRef.value.reload()
          } else {
            message.error({
              content: "删除失败",
              key: removeKey,
              duration: 1
            })
          }
        })
      }

      const removeBatchMethod = (ids) => {
        modal.confirm({
          title: '您是否确定要删除选择私信?',
          icon: createVNode(ExclamationCircleOutlined),
          okText: '确定',
          cancelText: '取消',
          onOk() {
            message.loading({
              content: "提交中...",
              key: removeBatchKey
            });
            removeBatch({
              "ids": ids
            }).then((response) => {
              if (response.success) {
                message.success({
                  content: "删除成功",
                  key: removeBatchKey,
                  duration: 1
                })
                tableRef.value.reload()
              } else {
                message.error({
                  content: "删除失败",
                  key: removeBatchKey,
                  duration: 1
                })
              }
            })
          }
        });
      }

      /// 工具栏
      const toolbar = [{
          label: "新增",
          event: function() {
            state.visibleSave = true
          }
        },
        {
          label: "删除",
          event: function() {
            removeBatchMethod(state.selectedRowKeys)
          }
        },
      ];

      /// 行操作
      const operate = [{
          label: "查看",
          event: function(record) {
            state.visibleInfo = true, state.recordInfo = record
          }
        },
        {
          label: "修改",
          event: function(record) {
            state.visibleEdit = true, state.recordEdit = record
          }
        },
        {
          label: "删除",
          isDel: true,
          delEvent: function(record) {
            removeMethod(record)
          }
        },
      ];

      /// 分页参数
      const pagination = {
        pageNum: 1,
        pageSize: 20,
      }

      /// 外置参数 - 当参数改变时, 重新触发 fetch 函数
      const state = reactive({
        selectedRowKeys: [],
        param: {},
        userId,
        visibleSave: false,
        visibleEdit: false,
        visibleInfo: false,
        recordEdit: {},
        recordInfo: {},
      })

      const searchParam = [{
        key: "content",
        type: "input",
        label: "公告标题"
      }, ]

      const search = function(value) {
        state.param = value
      }

      const closeSave = function() {
        tableRef.value.reload();
        state.visibleSave = false
      }

      const closeEdit = function() {
        tableRef.value.reload();
        state.visibleEdit = false
      }

      const closeInfo = function() {
        state.visibleInfo = false
      }

      const onSelectChange = selectedRowKeys => {
        state.selectedRowKeys = selectedRowKeys;
      };

      return {
        state, // 状态共享
        fetch, // 数据回调
        toolbar, // 工具栏
        columns, // 列配置
        operate, // 行操作
        pagination, // 分页配置
        userId, //用户ID
        search,
        searchParam, // 查询参数
        //queryInboxInfo,
        closeSave,
        closeEdit,
        closeInfo,
        onSelectChange,
        tableRef
      };
    },
  };
</script>
