<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="90">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isExisting" size="small" type="success">存量</el-tag>
            <el-tag v-else size="small" type="danger">非存量</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="客户类型" align="center" width="80">
          <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">
          <template slot-scope="scope">
            <el-button type="text" @click="handleCustClick(scope.row)">{{ scope.row.custId }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="客户姓名" prop="custName" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="handleCustClick(scope.row)">{{ scope.row.custName || '-' }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="身份证号" prop="custIdc" show-overflow-tooltip />
        <el-table-column label="统信码" prop="socialCreditCode" show-overflow-tooltip />
        <el-table-column label="客户经理" prop="nickName" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.nickName">{{ scope.row.nickName }}</span>
            <span v-else class="text-muted">-</span>
          </template>
        </el-table-column>
        <el-table-column label="所属网点" prop="outletName" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.outletName">{{ scope.row.outletName }}</span>
            <span v-else class="text-muted">-</span>
          </template>
        </el-table-column>
        <el-table-column label="所属支行" prop="branchName" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.branchName">{{ scope.row.branchName }}</span>
            <span v-else class="text-muted">-</span>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" prop="createTime" width="180" />
        <el-table-column v-if="isMineView" label="操作" align="center" width="80" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleRemove(scope.row)">移除</el-button>
          </template>
        </el-table-column>
      </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, removeMembers } from '@/api/group/custGroup'
import { mapGetters } from 'vuex'

export default {
  name: 'CustGroupDetail',
  data() {
    return {
      loading: false,
      groupId: null,
      viewType: 'mine',
      memberList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        custType: null,
        custName: null
      }
    }
  },
  watch: {
    '$route.query.groupId'(newGroupId) {
      if (newGroupId && newGroupId !== this.groupId) {
        this.groupId = newGroupId
        this.viewType = this.resolveViewType(this.$route.query.viewType)
        this.queryParams.pageNum = 1
        this.getList()
      }
    }
  },
  computed: {
    ...mapGetters(['roles']),
    isHeadCustGroupAdmin() {
      return ['headAdmin', 'headPublic', 'headPrivate', 'headOps'].some(role => this.roles.includes(role))
    },
    isMineView() {
      return this.viewType === 'mine'
    }
  },
  created() {
    this.groupId = this.$route.query.groupId
    this.viewType = this.resolveViewType(this.$route.query.viewType)
    if (this.groupId) {
      this.getList()
    } else {
      this.$modal.msgError('缺少客群ID参数')
      this.goBack()
    }
  },
  methods: {
    resolveViewType(viewType) {
      if (!this.isHeadCustGroupAdmin) {
        return 'sharedToMe'
      }
      return viewType === 'sharedToMe' ? 'sharedToMe' : 'mine'
    },

    /** 查询客户列表 */
    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()
    },

    handleRemove(row) {
      this.$modal.confirm(`确认移除客户“${row.custName || row.custId}”吗？移除后后续动态更新不会再加入客群。`).then(() => {
        return removeMembers(this.groupId, [row.id])
      }).then(() => {
        this.$modal.msgSuccess('移除成功')
        if (this.memberList.length === 1 && this.queryParams.pageNum > 1) {
          this.queryParams.pageNum -= 1
        }
        this.getList()
      }).catch(() => {})
    },

    /** 返回 */
    goBack() {
      const fromPerformance = this.$route.query.fromPerformance
      if (fromPerformance === '1') {
        this.$router.push({
          path: '/center/performance/list',
          query: { isActive: '8' }
        })
        return
      }
      // 返回上一级客群列表；没有历史记录时兜底跳客群列表
      if (window.history.length > 1) {
        this.$router.back()
      } else {
        this.$router.push({
          path: '/group/custGroup',
          query: {
            tab: this.resolveViewType(this.viewType),
            refresh: Date.now()
          }
        })
      }
    },

    /** 点击客户号/姓名跳转360视图 */
    handleCustClick(row) {
      const custType = row.custType
      let path = ''
      if (custType === '0') {
        // 个人客户
        path = '/360charts/indexcharts'
      } else if (custType === '1') {
        // 商户
        path = '/360charts/commercial/'
      } else if (custType === '2') {
        // 企业
        path = '/360charts/firm/'
      }
      this.$router.push({
        path: path,
        query: {
          custId: row.custId,
          selectedTab: custType,
          backUrl: '/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;
    }
  }

  .text-muted {
    color: #909399;
  }
}
</style>
