<template>
  <div class="frameworkTable height_100" v-DivHeight="getDivHeight">
    <el-table :data="tableData"  header-row-class-name="custom-table-header" border v-if="showTable" :maxHeight="tableHeight" @sort-change="sortChange" >
      <el-table-column label="#" width="60" type="index" align="center">
        <template slot-scope="scope">
          <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="架构名称" prop="name" sortable="custom" align="center" :render-header=" $commonJS.renderHeaderMethods"></el-table-column>
      <el-table-column label="创建人" prop="createName" sortable="custom" align="center" :render-header=" $commonJS.renderHeaderMethods"> </el-table-column>
      <el-table-column label="创建时间" prop="createTime" sortable="custom" align="center" :render-header=" $commonJS.renderHeaderMethods"></el-table-column>
      <el-table-column label="架构说明" prop="description" sortable="custom" align="center" :render-header=" $commonJS.renderHeaderMethods">
        <template slot-scope="scope">
          <div>
            <span>{{ scope.row.description?scope.row.description:'--' }}</span>
          </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 command="1">预览图片</el-dropdown-item>
              <el-dropdown-item command="2" divided style="color:red">删 除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getTableHeight } from '@/views/components/mixins'
export default {
  mixins:[getTableHeight],
  props: {
    tableData: {
      type: Array,
      default: function() {
        return []
      }
    },
    queryParams: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {
    // 排序
    sortChange({ column, prop, order }) {
      this.$emit('on-sort', { column, prop, order })
    },
    // 编辑等下拉事件
    handleCommand(val, row) { 
      this.$emit('option',{val, row})
    },
  },
}
</script>

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