<template>
  <div>
    <Modal v-model="showModal" width="900" footer-hide>
      <p slot="header">
        操作记录
      </p>
      <div>
        <el-row>
          <!--查询-->
          <el-col :span="24">
            <Form inline onsubmit="return false" :label-width="70">
              <label class="label-sign" />
              <Form-item label="操作阶段:" class="search-item">
                <el-input
                  v-model="formObj.origin"
                  placeholder="请输入操作阶段"
                  @keyup.enter.native="_formSearch"
                />
              </Form-item>
              <Form-item class="search-btn">
                <el-button type="primary" @click="_formSearch">
                  搜索
                </el-button>
              </Form-item>
            </Form>
          </el-col>
          <!-- 表格 -->
          <el-col :span="24">
            <element-table
              ref="pageTable"
              :table-height="300"
              :get-page="getPage"
              @on-result-change="_tableResultChange"
            >
              <el-table-column
                v-for="item in pageColumns"
                :key="item.key"
                show-overflow-tooltip
                sortable
                :prop="item.key"
                :label="item.title"
                :min-width="item.width"
                :fixed="item.fixed?item.fixed:undefined"
              >
                <template slot-scope="scope">
                  <div v-if="item.key==='type'">
                    <div v-if="scope.row.type===0" class="green-color">
                      流转
                    </div>
                    <div v-else class="red-color">
                      退回
                    </div>
                  </div>
                  <div v-else-if="item.datetime">
                    {{ scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd HH:MM:ss'):'' }}
                  </div>
                  <div v-else>
                    {{ scope.row[item.key] }}
                  </div>
                </template>
              </el-table-column>
            </element-table>
          </el-col>
        </el-row>
      </div>
    </Modal>
  </div>
</template>
<script>
/**
 * 操作记录
 */

import { frameUnconformRegisterRecord } from '../../../../api'
export default {
  components: {},
  data() {
    return {
      id: '',
      showModal: false,
      getPage: {},
      pageColumns: [
        { title: '操作类型', key: 'type', width: 120 },
        { title: '操作阶段', key: 'origin', width: 140 },
        { title: '目标阶段', key: 'target', width: 140 },
        { title: '操作人', key: 'operator', width: 120 },
        { title: '操作时间', key: 'ctime', width: 145, datetime: true },
        { title: '操作原因', key: 'remark', width: 120 },
        { title: '责任人', key: 'liable', width: 120 }
      ],
      formObj: {
        origin: '',
        unconformId: ''
      }
    }
  },
  methods: {
    _open(id) {
      this.formObj.unconformId = id
      this.showModal = true
      this._page()
    },
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await frameUnconformRegisterRecord.page(
        this.$serializeForm(this.formObj)
      )
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          break
      }
    }
  }
}
</script>
