<template>
  <div class="fullheight">
    <el-dialog :title="title" :visible.sync="writeMode" width="40%" :close-on-click-modal="false"
               :destroy-on-close="true" append-to-body>
      <el-form v-form="currentRow" data-vv-scope="showRecord">
        <ht-form-item label="单据编号">
          <span class="form-value">{{ currentRow.code }}</span>
        </ht-form-item>
        <ht-form-item label="单据名称">
          <span class="form-value">{{ currentRow.subject }}</span>
        </ht-form-item>
        <ht-form-item label="干预人">
          <span class="form-value">{{ currentRow.fullName }}</span>
        </ht-form-item>
        <ht-form-item label="干预时间">
          <span class="form-value">{{ currentRow.showTime }}</span>
        </ht-form-item>
        <ht-form-item label="干预原因">
          <ht-input
              ref="reasons"
              v-model="currentRow.reasons"
              type="textarea"
              display-style="block"
              style="width: 97%;"
              placeholder="请输入干预原因......"
              name="干预原因"
              validate="required"
              :maxlength="500"
              :max="500"
              :autosize="{ minRows: 4 }"
              :show-word-limit="true"
          />
        </ht-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="saveReferenceRecord">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="干预记录" :visible.sync="readMode" width="50%" :close-on-click-modal="false"
               :destroy-on-close="true" append-to-body>
      <ht-table
          @load="loadReferenceRecords"
          :data="records"
          :pageResult="pagination"
          :pageSizes="pageSizeArr"
          :selectable="false"
          :show-export="false"
          :default-sorter="[{property: 'showTime', direction: 'DESC'}]"
          :default-querys="[
             {
                property: 'taskId',
                value: taskId,
                operation: 'EQUAL',
                group: 'record',
                relation: 'AND'
             },
            {
              property: 'showType',
              value: showType,
              operation: 'EQUAL',
              group: 'record',
              relation: 'AND'
            },
          ]"
          :quick-search-props="[
            {prop: 'fullName', label: '干预人名称'},
            {prop: 'reasons', label: '干预原因'},
          ]"
          ref="showRecordTable"
      >
        <template>
          <ht-table-column type="index" width="50" align="center" label="序号"/>
          <ht-table-column
              prop="fullName"
              label="干预人名称"
              :hiden="true"
              show-overflow-tooltip
              width="180"
          />
          <ht-table-column
              prop="showTime"
              label="干预时间"
              :sortable="true"
              width="180"
          ></ht-table-column>
          <ht-table-column
              prop="reasons"
              label="干预原因"
              hidden
              :show-overflow-tooltip="true"
          />
        </template>
      </ht-table>
    </el-dialog>
  </div>
</template>

<script>
import flow from '@/api/flow.js'
import req from '@/request.js'
export default {
  name: "ReferenceRecordManager",
  props: {
    title: {
      type: String,
      default: '干预记录'
    },
    taskId: {
      //任务/实例id
      type: String,
      default: ''
    },
    showType: {
      //类型，表示是实例查看，任务查看
      type: String,
      default: 'instance'
    }
  },
  data() {
    return {
      currentMode: '',
      readMode: false,
      writeMode: false,
      currentRow: {
        taskId: '',
        account: '',
        fullName: '',
        showTime: '',
        reasons: '',
        showType: this.showType
      },
      records: [],
      pageSizeArr: [10, 20, 50, 100, 200, 300],
      pagination: {
        page: 1,
        pageSize: 50,
        total: 0,
      },
    }
  },
  methods: {
    /**
     *
     * @param row
     */
    showRecordDialog(row, type) {
      if (type === 'write') {
        const { id, subject, procInstId } = row
        //编号，为实例时就是实例id，为任务时就是任务id
        this.currentRow['taskId'] = id
        //此段代码只是为了在界面上展示，为实例时展示实例id，为任务时也是展示实例id
        this.currentRow['code'] = this.showType === 'instance' ? id : procInstId
        //主题
        this.currentRow['subject'] = subject
        const { account, username } = this.$store.state.login.currentUser
        //当前干预人
        this.currentRow['account'] = account
        this.currentRow['fullName'] = username
        this.currentRow['showTime'] = new Date().format("yyyy-MM-dd HH:mm:ss")
        //流程实例中查看
        this.currentRow['showType'] = this.showType
        this.currentRow['reasons'] = ''
      }
      this.currentMode = type
      this.readMode = type === 'read'
      this.writeMode = type === 'write'
    },
    /**
     * 保存干预日志
     */
    saveReferenceRecord() {
            const this_ = this
      if (!this.currentRow.reasons) {
        return this.$message.warning('请输入干预原因！')
      }
      
      let dataList = _.cloneDeep(this.currentRow)
 delete dataList.code
 delete dataList.subject

      req.post(
          `${window.context.bpmRunTime}/runtime/bpmShowRecord/v1/save`,
          dataList
      )
          .then(function(response) {
            let data = response.data
            if (data.state) {
              this_.$message.success('保存成功！')
              this_.writeMode = false
              //关闭弹窗，并打开详情页
              setTimeout(() => {
                this_.onConfirm()
              }, 1000)
            } else {
              this_.$message.fail(data.message)
            }
          })
    },
    loadReferenceRecords(param, cb) {
      if (!this.taskId) {
        return this.$message.warning('请选择一条实例或任务后，再进行操作！')
      }
      flow
          .getReferenceRecords(param)
          .then(response => {
            this.records = response.rows
            this.pagination = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total
            }

          })
          .finally(() => cb())
    },
    /**
     * 关闭
     */
    close() {
      this.writeMode = false
    },
    /**
     * 关闭
     */
    onConfirm() {
      this.$emit("onConfirm", true)
    }
  }
}
</script>

<style scoped>
div >>> .el-dialog__header,
div >>> .el-dialog__body {
  height: calc(100% - 10px);
  padding: 10px;
}
</style>