<template>
  <table-list
    :headers="headers"
    :items="items"
    :total="total"
    :loading="loading"
    :is-tools="isTools"
    :show-select="showSelect"
    showExpand
    :disable-sort="true"
    :show-page="showPage"
    item-key="id"
    v-bind="$attrs"
    @add="handleAdd"
    @pageHandleChange="$emit('pageHandleChange', $event)"
  >
    <template #data-table-expand="{ attrs, isExpanded, expand, item }">
      <td width="300">
        <div class="d-flex align-center" :style="`margin-left: ${retract * 20 }px`">
          <v-btn
            :disabled="!item.children || !item.children.length"
            v-bind="attrs"
            icon
            class="mr-3"
            :class="{ noShow: !item.children || !item.children.length}"
            @click="expand(!isExpanded)"
          >
            <v-icon>
              {{ isExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
            </v-icon>
          </v-btn>
          <tool-tip width="170" :text="item.label" />
        </div>
      </td>
    </template>
    <!-- <template #enName="{ item }">
      <td width="170"><tool-tip width="150" :text="item.enName" /></td>
    </template> -->
    <template #code="{ item }">
      <td width="400"><tool-tip width="400" :text="item.meta.code" /></td>
    </template>
    <!-- <template #name="{ item }">
      <td width="170"><tool-tip width="150" :text="item.name" /></td>
    </template> -->
    <!-- <template #type="{ item }">
      <td width="50"><tool-tip width="50" :text="item.type" /></td>
    </template> -->
    <template #actions="{ item }">
      <v-btn color="primary" text @click="handleEdit(item)">
        编辑
      </v-btn>
      <template v-if="hasAccess">
        <v-btn color="info" text @click="handleCopy(item)">
          复制
        </v-btn>
        <v-btn color="error" text @click="handleDelete(item.id, item)">
          删除
        </v-btn>
      </template>
    </template>
    <template v-slot:navBtn>
      <slot name="navBtn"></slot>
    </template>
    <template v-slot:component="{item}">
      <td width="300">
        <tool-tip width="300" :text="item.component" />
      </td>
    </template>
    <!-- <template v-slot:path="{item}">
      <td width="200">
        <template v-if="!item.path">
          -
        </template>
        <tool-tip v-else width="180" :text="item.path" />
      </td>
    </template> -->
    <template v-slot:sort="{item}">
      <td width="50" align="center">{{  item.sort }}</td>
    </template>
    <template #icon="{ item }">
      <td width="50" align="center"><v-icon>{{ item.icon }}</v-icon></td>
    </template>
    <template v-slot:hidden="{item}">
      <v-chip
        small
        :color="item.type !== '组件' ? item.hidden ? 'error' : 'success' : item.active === '1' ? 'success' : 'error'"
        text-color="white"
      >
        {{ item.type !== '组件' ? item.hidden ? '已关闭' : '已开启' : item.active === '1' ? '已开启' : '已关闭'}}
      </v-chip>
    </template>
    <!-- <template v-slot:active="{item}">
      <td width="100">
        {{ item.type !== '组件' ? '-' : item.active === '1' ? '已激活' : '未激活' }}
      </td>
    </template> -->
    <template v-slot:remark="{item}">
      <td width="100">
        {{ item.remark }}
      </td>
    </template>
    <template v-slot:expanded-item="{ item }">
      <td v-if="item.children && item.children.length" :colspan="headers.length" class="pa-0">
        <menu-list
          :show-select="false"
          :headers="headers"
          :items="item.children"
          :is-tools="false"
          :is-mb="false"
          :elevation="0"
          :retract="retract + 1"
          hide-default-header
          @copy="handleCopy"
          @edit="handleEdit"
          @add="handleAdd"
          @delete="handleDelete"
        />
      </td>
    </template>
  </table-list>
</template>

<script>
import TableList from '@/components/List/table.vue'
import ToolTip from '@/components/Tooltip'
export default {
  name: 'menu-list',
  components: { TableList, ToolTip },
  props: {
    // 缩进
    retract: {
      type: Number,
      default: 0
    },
    hasAccess: {
      type: Boolean,
      default: true
    },
    headers: {
      type: Array,
      default: () => []
    },
    items: {
      type: Array,
      default: () => []
    },
    total: {
      type: [String, Number],
      default: -1
    },
    // itemsPerPage: {
    //   type: [String, Number],
    //   default: 10
    // },
    loading: {
      type: Boolean,
      default: false
    },
    showPage: {
      type: Boolean,
      default: false
    },
    showSelect: {
      type: Boolean,
      default: true
    },
    isTools: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleCopy (item) {
      this.$emit('copy', item)
    },
    handleEdit (item) {
      this.$emit('edit', item)
    },
    handleAdd () {
      this.$emit('add')
    },
    handleDelete (ids, item) {
      this.$emit('delete', ids, item)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .v-data-table > .v-data-table__wrapper tbody tr.v-data-table__expanded__content {
  box-shadow: none;
}
.noShow {
  opacity: 0;
}
</style>
