<template>
  <div class="table-operate">
    <span v-for="(item, itemIndex1) in showMenu" :style="{cursor: item.disabled ? 'not-allowed' : '' }" :key="itemIndex1" :title="item.disabled ? item.title : ''">
      <ta-popconfirm v-if="item.type == 'confirm'" :title="item.confirmTitle" @confirm="item.onOk? item.onOk(record, index): ''" @cancel="item.onCancel? item.onCancel(record, index): ''">
        <a :title="item.title" :disabled="item.disabled" :class="item.class" :style="item.style"><ta-icon v-if="item.icon" :type="item.icon" :theme="item.iconTheme" class="mg-r6" />{{ item.name }}</a>
      </ta-popconfirm>
      <ta-dropdown v-else-if="item.type == 'more'" :trigger="['click']" overlayClassName="table-operate-more">
        <a :title="item.title" :class="item.class" :style="item.style" :disabled="item.disabled" @click="menuClick(item)"><ta-icon v-if="item.icon" :type="item.icon" :theme="item.iconTheme" class="mg-r6" />{{ item.name }} <ta-icon type="down" /></a>
        <ta-menu slot="overlay">
          <template v-for="(citem, itemIndex) in item.moreMenuList">
            <ta-menu-item v-if="citem.isShow" :key="itemIndex" :disabled="citem.disabled" :title="citem.title" @click="menuClick(citem)">
              <ta-popconfirm v-if="citem.type == 'confirm'" :title="citem.confirmTitle" @confirm="citem.onOk ? citem.onOk(record, index): ''" @cancel="citem.onCancel ? citem.onCancel(record, index) : ''">
                <div :class="citem.class" :style="{'pointer-events': citem.disabled ? 'none':'', ...item.style}"><ta-icon v-if="citem.icon" :type="citem.icon" :theme="citem.iconTheme" class="mg-r6" /> {{ citem.name }}</div>
              </ta-popconfirm>
              <div v-else :class="citem.class" :style="item.style"><ta-icon v-if="citem.icon" :type="citem.icon" :theme="citem.iconTheme" class="mg-r6" /> {{ citem.name }}</div>
            </ta-menu-item>
          </template>
        </ta-menu>
      </ta-dropdown>
      <a v-else :title="item.title" :disabled="item.disabled" :class="item.class" :style="item.style" @click="menuClick(item)"><ta-icon v-if="item.icon" :type="item.icon" :theme="item.iconTheme" class="mg-r6" />{{ item.name }}</a>
      <ta-divider v-if="itemIndex1 != showMenu.length - 1" type="vertical" />
    </span>
  </div>
</template>
<script>
export default {
  name: 'TaTableOperate',
  props: {
    operateMenu: {
      type: Array,
    },
  },
  computed: {
    tableTd () {
      return this.getTableTd()
    },
    record () {
      return this.tableTd.record
    },
    index () {
      return this.tableTd.index
    },
    showMenu () {
      return this.getMenu(this.operateMenu)
    },
  },
  methods: {
    /* 获取表格td */
    getTableTd (parent = this.$parent) {
      let result = {}
      if (parent.component && parent.component == 'td') {
        result = parent
      } else {
        result = this.getTableTd(parent.$parent)
      }
      return result
    },
    /* 获取菜单 */
    getMenu (menu) {
      let result = []
      const {record, index} = this
      for (let i=0; i< menu.length; i++) {
        if (this.getBoolean(menu[i].isShow)) {
          let tempMenu = {...menu[i]}
          tempMenu.isShow = true
          tempMenu.name = this.getName(tempMenu.name, '操作按钮')
          tempMenu.title = this.getName(tempMenu.title, '')
          tempMenu.disabled = this.getBoolean(tempMenu.disabled, 'disabled')
          tempMenu.class = tempMenu.class ? this.getClassStyle(tempMenu.class, 'class') : undefined
          tempMenu.style = tempMenu.style ? this.getClassStyle(tempMenu.style) : undefined
          tempMenu.iconTheme = tempMenu.iconTheme || 'outlined'
          if (tempMenu.type == 'confirm') {
            tempMenu.confirmTitle = this.getName(tempMenu.confirmTitle, '确认删除该信息？')
          }
          if (tempMenu.type == 'more' && tempMenu.moreMenuList && tempMenu.moreMenuList.length) {
            tempMenu.moreMenuList = this.getMenu(tempMenu.moreMenuList)
          }
          /* 兼容老版本部分属性 */
          if (tempMenu.type == 'delete') {
            tempMenu.type = 'confirm'
            tempMenu.confirmTitle = this.getName(tempMenu.deleteTitle, '确认删除该信息？')
            tempMenu.onOk = tempMenu.onDelete
          }
          result.push(tempMenu)
        }
      }
      return result
    },
    getBoolean (flag, type) {
      let result
      if (flag == undefined) {
        if (type == 'disabled') {
          result = false
        } else {
          result = true
        }
      } else {
        if (typeof flag == 'function') {
          result = flag(this.record, this.index)
        } else {
          result = flag
        }
      }
      return Boolean(result)
    },
    getName (name, initName) {
      let result = initName
      if (name != undefined) {
        if (typeof name == 'function') {
          result = name(this.record, this.index)
        } else {
          result = name
        }
      }
      return result
    },
    getClassStyle(itemClass, type) {
      let result = itemClass
      if (itemClass && typeof itemClass == 'function') {
        result = itemClass(this.record, this.index)
      }
      if (type == 'class' && result instanceof Array) {
        result = result.join(" ")
      }
      return result
    },
    menuClick (item) {
      if (item.type != 'confirm' && item.onClick) {
        item.onClick(this.record, this.index)
      }
    },
  },
}
</script>
