<template>
  <div class="list">
    <el-table :data="list || []"
              border
              style="width: 100%">
      <el-table-column
              type="index"
              width="50">
      </el-table-column>
      <el-table-column
              label="头像">
        <template slot-scope="scope">
          <div class="header">
            <img :src="scope.row.avatarurl" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column
              prop="nickname"
              label="姓名">
      </el-table-column>
      <el-table-column
              prop="sex"
              label="性别">
        <template slot-scope="scope">{{ scope.row.sex === 1 ? '男' : scope.row.sex === 2 ? '女' : '' }}</template>
      </el-table-column>
    </el-table>
    <el-pagination
            small
            style="margin-top:10px;"
            layout="prev, pager, next"
            :current-page.sync="form.pageNumber"
            :pageSize="form.pageSize"
            @current-change="getList"
    >
    </el-pagination>

  </div>
</template>
<script>
  import { createNamespacedHelpers } from "vuex";
  import dayjs from 'dayjs'
  const {
    mapState: mapDynamicState,
    mapActions: mapDynamicActions
  } = createNamespacedHelpers("dynamic");
  const {
    mapState: mapCustomerState,
    mapActions: mapCustomerActions
  } = createNamespacedHelpers("customer");
  export default {
    data() {
      return {
        form: {
          pageSize: 10,
          pageNumber: 1,
          buildingId: ''
        },
        list: [],
        total: 0,

      };
    },
    computed: {
      ...mapCustomerState({
        customers: x => x.customers
      }),
      ...mapDynamicState({
        dynamics: x => x.dynamics
      })
    },
    created() {
      this.getList();
    },
    methods: {
      ...mapCustomerActions(["getCustomers", "getDetail", "getRecommendCustomers", 'getRecommendDrift']),
      ...mapDynamicActions([
        "getDynamics",
        "setDetailNull",
        "deleteDynamics",
        "publicDynamic",
        "cancelDynamic"
      ]),
      GetIndex(inx) {
        return (this.currentPage - 1) * this.pageSize + inx + 1;
      },
      formateDate(dt) {
        return !dt ? '' : dayjs(dt).format('YYYY-MM-DD HH:mm')
      },
      getList() {
        this.getRecommendDrift(this.form).then((res) => {
          this.list = res.records
          this.form.pageSize = res.size
          this.form.pageNumber = res.current
          this.total = res.total
        }).catch(() => {
          console.log('getRecommendCustomers err')
        });
      },
    }
  };
</script>
<style lang="scss" scoped>
  .list {
    .header {
      width: 50px;
      height: 50px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .system-table-search {
    width: calc(100% - 40px);
    margin: 16px auto 0;
  }

  .system-table-search ul > li {
    margin-right: 20px;
    display: flex;
    float: left;
    align-items: center;
    margin-bottom: 10px;
    span {
      margin-right: 10px;
    }
  }

  .system-table-search ul {
    font-size: 15px;
    white-space: nowrap;
    padding: 0;
  }

  .flex-h {
    display: flex;
    align-items: center;
  }
  .el-dialog__body {
    text-align: center;
    .close-btn {
      margin: 20px auto 0 auto;
    }
  }

  .flex-item {
    flex: 1;
    -webkit-flex: 1;
    position: relative;
    overflow: hidden;
  }
</style>


