<!--
 * @Author: Devin
 * @Date: 2023-01-11 17:15:27
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-22 14:50:46
 * @Description: 公共页面布局
-->
<template>
  <common-panel>
    <div class="__common-page-panel">
      <div class="__common-search">
        <!-- common search -->
        <common-search
          :search-params="searchParams"
          :form-values="formValues"
          @change-event="changeEvent"
          @do-search="doSearch"
          @clear-search="clearSearch"
        >
          <slot></slot>
        </common-search>
      </div>

      <!-- content -->
      <div class="__common-content b-rr-4">
        <!-- common btns -->
        <div class="__panel-btns">
          <el-button
            v-for="btn in functionButtons"
            :key="btn['name']"
            size="small"
            :type="btn?.['type'] || 'primary'"
            @click.stop="btn['onClick']"
          >
            {{ btn['label'] }}
          </el-button>
        </div>
        <!-- common table -->
        <div class="__common-table">
          <common-table
            v-bind="tableAttrs"
            :height="height"
            :table-header="tableHeader"
            :table-data="tableData"
            :highlight="highlight"
            @selection-change="handleSelectionChange"
            @current-change="currentChange"
          ></common-table>
        </div>
        <!-- common pagenation -->
        <common-pagenation
          :page-size="page.pageSize"
          :current-page="page.current"
          :total="page.total"
          @handle-size-change="handleSizeChange"
          @handle-current-change="handleCurrentChange"
        ></common-pagenation>
      </div>
    </div>
  </common-panel>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps({
  functionButtons: {
    type: Array<any>,
    default: () => []
  },
  tableHeader: {
    type: Array<any>,
    default: () => []
  },
  tableAttrs: {
    type: Object,
    default: () => {}
  },
  highlight: {
    type: Boolean,
    default: () => false
  },
  tableData: {
    type: Array<any>,
    default: () => []
  },
  searchParams: {
    type: Array<any>,
    default: () => []
  },
  // 搜索
  formValues: {
    type: Object,
    default: () => {}
  },
  height: {
    type: String,
    default: () => '100%'
  },
  // 页码器
  page: {
    type: Object,
    default: () => {
      return {
        pageSize: 10,
        current: 1,
        total: 0
      };
    }
  },
  isTable: {
    type: Boolean,
    default: () => true
  },
  isPage: {
    type: Boolean,
    default: () => false
  }
});

const emits = defineEmits([
  'doSearch',
  'clearSearch',
  'handleSelectionChange',
  'currentChange',
  'changeEvent'
]);

const params = ref<any>({
  businessParams: props.formValues
});

// 搜索
function doSearch(p: any) {
  if (props.isPage) {
    params.value.pageSize = props.page.pageSize;
    params.value.pageNumber = props.page.current;
    params.value.businessParams = p?.businessParams ? p?.businessParams : p;
  }
  emits('doSearch', params.value);
}

// 清除搜索
function clearSearch(p: any) {
  if (props.isPage) {
    // eslint-disable-next-line vue/no-mutating-props
    props.page.pageSize = 10;
    // eslint-disable-next-line vue/no-mutating-props
    props.page.current = 1;
    params.value.pageSize = 10;
    params.value.pageNumber = 1;
    params.value.businessParams = p;
  }
  emits('clearSearch', params.value);
}

// 切换size
function handleSizeChange(size: number) {
  // eslint-disable-next-line vue/no-mutating-props
  props.page.pageSize = size;
  params.value.pageSize = size;
  doSearch(params.value);
}

// 切换页码
function handleCurrentChange(page: number) {
  // eslint-disable-next-line vue/no-mutating-props
  props.page.current = page;
  params.value.pageNumber = page;
  doSearch(params.value);
}
function handleSelectionChange(val: any) {
  emits('handleSelectionChange', val);
}

function currentChange(val: any) {
  emits('currentChange', val);
}

function changeEvent(form: any) {
  emits('changeEvent', form);
}
</script>

<script lang="ts">
export default {
  name: 'CommonPagePanel'
};
</script>

<style scoped lang="scss">
.__common-page-panel {
  // display: flex;
  // flex-direction: column;
  .__common-search {
    margin-bottom: 12px;
    background: #fff;
  }
  .__common-content {
    background: #fff;
    padding: 12px 16px;
    .__panel-btns {
      margin-bottom: 12px;
    }
    .__common-table {
      margin-bottom: 16px;
      min-height: 200px;
    }
  }
}
</style>