<template>
  <div class="cus-table-card-main" :class="{'cus-table-card-full': full !== false}">
    <div class="cus-table-card-content">
      <div class="cus-table-card-content-list">
        <template v-for="(item, index) in data">
          <div class="model" :style="`margin-left: ${index % col === 0 ? '0px' : colMargin};margin-bottom: ${index > ((data.length / col - 1) * col) - 1 ? '0px' : rowMargin};`">
            <slot name="model" :info="item"/>
          </div>
        </template>
      </div>
    </div>
    <div class="ctc-page">
      <div class="total">
        <template v-if="$util.isValue(selectLength)">
          已选中 {{ selectLength }} 条 /
        </template>
        共 {{ total }} 条
      </div>
      <el-pagination
          v-if="noPage === false"
          ref="ref_tablePage"
          class="__cus-pagination"
          :currentPage="page"
          :page-size="pageSize"
          background
          :page-sizes="pageSizes"
          :layout="pageLayoutCpt"
          :total="Number(total)"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  nextTick,
  ComponentInternalInstance, toRefs
} from 'vue'
  import {useStore} from 'vuex'
  import {useRouter} from 'vue-router'

  export default defineComponent({
    name: 'CusTableCard',
    props: {
      total: {
        required: true
      },
      page: {},
      pageSize: {},
      pageSizes: {
        default: () => [10, 20, 30, 50, 100]
      },
      noPage: {
        default: false
      },
      col: {
        default: 2
      },
      colMargin: {
        default: '20px'
      },
      rowMargin: {
        default: '20px'
      },
      data: {
        required: true,
        default: () => []
      },
      noLayout: {
        default: () => []
      },
      full: {
        default: false
      },
      selectLength: {
        default: null
      },
    },
    setup(props, { emit }) {
      const store = useStore();
      const router = useRouter();
      const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
      const state = reactive({
        pageLayout: ['sizes', 'prev', 'pager', 'next', 'jumper']
      });
      const pageLayoutCpt = computed(() => {
        return state.pageLayout.filter((v: string) => props.noLayout.every((s: string) => v !== s)).join(',')
      })
      const handleSizeChange = (val: Number) => {
        emit('handlePage', {
          page: props.page,
          pageSize: val
        })
      }
      const handleCurrentChange = (val: Number) => {
        emit('handlePage', {
          page: val,
          pageSize: props.pageSize
        })
      }
      onMounted(() => {
      })
      return {
        handleSizeChange,
        handleCurrentChange,
        ...toRefs(state),
        pageLayoutCpt
      }
    },
  })
</script>

<style scoped lang="scss">
  .cus-table-card-main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    $cus-page-height: 32px;
    $colP: v-bind(col);
    .cus-table-card-content {
      overflow-y: auto;
      flex: 1;
      .cus-table-card-content-list {
        display: flex;
        flex-wrap: wrap;
        .model {
          width: calc((100% - (v-bind(colMargin) * (v-bind(col) - 1))) / v-bind(col));
        }
      }
    }
    :deep(.ctc-page) {
      height: $cus-page-height;
      margin-top: 25px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
      display: flex;
      justify-content: space-between;
      .total {
        display: flex;
        align-items: center;
      }
    }
  }
</style>
