<template>
<Mask :is-show="show" :width=500 :height="500">
  <div class="container-wrapper">
    <CloseBtn @click="show = false"></CloseBtn>
    <div class="header">
      个人现金部分
    </div>
    <div class="container">
      <div>
        总金额：{{socialPayInfo.setlinfo.medfee_sumamt}}<br>
        基金支付金额：{{socialPayInfo.setlinfo.fund_pay_sumamt}}<br>
        个人医保支付金额：{{socialPayInfo.setlinfo.acct_pay}}<br>
        个人现金支付金额：{{socialPayInfo.setlinfo.psn_cash_pay}}<br>
      </div>
      <div class="price-type" v-if="socialPayInfo.setlinfo.psn_cash_pay>0">
        <div
            class="price-type-item"
            :class="['btn',payType==item.type?'active':'']"
            v-for="(item,index) in priceBtnListNoSocial"
            @click="changePriceType(item.type)"
        >
          <div class="image" :style="{'background-color':item.color}">
            <img style="width: 16px;height: 16px;" :src="item.img" alt=""/>
          </div>
          <span>{{item.name}}</span>
        </div>
        <el-input v-model="cash" placeholder="请输入收到现金的数量"></el-input>
      </div>

    </div>
    <el-button type="primary" @click="completeSettlement">完成订单</el-button>
    <el-button  @click="cecalOrder">取消订单</el-button>


  </div>

</Mask>
</template>
<script setup lang="ts">

import Mask from "@/components/Mask.vue";
import {ref} from "vue";
import {priceBtnListNoSocial} from "@/assets/config/constants.ts";
import CloseBtn from "@/components/CloseBtn.vue";
import {post} from "@/utils/request.ts";
import {ElMessage, ElMessageBox} from "element-plus";

const socialPayInfo = ref<any>(null)

const payType = ref(null)
const changePriceType = (type: any) => {
  payType.value = type;
}
const orderInfo = ref<any>(null)
const show = ref(false)
const open = (payInfo:any,order:any)=>{
  show.value = true
  socialPayInfo.value = payInfo;
  orderInfo.value = order;
}

const cash = ref<number>(0)
const emit = defineEmits(["orderCompleted","orderCancel"])
const completeSettlement = ()=>{
  if (cash.value != socialPayInfo.value.setlinfo.psn_cash_pay){
    ElMessage({
      message: '现金支付金额与实际收款金额不一致',
      type: 'warning',
    })
    return
  }
  post("retail/socialRealPay",{orderInfo:orderInfo.value,payType:payType.value}).then((res:any)=>{
    show.value = false;
    emit('orderCompleted')
  })
}
const cecalOrder = ()=>{
  ElMessageBox.confirm(
      `取消后不能恢复，是否确定取消当前订单？`,
      'Warning',
      {
        confirmButtonText: '确认取消',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    post("retail/cancelOrder",{orderId:orderInfo.value.orderId}).then((res:any)=>{
      show.value = false;
      emit('orderCancel')
    })
  })


}
defineExpose({open})
</script>
<style scoped lang="scss">
.price-type {
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  .btn {
    height: 45px;
    width: 95px;
    font-size: 14px;
    border-radius: 10px;
    display: flex;
    background: #efecec;
    margin-bottom: 10px;
    justify-content: center;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    .image{
      width: 16px;
      height: 16px;
      margin-right: 3px;
      border-radius: 23px;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &:hover {
      //color: #fff;
      //background-color: #409EFF;
      border: 1px solid #409EFF;
    }
  }

  .active {
    color: #fff;
    background-color: #409EFF;
  }

}
</style>