<template>
  <div class="module-view" 
    :style="{height:attrs.calculateH?'100%':'auto'}"
    v-loading="load"
    :ref="viewID"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.5)"
  >
    <transition name="el-zoom-in-top">
      <div class="search" v-if="searchConfig" v-show="!hideSearch">
        <by-form class="search-filter" :propConfig="searchConfig" :ref="searchID"></by-form>
        <div class="search-btn">
          <el-button type="primary" icon="Search" @click="search">搜索</el-button>
          <el-button icon="Refresh" @click="resert">重置</el-button>
        </div>
      </div>
    </transition>
    <div class="tool-box" v-if="toolConfig">
      <by-tool :propConfig="toolConfig" :ref="toolID" @clickHandle="clickHandle" />
    </div>
    <div class="module-main" v-if="tableConfig">
      <slot name="left"></slot>
      <div class="table">
        <by-table :propConfig="tableConfig" :ref="tableID" @pagination="paginationChange" @detail="detail" @onChangeRow="onChangeRow" />
      </div>
    </div>
    <transition name="el-zoom-in-center" v-if="modalConfig">
      <div class="view-modal" v-if="modalShow">
        <div class="tool-box" v-if="modalConfig.tool">
          <by-tool :propConfig="modalConfig.tool" @clickHandle="modalHandle" ref="toolForm" />
        </div>
        <div class="view-form">
          <by-form :propConfig="modalConfig.form" :ref="formID"></by-form>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
  import { computed,getCurrentInstance,nextTick, ref  } from "vue";
  const { proxy,ctx:that } = getCurrentInstance();
  const searchID = ref('')
  const toolID = ref('')
  const tableID = ref('')
  const viewID = ref('')
  const formID = ref('')
  const hideSearch = ref(false)
  const emit = defineEmits();
  const load = ref(false)
  const modalShow = ref(false)
  const config = ref({})
  const calculateCount = ref(0)
  const props = defineProps({
    propConfig:{},
  })
  const attrs = computed({
    get() {
      return config.value.attr ? config.value.attr : {};
    }
  })
  //搜索配置
  const searchConfig = computed({
    get() {
      return config.value?.search ? config.value.search : null;
    }
  })
  //工具栏配置
  const toolConfig = computed({
    get() {
      return config.value?.tool ? config.value.tool : null
    }
  })
  //表格配置
  const tableConfig = computed({
    get() {
      return config.value?.table ? config.value.table : null
    }
  })
  //弹窗
  const modalConfig = computed({
    get() {
      return config.value.modal ? config.value.modal : null
    }
  })
  const getUuid = () => {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  }
  //设置配置
  const setConfig = c => {
    if(c){
      config.value = c;
    }
  }

  //获取配置
  const getConfig = () => {
    return lodash.cloneDeep(config.value)
  }
  //设置表格配置
  const setTableConfig = config => {
    if(proxy.$refs[tableID.value]){
      proxy.$refs[tableID.value].setConfig(config)
    }
  }
  const initTable = () => {
    if(!proxy.$refs[tableID.value]){
      calculateCount.value ++;
      if(calculateCount.value > 5){
        return
      }
      setTimeout(()=>{
        initTable()
      },500) 
      return
    }
    let fHeight = 0;
    let tHeight = 0;
    let vHeight = proxy.$el.offsetHeight;
    if(proxy.$refs[searchID.value] && !hideSearch.value){
      fHeight = proxy.$refs[searchID.value].$el.offsetHeight + 32 + 8;
    }
    if(proxy.$refs[toolID.value]){
      tHeight = proxy.$refs[toolID.value].$el.offsetHeight + 16;
    }
    if(config.value.table && vHeight > 0){
      const h = vHeight - 32 - fHeight - tHeight - 48;
      config.value.table.attr.height = h;
      if(proxy.$refs[tableID.value]){
        proxy.$refs[tableID.value].recalculate();
      }
    }
  }
  const search = () => {
    proxy.$refs[tableID.value].setPage({pageNo:1,total:0});
    emit('search');
  }
  const detail = row => {
    emit('detail',row);
    if(modalConfig.value){
      modalShow.value = true;
      nextTick(() => {
        if(proxy.$refs[formID.value]){
          proxy.$refs[formID.value].setValue(row);
        }
      })
    }
  }
  const setFormValue = data => {
    nextTick(() => {
      if(proxy.$refs[formID.value]){
        proxy.$refs[formID.value].setValue(data);
      }
    })
  }
  //清除搜索条件
  const clearSearch = () => {
    proxy.$refs[searchID].value.clearValue();
  }
  const resert = () => {
    resertHandle()
  }
  const clickHandle = e => {
    if(e == 'onAdd'){
      modalShow.value = true;
    }
    if(e == 'onRefresh'){
      onRefresh()
    }else if(e=='toggleSearch'){
      toggleSearch()
    }else if(e=='onExport'){
      onExport()
    }else{
      emit('clickHandle',e)
    }
    if(e == 'toggleSearch'&& attrs.value.calculateH){
      calculateCount.value=0;
      setTimeout(()=>{
        initTable()
      },100)
    }
  }
  const onExport = () => {
    proxy.$refs[tableID.value].onExport()
  }
  //弹窗工具栏
  const modalHandle = e => {
    if(e == 'onReturn'){
      modalShow.value = false;
      proxy.$refs[formID.value].clearValue();
      emit('backHandle')
    }else{
      emit('modalHandle',e)
    }
  }
  const closeModal = () => {
    modalShow.value=false;
    if(proxy.$refs[formID.value]) {
      proxy.$refs[formID.value].clearValue()
    }
  }
  const getSelectData = () => {
    let data=[];
    if(proxy.$refs[tableID.value]){
      data=proxy.$refs[tableID.value].getSelectData()
    }
    return data;
  }
  //清除选中表格
  const clearCheckboxRow = () => {
    if(proxy.$refs[tableID.value]){
      proxy.$refs[tableID.value].clearCheckboxRow()
    }
  }
  //设置表格数据
  const setTableValue = data => {
    if(proxy.$refs[tableID.value]){
      proxy.$refs[tableID.value].setValue(data)
    }
  }
  const getPage = () => {
    let p = {};
    if(proxy.$refs[tableID.value]){
      p=proxy.$refs[tableID.value].getPage()
    }
    return p;
  }
  const setPage = page => {
    if(proxy.$refs[tableID.value]){
      proxy.$refs[tableID.value].setPage(page)
    }
  }
  //分页的变化
  const paginationChange = page => {
    emit('pagination',page)
    // this.getList();
  }
  const getFormValidate = callBack => {
    proxy.$refs[formID.value].validate().then(()=>{
      callBack()
    }).catch(() => {})
  }
  const getFormValue = () => {
    if(proxy.$refs[formID.value]){
      return proxy.$refs[formID.value].getValue();
    }
    return null
  }
  const initFormTool = () => {
    if(proxy.$refs.toolForm){
      proxy.$refs.toolForm.initTools();
    }
  }
  const onChangeRow = row => {
    emit('onChangeRow',row);
  }
  //显示/隐藏搜索
  const toggleSearch = () => {
    hideSearch.value = !hideSearch.value
  }
  //获取查询值
  const getQuery = () => {
    let query = {};
    let page = {};
    if(proxy.$refs[searchID.value]){
      query = proxy.$refs[searchID.value].getValue();
    }
    if(proxy.$refs[tableID.value]){
      page = proxy.$refs[tableID.value].getPage();
    }
    query.pageNo = page.pageNo;
    query.pageSize = page.pageSize;
    return query;
  }
  //刷新
  const onRefresh = () => {
    proxy.$refs[tableID.value].setPage({pageNo:1,total:0});
		emit('onRefresh')
  }
  //重置
  const resertHandle = () => {
    proxy.$refs[searchID.value].clearValue({});
    proxy.$refs[tableID.value].setPage({pageNo:1,total:0})
    emit('resert')
  }
  defineExpose({
    getConfig,setConfig,resertHandle,onRefresh,getQuery,toggleSearch,initFormTool,getFormValue,getFormValidate,setPage,getPage,setTableValue,clearCheckboxRow,getSelectData,closeModal,clearSearch,setTableConfig,initTable,setFormValue
  })

  searchID.value = getUuid()
  toolID.value = getUuid()
  tableID.value = getUuid()
  viewID.value = getUuid()
  formID.value = getUuid()

  if(props.propConfig){
    setConfig(props.propConfig)
  }
  nextTick(()=>{
    if(attrs.value.calculateH){
      initTable();
    }
  })
  

</script>

<style lang="scss" scoped>
.module-view{
  width: 100%;
  box-sizing: border-box;
  padding:  16px;
  position: relative;
  .view-modal{
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    padding: 16px;
    background-color: #FFF;
    z-index: 999;
    .view-form{
      width: 100%;
      height: calc(100% - 48px);
      overflow-y: auto;
    }
  }
  .search{
    width: 100%;
    padding-bottom: 8px;
    display: flex;
    justify-content: space-between;
    .search-btn{
      width: 200px;
      display: flex;
      flex-shrink: 0;
      justify-content: flex-end;
    }
  }
  .tool-box{
    width: 100%;
    padding-bottom:16px;
  }
  .module-main{
    width: 100%;
    display: flex;
    .table{
      width: 100%;
    }
  }
}
</style>