<template>
 <div class="common-layout h100">
   <slot name="top"></slot>
  <div class="diy-area">
    <diy-el-form v-bind="formAttrs" v-model:model-form="form" :forms="filterForm">
      <template #searchBtn>
        <el-button  type="primary" :icon="Search" @click="initSearch">查询</el-button>
      </template>
      <template v-for="item in filterForm.formItemsArr.filter(i => i.type === 'slot' && i.slotName !== 'searchBtn')" #[item.slotName]>
        <slot :name="item.slotName"></slot>
      </template>
    </diy-el-form>
  </div>
   <div class="line"></div>
   <slot name="form-bottom"></slot>
   <div class="mb15">
     <span class="my-data-source">数据资源</span>
     <span class="my-total">共 <strong>{{totalCount}}</strong> 个目录项</span>
   </div>
   <div class="op-btns" v-if="isShowTableBtn">
     <ul class="operation-btns">
       <li :title="btn.type" v-for="btn in tableControlBtns" :class="{'disabled':btn.disabled}"  @click="clickOperationBtn(btn)" :key="btn.id">
         <span :class="btn.className"></span>
       </li>
     </ul>
   </div>
   <div class="table-area" :class="{'flex-t':isFlexTable}">
     <my-table




       border
       @getCheckedTable="$emit('getCheckedTable',$event)"
       :is-height-by-auto="!isFlexTable"
       :table-event-obj="tableEventObj"
       :table-data="tableData"
       :headers="tableHeader"
       v-bind="tableAttrs"



     >
       <template v-for="item in tableHeader" :key="item.prop" #[item.prop]="{data}">
         <slot :name="item.prop" :data="data">
           <template v-if="item.type !=='unit'">
             {{data[item.prop]}}
           </template>
           <template v-else>
             {{useRootStore().realAllUnitArr.find(i => i.CODE === data[item.prop])?.NAME || data[item.prop]}}
           </template>
         </slot>
       </template>
       <template #operation="{data}">
         <slot name="operation" :data="data"></slot>
       </template>
     </my-table>
   </div>
   <div :class="{'hidden':!isHasPaganation}">
     <ele-pagination  ref="refEl"

                      @sizeOrPageChange="handleSizeChange"
                      class="page"
                      :default-page-size="pageSize"


                      :total-count="totalCount">

       <template #default>
         <div class="m-s">
           显示第 {{pageSize * (pageIndex -1) + 1 }} 到第 {{pageSize * pageIndex}} 条记录，总共 {{totalCount}} 条记录 共显示

         </div>
       </template>
     </ele-pagination>
   </div>
   <div v-if="!isHasPaganation" class="info-m">
     显示第 1 到第 {{totalCount}} 条记录，总共 {{totalCount}} 条记录
   </div>
 </div>
</template>

<script>
import DiyElForm from "@/components/common/DiyElForm.vue";
import {ref} from "vue";
import {Search, SoldOut} from "@element-plus/icons-vue";
import MyTable from "@/components/common/MyTable.vue";
import {usePagination} from "@/unit/use-method/usePagination";
import ElePagination from "@/components/common/ElePagination.vue";
import {useRootStore} from "../stores/useStore";

export default {
  name: "CommonLayout",
  methods: {useRootStore},
  computed: {
    Search() {
      return Search
    }
  },
  components: {ElePagination, SoldOut, MyTable, DiyElForm},
  props:{
    isHasPaganation:{ //是否分页
       default:true
    },
    filterForm:{  //表头查询条件

    },
    formAttrs:{  //表头布局

    },
    tableHeader:{  //表体header

    },
    tableEventObj:{   //监听事件

    },
    isFlexTable:{   //高度自适应
      default:true
    },
    tableControlBtns:{   //数据资源右侧通用按钮
      default(){
        return [
          {
            id:'9af449d8-cdb4-4804-b15e-0f60d866c15f',
            type:'查询',
            className:'glyphicon glyphicon-credit-card'
          },
          {
            id:'c9af72ac-bab5-48a4-b119-a9b82ac053a7',
            type:'元数据查询',
            className:'glyphicon glyphicon-credit-card'
          },
          {
            id:'ff55c172-2676-4379-afe0-b6b181b08767',
            type:'导入',
            className:'glyphicon glyphicon-credit-card'
          }
        ]
      }
    },
    isShowTableBtn:{   //是否显示数据资源右侧通用按钮
      default:false
    },
    tableAttrs:{  // 传给mytable的属性

    },
    getTableList:{}  //获取表格数据函数
  },
  setup(props,{emit}) {

    function clickOperationBtn(data) {
      if (data.type === '新增'){
        emit('changeOperation','add')
      }else if (data.type === '删除'){
        emit('changeOperation','delete')
      }else if (data.type === '详情'){
        emit('changeOperation','detail')
      }else if (data.type === '编辑'){
      emit('changeOperation','edit')
      }
    }
    function getResData(tableTata,total) {

      tableData.value = tableTata
      totalCount.value = total
    }
    const {pageIndex,pageSize,tableData,totalCount,initSearch,handleSizeChange,refEl}  = usePagination(props.getTableList.bind(null))
    const form  = ref({

    })
    return {
      form,
      pageIndex,pageSize,tableData,totalCount,handleSizeChange,refEl,initSearch,
      getResData,
      clickOperationBtn
    }
  }
}
</script>

<style scoped lang="scss">
.common-layout{
  .info-m{
    margin-top: 10px;
  }
  .hidden{
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }
  box-sizing: border-box;
  padding-bottom: 20px;
  //overflow: hidden;
  .table-area{
    &.flex-t{
    flex: 1;
    overflow: hidden;
  }

  }
  display: flex;
  flex-direction: column;
  .op-btns{
    width: max-content;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: 10px;
  }
  .operation-btns{

    li{
      transition: 0.5s all;
      &.disabled{
        background-color: #ccc;
        border-color: #ccc;
        cursor:not-allowed;
      }
      &:hover{
        background-color: #bababa;
        border-color: #bababa;
        color: #FFFFFF;
      }
      cursor: pointer;
      height: 34px;
      width: 36px;
      margin-right: -1px;
      text-align: center;
      line-height: 36px;
      border: 1px solid #c2c2c2;
    }
    display: flex;

  }
  margin: 0 20px 20px;
  .data-source{
    margin-right: 10px;
    color: rgb(103, 106, 108);
    font-size: 16px;
    font-weight: 600;
  }
  .total{
    strong{
      color: rgb(55, 99, 156);
      font-weight: 700;
    }
    color: rgb(103, 106, 108);
    font-size: 13px;
  }
  .line{

    margin-bottom: 30px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .diy-area{

    padding-top: 30px;
  }
}

</style>
