<template>
  <page-header-wrapper>
    <a-card>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" style="padding:10px">
          <div class="table-layer">
            <a-form-item label="">
              <a-select
                v-model:value="vdata.querySysType"
                placeholder="选择系统菜单" 
                @change="refTable"
              >
                <a-select-option value="PLATFORM">
                  显示菜单：运营平台
                </a-select-option>
                <a-select-option v-if="$hasAgentEnt()" value="AGENT">
                  显示菜单：代理商系统
                </a-select-option>
                <a-select-option value="MCH">
                  显示菜单：商户系统
                </a-select-option>
              </a-select>
            </a-form-item>
          </div>

        </a-form>
        <a-button  type="primary" @click="editFunc">
          <plus-outlined />新建
        </a-button>
      </div>

      <a-table
        :columns="tableColumns"
        :data-source="vdata.dataSource"
        :pagination="false"
        :loading="vdata.loading"
        row-key="entId"
        :scroll="{ x: 1450 }"
        @resizeColumn="handleResizeColumn"
      >
        <template #bodyCell="{column,record}">
          <template v-if="column.key === 'state'">
            <JeepayTableColState :state="record.state" :showSwitchType="$access('ENT_UR_ROLE_ENT_EDIT')" :onChange="(state) => { return updateState(record.entId, state)}" />
          </template> 
          <template v-if="column.key === 'op'">
            <a v-if="$access('ENT_UR_ROLE_ENT_EDIT')" @click="editFunc(record.entId)">修改</a>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 新增 / 修改 页面组件  -->
    <InfoAddOrEdit ref="infoAddOrEdit" :callback-func="refTable" />
  </page-header-wrapper>
</template>
<script setup lang="ts">
import { $getEntTree, API_URL_ENT_LIST, reqLoad } from '@/api/manage'
import InfoAddOrEdit from './AddOrEdit.vue'
import {ref,reactive,onMounted,getCurrentInstance} from 'vue'
import{message} from 'ant-design-vue'
const { $access, $hasAgentEnt } = getCurrentInstance()!.appContext.config.globalProperties
const tableColumns = reactive([
  { title: '资源权限ID', dataIndex: 'entId', resizable: true,width: 300}, // key为必填项，用于标志该列的唯一
  { title: '资源名称', dataIndex: 'entName',},
  { title: '图标', dataIndex: 'menuIcon' },
  { title: '路径', dataIndex: 'menuUri' },
  { title: '组件名称', dataIndex: 'componentName' },
  { title: '类型', dataIndex: 'entType' },
  {key:'state',title: '状态',  align: 'center' },
  { title: '排序', dataIndex: 'entSort' },
  { title: '修改时间', dataIndex: 'updatedAt' },
  {key:'op', title: '操作', width: '100px', fixed: 'right', align: 'center'}
])

  const infoAddOrEdit = ref()
   const vdata = reactive ({
      querySysType: 'PLATFORM', // 默认查询运营平台
      tableColumns: tableColumns,
      dataSource: [],
      loading: false
    })

  onMounted (()=>{refTable()})


   function refTable () {
    
      vdata.loading = true
      $getEntTree(vdata.querySysType).then(res => {
        // 前置拦截代理商
        let preposition = []
        res.forEach(item => {
          if (!$hasAgentEnt()) {
            if (item.entName.includes('代理商')) return
          } 
          preposition.push(item as never)
        })
        vdata.dataSource = preposition
        vdata.loading = false
      })
    }

  function  updateState (recordId, state) {
  
      return reqLoad.updateById(API_URL_ENT_LIST, recordId, { state: state, sysType: vdata.querySysType })
      .then(res => {
       message.success('更新成功')
        refTable() // 刷新页面
      })
    }

  function  editFunc (recordId=null) { // 业务通用【修改】 函数
     infoAddOrEdit.value.show(recordId, vdata.querySysType)
    }
  function handleResizeColumn (w, col){
        col.width = w
      }
</script>
