<template>
  <a-drawer :title="drawerTitle" placement="right" width="100%" :visible="isVisible" @close="closeDrawer">
      
  <a-card style="width: 100%;height: 100%;padding:0px 20px"
    :tab-list="tabList"
    :bodyStyle="{height:'90%',background:'red',padding:'0px'}"
    @tabChange="key => onTabChange(key)"
  >  
    <vxe-grid v-bind="gridOptions">
      <template #toolbarButtons>
        <vxe-button size="small" icon="vxe-icon-add" status="primary" @click="editRow()">添加</vxe-button>
      </template>
      <template #action="{ row }">
        <vxe-button mode="text" status="primary" @click="editRow(row)">编辑</vxe-button>
      </template>
    </vxe-grid>
  </a-card>

  <BaosongTplItem ref="refTplCfgContent" style="height:500px"></BaosongTplItem>
  
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref,nextTick,reactive } from 'vue'
import type { VxeGridProps, VxeColumnPropTypes } from 'vxe-table'
import { VxeUI, VxeFormInstance,VxeTreeSelectProps } from 'vxe-pc-ui'
import XEUtils from 'xe-utils'

import BaosongTplItem from './BaosongTplItem.vue'
import {queryAllList } from '../BaosongDataValid.api';
import {allTplItems } from '../BaosongTplItem.api';

const loading = ref(false)

const actiiveKey = ref('tab1');


const refTplCfgContent = ref()
const selectRow = ref<any>()
const dataValidDatas = ref([])
const isVisible = ref(false)

 const drawerTitle= ref();
 const curTpl = ref()

const closeDrawer = () => {
  isVisible.value = false
}


const regionEditRender = reactive<VxeColumnPropTypes.EditRender<any, VxeTreeSelectProps>>({
  name: 'VxeTreeSelect',
  props: {
    multiple: true,
    clearable:true
  },
  options: [
  ]
})

const gridOptions = reactive<VxeGridProps<any>>({
  border: true,
  height: "auto",
  showOverflow: false,
  customConfig: {
    mode: 'drawer'
  },
  columnConfig:{
    resizable: true
  },
  rowConfig:{
    resizable: true
  },

  toolbarConfig: {
    custom: true,
    zoom: true,
    slots: {
      buttons: 'toolbarButtons',
      tools: 'toolbarTools'
    }
  },

  editConfig: {
    trigger: 'click',
    mode: 'cell'
  },

  columns: [
    { type: 'seq', width: 70 },
    { field: 'code', title: '公式编号',width:"10%",rowResize: true,editRender: { name: 'input'  }},
    { field: 'name', title: '校验对象',width:"20%",rowResize: true,editRender: { name: 'input'  }},
    { field: 'params', title: '相关变量',width:"20%",rowResize: true, editRender: regionEditRender},
    { field: 'formula', title: '验证公式',width:"20%",rowResize: true,editRender: { name: 'input'} },
    { field: 'des', title: '描述',rowResize: true,editRender: { name: 'VxeTextarea'}
    ,cellRender:
     { name: 'VxeTextEllipsis',
        props: {
          lineClamp: 2
        }
      }
    },
    { field: 'action', title: '操作', width: 100, slots: { default: 'action' } }
  ],
  data: []
})


async function setIniData(Tpl) {
   drawerTitle.value="模板【"+Tpl.nm+"】"
   curTpl.value = Tpl
   isVisible.value = true

   //dataValidDatas.value = await queryAllList({tplid:Tpl.id});
   regionEditRender.options = await  buildTree(Tpl)
  
   onTabChange("tab1")
 }


 async function buildTree(Tpl) {
  const data = await allTplItems({ tplid: Tpl.id });
  const map = {};
  const tree = [];
  data.forEach(item => {
    map[item.code] = {
      label: item.title,
      value: item.code,
      children: []
    };
  });
  data.forEach(item => {
    const node = map[item.code];
    if (!item.pcode || !map[item.pcode]) {
      tree.push(node);
    } else {
      map[item.pcode].children.push(node);
    }
  });

  return tree;
}


const editRow = (row) => {
  selectRow.value = row
  nextTick(()=>{
    refTplCfgContent.value.setData(curTpl.value,row)
  })

}

const onTabChange = async (value: string) => {
  actiiveKey.value = value
  if(actiiveKey.value =="tab1"){
    gridOptions.data  = await queryAllList({tplid: curTpl.value.id,tp:1});
  } else if(actiiveKey.value =="tab2"){
    gridOptions.data  = await queryAllList({tplid: curTpl.value.id,tp:2});
  } else if(actiiveKey.value =="tab3") {
    gridOptions.data  = await queryAllList({tplid: curTpl.value.id,tp:3});

  }
  
}

const tabList = [
  {
    key: 'tab1',tab: '校验关系-表内校验',
  },{
    key: 'tab2',tab: '校验关系-表间校验',
  },{
    key: 'tab3',tab: '自动计算',
  },
];


defineExpose({
   setIniData,
 });



</script>

<style scoped>
.gutter-box {
  text-align: center;
  background:#FFF;
  height: 88vh;
}
</style>