<template>
<div class="table-box">
  <el-table
    :data="tableData"
    :border="tableConfig.border || true"
    :size="tableConfig.size || 'small'"
    :header-cell-style="headerCellStyle"
    @selection-change="selectionChange"
    style="width: 100%">
    <template v-if="tableConfig.selection.has">
      <el-table-column
        type="selection"
        :fixed="tableConfig.selection.fix"
        :width="tableConfig.selection.width"
        :min-width="tableConfig.selection.minWidth"
        :align="(tableConfig.selection.align || 'center')"
      />
    </template>
    <template
      v-for="(head, index) in tableHead">
      <el-table-column
        :show-overflow-tooltip="true"
        :fixed="head.fix"
        :key="index"
        :label="head.label"
        :width="head.width"
        :min-width="head.minWidth"
        :align="(head.align || 'center')">
        <template slot-scope="scope">
          <template v-if="(head.prop === 'img_url')">
            <el-popover trigger="hover">
              <div class="img-show">
                <img :src="scope.row[head.prop]" alt="放大图片">
              </div>
              <div slot="reference" class="img-inline">
                <img :src="scope.row[head.prop]" alt="图片">
              </div>
            </el-popover>
          </template>
          <template v-if="(head.prop === 'file_url')">
            <a :href="scope.row[head.prop] || 'javascript:void(0)'" style="text-decoration: none; color: #2b9dff;">下载</a>
          </template>
          <template v-else-if="(head.prop === 'operate')">
            <el-dropdown :hide-on-click="false" @command="dropdownItemClick(scope.row.index, arguments)">
              <span class="el-dropdown-link">...</span>
              <el-dropdown-menu slot="dropdown">
                <template v-for="(_item, _index) in head.commandArr">
                  <el-dropdown-item v-bind:key="_index" :command="_item.command">{{_item.name}}</el-dropdown-item>
                </template>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <template v-else-if="(head.prop === 'operate-x')">
            <template v-for="(_item, _index) in head.commandArr">
              <template v-if="scope.row['approve_status'] !== undefined">
                <!-- 学术报告 - 列表 -->
                <template v-if="_index === 0 && scope.row['approve_status'] === '通过' && scope.row['reportscount'] !== 0">
                  <el-button v-bind:key="_index" type="text" @click="itemClick(scope.row.index, _item)">{{_item.name}}</el-button>
                </template>
                <template v-else-if="_index === 1 && scope.row['approve_status'] === '通过' && scope.row['reportscount'] === 0">
                  <el-button v-bind:key="_index" type="text" @click="itemClick(scope.row.index, _item)">{{_item.name}}</el-button>
                </template>
                <template v-else-if="_index === 2 && scope.row['reportscount'] === 0">
                  <el-button v-bind:key="_index" type="text" @click="itemClick(scope.row.index, _item)">{{_item.name}}</el-button>
                </template>
                <template v-else-if="_index === 3 && scope.row['reportscount'] === 0">
                  <el-button v-bind:key="_index" type="text" @click="itemClick(scope.row.index, _item)">{{_item.name}}</el-button>
                </template>
              </template>
              <template v-else-if="scope.row['passed'] !== undefined">
                <!-- 积分 - 重修列表 -->
                <template v-if="_index === 0 && scope.row['passed'] === '未通过' && scope.row['is_retake'] === 0">
                  <el-button style="padding: 0; font-weight: 500;" v-bind:key="_index" type="text" @click="itemClick(scope.row.index, _item)">{{_item.name}}</el-button>
                </template>
                <template v-if="_index === 1 && scope.row['passed'] === '未通过' && scope.row['is_retake'] === 1">
                  <el-button style="padding: 0; color: #66c6bd; font-weight: 500;" v-bind:key="_index" type="text" @click="itemClick(scope.row.index, _item)">{{_item.name}}</el-button>
                </template>
              </template>
            </template>
          </template>
          <template v-else-if="head.goObj">
            <router-link class="router-link-class" :to="{ name: head.goObj.routerName, params: { obj: scope.row, otherObj: head.goObj.params || '' } }">{{scope.row[head.prop]}}</router-link>
          </template>
          <!-- <template v-else>
            {{
              /time|date/gi.test(head.prop) ?
                formatDate(scope.row[head.prop], 'YYYY-MM-DD hh:mm')
                : scope.row[head.prop]
            }}
          </template> -->
          <template v-else>{{scope.row[head.prop]}}</template>
        </template>
      </el-table-column>
    </template>
  </el-table>
  <div class="pagination-right" v-if="(pagination.total/pagination.pageSize > 1)">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pagination.curPage"
      :page-size="pagination.pageSize"
      layout="prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>
  </div>
</div>
</template>

<script>
export default {
  props: {
    tableConfig: { type: Object, require: true },
    tableHead: { type: Array, require: true },
    tableData: { type: Array, require: true },
    pagination: { type: Object, require: true }
  },
  methods: {
    /* 分页组件方法 */
    handleSizeChange () { },
    handleCurrentChange () { },
    dropdownItemClick (index, command) {
      this.VueEvent.$emit('command-tablelist', { index: index, command: command[0], tableData: this.tableData })
    },
    /* 展开方式 点击事件 */
    itemClick (index, item) {
      this.VueEvent.$emit('command-tablelist-x', { index: index, command: item, tableData: this.tableData })
    },
    /* 修改表头样式 */
    headerCellStyle ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #f5f7fa; color: #272f3f; text-align: center; font-weight: 400;'
      }
    },
    /* 定义全选按钮，是否全部选中 */
    selectionChange (sels) {
      this.tableConfig.selection.sels = sels
    },
    /* 时间戳 格式化 */
    formatDate (datetime, fmt) {
      if (!datetime) return '无'
      let date = new Date(parseInt(datetime))
      if (/(y+)/gi.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      let o = {
        'M+': date.getMonth() + 1,
        '[d|D]+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      }
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + ''
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length))
        }
      }
      return fmt
    }
  }
}
</script>

<style lang="scss" scoped>
/* 列表需要 带分页 */
.table-box {
  overflow: hidden;
  /* 列表中 - 图片显示 */
  .img-inline {
    width: 100%;
    max-height: 40px;
    overflow: hidden;
    img {
      display: block;
      width: 100%;
    }
  }
  /* 列表中 - 操作样式 */
  .el-dropdown {
    cursor: pointer;
    &:hover {
      color: #F2730B;
    }
  }
  /* 列表中 - 点击跳转样式 */
  .router-link-class {
    text-decoration: none;
    color: #F2730B;
    &:hover {
      color: #F2730B;
      text-decoration: underline;
    }
  }
  /* 分页样式 */
  .pagination-right {
    float: right;
    margin: 15px 10px 0 0;
  }
}

/* 列表中 - 图片放大显示 */
.img-show {
  max-width: 400px;
  max-height: 300px;
  overflow: hidden;
  img {
    display: block;
    width: 100%;
    height: auto;
  }
}
</style>
