<template>
  <el-dialog
    v-model="showDialog"
    align-center
    class="payment-dialog"
    destroy-on-close
    title="付款详情"
    width="600px"
  >
    <el-form
      ref="formInfo" :model="formData" :rules="rules" class="payment-form" label-suffix="："
      label-width="140px"
    >
      <el-form-item class="fee-item" label="缴费单位">
        <div class="fee-amount">{{ name }}</div>
      </el-form-item>
      <el-form-item class="fee-item" label="所属协会">
        <div class="fee-amount">{{ aName }}</div>
      </el-form-item>
      <!-- 缴费年限选择 -->
      <el-form-item label="缴费年限" prop="renewYear">
        <el-select
          v-model="formData.renewYear"
          :disabled="payForm.payStatus==='0'"
          class="select-year"
          placeholder="请选择缴费年限"
        >
          <el-option :value="1" label="一年" />
          <el-option :value="2" label="两年" />
          <el-option :value="3" label="三年" />
          <el-option :value="4" label="四年" />
          <el-option :value="5" label="五年" />
        </el-select>
      </el-form-item>

      <!-- 费用合计 -->
      <el-form-item class="fee-item" label="费用合计">
        <div class="fee-amount">{{ memberTotalFee ?? 0 }} 元</div>
      </el-form-item>

      <!-- 温馨提示 -->
      <div v-if="preferentialPolicy" class="warning-tip">
        <el-checkbox :model-value="true" class="check-box" />
        <span class="tip-text">
          温馨提示：根据中国跆协 {{ preferentialData.name || '' }} 政策减免一年费用，每个单位在政策有效期内只享受一次
        </span>
      </div>

      <!-- 政策减免费用 -->
      <el-form-item v-if="preferentialPolicy" class="discount-item" label="政策减免费用">
        <text class="discount-amount">- {{ memberFee ?? 0 }} 元</text>
      </el-form-item>

      <!-- 支付费用合计 -->
      <el-form-item class="total-pay-item" label="支付费用合计">
        <text class="total-pay-amount">{{ paymentFee ?? 0 }} 元</text>
      </el-form-item>

      <div class="pay-card">
        <div class="card-header">
          <span class="card-title">请选择支付方式</span>
        </div>
        <div class="pay-methods">
          <el-radio-group v-model="formData.type" class="pay-radio-group">
            <el-radio class="pay-item" label="1">
              <div class="pay-method-content">
                <img alt="" class="pay-icon" src="@/assets/pay/min.png">
                <span class="pay-name">民生付</span>
              </div>
            </el-radio>
            <el-radio class="pay-item" label="3">
              <div class="pay-method-content">
                <img alt="" class="pay-icon" src="@/assets/pay/min.png">
                <span class="pay-name">对公转账</span>
              </div>
            </el-radio>
          </el-radio-group>
        </div>
      </div>

      <el-form-item v-if="formData.type==='3'" class="fee-item" label="联系人" prop="contactPerson">
        <el-input v-model.trim="formData.contactPerson" />
      </el-form-item>
      <el-form-item v-if="formData.type==='3'" class="fee-item" label="联系电话" prop="contactTel">
        <el-input v-model.trim="formData.contactTel" />
      </el-form-item>
      <!-- 确认支付按钮 -->
      <div class="action-buttons">
        <el-button class="confirm-btn" type="primary" @click="handelPay">
          确认支付
        </el-button>
      </div>
    </el-form>

    <!-- 民生支付组件 -->
    <MingPay ref="MingPayRef" />
  </el-dialog>
</template>

<script setup>
import { ref, computed, nextTick, getCurrentInstance } from 'vue'
import { certifiedNew, canUseDiscount, getMyMemberCertUnitFee, payForOrder } from '@/api/system/userInfo.js'
import MingPay from '@/components/memberComponents/MingPay.vue'
import { getZtxDiscountPolicy } from '/@/api/system/config'

const props = defineProps({
  aName: {
    type: String,
    default: ''
  },
  name: {
    type: String,
    default: ''
  }
})

const name = computed(() => props.name)
const aName = computed(() => props.aName)

const emit = defineEmits(['payment-success', 'paymentView'])
const { proxy } = getCurrentInstance()
const showDialog = ref(false)
const isPaying = ref(false)
const payForm = ref({})
const formData = ref({
  renewYear: '1',
  memberFee: 0,
  memberTotalFee: 0,
  type: '1',
  contactPerson: '',
  contactTel: ''
})
const preferentialPolicy = ref(false)
const preferentialData = ref({})
const memberFee = ref()
const rules = ref({
  renewYear: [
    { required: true, message: '请选择缴费年限', trigger: 'change' }
  ],
  type: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
  contactPerson: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  contactTel: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[23456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ]
})

function open(row) {
  console.log(props)
  payForm.value = row ?? {}
  if (payForm.value.payStatus === '0') {
    formData.value.renewYear = payForm.value.content.yearCount
  } else {
    formData.value.renewYear = '1'
  }
  formData.value.type = '1'
  formData.value.contactTel = ''
  formData.value.contactPerson = ''
  canUseDiscountApi()
  getZtxDiscountPolicyApi()
  getMyMemberCertUnitFeeApi()
  nextTick(() => {
    // payType.value = '0'
    isPaying.value = false
  })
  showDialog.value = true
}

async function getMyMemberCertUnitFeeApi() {
  const { data } = await getMyMemberCertUnitFee()
  memberFee.value = data
}

async function canUseDiscountApi() {
  const { data } = await canUseDiscount()
  preferentialPolicy.value = data
}

async function getZtxDiscountPolicyApi() {
  const { data } = await getZtxDiscountPolicy()
  preferentialData.value = data
}


const memberTotalFee = computed(() => {
  const priceInCents = Math.round(memberFee.value * 100)
  const totalInCents = priceInCents * formData.value.renewYear
  return totalInCents / 100
})

const paymentFee = computed(() => {
  if (preferentialPolicy.value) {
    return (memberTotalFee.value * 100 - memberFee.value * 100) / 100
  } else {
    return memberTotalFee.value
  }
})

const handelPay = async() => {
  await proxy.$refs['formInfo'].validate()
  if (!formData.value.renewYear) {
    proxy.$modal.msgError('请选择缴费年限')
    return
  }

  if (!formData.value.type) {
    proxy.$modal.msgError('请选择支付方式')
    return
  }
  // if (payType.value == 3 && !formData.value.contactPerson) {
  //   proxy.$modal.msgError('请输入联系人')
  //   return
  // }
  // if (payType.value == 3 && !formData.value.contactTel) {
  //   proxy.$modal.msgError('请输入联系电话')
  //   return
  // }

  if (isPaying.value) return
  isPaying.value = true
  const url = window.location.href

  try {
    let data
    if (payForm.value.payStatus === '0') {
      // 再次付款
      data = await payForOrder({
        renewYear: formData.value.renewYear,
        type: formData.value.type,
        url,
        id: payForm.value.id,
        contactTel: formData.value.contactTel,
        contactPerson: formData.value.contactPerson
      })
    } else {
      // 第一次下单
      data = await certifiedNew({
        renewYear: formData.value.renewYear,
        type: formData.value.type,
        url,
        payType: 1,
        contactTel: formData.value.contactTel,
        contactPerson: formData.value.contactPerson
      })
    }

    if (data.data.payFlag === '0') {
      emit('payment-success', formData.value)
      showDialog.value = false
    } else if (data.data.payFlag === '1') {
      // if (data.orderId) {
      //   // await callBack2(data.orderId)
      //   // emit('payment-success', formData.value)
      //   // showDialog.value = false
      //   // proxy.$refs['payOkRef'].open()
      // }
      proxy.$modal.loading()
      if (data.data.payResult.encryptedData) {
        proxy.$refs['MingPayRef'].handleSubmit(data.data.payResult.encryptedData)
      }
    } else if (data.data.payFlag === '2') {
      emit('paymentView', data.data)
      showDialog.value = false
    } else {
      proxy.$modal.msgError('支付失败，请重试')
    }
  } catch (error) {
    proxy.$modal.msgError('支付失败，请重试')
  } finally {
    isPaying.value = false
  }
}


defineExpose({
  open
})
</script>

<style lang="scss" scoped>
// 主题色变量
$primary-color: #1561cb;
$primary-light: #e8f0fe;
$primary-hover: #0e4a9e;
$text-color: #303133;
$text-secondary: #606266;
$text-light: #909399;
$border-color: #e4e7ed;
$warning-bg: #fdf6ec;
$warning-color: #e6a23c;
$discount-color: #f56c6c;
$total-color: #1561cb;

.payment-dialog {
  :deep(.el-dialog) {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }

  :deep(.el-dialog__header) {
    background: linear-gradient(135deg, $primary-color 0%, darken($primary-color, 8%) 100%);
    padding: 20px 24px;
    margin: 0;
    border-bottom: none;

    .el-dialog__title {
      color: white;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.5px;
    }

    .el-dialog__close {
      color: white;
      font-size: 20px;

      &:hover {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }

  :deep(.el-dialog__body) {
    padding: 24px;
    background: #f8f9fa;
  }
}

.payment-form {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

  :deep(.el-form-item) {
    margin-bottom: 20px;
  }

  :deep(.el-form-item__label) {
    font-weight: 500;
    color: $text-color;
    font-size: 14px;
  }

  .select-year {
    width: 100%;

    :deep(.el-input__wrapper) {
      border-radius: 8px;
      box-shadow: 0 0 0 1px $border-color inset;
      transition: all 0.2s;

      &:hover {
        box-shadow: 0 0 0 1px $primary-color inset;
      }

      &.is-focus {
        box-shadow: 0 0 0 2px rgba($primary-color, 0.2), 0 0 0 1px $primary-color inset;
      }
    }
  }

  .fee-item {
    .fee-amount {
      font-size: 16px;
      font-weight: 600;
      color: $text-color;
      line-height: 32px;
    }
  }
}

.warning-tip {
  background: $warning-bg;
  border-left: 4px solid $warning-color;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 10px;

  .check-box {
    margin-top: 2px;

    :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: $primary-color;
      border-color: $primary-color;
    }

    :deep(.el-checkbox__inner) {
      width: 16px;
      height: 16px;
      border-radius: 4px;
    }
  }

  .tip-text {
    flex: 1;
    font-size: 13px;
    color: $warning-color;
    line-height: 1.5;
  }
}

.discount-item {
  :deep(.el-form-item__label) {
    color: $text-secondary;
  }

  .discount-amount {
    color: $discount-color;
    font-size: 16px;
    font-weight: 500;
  }
}

.total-pay-item {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed $border-color;

  :deep(.el-form-item__label) {
    font-weight: 600;
    font-size: 15px;
    color: $text-color;
  }

  .total-pay-amount {
    color: $warning-color;
    font-size: 20px;
    font-weight: 700;
  }
}


.action-buttons {
  text-align: center;
  margin-top: 16px;

  .confirm-btn {
    background: $primary-color;
    border: none;
    padding: 12px 60px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 30px;
    transition: all 0.2s;

    &:hover {
      background: $primary-hover;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba($primary-color, 0.3);
    }

    &:active {
      transform: translateY(0);
    }
  }
}

:deep(.el-form-item__label) {
  text-align: justify;
  text-align-last: justify;
  display: inline-block;
  width: 100%;
  font-weight: bold;
}

.pay-card {
  background: #fff;
  //padding: 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  //box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
  //border: 1px solid #f0f0f0;
  transition: all 0.3s ease;

  .card-title {
    font-size: 16px;
  }

  &:hover {
    //box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
  }

  .title-text {
    padding: 5px 20px 10px 30px;
    font-size: 16px;
    color: #000;
  }

  .pay-methods {
    padding: 20px 0;

    .pay-radio-group {
      width: 100%;
      display: flex;
      gap: 20px;
    }

    .pay-item {
      width: auto;
      min-width: 140px;
      height: auto;
      margin: 0;
      padding: 12px 20px;
      border: 1px solid #e9ecef;
      border-radius: 12px;
      transition: all 0.2s ease;

      &:hover {
        border-color: #667eea;
        background: #f8f9ff;
      }

      :deep(.el-radio__input) {
        align-self: center;
      }

      :deep(.el-radio__label) {
        padding-left: 12px;
        width: 100%;
      }
    }

    .pay-method-content {
      display: flex;
      align-items: center;
      gap: 12px;

      .pay-icon {
        width: 32px;
        height: 32px;
        object-fit: contain;
      }

      .pay-name {
        font-size: 15px;
        font-weight: 500;
        color: #2c3e50;
      }
    }
  }
}
</style>