<template>
  <div class="fullheight" v-if="writeMode || readMode">
    <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.action }}</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="saveCheck">确 定</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: defKey,
                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: '配置事由'},
            {prop: 'action', 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="action"
              label="操作类型"
              :sortable="true"
              width="180"
          ></ht-table-column>
          <ht-table-column
              prop="reasons"
              label="配置事由"
              :hiden="true"
              :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: "modifyLog",
  props: {
    isDeploy:  {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '修改日志'
    },
    defKey: {
      //定义key
      type: String,
      default: ''
    },
    showType: {
      //类型，表示是流程定义
      type: String,
      default: 'bpmDef'
    }
  },
  data() {
    return {
      currentMode: '',
      readMode: false,
      writeMode: false,
      currentRow: {
        taskId: '',
        account: '',
        fullName: '',
        showTime: '',
        reasons: '',
        action: '',
        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, taskId } = row
        //编号，为实例时就是实例id，为任务时就是任务id
        this.currentRow['taskId'] = taskId
        //主题
        const { account, username } = this.$store.state.login.currentUser
        //当前查阅人
        this.currentRow['account'] = account
        this.currentRow['action'] = this.isDeploy ? '发布新版本' : '保存'
        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'
    },
    /**
     * 保存前的方法
     * @returns {ElMessageComponent}
     */
    saveCheck() {
      if (!this.currentRow.reasons) {
        return this.$message.warning('请输入配置事由！')
      }

      //先调用外部方法
      this.onConfirm()
    },
    /**
     * 保存查阅日志
     */
    saveReferenceRecord() {
      const this_ = this
      req.post(
          `${window.context.bpmRunTime}/runtime/bpmShowRecord/v1/save`,
          this_.currentRow
      )
          .then(function(response) {
            let data = response.data
            if (data.state) {
              // this_.$message.success(this.isDeploy ? '发布成功！' : '保存成功！')
              //关闭弹窗，并打开详情页
              setTimeout(() => {
                this_.writeMode = false

              }, 1000)
            } else {
              this_.$message.fail(data.message)
            }
          })
    },
    loadReferenceRecords(param, cb) {
      if (!this.defKey) {
        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
      this.$emit("close", this.isDeploy)
    },
    /**
     * 关闭
     */
    onConfirm() {
      this.$emit("onConfirm", this.isDeploy)
    },
    /**
     * 关闭
     */
    onSave() {
      this.$emit("onSave")
    }
  }
}
</script>

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