<template>
  <div>
    <Title>
      <template v-slot:titleName>数据字典列表</template>
      <template v-slot:titleContent></template>
      <template v-slot:titleOperate>
      </template>
    </Title>

    <!--搜索条件-->
    <div class="form-container ab-p-l-20" >
        <el-radio-group style="padding-bottom: 25px;" v-model="radioModel" v-for="subsystem in subsystems" :key="subsystem">
            <el-radio-button :label="subsystem" @change="useTableQueryReload(tableRef)" />
        </el-radio-group>
    </div>
    <!--表列表-->
    <div class="table-container">
      <vxe-grid ref="tableRef" v-bind="tableOptions">
        <template #buttons_toolbar>
          <el-space wrap>
            <el-button @click="downloadExcel" ><el-icon size="18"><Download /></el-icon>清表语法</el-button>
            <el-button @click="exportDoc" v-loading="exportDocLoading" ><el-icon size="18"><Download /></el-icon>数据字典</el-button>
          </el-space>
        </template>
        <template #tools_toolbar>
          <el-input style="margin-right: 15px; " v-model="filterName" type="search" placeholder="表内搜索" @keyup="useInVxeGridSearch(tableRef)"></el-input>
        </template>

        
        <template #tablename="{ row }">
          <el-text v-if="row.existence">{{row.tablename}}</el-text>
          <el-text v-else type="danger" tag="del">{{row.tablename}}</el-text>
        </template>
        <template #cleartablelevel="{ row }">
          <el-text type="danger" v-if="row.cleartablelevel === '不允许清理'">{{row.cleartablelevel}}</el-text>
          <el-text type="warning" v-else-if="row.cleartablelevel === '谨慎清理'">{{row.cleartablelevel}}</el-text>
          <el-text v-else>{{row.cleartablelevel}}</el-text>
        </template>
        <template #operate="{ row }">
          <el-link type="primary"  :underline="false" @click="dialogFormShow(row)" title="详情"><el-icon size="20"><Document /></el-icon></el-link>
        </template>
      </vxe-grid>
    </div>
  </div>
  
  <!--表详情-->
  <el-dialog v-model="dialogFormVisible" width="1000" :title="currentTableRow.tablename+'('+currentTableRow.description+')'" >
      <vxe-grid ref="detailtableRef" v-bind="detailTableOptions" :data="detailTableData" >
        <template #tools_toolbar>
          <el-input style="margin-right: 15px; " v-model="detailFilterName" type="search" placeholder="表内搜索" @keyup="useInVxeGridSearch(detailtableRef)"></el-input>
        </template>
        <template #columnname="{row}">
            <el-text>{{row.columnname.toLowerCase()}}</el-text>
            <el-text v-if="row.id" type="danger">(主键)</el-text>
            <el-text v-if="row.generated" type="danger">(自增)</el-text>
            <el-text v-if="row.embeddable"  type="danger">(复合主键)</el-text>
            <el-text v-if="row.required" type="danger">(必填)</el-text>
        </template>
        <template #columntype="{row}">
            <el-text>{{row.columntype?row.columntype.toLowerCase():row.columntype}}</el-text>
        </template>
      </vxe-grid>
  </el-dialog> 

</template>
  

<script lang="ts">
export default { name: "documentDataDictionary" }
</script>
<script setup lang="ts">
import Title from "@/framework/components/Title/index.vue";
import { Excel, type mergeListType } from '@/framework/utils/excel';
import { getDataDictionarySubsystems,getDataDictionarys,exportDataDictionarys } from '@/subsystem/api/sms/index'
import { useQueryParamsHandle,useInVxeGridSearch,useQueryAndClientPaging,useTableQueryReload } from '@/framework/hooks/useVxeTableHandle'
import { gridDefaultProps } from '@/framework/utils/standard/vxe.ts'
const subsystems = ref([])
const radioModel=ref('');


/**表格初始化 */
const filterName = ref('')
const tableData = ref([])
const tableRef = ref<VxeGridInstance>()//表格对象
const tableOptions = reactive<VxeGridProps>(gridDefaultProps({
  params: reactive<VxeTableParam>({
    clientPage: true, //是否客户端分页
    tableDataCache: tableData, //表格数据缓存
    filterNameRef: filterName, //表内搜索引用
    // searchProps: [],//需要检索列的key
    children: false,//树形表格场景，表内搜索筛选后的数据，是否作为子节点展示，默认否
    allTreeExpand:false,//树形表格场景，表内搜索筛选后的数据，是否自动展开子节点，默认否
  }),
  rowConfig: {keyField: 'id'},//自定义行数据唯一主键的字段名
  sortConfig: { trigger: 'cell', remote: true, }, //排序配置
  pagerConfig: { enabled: true, pageSize: 10, pageSizes: [10, 20, 50, 100] },//分页配置
  toolbarConfig: { custom: true, export:false,slots: { buttons: 'buttons_toolbar', tools: 'tools_toolbar' }, },//工具栏配置
  columns: [
    { type: 'seq', title: '序号', width:'50px' },
    { field: 'tablename', title: '表名',slots:{default:'tablename'}},
    { field: 'description', title: '说明',},
    { field: 'cleartablelevel', title: '清表级别', slots: {default: 'cleartablelevel'}  },
    { field: 'tableDataClearDesc', title: '清表说明' , },
    { field: 'cleartablesyntax', title: '清表语法',},
    { field: '', title: '操作',slots: {default: 'operate'},align:'center',minWidth:'5%'},//操作类居中显示 
  ]
}))

/**表详情表格初始化 */
const currentTableRow=ref({})
const dialogFormVisible=ref(false)
const detailFilterName = ref('')
const detailTableData = ref([])
const detailtableRef = ref<VxeGridInstance>()//表详情表格对象
const detailTableOptions = reactive<VxeGridProps>(gridDefaultProps({
  params: reactive<VxeTableParam>({
    clientPage: true, //是否客户端分页
    tableDataCache: detailTableData, //表格数据缓存
    filterNameRef: detailFilterName, //表内搜索引用
    searchProps: ['name','columntype','defaultvalue','description'],//需要检索列的key
  }),
  toolbarConfig: { custom: true, slots: { tools: 'tools_toolbar' }, },//工具栏配置
  columns: [
    { type: 'seq', title: '序号', width:'50px'},
    { field: 'columnname', title: '列名', slots: {default: 'columnname'},minWidth:'15%'},
    { field: 'columntype', title: '数据类型', slots: {default: 'columntype'},  },
    { field: 'columnlength', title: '长度',   },
    { field: 'defaultvalue', title: '默认值',},
    { field: 'description', title: '说明',minWidth:'30%'},
  ]
}))

const dialogFormShow = (row) => {
    dialogFormVisible.value=true
    currentTableRow.value=row
    detailTableData.value=row.fields
}


/**清表语法导出 */
const downloadExcel = () => {
  new Excel().exportExcel({
    name: radioModel.value+'清表语法',
    title: '',
    data: tableData.value,
    header:['tablename','description', 'cleartablelevel', 'cleartablesyntax'],
    customHeader:['表名','说明', '清表级别', '清表语法'],
    mergeList:[]
    // 设置合并单元格参数
    // mergeList: reactive([
    //     { startRow: 1, endRow: 2, startColumn: 3, endColumn: 3 }, 
    //     { startRow: 3, endRow: 5, startColumn: 3, endColumn: 3 }
    // ])
  })
}

/**导出数据字典 */
const exportDocLoading=ref(false)
const exportDoc = () => {
  exportDocLoading.value=true
  exportDataDictionarys({'subsystem':radioModel.value}).then((data: any) => {
    window.location.href = "/"+data;
    ElMessage({message: '导出完成',type: 'success',})
  }).finally(() => {
    exportDocLoading.value=false
  });
}

onMounted(() => {
  getDataDictionarySubsystems().then((data: any) => {
        subsystems.value=data
        radioModel.value=data[0]
        tableOptions.proxyConfig= {
          seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
          sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
          filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
          props: { result: 'data', total: 'total' },// 对应响应结果，按照后台服务PageResult对象配置
          ajax: {
            // 接收 Promise 对象
            query: ({ page, sorts, filters }) => {
              const queryParams = useQueryParamsHandle({'subsystem':radioModel.value}, page, sorts, filters)//请求参数处理
              return useQueryAndClientPaging(tableRef,page, sorts,function(){ return getDataDictionarys(queryParams)  }) //客户端分页
            },
            queryAll: () => {
              return getDataDictionarys({'subsystem':radioModel.value}) 
            },
          }
        }
    }).finally(() => {
    })
});

</script>

<style lang="scss" scoped>
</style>
