<template>
  <el-dialog
    v-model="showDialog"
    :close-on-click-modal="false"
    align-center
    class="payment-dialog"
    title="付款详情"
    width="640"
  >
    <div v-loading="loading" class="dialogBox">
      <el-card class="info-card" shadow="never">
        <div class="card-header">
          <span class="card-title">缴费单位</span>
        </div>
        <div>{{ user.name }}</div>
        <div> {{ deptInfo.aname }}</div>
      
      </el-card>
      
      <!-- 地址卡片 -->
      <el-card class="info-card" shadow="never">
        <div class="card-header">
          <span class="card-title">邮寄信息</span>
          <el-button link type="primary" @click="handelUpdate">
            管理地址
          </el-button>
        </div>
        
        <div v-if="form.name" class="address-content">
          <div class="address-detail">
            <div class="address-title">
              {{ form.province }} {{ form.city }} {{ form.area }}
            </div>
            <div class="address-line">
              <span class="address-text">{{ form.a }}</span>
            </div>
            <div class="contact-info">
              {{ form.name }} {{ form.phone }}
              <el-tag v-if="form.defaultFlag == 1" effect="plain" size="small" type="primary">默认地址</el-tag>
            </div>
          </div>
        </div>
        
        <div v-else class="empty-address">
          <el-empty :image-size="80" description="暂无收货地址">
            <el-button size="small" type="primary" @click="handelAddress">添加地址</el-button>
          </el-empty>
        </div>
      </el-card>
      
      <!-- 考试信息卡片 -->
      <el-card class="info-card" shadow="never">
        <div class="card-header">
          <span class="card-title">考试信息</span>
        </div>
        
        <div class="exam-info">
          <div class="info-row">
            <span class="label">人数合计：</span>
            <span class="value">{{ examForm.allCount ?? 0 }}人</span>
          </div>
          
          <div class="info-row level-list">
            <span class="label">级别分布：</span>
            <div class="level-tags">
              <el-tag
                v-for="val in 10"
                v-show="examForm[`level${val}`]"
                :key="val"
                class="level-tag"
                size="small"
              >
                {{ szToHz(val) }}级 {{ examForm[`level${val}`] }}人
              </el-tag>
            </div>
          </div>
          
          <div class="info-row total-fee">
            <span class="label">费用合计：</span>
            <span class="value price">{{ examForm.allFee ?? 0 }}元</span>
          </div>
        </div>
      </el-card>
      
      <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" @change="changeType">
            <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 ref="formRef" :model="formData" :rules="rules" label-width="80px">
        <el-form-item v-if="formData.type==3" label="联系人" prop="contactPerson">
          <el-input v-model.trim="formData.contactPerson" />
        </el-form-item>
        <el-form-item v-if="formData.type==3" label="联系方式" prop="contactTel">
          <el-input v-model.trim="formData.contactTel" />
        </el-form-item>
      </el-form>
      <!-- 提交按钮 -->
      <div class="action-buttons">
        <el-button
          :disabled="!form.id"
          class="submit-btn"
          size="large"
          type="primary"
          @click="handelPay"
        >
          提交订单 ￥{{ examForm.allFee ?? 0 }}
        </el-button>
        <div v-if="!form.id" class="tip-text">请先选择邮寄地址</div>
      </div>
    </div>
    
    <addressDialog ref="addressDialogRef" @handel-select="handelSelect" />
    <mingPay ref="mingPayRef" />
    <payOk ref="payOkRef" @handel-ok="handelOk" />
    <payView ref="payViewRef" @handel-success="showDialog=false" />
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, ref, computed } from 'vue'
import { getDefaultAddress, setDefault, editAddressOrder } from '@/api/address'
import mingPay from '@/components/memberComponents/MingPay.vue'
import payOk from '@/components/memberComponents/payOk.vue'
import { commitJi, payCallBackJi } from '@/api/exam/info'
import { confirmExam } from '@/api/exam/person'
import { useRouter } from 'vue-router'
import addressDialog from '@/views/exam/components/addressDialog.vue'
import { szToHz } from '@/utils/ruoyi'
import useUserStore from '@/store/modules/user'
import payView from '@/views/system/user/profile/components/payView.vue'
import { payForOrder } from '/@/api/system/userInfo'

const emit = defineEmits(['handelSuccess'])
const props = defineProps({
  skip: {
    type: String,
    default: '0'
  }
})
const user = computed(() => useUserStore().memberInfo)
const deptInfo = computed(() => useUserStore().deptInfo)
const { proxy } = getCurrentInstance()
const form = ref({
  defaultFlag: '1'
})
const examForm = ref({})
const router = useRouter()
const showDialog = ref(false)
const id = ref('')
const orderId = ref()
const loading = ref(false)
const formData = ref({
  type: '1',
  contactPerson: '',
  contactTel: ''
})
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(examId, oId) {
  id.value = examId
  orderId.value = oId
  getAddress()
  getConfirmExam()
  showDialog.value = true
  formData.value = {
    type: '1',
    contactPerson: '',
    contactTel: ''
  }
  console.log(window.location.origin + '/#/level/apply')
}

function handelSelect(row) {
  form.value = row
}

function changeType() {
  formData.value.contactPerson = ''
  formData.value.contactTel = ''
}

async function handelPay() {
  if (!form.value.id) return proxy.$modal.msgError('请先选择地址')
  if (!formData.value.type) {
    proxy.$modal.msgError('请选择支付方式')
    return
  }
  await proxy.$refs['formRef'].validate()
  let res
  if (orderId.value) {
    const url = window.location.href
    res = await payForOrder({
      addresId: form.value.id,
      id: orderId.value,
      url,
      type: formData.value.type,
      contactPerson: formData.value.contactPerson,
      contactTel: formData.value.contactTel
    })
  } else {
    const url = window.location.origin + '/#/level/apply'
    res = await commitJi({
      addresId: form.value.id,
      id: id.value,
      url: url,
      type: formData.value.type,
      contactPerson: formData.value.contactPerson,
      contactTel: formData.value.contactTel
    })
  }


  proxy.$modal.loading()
  if (res.data.payFlag == 2) {
    proxy.$refs['payViewRef'].open(res.data.orderId, 3)
    proxy.$modal.closeLoading()
    emit('handelSuccess')
  } else {
    if (res.data.payResult.encryptedData) {
      proxy.$modal.loading()
      proxy.$refs['mingPayRef'].handleSubmit(res.data.payResult.encryptedData)
      
      // await payCallBackJi(res.data.orderId)
      // await proxy.$refs['payOkRef'].open()
      // proxy.$modal.msgSuccess('操作成功')
    }
  }
}

async function handelOk() {
  if (props.skip == 0) {
    await router.replace('/level/apply')
  }
  emit('handelSuccess')
  showDialog.value = false
}

function handelUpdate() {
  proxy.$refs['addressDialogRef'].open()
}

function handelAddress() {
  proxy.$refs['addressDialogRef'].open()
}


async function handleDefault() {
  if (form.value.defaultFlag == 1) return
  await setDefault(form.value.id)
  await getAddress()
  proxy.$modal.msgSuccess('设置成功')
}

async function getAddress() {
  const res = await getDefaultAddress()
  form.value = res.data ?? {}
}

async function getConfirmExam() {
  loading.value = true
  const res = await confirmExam(id.value)
  examForm.value = res.data ?? {}
  loading.value = false
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.payment-dialog {
  :deep(.el-dialog__body) {
    padding: 20px 24px 32px;
  }
}

.dialogBox {
  font-size: 14px;
  
  .info-card {
    margin-bottom: 20px;
    border-radius: 12px;
    border: 1px solid #ebeef5;
    
    :deep(.el-card__body) {
      padding: 16px 20px;
    }
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f2f5;
    
    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      position: relative;
      
      &::before {
        content: '';
        position: absolute;
        left: -8px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 14px;
        background: #409eff;
        border-radius: 2px;
      }
    }
  }
  
  .address-content {
    .address-detail {
      background: #f8f9fa;
      padding: 12px 16px;
      border-radius: 8px;
      
      .address-title {
        font-size: 14px;
        color: #7f7f86;
        margin-bottom: 2px;
        line-height: 1.5;
      }
      
      .address-line {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 8px;
        flex-wrap: wrap;
        
        .address-text {
          font-size: 14px;
          color: #303133;
          //line-height: 1;
          word-break: break-all;
        }
      }
      
      .contact-info {
        font-size: 13px;
        color: #606266;
      }
    }
  }
  
  .empty-address {
    padding: 16px 0;
  }
  
  .exam-info {
    .info-row {
      display: flex;
      margin-bottom: 12px;
      font-size: 14px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .label {
        width: 80px;
        color: #606266;
        flex-shrink: 0;
      }
      
      .value {
        color: #303133;
        font-weight: 500;
        
        &.price {
          color: #e6a23c;
          font-size: 18px;
        }
      }
      
      &.level-list {
        flex-wrap: wrap;
        
        .level-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          flex: 1;
          
          .level-tag {
            background: #ecf5ff;
            border: none;
            color: #409eff;
          }
        }
      }
    }
  }
  
  .payment-section {
    margin: 24px 0 32px;
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 16px;
      position: relative;
      padding-left: 12px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 14px;
        background: #409eff;
        border-radius: 2px;
      }
    }
    
    .payment-methods {
      background: #f8f9fa;
      border-radius: 12px;
      padding: 12px 16px;
      
      .payment-item {
        display: flex;
        width: 400px;
        .payment-radio {
          //width: 0%;
          //margin-right: 0;
          flex:1;
          :deep(.el-radio__label) {
            width: 100%;
            padding-left: 8px;
          }
        }
        
        .payment-info {
          display: flex;
          align-items: center;
          gap: 12px;
          
          .payment-icon {
            width: 32px;
            height: 32px;
            object-fit: contain;
          }
          
          .payment-name {
            font-size: 15px;
            font-weight: 500;
            color: #303133;
          }
        }
      }
    }
  }
  
  .action-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    
    .submit-btn {
      width: 280px;
      height: 48px;
      font-size: 16px;
      font-weight: 500;
      border-radius: 24px;
      
      //&:not(:disabled) {
      //  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
      //  border: none;
      //
      //  &:hover {
      //    background: linear-gradient(135deg, #66b1ff 0%, #79bbff 100%);
      //  }
      //}
    }
    
    .tip-text {
      font-size: 12px;
      color: #f56c6c;
    }
  }
}


: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;
  
  &: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:10px 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>