<template>
  <ConfigPanelShell
    :modules="modules"
    :loading="loading"
    :saving="saving"
    :show-content-header="false"
    storage-key="mallPayConfigActiveModule"
    alert-title="会员商城微信支付参数。未开启或参数缺失时，小程序下单走模拟支付（MockPay）便于联调。"
    alert-type="info"
    @save="$emit('save')"
  >
    <template #payment>
      <el-card shadow="never" class="config-section">
        <div slot="header" class="config-section__header">
          <span>微信支付</span>
          <span class="config-section__tag">会员商城</span>
        </div>
        <p class="config-section__tip">
          正式收款需填写商户参数并开启；关闭时小程序下单使用模拟支付。
        </p>
        <el-form-item label="启用支付">
          <el-switch v-model="form.PayEnabled" active-value="1" inactive-value="0" />
          <span class="field-suffix field-suffix--text">
            {{ form.PayEnabled === '1' ? '已开启' : '已关闭（模拟支付）' }}
          </span>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="小程序 AppId">
              <el-input v-model="form.AppId" clearable placeholder="wx 开头的小程序 AppId" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="微信商户号">
              <el-input v-model="form.MchId" clearable placeholder="微信支付商户号 mchid" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小程序 AppSecret">
              <el-input v-model="form.AppSecret" show-password clearable autocomplete="new-password"
                placeholder="小程序 AppSecret" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="APIv3 密钥">
              <el-input v-model="form.ApiV3Key" show-password clearable autocomplete="new-password"
                placeholder="微信支付 APIv3 密钥" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="支付回调地址">
              <el-input v-model="form.NotifyUrl" clearable
                placeholder="如 https://域名/api/Extend/LqMallOrder/PayNotify" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </template>
  </ConfigPanelShell>
</template>

<script>
import ConfigPanelShell from './config-panel-shell.vue'

const MODULES = [
  { key: 'payment', label: '微信支付', desc: '会员商城收款参数', icon: 'el-icon-wallet', iconClass: 'module-icon--payment' }
]

export default {
  name: 'MallPayConfigPanel',
  components: { ConfigPanelShell },
  props: {
    form: { type: Object, required: true },
    loading: { type: Boolean, default: false },
    saving: { type: Boolean, default: false }
  },
  data() {
    return { modules: MODULES }
  }
}
</script>

<style lang="scss" scoped>
.config-section {
  border: 1px solid #ebeef5;

  &__header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
  }

  &__tag {
    padding: 0 8px;
    height: 22px;
    line-height: 22px;
    border-radius: 4px;
    background: #f4f4f5;
    color: #909399;
    font-size: 12px;
    font-weight: normal;
  }

  &__tip {
    margin: 0 0 12px;
    color: #909399;
    font-size: 13px;
    line-height: 1.6;
  }
}

.field-suffix {
  margin-left: 8px;
  color: #909399;
  font-size: 13px;

  &--text {
    display: inline-block;
    min-width: 120px;
  }
}

.module-icon--payment { color: #67C23A; }

.ncc-content-dark .config-section {
  border-color: rgba(255, 255, 255, 0.08);

  &__tag,
  &__tip,
  .field-suffix {
    color: rgba(255, 255, 255, 0.55);
  }

  &__tag {
    background: rgba(255, 255, 255, 0.08);
  }
}
</style>
