<template>
  <div class="crowd-name-list">
    <el-card>
      <div slot="header" class="search-section">
        <div class="search-row">
          <el-form :model="searchForm" label-width="90px" inline>
            <el-form-item label="所属银行:" required>
              <el-select v-model="searchForm.bank" placeholder="请选择" style="width: 160px" disabled>
                <el-option label="汇丰银行" value="hsbc" />
              </el-select>
            </el-form-item>
            <el-form-item label="客群编号:">
              <el-input v-model="searchForm.id" placeholder="请输入" clearable style="width: 180px" />
            </el-form-item>
            <el-form-item label="客群名称:">
              <el-input v-model="searchForm.name" placeholder="请输入" clearable style="width: 180px" />
            </el-form-item>
          </el-form>
        </div>
        <div class="action-row">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增客群</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="adjustVisible = true">人员调整</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="uploadVisible = true">上传调整文件</el-button>
        </div>
      </div>

      <el-table :data="pagedData" stripe border style="width: 100%">
        <el-table-column prop="id" label="客群编号" width="170" />
        <el-table-column prop="name" label="客群名称" min-width="140" show-overflow-tooltip />
        <el-table-column label="状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="statusTagType(scope.row.status)" size="small">
              {{ statusLabel(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="人数" width="80" align="center">
          <template slot-scope="scope">{{ (scope.row.members || []).length }}</template>
        </el-table-column>
        <el-table-column prop="creator" label="创建人" width="100" />
        <el-table-column label="审核人" width="100">
          <template slot-scope="scope">{{ scope.row.reviewer || '-' }}</template>
        </el-table-column>
        <el-table-column prop="createdAt" label="客群创建时间" width="170" />
        <el-table-column prop="updatedAt" label="更新时间" width="170" />
        <el-table-column label="操作" width="160" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status === 'draft'"
              type="success" circle size="mini" icon="el-icon-check" title="启用"
              @click="handleActivate(scope.row)"
            />
            <el-button
              v-if="scope.row.status !== 'stopped'"
              type="primary" circle size="mini" icon="el-icon-edit" title="编辑"
              @click="handleEdit(scope.row)"
            />
            <el-button
              v-if="scope.row.status !== 'stopped'"
              type="warning" circle size="mini" icon="el-icon-close" title="停止"
              @click="handleStop(scope.row)"
            />
            <span v-if="scope.row.status === 'stopped'" class="muted">无可执行操作</span>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-section">
        <span class="total">共 {{ filteredData.length }} 条</span>
        <el-pagination
          layout="prev, pager, next, sizes, jumper"
          :current-page.sync="page.current"
          :page-size.sync="page.size"
          :page-sizes="[10, 20, 50]"
          :total="filteredData.length"
        />
      </div>
    </el-card>

    <adjust-member-dialog :visible.sync="adjustVisible" />
    <upload-adjust-dialog :visible.sync="uploadVisible" />
  </div>
</template>

<script>
import crowdNameListStore from '@/store/crowdNameListStore'
import AdjustMemberDialog from '@/components/crowdNameList/AdjustMemberDialog.vue'
import UploadAdjustDialog from '@/components/crowdNameList/UploadAdjustDialog.vue'

export default {
  name: 'CrowdNameList',
  components: { AdjustMemberDialog, UploadAdjustDialog },
  data() {
    return {
      searchForm: { bank: 'hsbc', id: '', name: '' },
      page: { current: 1, size: 10 },
      adjustVisible: false,
      uploadVisible: false
    }
  },
  computed: {
    filteredData() {
      return crowdNameListStore.query({ id: this.searchForm.id, name: this.searchForm.name })
    },
    pagedData() {
      const start = (this.page.current - 1) * this.page.size
      return this.filteredData.slice(start, start + this.page.size)
    }
  },
  methods: {
    statusLabel(s) {
      return { draft: '新建', active: '已生效', stopped: '已停止' }[s] || s
    },
    statusTagType(s) {
      return { draft: 'info', active: 'success', stopped: 'danger' }[s] || ''
    },
    handleSearch() {
      this.page.current = 1
    },
    handleCreate() {
      this.$router.push('/customization/hsbc/crowd-name-lists/add')
    },
    handleEdit(row) {
      this.$router.push(`/customization/hsbc/crowd-name-lists/edit/${row.id}`)
    },
    handleActivate(row) {
      this.$confirm(`启用名单「${row.name}」需通过审核后生效，确认提交？`, '启用', {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        crowdNameListStore.activate(row.id)
        this.$message.success('已生效（demo 默认通过审核）')
      }).catch(() => {})
    },
    handleStop(row) {
      this.$confirm(`停止后名单不可再调整，确认停止「${row.name}」？`, '停止', {
        confirmButtonText: '停止',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        crowdNameListStore.stop(row.id)
        this.$message.success('已停止')
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.crowd-name-list { padding: 0; }

.search-section { display: flex; flex-direction: column; }
.search-row .el-form { display: flex; flex-wrap: wrap; gap: 8px 0; }
.search-row .el-form-item { margin-right: 8px; margin-bottom: 8px; }

.action-row { margin-top: 8px; display: flex; gap: 8px; }

.muted { color: #c0c4cc; font-size: 12px; }

.pagination-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.pagination-section .total { color: #606266; font-size: 13px; }
</style>
