<template>
  <div>
    <div class="sty">
      <el-page-header @back="goBack" content="记录"> </el-page-header>
    </div>
    <div class="mymain-container">
      <!-- 列表 -->
      <div class="table">
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
        >
          <el-table-column align="left" label="序号" type="index" width="100" show-overflow-tooltip />
          <el-table-column
            align="left"
            label="经销商编码"
            prop="customerNumber"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column align="left" label="经销商名称" prop="customerName" min-width="260" show-overflow-tooltip />
          <el-table-column align="left" label="押金比例" prop="rate" min-width="160" show-overflow-tooltip />
          <el-table-column align="left" label="定额押金" prop="amount" min-width="160" show-overflow-tooltip />
          <el-table-column align="left" label="状态" prop="currentStatus" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag type="info" v-if="scope.row.currentStatus == '未开始'">未开始</el-tag>
              <el-tag type="success" v-if="scope.row.currentStatus == '生效中'">生效中</el-tag>
              <el-tag type="danger" v-if="scope.row.currentStatus == '已结束'">已结束</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="left" label="开始时间" prop="startTime" min-width="160" show-overflow-tooltip />
          <el-table-column align="left" label="结束时间" prop="endTime" min-width="160" show-overflow-tooltip />
          <el-table-column align="left" label="备注" prop="remark" min-width="160" show-overflow-tooltip />
          <el-table-column align="left" label="更新人" prop="updateBy" min-width="160" show-overflow-tooltip />
          <el-table-column align="left" label="更新时间" prop="updateTime" min-width="160" show-overflow-tooltip />
          <el-table-column align="left" label="创建人" prop="createBy" min-width="160" show-overflow-tooltip />
          <el-table-column align="left" label="创建时间" prop="createTime" min-width="160" show-overflow-tooltip />
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="fr">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listTotal"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getCustomerDepositDetailList } from '@/api/basic_data/dealer'
export default {
  props: {
    historyId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表
      listLoading: false, // 列表加载loading,
      dataList: []
    }
  },
  created() {
    this.getDataList({
      pageSize: this.pageSize,
      pageNum: this.currentPage,
      id: this.historyId
    })
  },
  methods: {
    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.getDataList({
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        id: this.historyId
      })
    },
    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getDataList({
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        id: this.historyId
      })
    },
    //获取比例历史记录
    async getDataList(data) {
      let res = await getCustomerDepositDetailList(data)
      this.dataList = res.data.records
    },
    goBack() {
      this.$emit('close')
    }
  }
}
</script>

<style></style>
