<script lang="ts" setup>
import { Switch, Tag } from 'ant-design-vue';

defineProps<{
  row: Record<string, any>;
  section: 'switches' | 'business' | 'all';
  showClinicType?: boolean;
  showInsurance?: boolean;
  showSalespersonSeePrice?: boolean;
  /** 是否可点击银行卡报备 Tag（超管/系统管理员） */
  canManageBankCard?: boolean;
  getBankCardReportTagColor: (status: number) => string;
  getBankCardReportTagText: (row: Record<string, any>) => string;
  onShippingFree: (id: number) => void;
  onSubscribe: (id: number) => void;
  onSeeRate: (id: number) => void;
  onOrderPriceAdjust: (id: number) => void;
  onBankCardReport: (row: Record<string, any>) => void;
  onClinicType?: (row: Record<string, any>) => void;
  onAllowInsurance?: (id: number) => void;
  onSalespersonSeePrice?: (id: number) => void;
}>();

function handleBankCardTagClick(
  row: Record<string, any>,
  canManageBankCard: boolean | undefined,
  onBankCardReport: (row: Record<string, any>) => void,
) {
  if (!canManageBankCard) return;
  onBankCardReport(row);
}
</script>

<template>
  <div class="store-config-toggles">
    <template v-if="section === 'switches'">
      <div class="config-item">
        <span class="config-item__label">是否包邮</span>
        <div class="config-item__control">
          <Switch
            :checked="row.is_shipping_free"
            :checked-value="1"
            :un-checked-value="0"
            checked-children="包邮"
            un-checked-children="不包邮"
            size="small"
            @click="onShippingFree(row.id)"
          />
        </div>
      </div>
      <div class="config-item">
        <span class="config-item__label">订阅价格</span>
        <div class="config-item__control">
          <Tag
            :color="row.subscribe_price_change === 0 ? 'success' : 'default'"
            class="config-item__tag"
            @click="onSubscribe(row.id)"
          >
            {{ row.subscribe_price_change === 0 ? '订阅' : '不订阅' }}
          </Tag>
        </div>
      </div>
      <div class="config-item">
        <span class="config-item__label">查看毛利率</span>
        <div class="config-item__control">
          <Tag
            :color="Number(row.see_rate) === 1 ? 'success' : 'default'"
            class="config-item__tag"
            @click="onSeeRate(row.id)"
          >
            {{ Number(row.see_rate) === 1 ? '可查看' : '不可查看' }}
          </Tag>
        </div>
      </div>
      <div class="config-item">
        <span class="config-item__label">订单打折</span>
        <div class="config-item__control">
          <Tag
            :color="Number(row.enable_order_price_percent_adjust) === 1 ? 'success' : 'default'"
            class="config-item__tag"
            @click="onOrderPriceAdjust(row.id)"
          >
            {{ Number(row.enable_order_price_percent_adjust) === 1 ? '开启' : '关闭' }}
          </Tag>
        </div>
      </div>
    </template>

    <template v-else-if="section === 'business'">
      <div v-if="showClinicType && onClinicType" class="config-item">
        <span class="config-item__label">诊所类型</span>
        <div class="config-item__control">
          <Tag
            :color="row.clinic_type === 1 ? 'blue' : row.clinic_type === 2 ? 'green' : 'default'"
            class="config-item__tag clinic-type-tag"
            @click="onClinicType(row)"
          >
            {{ row.clinic_type === 1 ? '西医诊所' : row.clinic_type === 2 ? '中医诊所' : '未设置' }}
          </Tag>
        </div>
      </div>
      <div class="config-item">
        <span class="config-item__label">银行卡报备</span>
        <div class="config-item__control">
          <Tag
            :color="getBankCardReportTagColor(row.bank_card_report_status)"
            :class="['config-item__tag', { 'config-item__tag--readonly': !canManageBankCard }]"
            @click="handleBankCardTagClick(row, canManageBankCard, onBankCardReport)"
          >
            {{ getBankCardReportTagText(row) }}
          </Tag>
        </div>
      </div>
      <div v-if="showInsurance && onAllowInsurance" class="config-item">
        <span class="config-item__label">医保可选</span>
        <div class="config-item__control">
          <Tag
            :color="Number(row.allow_insurance_category) === 1 ? 'success' : 'default'"
            class="config-item__tag"
            @click="onAllowInsurance(row.id)"
          >
            {{ Number(row.allow_insurance_category) === 1 ? '可选医保' : '仅自费' }}
          </Tag>
        </div>
      </div>
      <div v-if="showSalespersonSeePrice && onSalespersonSeePrice" class="config-item">
        <span class="config-item__label">推广员可见价格</span>
        <div class="config-item__control">
          <Tag
            :color="Number(row.salesperson_see_price) === 1 ? 'success' : 'default'"
            class="config-item__tag"
            @click="onSalespersonSeePrice(row.id)"
          >
            {{ Number(row.salesperson_see_price) === 1 ? '可见' : '不可见' }}
          </Tag>
        </div>
      </div>
    </template>

    <template v-else-if="section === 'all'">
      <div class="config-item">
        <span class="config-item__label">是否包邮</span>
        <div class="config-item__control">
          <Switch
            :checked="row.is_shipping_free"
            :checked-value="1"
            :un-checked-value="0"
            checked-children="包邮"
            un-checked-children="不包邮"
            size="small"
            @click="onShippingFree(row.id)"
          />
        </div>
      </div>
      <div class="config-item">
        <span class="config-item__label">银行卡报备</span>
        <div class="config-item__control">
          <Tag
            :color="getBankCardReportTagColor(row.bank_card_report_status)"
            :class="['config-item__tag', { 'config-item__tag--readonly': !canManageBankCard }]"
            @click="handleBankCardTagClick(row, canManageBankCard, onBankCardReport)"
          >
            {{ getBankCardReportTagText(row) }}
          </Tag>
        </div>
      </div>
      <div class="config-item">
        <span class="config-item__label">订阅价格</span>
        <div class="config-item__control">
          <Tag
            :color="row.subscribe_price_change === 0 ? 'success' : 'default'"
            class="config-item__tag"
            @click="onSubscribe(row.id)"
          >
            {{ row.subscribe_price_change === 0 ? '订阅' : '不订阅' }}
          </Tag>
        </div>
      </div>
      <div class="config-item">
        <span class="config-item__label">查看毛利率</span>
        <div class="config-item__control">
          <Tag
            :color="Number(row.see_rate) === 1 ? 'success' : 'default'"
            class="config-item__tag"
            @click="onSeeRate(row.id)"
          >
            {{ Number(row.see_rate) === 1 ? '可查看' : '不可查看' }}
          </Tag>
        </div>
      </div>
      <div class="config-item">
        <span class="config-item__label">订单打折</span>
        <div class="config-item__control">
          <Tag
            :color="Number(row.enable_order_price_percent_adjust) === 1 ? 'success' : 'default'"
            class="config-item__tag"
            @click="onOrderPriceAdjust(row.id)"
          >
            {{ Number(row.enable_order_price_percent_adjust) === 1 ? '开启' : '关闭' }}
          </Tag>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped>
.store-config-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}

.config-item {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
}

.config-item__label {
  flex-shrink: 0;
  min-width: 72px;
  color: rgb(156 163 175);
  line-height: 1.4;
}

.config-item__control {
  min-width: 0;
  flex: 1;
}

.config-item__tag {
  cursor: pointer;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.config-item__tag--readonly {
  cursor: default;
  opacity: 0.85;
}

.clinic-type-tag {
  transition: all 0.2s ease;
  user-select: none;
}

.clinic-type-tag:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

.clinic-type-tag:active {
  transform: scale(0.95);
}
</style>
