<template>
  <div class="drawer-table">
    <pro-table v-if="visible" ref="tableChilrenRef" rowKey="id" :fetch="fetch" :columns="columns" :toolbar="toolbar"
      :operate="operate" :param="state.param" :pagination="pagination"
      :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }">
    </pro-table>
    <a-empty v-else />
    <save :visible="state.visibleSave" @close="closeSave" :record="state.recordSave"></save>
    <edit :visible="state.visibleEdit" @close="closeEdit" :record="state.recordEdit"></edit>
  </div>
</template>
<script>
  import save from './data/save.vue';
  import edit from './data/edit.vue';
  import {
    message,
    Modal as modal
  } from '@hwork/ant-design-vue';
  import {
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';
  import {
    page,
    change,
    remove,
    removeBatch
  } from "@/api/module/dictData";
  import {
    reactive,
    createVNode,
    watch,
    ref
  } from 'vue';

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

  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      record: {
        type: Object
      }
    },
    components: {
      save,
      edit,
    },
    setup(props) {

      const tableChilrenRef = ref()

      watch(props, (props) => {
        state.param.code = props.record.code;
      })

      const switchFormat = {
        yes: true,
        no: false,
        event: function(value, record) {
          // record.enable = !record.enable;
          // return value;
          record.enable = value;
          change({
            "id": record.id,
            "enable": record.enable
          })
          tableChilrenRef.value.reload();
        }
      }

      const columns = [{
        dataIndex: "index",
        key: "index",
        title: "序号",
        width: 60,
        fixed: 'left',
        align: 'center'
      },
      {
          dataIndex: "label",
          key: "label",
          title: "中文标签",
          width:120,
        },
        {
          dataIndex: "value",
          key: "value",
          title: "标识",
          width: 100,
        },
        {
          dataIndex: "color",
          key: "color",
          title: "颜色",
          width: 100,
        },
        {
          dataIndex: "enable",
          key: "enable",
          title: "状态",
          switch: switchFormat
        },
      ];

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

      /// 删除角色
      const removeMethod = (record) => {
        modal.confirm({
          title: '您是否确定要删除此字典?',
          icon: createVNode(ExclamationCircleOutlined),
          okText: '确定',
          cancelText: '取消',
          onOk() {
            message.loading({
              content: "提交中...",
              key: removeKey
            });
            remove({
              "id": record.id
            }).then((response) => {
              if (response.success) {
                message.success({
                  content: "删除成功",
                  key: removeKey,
                  duration: 1
                }).then(() => {
                  tableChilrenRef.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
                }).then(() => {
                  tableChilrenRef.value.reload()
                })
              } else {
                message.error({
                  content: "删除失败",
                  key: removeBatchKey,
                  duration: 1
                })
              }
            })
          }
        });
      }

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

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

      const pagination = {
        pageNum: 1,
        pageSize: 20
      };

      const state = reactive({
        selectedRowKeys: [],
        param: {
          name: "",
          code: ""
        },
        visibleEdit: false,
        visibleSave: false,
        recordEdit: {},
        recordSave: {},
      });

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

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

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

    return {
      state,
      fetch,
      toolbar,
      columns,
      operate,
      pagination,
      onSelectChange,

      closeSave,
      closeEdit,

      tableChilrenRef
    };
  },
  };
</script>
<style scoped>
.drawer-table {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* 让 pro-table 自适应填满抽屉高度；y:'flex' 将根据容器高度计算 */
.drawer-table :deep(#pro-table) {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.drawer-table :deep(#pro-table .pro-table-tool) {
  /* 工具栏保持自然高度 */
  flex: none;
}
.drawer-table :deep(#pro-table .ant-table-wrapper),
.drawer-table :deep(#pro-table .ant-spin-nested-loading),
.drawer-table :deep(#pro-table .ant-spin-container),
.drawer-table :deep(#pro-table .ant-table),
.drawer-table :deep(#pro-table .ant-table-container) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.drawer-table :deep(#pro-table .ant-table-body) {
  /* 当 y:'flex' 时，内部会使用 flex 高度，这里保证最小高度与滚动行为 */
  flex: 1;
  min-height: 0;
}
</style>
