<template>
  <div id="table">
    <table
      cellpadding='0'
      cellspacing='0'
    >
      <tr>
        <th colspan='6'>
          <a
            @click='ThFunc'
            href="javascript:;"
          >{{name}}</a>
        </th>
      </tr>
      <tbody v-if="tableData.length!=0">
        <tr
          v-for="(item,index) in tableData"
          :key='index'
        >
          <td
            v-for="it in item"
            :key="it.key"
          >
            <a
              v-if='it.name'
              @click="Success(it)"
              href="javascript:;"
            >{{it.name}}</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import { nanoid } from 'nanoid';
// 特殊table
export default {
  props: {
    Data: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      name: '',//头部名称
      tableData: [],//数据
    }
  },
  methods: {
    // th 跳转
    ThFunc () {
      this.$emit("Func", JSON.parse(JSON.stringify({ type: 'th', data: this.Data })))
    },
    // td 跳转
    Success (data) {
      this.$emit("Func", JSON.parse(JSON.stringify({ type: 'td', data: data })))
    }
  },
  created () {
    let Data = JSON.parse(JSON.stringify(this.Data)), { name, data } = Data;
    this.name = name;
    var table_arr = [], item_arr = [];
    data.forEach((item, index) => {
      item["key"] = nanoid();
      if ((index + 1) % 6 == 0) {
        item_arr.push(item)
        table_arr.push(item_arr);
        item_arr = [];
      } else {
        item_arr.push(item);
      }
    })
    if (data.length % 6 != 0) {
      for (let i = 0; i < (6 - (data.length % 6)); i++) {
        item_arr.push({ key: nanoid() })
      }
      table_arr.push(item_arr)
    }
    this.tableData = table_arr;
  }
}
</script>
<style lang="less" scoped>
@table_line:1px solid rgb(204,204,204);
#table {
  a {
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
    text-align: start;
  }
  table {
    width: 1158px;
    box-sizing: border-box;
    margin: 20px auto;
    border: @table_line;
    border-radius: 5px;
    border-bottom: 0;
    tr {
      th {
        font-weight: 600;
        a {
          color: #000;
          font-size: 14px;
        }
      }
      td {
        a {
          color: #666;
          font-size: 12px;
        }
      }
      th,
      td {
        width: 192px;
        box-sizing: border-box;
        padding: 5px;
        border-bottom: @table_line;
        border-right: @table_line;
      }
      & > th:last-child,
      & > td:last-child {
        border-right: 0;
      }
    }
    & > tr:last-child {
      td {
        padding: 5px;
        border-bottom: 0;
      }
    }
  }
}
</style>