<template>
  <!-- 表单列表添加到菜单 -->
  <el-dialog
    title="导出日志"
    :visible.sync="dialogVisible"
    width="60%"
    appendToBody
    :close-on-click-modal="false"
    top="8vh"
  >
    <ht-table
      v-if="dialogVisible"
      @load="loadData"
      :data="data"
      :pageResult="pageResult"
      :selection="true"
      quick-search-props="userId,userName"
      :show-export="false"
      :show-custom-column="false"
      ref="htTable"
    >
      <template v-slot:toolbar>
        <el-button-group>
          <ht-delete-button
            url="${form}/formDataExportLog/v1/"
            :htTable="$refs.htTable"
            >删除</ht-delete-button>
        </el-button-group>
      </template>
      <template v-slot:search>
        <ht-table-search-panel :divide="3">

          <ht-table-search-field
            type="daterange"
            label="导出时间"
            prop="time"
            operation="BETWEEN"
          />
        </ht-table-search-panel>
      </template>
      <template>
        <ht-table-column type="index" width="50" align="center" label="序号" />

        <ht-table-column
          prop="userId"
          label="导出人账号"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="userName"
          label="导出人姓名"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="time"
          label="导出时间"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>

        <ht-table-column
          prop="ip"
          label="导出人ip"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
      </template>
    </ht-table>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0,
      },
      FormDataExportLog: {},
      saveMethod: 'POST',
      params:{}
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  methods: {
    open(params) {
      this.params = params;
      this.dialogVisible = true
    },
    showDialog(id) {
      if (id) {
        this.saveMethod = 'PUT'
        this.$http.get('${form}/formDataExportLog/v1/' + id).then(
          (resp) => {
            this.FormDataExportLog = resp.data
            this.dialogVisible = true
          },
          (error) => {
            reject(error)
          }
        )
      } else {
        this.saveMethod = 'POST'
        this.dialogVisible = true
      }
    },
    beforeCloseDialog() {
      this.FormDataExportLog = {}
      this.dialogVisible = false
    },
    loadData(param, cb) {
      let querys = param.querys || [];
      let hasDefault = false;
      querys.forEach((q) => {
        if (q.group == "default") {
          hasDefault = true;
        }
      });

      if (!hasDefault) {
        querys.push({
          group: "default",
          operation: "EQUAL",
          property: "MODEL_",
          relation: "AND",
          value: this.params.model,
        });
        querys.push({
          group: "default",
          operation: "EQUAL",
          property: "MODEL_KEY_",
          relation: "AND",
          value: this.params.modelKey,
        });
      }
      param.querys = querys;
      this.$http
        .post('${form}/formDataExportLog/v1/query', param)
        .then(
          (resp) => {
            let response = resp.data
            this.data = response.rows
            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total,
            }
          },
          (error) => {
            reject(error)
          }
        )
        .finally(() => cb())
    },
    afterSaveData() {
      setTimeout(() => {
        this.beforeCloseDialog()
        this.$refs.htTable.load()
      }, 500)
    },
  },
}
</script>

<style lang="scss" scoped>
.sp-manager__dialog /deep/ > .el-dialog > .el-dialog__body {
  height: calc(100% - 170px);
}
</style>
