<template>
  <div class="customer-wrap detail-wrap">
    <!-- 页面头部 -->
    <div class="page-header">
      <el-button icon="el-icon-arrow-left" size="small" @click="goBack">返回</el-button>
      <span class="page-title">客群客户列表</span>
    </div>

    <!-- 搜索区域 -->
    <div class="search-area">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
        <el-form-item label="客户类型" prop="custType">
          <el-select v-model="queryParams.custType" placeholder="请选择" clearable style="width: 150px">
            <el-option label="个人" value="0" />
            <el-option label="商户" value="1" />
            <el-option label="企业" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="客户姓名" prop="custName">
          <el-input
            v-model="queryParams.custName"
            placeholder="请输入客户姓名"
            clearable
            style="width: 200px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <div class="main_table">
      <el-table v-loading="loading" :data="memberList">
        <el-table-column label="序号" type="index" width="60" align="center" :index="indexMethod" />
        <el-table-column label="客户类型" align="center" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.custType === '0'" size="small">个人</el-tag>
            <el-tag v-else-if="scope.row.custType === '1'" size="small" type="warning">商户</el-tag>
            <el-tag v-else-if="scope.row.custType === '2'" size="small" type="success">企业</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="客户号" prop="custId" width="150" />
        <el-table-column label="客户姓名" prop="custName" width="120" />
        <el-table-column label="身份证号" prop="custIdc" show-overflow-tooltip />
        <el-table-column label="统信码" prop="socialCreditCode" show-overflow-tooltip />
        <el-table-column label="添加时间" prop="createTime" width="180" />
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { listCustGroupMembers } from '@/api/group/custGroup'

export default {
  name: 'CustGroupDetail',
  data() {
    return {
      loading: false,
      groupId: null,
      memberList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        custType: null,
        custName: null
      }
    }
  },
  created() {
    this.groupId = this.$route.query.groupId
    if (this.groupId) {
      this.getList()
    } else {
      this.$modal.msgError('缺少客群ID参数')
      this.goBack()
    }
  },
  watch: {
    '$route.query.groupId'(newGroupId) {
      if (newGroupId && newGroupId !== this.groupId) {
        this.groupId = newGroupId
        this.queryParams.pageNum = 1
        this.getList()
      }
    }
  },
  methods: {
    /** 查询客户列表 */
    getList(param) {
      if (param) {
        this.queryParams.pageNum = param.page
        this.queryParams.pageSize = param.limit
      }
      this.loading = true
      listCustGroupMembers(this.groupId, this.queryParams).then(response => {
        this.memberList = response.rows
        this.total = response.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    /** 搜索 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },

    /** 重置 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },

    /** 返回 */
    goBack() {
      this.$router.push({ path: '/group/custGroup' })
    },

    /** 序号计算方法 */
    indexMethod(index) {
      return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
    }
  }
}
</script>

<style lang="scss" scoped>
.customer-wrap {
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 3px 8px 0 #00000017;
  border-radius: 16px 16px 0 0;
  padding: 24px 30px;

  &.detail-wrap {
    .page-header {
      display: flex;
      align-items: center;
      margin-bottom: 24px;

      .page-title {
        font-size: 16px;
        font-weight: 500;
        color: #222222;
        margin-left: 16px;
      }
    }
  }

  .search-area {
    padding: 16px 0;
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 16px;

    .el-form {
      margin-bottom: -8px;

      .el-form-item {
        margin-bottom: 8px;
      }
    }
  }

  .main_table {
    ::v-deep .el-pagination {
      margin-top: 15px;
    }
  }
}
</style>
