<template>
  <div id="statList">
    <el-row>
      <el-col :span="24" class="index">
        <el-col :span="24" class="top">
          <topInfo :topTitle="pageTitle"></topInfo>
        </el-col>
      </el-col>
      <el-col :span="24" class="add" style="text-align:right">
        <el-button size="mini" type="primary" @click="excelBtn()" icon="el-icon-plus">导出</el-button>
      </el-col>
      <el-col :span="24" class="info">
        <data-table :fields="fields" :data="list" :opera="opera" :total="total" @query="searchInfo"></data-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import topInfo from '@/layout/public/top.vue';
import dataTable from '@/components/data-table.vue';
import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: lookuser } = createNamespacedHelpers('lookuser');
export default {
  name: 'statList',
  props: {},
  components: {
    topInfo,
    dataTable,
  },
  data: () => ({
    opera: [],
    fields: [
      { label: '机构名称', prop: 'username', filter: 'input' },
      { label: '手机号', prop: 'phone' },
    ],
    list: [],
    total: 0,
  }),
  created() {
    this.searchInfo();
  },
  methods: {
    ...lookuser(['query']),
    async searchInfo({ skip = 0, limit = 10, ...info } = {}) {
      const res = await this.query({ skip, limit, roomname: this.name, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    // 导出
    excelBtn() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/Export2Excel');
        const tHeader = ['机构名称', '手机号'];
        const filterVal = ['username', 'phone'];
        const list = this.list;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data);
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    name() {
      return this.$route.query.name;
    },
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>
<style lang="less" scoped>
.add {
  height: 40px;
  line-height: 35px;
  padding: 0 15px;
}
</style>
