<template>
  <div>
    <el-dialog
      :title="$t('title.operationLog')"
      append-to-body
      top="5vh"
      width="60%"
      :visible.sync="dialogFormVisible"
    >
      <div style="height: 72vh; overflow: auto">
        <el-table
          v-loading="listLoading"
          :key="tableKey"
          :data="list"
          stripe
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column type="index" width="40"></el-table-column>

          <el-table-column
            :label="$t('label.operator')"
            align="center"
            width="220"
            show-overflow-tooltip
          >
            <template v-slot="{ row }">
              <span>{{ row.userName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('label.operationTime')"
            align="center"
            width="220"
            show-overflow-tooltip
          >
            <template v-slot="{ row }">
              <span>{{ row.createTime }}</span>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('label.operationMethod')"
            align="center"
            show-overflow-tooltip
          >
            <template v-slot="{ row }">
              <span>{{ row.remark }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <swPage
          v-if="total > 0"
          key="2"
          :listQuery="listQuery"
          :total="total"
          pos="btmRight"
          @retPage="getList"
        />
      </div>

      <template slot="footer">
        <el-button @click="dialogFormVisible = false"
          >{{ $t("tagsView.close") }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import waves from "@/directive/waves"; // 水波纹指令
import SwPage from "@/views/common/swPage.vue";
import ElContainer from "element-ui/packages/container/src/main";
import { promotionLogs } from "@/api/oms/order/promotion";

export default {
  inject: ["reload"], //刷新
  components: {
    SwPage,
    ElContainer
  },
  name: "promotionLogList",
  directives: {
    waves
  },
  data() {
    return {
      dialogFormVisible: false,
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        upAndDown: null,
        keywords: null,
        page: 1,
        limit: 10
      }
    };
  },
  created() {},
  computed: {},
  methods: {
    handleOpen(id) {
      this.listQuery.promotionId = id;
      this.dialogFormVisible = true;
      this.retPage();
    },
    getList() {
      this.listLoading = true;
      promotionLogs(this.listQuery)
        .then(response => {
          if (response.code === 200) {
            this.list = response.data.list;
            this.total = response.data.total;
            setTimeout(() => {
              this.listLoading = false;
            }, 0.5 * 1000);
          }
        })
        .catch(() => {
          setTimeout(() => {
            this.listLoading = false;
          }, 0.5 * 1000);
        });
    },
    retPage() {
      this.listQuery.page = 1;
      this.getList();
    }
  }
};
</script>

<style scoped lang="scss"></style>
