<template>
  <div class="page-div categories-page">
    <div class="left-div">
      <div class="header">
        <div class="buttons-div">
          <HeaderButton :text="'删除分类'" :type="'del'" :size="'small'" @click="buttonClick('left','del')"/>
          <HeaderButton :text="'添加分类'" :type="'add'" :size="'small'" @click="buttonClick('left','add')"/>
        </div>
        <div class="search-div">
          <a-input v-model:value="LValue" placeholder="请输入内容" size="small"/>
          <HeaderButton :text="'搜索'" :type="'search'" :size="'small'" @click="searchData('left')"/>
        </div>
        
      </div>
      <div class="content">
        <div class="show-all-button">
          <a-button type="link" @click="changeTypeId('')">全部字典>></a-button>
        </div>
        <BasicTree :treeData="lTree" :loading="lLoading" @select="(selectedKeys,{node}) => {getLeftSelectId(node.id);changeTypeId(node.key)}"/>
      </div>
    </div>
    <div class="right-div">
      <div class="header">
        <div class="buttons-div">
          <a-input style="width:150px" v-model:value="RValue" placeholder="名称" size="small"/>
          <HeaderButton :text="'搜索'" :type="'search'" :size="'small'" @click="searchData('right')"/>
          <HeaderButton :text="'添加'" :type="'add'" :size="'small'" @click="buttonClick('right','add')"/>
          <HeaderButton :text="'编辑'" :type="'edit'" :size="'small'" @click="buttonClick('right','edit')"/>
          <HeaderButton :text="'删除'" :type="'del'" :size="'small'" @click="buttonClick('right','del')"/>
        </div>
      </div>
      <div class="content">
        <BasicTable @register="registerTable">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'enabledMark'">
              <a-tag  v-if="record.enabledMark" color="success">正常</a-tag>
              <a-tag v-else color="error">停用</a-tag>
            </template>
          </template>
        </BasicTable>
      </div>
    </div>
    <a-modal class="categories-modal" v-model:open="openModal" 
      :title="modalData.title" :afterClose="clearModal">
      <UseModal ref="modalForm" :modalData="modalData" @closeModal="closeModal" @submit="submit" :lTree="lTree"/>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import HeaderButton from './Button/index.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import UseModal from './Modal/index.vue'
import { BasicTree } from '@/components/Tree';
import {BasicTable,useTable} from '@/components/Table'
import {ref,onMounted,reactive,watch,createVNode } from "vue"
import {getLeftTree,getRightTable,addLeftItem,addRightItem,delLeftItem,editRightItem,delRightItem} from '@/api/sys/categories.ts'
import {columns,emptyRightItem,emptyLeftItem,dataProcess} from './util.ts'
import {Modal,message} from 'ant-design-vue'
const modalForm = ref()
let LValue = ref('')
let RValue = ref('')
let lLoading = ref(false)
let typeId = ref('')
let selectLeftId = ref('')
let lTree = ref([])
let openModal = ref(false)
const modalData = reactive({
  title:'',
  data:{},
  type:'',
})
const [registerTable,{reload,getSelectRows}] = useTable({
  beforeFetch: (params) => {
    return {...params, code:typeId.value, key:RValue.value}
  },
  api:getRightTable,
  columns,
  showIndexColumn: false,
  rowSelection: {
    type: 'checkbox',
  },
})
const getLeftTreeData = (value='') => {
  lLoading.value = true
  getLeftTree({key:value}).then(res => {
    let data = dataProcess(res)
    lTree.value = data
    lLoading.value = false
  }).catch(err => {
    console.log(err)
    lLoading.value = false
  })
}
onMounted(() => {
  getLeftTreeData()
})
const changeTypeId = (value) => {
  typeId.value = value
  reload()
}
const getLeftSelectId = (value) => {
  selectLeftId.value = value
}
const searchData = (type) => {
  if (type === 'left') {
    console.log(LValue.value)
    getLeftTreeData(LValue.value)
  }else{
    reload()
  }
}
const submit = () => {
  switch(modalData.type){
    case 'leftadd':
      addLeftItem(modalData.data).then(res => {
        getLeftTreeData()
        openModal.value = false
      }).catch(err => {
        console.log(err)
      })
      break;
    case 'rightadd':
      addRightItem(modalData.data).then(res => {
        reload()
        openModal.value = false
      }).catch(err => {
        console.log(err)
      })
      break;
    case 'rightedit':
      editRightItem(modalData.data).then(res => {
        reload()
        openModal.value = false
      }).catch(err => {
        console.log(err)
      })
      break;
    default:
      break;
  }
}
const buttonClick = (diff,type) => {
  let isLeft = diff === 'left'
  switch(type){
    case 'add':
      openModal.value = true
      modalData.title = isLeft? '添加分组': '添加'
      modalData.data = isLeft? emptyLeftItem: emptyRightItem
      modalData.type = `${diff}${type}`
      break;
    case 'del':
        Modal.confirm({
          title:'是否确认删除?',
          icon: createVNode(ExclamationCircleOutlined),
          onCancel() {},
          onOk() {
            if(isLeft){
              return delLeftItem({id:selectLeftId.value}).then(res => {
                getLeftTreeData()
                typeId.value = ''
                reload()
              }).catch(err => {
                console.log(err)
              })
            }else{
              console.log(getSelectRows())
              if(getSelectRows().length !== 1){
                message.warning('请选择一条数据')
                return
              } 
              let selectRightId = getSelectRows()[0].itemDetailId
              console.log(selectRightId)
              return delRightItem({id:selectRightId}).then(res => {
                reload()
              }).catch(err => {
                console.log(err)
              })
            }
          }
        })
      break;
    case 'edit':
      if(getSelectRows().length !== 1){
        message.warning('请选择一条数据')
        return 
      } 
      let editData = getSelectRows()[0]
      console.log(editData)
      modalData.title = '编辑'
      modalData.data = {...editData}
      modalData.type = `${diff}${type}`
      openModal.value = true
      break;
  }
}
const closeModal = () => {
  openModal.value = false
}
const clearModal = () => {
  modalForm.value.clearModalData()
}
</script>

<style lang="scss" scoped>
.page-div{
  position: relative;
  top:10px;
  left:10px;
  width:calc(100% - 20px);
  height:calc(100% - 20px);
  display:flex;
  border: 1px solid #ccc;
  .left-div{
    width:230px;
    border-right: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    .header{
      display: flex;
      flex-direction: column;
      padding:10px;
      .buttons-div{
        display: flex;
        justify-content: space-between;
      }
      .search-div{
        margin-top:10px;
        display: flex;
      } 
    }
    .content{
      background-color: #fff;
      border-radius: 5px;
      height:100%;
      .show-all-button{
        height:34px;
        line-height: 34px;
        padding-left: 20px;
        border-bottom: 1px solid #ccc;
      }
    }
    
  }
  .right-div{
    width: calc(100% - 230px);
    flex:1;
    display: flex;
    flex-direction: column;
    .header{
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 10px;
      .buttons-div > button{
        margin-left: 10px;
      }
    }
    .content{
      flex: 1;
      background-color: #fff;
    }
  }
}
</style>
<style lang="scss">
.categories-page{
  .left-div{
    .h-full{
      height:auto;
    }
  }
}
.categories-modal{
  .ant-modal-footer > button{
    display: none;
  }
  .ant-modal-footer{
    margin-top:0px;
    border-top: 0px;
  }
}
// ant-table-header
</style>
