<template>
  <div class="app-container data-dictionary">
    <!-- 搜索 -->
    <el-form :model="state.queryParams" ref="queryRef" :inline="true">
      <el-form-item label="分组名称" prop="groupname">
        <el-input v-model="state.queryParams.groupname" placeholder="请输入分组名称" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="Plus" plain @click="tableOperationAdd('新增配置', {})">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table border v-loading="tableLoading" :data="tableData" row-key="id" style="flex: 1">
      <el-table-column prop="id" label="配置ID" min-width="80"></el-table-column>
      <el-table-column prop="title" label="配置名称" min-width="120"></el-table-column>
      <el-table-column prop="substance" label="配置值" min-width="120"></el-table-column>
      <el-table-column prop="groupname" label="分组名称" min-width="120" sortable></el-table-column>
      <el-table-column prop="baseid" label="上级ID" min-width="120"></el-table-column>
      <el-table-column prop="describes" label="描述" min-width="120"></el-table-column>
      <el-table-column label="操作" :width="fitWidth" class-name="small-padding fixed-width">
        <template #default="scope">
          <div class="operation-box">
            <el-text class="operate-btn-item" type="primary" @click="tableOperationEdit('修改配置-' + scope.row.title, {id: scope.row.id})">编辑</el-text>
            <el-text class="operate-btn-item" type="primary" @click="handleDictDel(scope)">删除</el-text>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <DictionaryEdit width="50%" v-model="modalConfig.modalEditVisible" :title="modalConfig.title" :keys="modalConfig.modalHandleKey" :modalType="modalConfig.modalType" />
  </div>
</template>

<script setup name="Dictionary">
import useSystemManageStore from '@store/modules/systemManage'
import _ from 'lodash'
import DictionaryEdit from './components/DictionaryEdit/index.vue'
import useEditModal from '@/hooks/useEditModal'
import useFitColumn from '@/hooks/useFitColumn'

const {proxy} = getCurrentInstance()
const systemManageStore = useSystemManageStore()
const mitter = proxy.mitter
const {modalConfig, resetMoalConfig, tableOperationAdd, tableOperationEdit} = useEditModal()
const {fitWidth} = useFitColumn()

const state = reactive({
  queryParams: {
    groupname: ''
  }
})
const tableLoading = ref(true)
const tableData = ref([])

/** 查询菜单列表 */
const getList = async (query) => {
  tableLoading.value = true
  const Data = await systemManageStore.configurationLoadAll(query)
  tableData.value = Data.Data
  tableLoading.value = false
}

function handleQuery() {
  getList(state.queryParams)
}

const handleDictDel = async (scope) => {
  try {
    await proxy.$modal.confirm('请问确认删除吗？')
    await systemManageStore.configurationDel({id: scope.row.id})
    proxy.$modal.msgSuccess('删除成功！')
    handleQuery()
  } catch (error) {}
}

mitter.on('onEditFinish', ({refresh}) => {
  resetMoalConfig()
  if (refresh) handleQuery()
})

onMounted(() => {
  handleQuery()
})
</script>
