<template>
  <div>
    <Card style="width:100%">
      <div class="config_meta">
        <p class="fl">待办任务</p>
        <div class="fr">
          <Tooltip content="刷新" placement="left-start">
            <Icon @click="_request" type="ios-refresh" size="30" color="#2d8cf0" style="cursor:pointer;"></Icon>
          </Tooltip>
        </div>
        <div class="clear"></div>
      </div>
      <div style="width: 100%;">
        <element-table ref="pageTable" :pageColumns="pageColumns" :tableHeight="280"
                       @on-result-change="_tableResultChange" :hide-page="true" :getPage="getPage">
          <el-table-column
            :prop="item.key"
            :label="item.title"
            :min-width="item.width"
            :fixed="item.fixed?item.fixed:undefined"
            v-for="item in pageColumns"
            :key="item.key"
            show-overflow-tooltip sortable>
            <template slot-scope="scope">
              <span v-if="item.key==='index'">{{scope.$index+1}}</span>
              <a v-else-if="item.key==='title'" @click="_goto(scope.row.url)">{{scope.row[item.key]}}</a>
              <span v-else-if="item.key==='num'">{{scope.row[item.key]}}</span>
              <span v-else-if="item.key==='overNum'">{{scope.row[item.key]}}</span>
              <span v-else>{{scope.row[item.key]}}</span>
            </template>
          </el-table-column>
        </element-table>
      </div>
    </Card>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      getPage: { records: [] },
      pageColumns: [
        { title: '序号', key: 'index', width: 140 },
        { title: '任务名称', key: 'title', width: 140 },
        { title: '任务数量', key: 'num', width: 140 },
        { title: '超期数量', key: 'overNum', width: 140 }
      ]
    }
  },
  mounted() {
    // this._request()
  },
  methods: {
    _goto(url) {
      this.$router.push(url)
    }
  }
}
</script>

<style scoped>
</style>
