<template>
  <div>
    <lx-header
      icon="md-apps"
      style="margin-bottom: 10px; border: 0px; margin-top: 15px"
      text="答题记录"
    >
      <div slot="content"></div>
      <slot>
        <div class="selects">
          <div>
            <span style="padding: 0 6px; word-break: keep-all"> 关键字 </span>
            <Input
              v-model="select.keyword"
              placeholder="请输入关键字"
              style="width: 180px"
            ></Input>
            <Button
              style="margin-left: 10px"
              type="primary"
              @click="select = {
                 page: 1,
                 page_size: 20,
                 keyword: '',
                 activity_list_id: 10
              }"
            >重置
            </Button>
            <Button style="margin-left: 10px" type="primary" @click="getList"
            >查询</Button
            >
          </div>
        </div>
      </slot>
    </lx-header>

    <xy-table
      :list="list"
      :total="total"
      :table-item="table"
      @delete="deleteitem"
      @editor="
        (row) => {
        }
      "
      @pageSizeChange="pageSizeChange"
      @pageIndexChange="pageChange"
    >
    </xy-table>
  </div>
</template>

<script>
import { index } from "@/api/activity/activityUser"
export default {
  data() {
    return {
      activityListId: 10,
      list: [],
      total: 0,
      table: [
        {
          prop: "name",
          label: "名称",
          width: 120,
          fixed: 'left'
        },
        {
          prop: "mobile",
          label: "手机号",
          width: 140
        },
        {
          prop: "address",
          label: "地址",
          align: "left"
        },
        {
          prop: "score",
          label: "最高分",
          width: 100
        }
      ],
      select: {
        page: 1,
        page_size: 20,
        keyword: "",
        activity_list_id: 10
      }
    }
  },
  methods: {
    async getList () {
      const res = await index(this.select)
      this.list = res.data;
      this.total = res.total;
    },
    deleteitem () {

    },
    pageSizeChange (e) {
      this.select.page_size = e;
      this.select.page = 1;
      this.getList()
    },
    pageChange (e) {
      this.select.page = 1;
      this.getList()
    }
  },
  computed: {},
  created() {
    this.getList()
  }
}
</script>

<style scoped lang="scss">
.selects {
  display: flex;
  flex-wrap: wrap;

  & > div {
    margin-bottom: 6px;
  }
}
</style>
