<template>
  <div v-if="show" style="z-index:1000" class=" fixed top-0 left-0 right-0 bottom-0">
    <yq-pay-modal v-if="show" :class="showOc?' opacity-100':' opacity-0'" class=" transition-opacity duration-600 fixed flex items-center justify-center top-0 left-0 right-0 bottom-0 z-[999] bg-modal-mock">
      <div class=" w-[6rem] px-[0.6rem] py-[0.4rem] bg-white rounded-[0.2rem]">
        <div class=" text-center font-f-arial text-[0.28rem] leading-[0.24rem] font-bold text-333">支付並上傳支付憑證</div>
        <div class=" text-center mt-[0.2rem] font-f-arial text-[0.24rem] leading-[0.16rem] text-333">需支付金額：<span class=" text-F70500">{{ moneny }}</span></div>
        
<!--        <div class=" mt-[0.3rem] w-full flex flex items-center justify-center text-[0.33rem] leading-[0.33rem] font-bold text-333">INTEGRITY FOOD AND</div>-->
<!--        <div class=" mt-[0.1rem] w-full flex flex items-center justify-center text-[0.33rem] leading-[0.33rem] font-bold text-333">CATERING LIMITED</div>-->
        

        <img class=" bg-f5 w-[4.8rem] h-auto" :src="local_url+'img/payme.png'" />

        <div @click="upload_pay()" class=" mt-[0.26rem] flex items-center justify-center w-[4.8rem] h-[0.6rem] rounded-full bg-main">
          <div class=" text-[0.2rem] cursor-pointer text-white leading-[0.2rem]">上傳支付憑證</div>
        </div>

        <input class=" hidden" ref="pay_file" type="file" accept="image/*" @change="pay_order">

        <div @click="padding_order()" class=" mt-[0.26rem] flex items-center justify-center w-[4.8rem] h-[0.6rem] rounded-full border-[0.02rem] border-main">
          <div class=" text-[0.2rem] cursor-pointer text-main leading-[0.2rem]">稍後完成支付</div>
        </div>
      </div>
    </yq-pay-modal>
  </div>
</template>

<script>
module.exports = {
  props: {
    moneny: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      show: false,
      showOc: false,
      loginName: "",
      loginPass: ""
    }
  },
  methods: {
    changeShow() {
      if(this.show) {
        this.showOc = false
        setTimeout(() => {
          this.show = this.showOc
        }, 600);
      }else {
        this.show = true
        setTimeout(() => {
          this.showOc = this.show
        }, 0);
      }
    },
    upload_pay() {
      this.$refs.pay_file.dispatchEvent(new MouseEvent('click')) 
    },
    pay_order() {
      this.changeShow()

      this.$emit("create_order_pay", this.$refs.pay_file.files[0])
    },
    padding_order() {
      this.changeShow()

      this.$emit("create_order_padding")
    }
  }
}
</script>