<template>
  <div class="pro-table" ref="proTable">
    <div class="card-header">
      <div class="action">
        <slot name="action"></slot>
      </div>
      <div class="tool-bar">
        <el-button-group>
          <!-- 刷新 -->
          <el-button @click="handleReload">
            <el-tooltip class="item" effect="dark" content="刷新" placement="top">
              <i class="refresh">
                <svg t="1600416426427" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1094" width="200" height="200"><path d="M512 32a479.296 479.296 0 0 1 384 192v-128a32 32 0 1 1 64 0v192a32 32 0 0 1-26.24 31.488L928 320h-192a32 32 0 1 1 0-64h103.936a416 416 0 1 0 87.808 270.912L928 512h64A480 480 0 1 1 512 32z" fill="#2c2c2c" p-id="1095"></path></svg>
              </i>
            </el-tooltip>
          </el-button>

          <!-- 表格密度 -->
          <el-button>
            <el-tooltip class="item" effect="dark" content="密度" placement="top">
              <el-dropdown trigger="click" @command="handleDensity">
                <span class="el-dropdown-link">
                  <svg t="1600606553830" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3348" width="200" height="200"><path d="M928 896a32 32 0 1 1 0 64h-768a32 32 0 1 1 0-64h768zM542.4 192l177.92 162.88-39.296 50.496L576 305.216v434.88L680.96 640l39.424 50.496-177.984 162.88-178.048-163.008 39.68-50.24L512 742.976V302.336L404.032 405.248l-39.68-50.24L542.4 192zM928 64a32 32 0 1 1 0 64h-768a32 32 0 0 1 0-64h768z" fill="#2b2b2b" p-id="3349"></path></svg>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="medium">默认</el-dropdown-item>
                  <el-dropdown-item command="small">中等</el-dropdown-item>
                  <el-dropdown-item command="mini">紧凑</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-tooltip>
          </el-button>

          <!-- 列设置 -->
          <el-button>
            <el-tooltip class="item" effect="dark" content="列设置" placement="top">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <i class="refresh">
                    <i class="setting"><svg t="1600416567547" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1234" width="200" height="200"><path d="M657.152 35.904c24.32-6.848 49.92-4.608 72.128 5.952l9.344 4.992 68.8 39.872c24.448 14.72 42.176 38.976 49.344 67.2 6.272 24.512 4.224 50.368-5.824 73.6l-4.8 9.856-11.392 19.904c-9.28 17.408-10.432 38.4-3.456 56.64l3.456 7.68 3.584 11.52 0.64 1.088a59.648 59.648 0 0 0 33.216 25.088l6.72 1.472 6.848 0.576c55.808 0.448 100.864 44.864 105.792 101.056l0.448 9.472v78.848a113.28 113.28 0 0 1-32.128 80.32c-21.12 21.504-50.048 32.96-77.632 31.616a58.176 58.176 0 0 0-47.232 27.136l-0.64 1.088-3.52 11.52a69.184 69.184 0 0 0-6.144 48.384l2.368 7.744 3.392 7.424 11.968 21.12c13.824 25.216 17.6 55.04 10.432 83.008a110.656 110.656 0 0 1-40.32 61.12l-8.832 5.952-64.512 39.616c-24.704 15.104-54.336 19.2-82.048 11.328a106.368 106.368 0 0 1-58.432-42.112l-11.52-18.944a52.736 52.736 0 0 0-48.768-29.504c-9.6 0.64-19.2 0.64-24.128 0-9.6 0.64-19.2 0.64-28.16 0a52.16 52.16 0 0 0-45.696 23.36l-3.712 6.144-8.512 10.304-4.544 3.584-1.792 2.944a107.712 107.712 0 0 1-39.232 35.2l-9.6 4.416-10.112 3.392c-24.32 6.912-49.92 4.608-72.64-6.208l-9.536-5.12-64.192-39.424a110.08 110.08 0 0 1-49.344-67.2 114.432 114.432 0 0 1 5.824-73.664l4.8-9.792 11.392-19.968c9.28-17.408 10.432-38.336 3.456-56.64l-3.456-7.68-3.648-11.648-0.512-0.96a57.984 57.984 0 0 0-46.848-27.072c-55.808-0.448-100.864-44.864-105.792-101.12L32 551.04v-79.36c0.192-29.824 11.904-58.432 32.704-79.232 21.12-21.12 49.728-32.384 77.056-31.04a58.176 58.176 0 0 0 47.232-27.136l0.576-1.152 3.584-11.52c7.936-14.848 9.92-32.384 6.144-48.256l-2.368-7.808-3.392-7.424-11.968-21.12a114.24 114.24 0 0 1-10.432-83.008c6.336-24.704 20.672-46.336 40.32-61.12l8.832-5.952L284.8 47.232c24.704-15.104 54.336-19.2 82.048-11.328 24.064 6.848 44.8 22.144 57.6 40.832l4.992 8.192 7.296 10.88c8.96 17.152 25.152 27.968 44.032 29.312l32.832 0.128 24.256 1.152c17.856 1.024 35.008-7.744 46.4-24.64l4.032-6.656 4.224-6.912c12.16-22.4 31.488-39.68 54.528-48.832l10.112-3.456z m48.768 65.92a39.168 39.168 0 0 0-31.296-4.352 42.24 42.24 0 0 0-22.4 16l-8.32 13.12c-19.968 38.336-58.112 62.592-99.712 63.872l-9.664-0.128L512 189.184h-22.336a115.136 115.136 0 0 1-102.848-52.224l-4.48-7.872-7.04-10.304a43.2 43.2 0 0 0-25.92-21.312 38.912 38.912 0 0 0-25.344 1.408l-5.824 2.944-64.64 39.68a46.08 46.08 0 0 0-20.416 28.224 50.688 50.688 0 0 0 1.28 29.44l3.008 6.528 12.16 21.44c18.944 35.52 20.48 78.08 4.736 114.752l-0.704 1.344 0.512 4.736-4.16 8.32a123.392 123.392 0 0 1-98.24 68.352l-10.88 0.64a40.896 40.896 0 0 0-30.848 12.352 48.576 48.576 0 0 0-13.376 26.56l-0.64 7.68v78.848c0.192 23.936 16.512 43.136 37.376 46.336l5.76 0.448a122.304 122.304 0 0 1 101.76 59.712l5.12 9.344 4.224 8.32-0.512 4.672 0.64 1.344c12.8 29.696 14.208 63.168 4.096 94.08l-4.352 11.456-4.864 9.984-11.52 20.224a50.24 50.24 0 0 0-4.48 36.48c2.432 9.6 7.68 18.048 14.912 24.192l5.76 4.16 64.256 39.488c9.6 5.76 20.736 7.36 31.232 4.352a42.304 42.304 0 0 0 22.016-15.232l3.84-6.016 8.32-9.856 4.224-3.328 1.152-2.048a117.12 117.12 0 0 1 84.928-54.464l10.56-0.768 9.792 0.128 10.304 0.32c3.84 0 8.192-0.128 13.76-0.32 6.464 0.448 12.992 0.448 20.032 0 42.24-2.368 81.92 18.944 103.872 53.632l4.736 8.256 5.76 9.6c5.824 10.624 15.168 18.24 25.92 21.312 8.448 2.368 17.28 1.92 25.344-1.408l5.824-2.944 64.64-39.68a46.08 46.08 0 0 0 20.416-28.224 50.688 50.688 0 0 0-1.28-29.44l-3.008-6.528-12.16-21.44a132.864 132.864 0 0 1-4.736-114.752l0.64-1.344-0.448-4.736 4.16-8.32a123.392 123.392 0 0 1 98.24-68.352l10.88-0.64a40.96 40.96 0 0 0 31.104-12.608 48.64 48.64 0 0 0 13.248-27.136l0.512-8V472.064c-0.192-26.112-19.584-46.528-43.136-46.72a122.304 122.304 0 0 1-101.76-59.776l-5.12-9.28-4.224-8.384 0.448-4.672-0.64-1.28a132.992 132.992 0 0 1-4.032-94.08l4.352-11.52 4.864-9.984 11.52-20.224a50.24 50.24 0 0 0 4.48-36.416 47.296 47.296 0 0 0-14.528-24l-5.376-3.904-68.928-39.936zM512 350.912a160 160 0 0 1 160 160.128A160.512 160.512 0 0 1 512 670.848a160 160 0 0 1 0-320z m0 64a96 96 0 0 0-0.128 192 96.448 96.448 0 0 0 96.128-96 96 96 0 0 0-96-96z" fill="#2c2c2c" p-id="1235"></path></svg></i>
                  </i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-tree
                    style="padding-right:20px"
                    @check="handleColumn"
                    :data="treeColumns"
                    show-checkbox
                    node-key="id"
                    :default-checked-keys="treeKeys"
                  >
                  </el-tree>
                </el-dropdown-menu>
              </el-dropdown>
            </el-tooltip>
          </el-button>

          <!-- 全屏 -->
          <el-button @click="handleFullScreen">
            <el-tooltip class="item" effect="dark" content="全屏" placement="top">
              <span>
                <i class="fullscreen" v-if="!isFullScreen"><svg t="1600416613809" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1420" width="200" height="200"><path d="M368.64 617.216l44.864 45.568L176.704 896H288a32 32 0 0 1 5.76 63.488L288 960h-192l-5.76-0.512a32 32 0 0 1-25.728-25.728L64 928v-192a32 32 0 0 1 63.488-5.76L128 736v118.144l240.64-236.928z m293.76 0L896 847.232V736a32 32 0 1 1 64 0v192a32 32 0 0 1-26.24 31.488L928 960h-192a32 32 0 1 1 0-64h118.272l-236.736-233.216 44.928-45.568zM288 64a32 32 0 0 1 0 64H173.568l240 236.352-44.928 45.568L128 172.928V288a32 32 0 0 1-64 0v-192a32 32 0 0 1 26.24-31.488L96 64h192z m640 0l5.76 0.512a32 32 0 0 1 25.728 25.728L960 96v192a32 32 0 0 1-63.488 5.76L896 288V179.84l-233.6 230.08-44.8-45.568L857.344 128H736a32 32 0 0 1-5.76-63.488L736 64h192z" fill="#2c2c2c" p-id="1421"></path></svg></i>
                <i class="no-fullscreen" v-if="isFullScreen"><svg t="1600659000177" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2321" width="200" height="200"><path d="M352 640l5.76 0.512a32 32 0 0 1 25.728 25.728L384 672v192a32 32 0 0 1-63.488 5.76L320 864v-108.16l-233.6 230.08-44.8-45.568L281.344 704H160a32 32 0 0 1-5.76-63.488L160 640h192z m512 0a32 32 0 1 1 0 64h-114.432l240 236.352-44.928 45.568L704 748.864V864a32 32 0 1 1-64 0v-192a32 32 0 0 1 26.24-31.488L672 640h192zM944.64 41.216l44.864 45.568L752.704 320H864a32 32 0 0 1 5.76 63.488L864 384h-192l-5.76-0.512a32 32 0 0 1-25.728-25.728L640 352v-192a32 32 0 0 1 63.488-5.76L704 160v118.144L944.64 41.216z m-858.24 0L320 271.168V160a32 32 0 0 1 64 0v192a32 32 0 0 1-26.24 31.488L352 384h-192a32 32 0 0 1 0-64h118.272L41.6 86.784l44.928-45.568z" fill="#2b2b2b" p-id="2322"></path></svg></i>
              </span>
            </el-tooltip>
          </el-button>
        </el-button-group>
      </div>
    </div>
    <base-table
      :column="column"
      :data="data"
      :size="size"
      :pagination="pagination"
      :showLoading="showLoading"
      @handleChange="handleChange"
      @handleCellClick="handleCellClick"
      @handleAction="handleAction"
    />
  </div>
</template>

<script>
import BaseTable from './BussBaseTable'
// 纯内容组件，不包含头部面包屑
export default {
  name: 'BussProTable',
  components: {
    BaseTable
  },
  props: {
    fullscreenEl: HTMLElement,
    showLoading: Boolean,
    column: Array,
    data: Array,
    pagination: Object
  },
  data() {
    return {
      treeColumns: [], // 当前表格对应的列头
      treeKeys: [], // 选中的列
      size: 'small', // 表格紧凑度
      isFullScreen: false, // 是否全屏
      checkedColumns: []// 选中的列
    }
  },
  mounted() {
    this.$nextTick(() => {
      const list = []
      const keys = []
      this.column.map(item => {
        list.push({
          id: item.prop,
          ...item
        })
        keys.push(item.prop)
      })
      this.treeColumns = list
      this.treeKeys = keys
    })
  },
  methods: {
    handleReload() {
      this.$emit('handleChange', { })
    },
    handleDensity(val) {
      this.size = val
    },
    handleColumn(curNode, { checkedNodes }) {
      let list = checkedNodes.slice()
      this.$emit('handleColumn', list)
    },
    handleChange(query) {
      this.$emit('handleChange', query)
    },
    handleCellClick(row) {
      this.$emit('handleCellClick', row)
    },
    handleAction(row) {
      this.$emit('handleAction', row)
    },
    handleFullScreen() {
      if (!this.isFullScreen) {
        const el = this.fullscreenEl || this.$refs.proTable
        this.isFullScreen = true
        let fn = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen
        if (fn)fn.call(el)
      } else {
        this.isFullScreen = false
        const el = document
        let fn = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.msCancelFullScreen
        if (fn)fn.call(el)
      }
    }
  }
}
</script>

<style lang="scss">
  .pro-table{
    border-radius: 2px;
    background: #ffffff;
    padding-bottom: 20px;
    .card-header{
      background: #ffffff;
      padding: 16px 20px;
      border-radius: 2px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tool-bar{
        .el-tooltip{
          cursor: pointer;
          svg{
            width: 18px;
            height: 18px;
            vertical-align: middle;
          }
        }
      }
    }
    // 设置表头的背景色
    .el-table th{
      background: #f7f8fa;
      &:first-child{
        padding-left: 10px;
      }
    }
    .el-table .el-table__row td{
      &:first-child{
        padding-left: 10px;
      }
    }
  }
</style>
