<template>
  <el-dialog
    v-model="dialogVisible"
    class="payment-dialog"
    destroy-on-close
    title="付款详情"
    width="600"
  >
    <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>
    
    <!-- 统计卡片区域 -->
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-label">缴费总人数</div>
        <div class="stat-value">{{ formData.all ?? 0 }}</div>
      </div>
      <div class="stat-card">
        <div class="stat-label">新会员合计</div>
        <div class="stat-value ">{{ formData.new ?? 0 }}</div>
      </div>
      <div class="stat-card">
        <div class="stat-label">续费会员合计</div>
        <div class="stat-value ">{{ formData.old ?? 0 }}</div>
      </div>
      <div class="stat-card">
        <div class="stat-label">费用合计</div>
        <div class="stat-value">{{ formData.price ?? 0 }}元</div>
      </div>
    </div>
    
    <!-- 总计金额 -->
    <div class="total-amount">
      <span class="total-label">支付费用合计</span>
      <span class="total-price">{{ formData.price ?? 0 }}元</span>
    </div>
    <!--    -->
    <!--    &lt;!&ndash; 支付方式 &ndash;&gt;-->
    <!--    <div class="pay-method-section">-->
    <!--      <div class="section-title">请选择支付方式</div>-->
    <!--      <el-radio-group v-model="form.type" class="pay-radio-group" @change="changeType">-->
    <!--        <el-radio label="1" class="pay-radio">-->
    <!--          <div class="pay-option">-->
    <!--            <img alt="" src="@/assets/pay/min.png" class="pay-icon">-->
    <!--            <span>民生付</span>-->
    <!--          </div>-->
    <!--        </el-radio>-->
    <!--        <el-radio label="3" class="pay-radio">-->
    <!--          <div class="pay-option">-->
    <!--            <img alt="" src="@/assets/pay/min.png" class="pay-icon">-->
    <!--            <span>对公转账</span>-->
    <!--          </div>-->
    <!--        </el-radio>-->
    <!--      </el-radio-group>-->
    <!--    </div>-->
    
    
    <div class="pay-card">
      <div class="card-header">
        <span class="card-title">请选择支付方式</span>
      </div>
      <div class="pay-methods">
        <el-radio-group v-model="form.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="form" :rules="rules" label-width="80px">
      <el-form-item v-if="form.type==='3'" label="联系人" prop="contactPerson">
        <el-input v-model.trim="form.contactPerson" />
      </el-form-item>
      <el-form-item v-if="form.type==='3'" label="联系方式" prop="contactTel">
        <el-input v-model.trim="form.contactTel" />
      </el-form-item>
    </el-form>
    <!-- 付款按钮 -->
    <div class="action-area">
      <el-button class="pay-btn" round size="large" type="primary" @click="handelPay">
        去付款
      </el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { computed, getCurrentInstance, ref } from 'vue'
import useUserStore from '/@/store/modules/user'

const user = computed(() => useUserStore().memberInfo)
const deptInfo = computed(() => useUserStore().deptInfo)
const formData = ref({})
const emit = defineEmits(['handelGoPay'])
const { proxy } = getCurrentInstance()
const dialogVisible = ref(false)
const type = ref(1)
const form = ref({
  type: '0'
})
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, val) {
  if (row.id) form.value.id = row.id
  formData.value = row
  form.value.type = '1'
  type.value = val
  dialogVisible.value = true
}

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

async function handelPay() {
  if (!form.value.type) {
    proxy.$modal.msgError('请选择支付方式')
    return
  }
  await proxy.$refs['formRef'].validate()
  emit('handelGoPay', form.value, type.value)
  dialogVisible.value = false
}

function close() {
  dialogVisible.value = false
}

defineExpose({
  open,
  close
})
</script>

<style lang="scss" scoped>
.payment-dialog {
  :deep(.el-dialog__header) {
    padding: 24px 24px 0;
    margin-right: 0;
    border-bottom: none;
  }
  
  :deep(.el-dialog__title) {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
  }
  
  :deep(.el-dialog__body) {
    padding: 20px 24px 32px;
  }
  
  :deep(.el-dialog__close) {
    font-size: 20px;
    color: #8c8c8c;
    transition: color 0.2s;
    
    &:hover {
      color: #1a1a1a;
    }
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: #f8f9fc;
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s;
  
  &:hover {
    background: #f0f2f6;
  }
  
  .stat-label {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
  }
  
  .stat-value {
    font-size: 24px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.2;
    
    &.highlight {
      color: #f97316;
    }
  }
}

.total-amount {
  background: #fef7e6;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 28px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  
  .total-label {
    font-size: 15px;
    color: #b45309;
    font-weight: 500;
  }
  
  .total-price {
    font-size: 24px;
    font-weight: 700;
    color: #ea580c;
    letter-spacing: 0.5px;
  }
}


.action-area {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.pay-btn {
  min-width: 200px;
  height: 44px;
  font-size: 16px;
  font-weight: 500;
  //border-radius: 8px;
  background: #1e3a8a;
  border: none;
  transition: all 0.2s;
  
  &:hover {
    background: #1e40af;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.2);
  }
  
  &:active {
    transform: translateY(0);
  }
}


.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;
      }
    }
  }
}

: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-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;
      }
    }
  }
  &: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>