<template>
  <div class="app-container">
    <!-- 检索区 -->
    <el-card shadow="never" class="search-card">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
        <el-form-item label="关键词" prop="keyword">
          <el-input v-model="queryParams.keyword" placeholder="申请会员名称" clearable style="width: 200px" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="申请状态" prop="applyStatus">
          <el-select v-model="queryParams.applyStatus" placeholder="全部" clearable style="width: 140px">
            <el-option label="待审核" value="0" />
            <el-option label="审核通过" value="1" />
            <el-option label="审核未通过" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 列表区 -->
    <el-card shadow="never" class="table-card">
      <el-tabs v-model="statusTab" @tab-click="handleTabClick">
        <el-tab-pane label="全部" name="all" />
        <el-tab-pane name="0">
          <span slot="label">待审核<el-badge v-if="pendingCount > 0" :value="pendingCount" class="tab-badge" /></span>
        </el-tab-pane>
        <el-tab-pane label="审核通过" name="1" />
        <el-tab-pane label="审核未通过" name="2" />
      </el-tabs>

      <el-table border v-loading="loading" :data="applyList">
        <el-table-column label="申请信息" align="center" min-width="160" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row.merchantType === '2' ? '企业' : '个人' }} · {{ scope.row.subjectLabel || '—' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请会员名称" align="center" prop="memberCode" min-width="120" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row.memberCode || '—' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系人" align="center" prop="contactName" width="100" />
        <el-table-column label="联系人电话" align="center" prop="contactPhone" width="120" />
        <el-table-column label="申请状态" align="center" prop="applyStatus" width="110">
          <template slot-scope="scope">
            <el-tag size="small" :type="applyStatusTag(scope.row.applyStatus)">{{ applyStatusLabel(scope.row.applyStatus) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" align="center" prop="applyTime" width="160">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.applyTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)" v-hasPermi="['agri:merchantEntryApply:query']">查看详情</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" />
    </el-card>

    <!-- 详情抽屉 -->
    <entry-apply-detail :visible.sync="detailOpen" :apply-id="currentApplyId" @success="handleAuditSuccess" />
  </div>
</template>

<script>
import { listMerchantEntryApply, getPendingCount } from "@/api/agri/merchantEntryApply"
import EntryApplyDetail from "./detail"

export default {
  name: "AgriMerchantEntryApply",
  components: { EntryApplyDetail },
  data() {
    return {
      loading: true,
      showSearch: true,
      total: 0,
      pendingCount: 0,
      applyList: [],
      detailOpen: false,
      currentApplyId: null,
      statusTab: "0",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: undefined,
        applyStatus: "0"
      }
    }
  },
  created() {
    this.loadPendingCount()
    this.getList()
  },
  methods: {
    /** 查询待审核数量 */
    loadPendingCount() {
      getPendingCount().then(response => {
        this.pendingCount = (response.data && response.data.pendingCount) || 0
      }).catch(() => {})
    },
    /** 查询申请列表 */
    getList() {
      this.loading = true
      listMerchantEntryApply(this.queryParams).then(response => {
        this.applyList = response.rows || []
        this.total = response.total || 0
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 申请状态文案 */
    applyStatusLabel(status) {
      const map = { "0": "待审核", "1": "审核通过", "2": "审核未通过" }
      return map[status] || "—"
    },
    /** 申请状态标签颜色 */
    applyStatusTag(status) {
      const map = { "0": "warning", "1": "success", "2": "danger" }
      return map[status] || "info"
    },
    /** Tab 切换 */
    handleTabClick() {
      this.queryParams.applyStatus = this.statusTab === "all" ? undefined : this.statusTab
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 搜索 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置检索 */
    resetQuery() {
      this.resetForm("queryForm")
      this.statusTab = "all"
      this.queryParams.applyStatus = undefined
      this.handleQuery()
    },
    /** 打开详情 */
    handleDetail(row) {
      this.currentApplyId = row.applyId
      this.detailOpen = true
    },
    /** 审核完成后刷新 */
    handleAuditSuccess() {
      this.loadPendingCount()
      this.getList()
    }
  }
}
</script>

<style scoped>
.search-card {
  margin-bottom: 10px;
}
.tab-badge {
  margin-left: 4px;
}
</style>
