<template>
  <div>
    <el-table :data="tableData" height="630" border ref="tableEle">
      <el-table-column v-if="hasSelect" type="selection" width="55"></el-table-column>
      <el-table-column v-if="chartLine" type="index" width="50"></el-table-column>
      <el-table-column v-for="item in tableItem" :key="item.index" :prop="item.prop ? item.prop : ''" :label="item.tit ? item.tit : ''"
        :width="item.width ? item.width : ''" align="center" :className="item.active">
        <template slot-scope="scope">
          <el-button v-if="item.chart && typeof scope.row === 'object'" type="text" style="color:#606266" @click="$emit('showChart', scope.row.id)"><svg-icon icon-class="chart" /></el-button>
          <div v-if="scope.row[item.prop]">
            <el-button type="text" v-if="item.active"><a :href="parentChangedLink(scope.row.id)" target="_blank">{{scope.row[item.prop]}}</a></el-button>
            <div v-else> {{scope.row[item.prop]}}</div>
          </div>
          <div v-if="item.operate && typeof scope.row === 'object'">
            <el-button v-for="operating in operatingList" :key="operating.index " size="mini" :type="operating.icon"
              @click="$emit(operating.event, scope.row)">{{operating.text}}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background :current-page.sync="pageNo" :page-size="pageSize" layout="prev, pager, next, jumper"
        :total="total" @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>


<script>
  import { xtUrl } from '@/utils'
  export default {
    name: 'complexTable',
    props: ['tableData', 'tableItem', 'hasSelect', 'operatingList', 'total', 'jump', 'chartLine'],
    data() {
      return {
        pageNo: 1,
        pageSize: 10
      }
    },
    methods: {
      handleCurrentChange(val) { // 点击页码
        this.$refs.tableEle.bodyWrapper.scrollTop = 0
        this.pageNo = val
        this.$emit('current', val)
      },
      parentChangedLink(id) {
        return xtUrl + '/' + this.jump + '.html?id=' + id
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .el-table .cell {
    min-height: 23px
  }

  .active {
    color: #409EFF;
    cursor: pointer
  }
</style>