<template>
  <div>
    <Table stripe :columns="columns" :data="dataList">
      <template slot-scope="{ row, index }" slot="description_task">
        <Poptip trigger="hover">
          <template slot="content" style="white-space: normal;">
            <div>{{row.description_task}}</div>
          </template>
          <div class="description-div">{{row.description_task}}</div>
        </Poptip>
      </template>
      <template slot-scope="{ row, index }" slot="is_complete">
        <div v-if="row.is_complete == '1'">已处置</div>
        <div v-else-if="row.is_complete == '2'">未处置</div>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <div class="flex-div">
          <Button type="primary" class="mr5" @click="getInfo(row)">详情</Button>
        </div>
      </template>
    </Table>
    <Page class="page_style"  :total="params.totalRecord" :current="params.pageNo"
            :page-size="params.pageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
  </div>
</template>
<script>
import { findGridSpecialTaskList } from '@/api/contradiction.js'
export default {
  name: 'specialList',
  data () {
    return {
      columns: [
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        { title: '任务名称', key: 'task_name', align: 'center', width: '200px' },
        { title: '任务发起人', key: 'taskUserName', align: 'center', width: '150px' },
        { title: '任务完成单位', key: 'handlingCompanyName', align: 'center', width: '150px' },
        { title: '任务截至日期', key: 'deadline_time', align: 'center', width: '150px' },
        { title: '任务描述', slot: 'description_task', align: 'center' },
        { title: '状态', slot: 'is_complete', align: 'center', width: '100px' },
        { title: '操作', slot: 'action', align: 'center', width: '180px' }
      ],
      dataList: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      }
    }
  },
  components: {},
  watch: {},
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      findGridSpecialTaskList(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
          this.params.totalRecord = res.data.data.totalRecord
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    changePageNo (pageNo) {
      this.params.pageNo = pageNo
      this.getList(this.params)
    },
    size (pageSize) {
      this.params.pageSize = pageSize
      this.changePageNo()
    },
    getInfo (item) { // 详情
      let object = Object.assign({ what: 'info' }, item)
      this.$router.push({
        name: 'specialTaskSpecialInitiate',
        params: object
      })
    }
  }
}
</script>
<style scoped lang="less">
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .description-div {
    /* 设置文本只显示三行 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    /* 设置文本超出部分省略 */
    text-overflow: ellipsis;
  }
</style>
