<template>
  <div>
    <Modal v-model="showMaintainModal" width="1000">
      <p slot="header">
        历史记录
      </p>
      <Row>
        <!-- 表格 -->
        <Col span="24" />
        <element-table
          ref="pageTable"
          :page-columns="pageColumned"
          :table-height="tableHeight"
          :get-page="getPage"
          :opt-col-width="80"
          @on-result-change="_tableResultChange"
        >
          <el-table-column
            v-for="item in pageColumned"
            :key="item.key"
            show-overflow-tooltip
            sortable
            :prop="item.key"
            :label="item.title"
            :align="item.align"
            :min-width="item.width"
            :fixed="item.fixed?item.fixed:undefined"
          >
            <template slot-scope="scope">
              <span v-if="item.datetime">{{ scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd HH:MM'):'' }}
              </span>
              <span v-else-if="item.type">
                <span v-if="scope.row[item.key] === 0">流转</span>
                <span v-else-if="scope.row[item.key] === 1">回退</span>
                <span v-else-if="scope.row[item.key] === 2">更新</span>
              </span>
              <span v-else>{{ scope.row[item.key] }}</span>
            </template>
          </el-table-column>
        </element-table>
        </Col>
      </Row>
      <div slot="footer" />
    </Modal>
  </div>
</template>

<script>
/**
 * 历史记录
 */
export default {
  name: 'History',
  data() {
    return {
      showMaintainModal: false,
      pageParams: {
        rows: 20
      },
      getPage: {},
      trainPlanId: '',
      tableHeight: '350',
      pageColumned: [
        { title: '操作类型', key: 'target', width: 100 },
        { title: '目标阶段', key: 'type', width: 100, type: true },
        { title: '操作人', key: 'operator', width: 100 },
        { title: '责任人', key: 'liable', width: 100 },
        { title: '操作详情', key: 'remark', width: 150 },
        { title: '操作时间', key: 'ctime', width: 140, datetime: true }
      ]
    }
  },
  methods: {
    _open(id) {
      this.showMaintainModal = true
      this.trainPlanId = id
      this._page()
    },
    _page() {
      // this.$refs.pageTable._page(
      //   'history-form',
      //   'LmsStaffTrainPlanRecord/page',
      //   { trainPlanId: this.trainPlanId }
      // )
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        default:
          this._page()
          break
      }
    },
    _cancel() {
      this.showMaintainModal = false
    },
    _search() {
      this.$refs.pageTable._pageChange(1)
    }
  }
}
</script>

<style>
.el-tooltip__popper {
  max-width: 40%;
  line-height: 180%;
}
</style>
