<template>
  <div>
    <form-add
      v-if="isDetail"
      @back="isDetail = false"
      :form-edit="formEdit"
    ></form-add>
    <template v-else>
      <el-page-header @back="$emit('back', isUpdate)" content="历史记录">
      </el-page-header>
      <direct-search
        style="margin-top: 10px"
        ref="form"
        :forms="searchList"
        @handleSearch="handleFormSearch"
      />
      <el-table-self
        ref="table"
        :table-data="tableData"
        :columns="columns"
        :list-loading="listLoading"
        :current-page="pageIndex"
        :total-count="total"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      />
    </template>
  </div>
</template>

<script>
import paginationMixin from "@/components/TabComponents/mixin"
import FormAdd from "./FormAdd"
import { getFormHistoryPage, rollbackForm } from "@/api/field.js"
export default {
  name: "FormHistory",
  components: { FormAdd },
  mixins: [paginationMixin],
  props: {
    sourceId: String,
  },
  data() {
    return {
      listLoading: false,
      isUpdate: false,
      isDetail: false,
      tableData: [],
      searchList: [
        {
          label: "编码",
          prop: "sourceId",
          type: "input",
          placeholder: "请输入编码",
        },
        {
          label: "名称",
          type: "input",
          prop: "formName",
          placeholder: "请输入名称",
        },
        {
          type: "button",
          value: "查询",
          icon: "el-icon-search",
        },
      ],
      columns: [
        {
          label: "编码",
          minWidth: 120,
          value: "sourceId",
        },
        {
          label: "名称",
          minWidth: 120,
          value: "name",
        },
        {
          label: "创建时间",
          minWidth: 150,
          value: "createTime",
        },
        {
          label: "更新时间",
          minWidth: 150,
          value: "updateTime",
        },
        {
          label: "版本号",
          minWidth: 100,
          value: "version",
        },
        {
          label: "操作",
          width: 200,
          fixed: "right",
          operType: "button",
          operations: [
            {
              func: this.handleDetail,
              formatter(row) {
                return {
                  label: "详情",
                  type: "primary",
                }
              },
            },
            {
              func: this.handleRecovery,
              formatter(row) {
                return {
                  label: "恢复",
                  type: "warning",
                }
              },
            },
          ],
        },
      ],
      cacheForm: {},
      formEdit: {},
    }
  },
  methods: {
    handleDetail({ id }) {
      this.formEdit = id ? { id, type: 1 } : {}
      this.isDetail = true
    },
    handleRecovery({ id }) {
      this.$confirm(`是否恢复此表单，将覆盖原表单?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        rollbackForm(id).then((res) => {
          this.$message.success("已恢复")
          this.isUpdate = true
        })
      })
    },
    // 查询
    handleFormSearch(form) {
      this.pageIndex = 1
      this.handleSearch(form)
    },
    handleSearch(form) {
      this.cacheForm = Object.assign(this.cacheForm, form)
      this.listLoading = true
      const params = Object.assign({}, this.cacheForm)
      for (let key in params) {
        if (params[key] === "") {
          delete params[key]
        }
      }
      params.current = this.pageIndex
      params.size = this.pageSize
      getFormHistoryPage(params).then((res) => {
        this.listLoading = false
        if (res.code === 1) {
          const d = res.data
          this.tableData = d.records || []
          this.total = Number(d.total)
        }
      })
    },
  },
  mounted() {
    this.cacheForm.sourceId = this.sourceId
    this.$refs.form.initFields({ sourceId: this.sourceId })
    this.handleFormSearch()
  },
}
</script>