<template>
  <div class="app-container">
    <el-form
      :model="search"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="账户码">
        <el-input
          v-model="search.accountCode"
          placeholder="请输入账户码"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="search.status"
          placeholder="请选择状态"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="发起时间">
        <el-date-picker
          v-model="search.createTimeList"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="dataList">
      <el-table-column type="index" width="55" label="序号" align="center">
        <template slot-scope="scope">
          <div>
            {{ scope.$index + 1 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="账户码"
        align="center"
        prop="accountCode"
      ></el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <span
            v-for="item in statusList"
            :key="item.value"
            v-show="scope.row.status == item.value"
            >{{ item.label }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="发放时间"
        align="center"
        prop="createTime"
      >
        <template slot-scope="scope">{{
          scope.row.createTime || "--"
        }}</template>
      </el-table-column>
      <el-table-column
        label="使用时间"
        align="center"
        prop="purposeTime"
      >
        <template slot-scope="scope">{{
          scope.row.purposeTime || "--"
        }}</template>
      </el-table-column>
      <el-table-column label="注册店铺" align="center" prop="purposeName">
        <template slot-scope="scope">{{
          scope.row.purposeName || "--"
        }}</template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
import getListApi from "@/mixins/getListApi";
import { agentAccountCodeAgentPage } from "@/api/agentManage";

export default {
  mixins: [getListApi],
  data() {
    return {
      listURL: agentAccountCodeAgentPage,
      initializationShow: false,
      statusList: [
        { value: "0", label: "未使用" },
        { value: "1", label: "待使用" },
        { value: "2", label: "已使用" },
        { value: "3", label: "已下发" },
      ],
      dateRangeMapping: {
        // 日期范围字段名: { start: 开始时间字段名, end: 结束时间字段名 }
        createTimeList: { start: "startTime", end: "endTime" },
      },
    };
  },
  created() {
    // console.log(this.$route.query.agentId);
    this.queryParams.agentId = this.$route.query.agentId;
    this.getList();
  },
  methods: {},
};
</script>
<style scoped lang="scss"></style>
