<script setup>
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  price: {
    type: Number,
    default: 0
  }
})
const emit = defineEmits(['update:show'])
const payStatus=ref(0)
const changePayStatus=()=>{
  payStatus.value=payStatus.value===0?1:0
}
const close=()=>{
  emit('update:show',false)
}
const confirm=()=>{
  emit('update:show',false)
}

</script>

<template>
  <div>
    <van-dialog :show="show"  show-cancel-button @close="close" @confirm="confirm">
      <div class="flex flex-col pt-18px pb-13px justify-between items-center h-144px">
        <template v-if="payStatus===0">
          <div class="text-#000 text-16px font-600 ">支付全部</div>
          <div class="text-#000 text-16px ">RMB 5,000</div>
        </template>
        <template v-if="payStatus===1">
          <div class="text-#000 text-16px font-600 ">支付部分</div>
          <input class="w-272px h-48px bg-#F3F3F3 px-11px text-16px" type="text" placeholder="最多RMB5,000">
        </template>
        <div class="text-#2B53AC text-14px" @click="changePayStatus">{{payStatus===0 ? '支付部分' : '支付全部'}}</div>
      </div>
    </van-dialog>
  </div>

</template>

<style scoped lang="scss">
:deep(.van-hairline--top.van-dialog__footer){
&>.van-button{
  border-top: 1px solid #E7E7E7;
  &.van-dialog__cancel{
    border-right: 1px solid #E7E7E7;
  }
}
}
</style>