<template>
  <div class="system-container layout-padding">
    <el-card shadow="hover" class="layout-padding-auto">
      <ext-query-form
          class="page-search"
          ref="queryRef"
          v-model="state.formQuery"
          :columns="state.columns"
          @on-change="loadData(true)">

        <template #extraLeft>
          <el-button size="default" type="success" @click="handleOpenDialog('add')">
            <SvgIcon name="ele-FolderAdd"/>
            创建
          </el-button>
        </template>
      </ext-query-form>

      <ext-table
          class="page-content"
          :data-list="state.tableData.data"
          :columns="state.columns"
          :border="true"
          :loading="state.tableData.loading"
          :height="state.tableData.height"
          @on-row-dblclick="handleOpenDialog('view',$event)">
      </ext-table>

      <el-affix position="bottom" :offset="49">
        <ext-page class="page-pager" v-model:value="state.pageQuery" @change="loadData(false)"/>
      </el-affix>

    </el-card>
    <DictDialog ref="dicDialogRef" @refresh="loadData(true)"/>
  </div>
</template>

<script setup lang="ts" name="systemDic">
import {defineAsyncComponent, reactive, onMounted, ref,getCurrentInstance,nextTick} from 'vue';
import ExtPage from "/@/components/form/ExtPage.vue"
import ExtTable from "/@/components/form/ExtTable.vue"
import {$body} from "/@/utils/request";
import u from "/@/utils/u";
import {Msg} from "/@/utils/message";
// 引入组件
const DictDialog = defineAsyncComponent(() => import('/@/views/admin/config/dict/dialog.vue'));

const {proxy} :any= getCurrentInstance();
import {ElButton} from 'element-plus'
import ExtQueryForm from "/@/components/form/ExtQueryForm.vue";

// 定义变量内容
const queryRef = ref();
const dicDialogRef = ref();

const state = reactive({
  tableData: {
    data: [] as Array<any>,
    total: 0,
    loading: false,
    height:500
  },
  pageQuery: {
    pageIndex: 1,
    pageSize: 10,
    total: 0
  },
  formQuery: {},
  columns: [
    {label: '类型', prop: 'type', query: true, type: 'text', resizable: true,width:150, },
    {label: '描述', prop: 'des', query: true, type: 'text', resizable: true},
    {
      label: '创建时间', prop: 'createAt',width:180, query: true, type: 'datetime', resizable: true,
      conf: {format: (val: any) => u.fmt.fmtDateTime(val)}
    },
    {
      label: '更新时间', prop: 'updateAt', width:180,query: true, type: 'datetime', resizable: true,
      conf: {format: (val: any) => u.fmt.fmtDateTime(val)}
    },
    {
      label: '操作', prop: 'action', width: 180, type: 'render', align: 'center', fixed: 'right',
      render: (h: any, row: any) => {
        return (
            h('div', [
              h(ElButton, {
                type: 'warning',
                size: 'default',
                text: true,
                onClick: () => {
                  handleOpenDialog('edit', row)
                }
              }, '编辑'),
              h(ElButton, {
                type: 'danger',
                text: true,
                onClick() {
                  onRowDel(row)
                }
              }, '删除'),
            ])
        )

      }
    },
  ]
});

const handleOpenDialog = (action: string, row: any) => {
 console.log(proxy.$auth('dict.add'));
  console.log(action,row,dicDialogRef.value)
  dicDialogRef.value.open(action, row);
}

// 初始化表格数据
const loadData = (refresh: boolean = false) => {
  if (refresh) {
    state.pageQuery.pageIndex = 1;
  }
  state.tableData.loading = true;
  const data = [];
  $body('dict/list', {...state.formQuery, ...state.pageQuery}).then((res: any) => {
    let {list, count} = res;
    let typeGroup = u.groupByKey(list, 'type');
    let tableList = [] as Array<any>;
    Object.keys(typeGroup).forEach(k => {
      let dicts = typeGroup[k];
      let {type, des, updateAt, createAt} = dicts[0];
      tableList.push({
        type,
        des,
        updateAt,
        createAt,
        dicts
      });
    })
    state.tableData.data = tableList;
    state.pageQuery.total = count;
    state.tableData.loading = false;
  })
};
/*// 打开新增字典弹窗
const onOpenAddDic = (type: string) => {
  console.log(type)
  dicDialogRef.value.openDialog(type);
};
// 打开修改字典弹窗
const onOpenEditDic = (type: string, row: RowDicType) => {
  console.log(row)
  dicDialogRef.value.openDialog(type, row);
};*/
// 删除字典
const onRowDel = (row: RowDicType) => {
  console.log(row)
  Msg.confirm(`此操作将永久删除字典名称：“${row.type}”，是否继续?`).then(() => {
    loadData();
    Msg.message("删除成功")
  })
}

// 页面加载时
onMounted(() => {
  loadData();

  nextTick(() => {
    let bodyHeight = document.body.clientHeight;
    let queryHeight = queryRef.value.$el.clientHeight;
    state.tableData.height = bodyHeight - queryHeight - 320
  })
});
</script>

<style scoped lang="scss">
.system-container {
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;

    .el-table {
      flex: 1;
    }
  }
}

.page-content {
  margin-bottom: 20px;
}

.page-pager {
  background-color: #fff;
  height: 24px;
}
</style>
