<template>
  <!-- 产品类别表格 -->
  <div class="categoryTable height_100" v-DivHeight="getDivHeight">
    <el-table :data="tableData" style="width: 100%" border header-row-class-name="custom-table-header" row-key="id" v-if="showTable" :maxHeight="tableHeight" :expand-row-keys="expends" @expand-change="handleExpand" @sort-change="sortChange">
      <el-table-column type="expand">
        <!-- 产品 -->
        <template slot-scope="scope">
          <div style="padding: 10px;">
            <component :is="componentType" :row="scope.row" :isChoose="isChoose"  v-bind="$attrs" v-on="$listeners"></component>
          </div>
        </template>
      </el-table-column>
      <el-table-column v-for="item in column" :render-header=" $commonJS.renderHeaderMethods" :key="item.value" :prop="item.value" :label="item.name" align="center" sortable="custom">
        <template slot-scope="scope">
          <div v-if="['name'].includes(item.value)">
            <el-link @click="handleItem(scope.row, '1')" type="primary">
              <span  v-html="$commonJS.getColumnData(scope.row, item)"></span>
            </el-link>
          </div>
          <div v-else v-html="$commonJS.getColumnData(scope.row, item)">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150px">
        <template slot-scope="scope">
          <el-dropdown split-button type="primary" size="small" @click="handleCommand('0', scope.row)"
            @command="handleCommand($event, scope.row)">
            <span>编 辑</span>
            <el-dropdown-menu slot="dropdown" style="text-align:center">
              <el-dropdown-item>
                  <el-dropdown trigger="hover" placement="left-start" @command="handleCommand($event,scope.row)">
                    <span class="el-dropdown-link">新增产品</span>
                    <el-dropdown-menu  class="text-align_center">
                      <el-dropdown-item command="7">新增本公司产品</el-dropdown-item>
                      <el-dropdown-item command="8">新增外公司产品</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-dropdown-item>
              <el-dropdown-item command="1">趋势图</el-dropdown-item>
              <el-dropdown-item command="2">预览图片</el-dropdown-item>
              <el-dropdown-item command="3">分类架构</el-dropdown-item>
              <el-dropdown-item command="4">专利布局可视化</el-dropdown-item>
              <el-dropdown-item command="5" divided style="color:red">删 除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import mixins from '../mixins'
import { getTableHeight } from '@/views/components/mixins'
import productTable from './productTable.vue'
export default {
  mixins:[getTableHeight,mixins],
  components: {
    productTable,
  },
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    queryParams: {
      type: Object,
      default: () => {
        return {}
      }
    },
    column:{
      default:()=>{
        return [
          {
            value:'name',
            type:'String',
            name:'产品类别名称'
          },
          {
            value:'licenseRate',
            type:'String',
            name:'许可费率'
          },
          {
            value:'description',
            type:'String',
            name:'产品类别描述'
          },
          {
            value:'createName',
            type:'String',
            name:'创建人'
          },
          {
            value:'createTime',
            type:'DataTime',
            name:'创建时间'
          },
        ]
      }
    },
    //选择
    isChoose:false
  },
  data() {
    return {
      // 显示指定的子组件
      componentType: 'productTable',
      //展开行数组
      expends:[]
    }
  },
  mounted() {
  },
  methods: {

    // 展开行打开或者关闭事件
    handleExpand(row, rowList) {
      var index = this.expends.findIndex(item=>{
        return item == row.id
      })
      if(index==-1){
        this.expends.push(row.id)
      }else{
        this.expends.splice(index,1)
      }

    },
    // 编辑下拉菜单
    handleCommand(val, row) {
      this.$emit('options', { val, row })
    },
    
    // 排序
    sortChange({ column, prop, order }) {
        this.$emit('on-sort', { column, prop, order })
    },
  },
}
</script>

<style lang="scss" scoped></style>