<template>
  <Mask v-if="!socialPayInfo?.setlinfo.psn_cash_pay" :is-show="show" :width="348" :height="377" title="结算信息"
        @close="close" :show-footer="true">
    <div class="container" style="padding: 24px;height: 100%">
      <div
          style="background: #F9FAFC;height: 100%;padding: 24px;display: flex;flex-direction: column;justify-content: space-between">
        <div>总金额：{{ socialPayInfo.setlinfo.medfee_sumamt }}</div>
        <div>基金支付金额：{{ socialPayInfo.setlinfo.fund_pay_sumamt }}</div>
        <div> 个人医保支付金额：{{ socialPayInfo.setlinfo.acct_pay }}</div>
        <div style="color: #ff0000"> 个人现金支付金额：{{ socialPayInfo.setlinfo.psn_cash_pay }}</div>
      </div>
    </div>
    <template #footer>
      <div class="bottom">
        <div class="btn">
          <span @click="cecalOrder">取消支付</span>
          <span @click="completeSettlement">完成订单</span>
        </div>
      </div>
    </template>
  </Mask>
  <Mask v-else :is-show="show" :width="633" :height="401" title="结算信息" @close="show=false" :show-footer="true">
    <div class="container" style="width:100%;height: 100%;display: flex;padding: 24px">
      <div
          style="width:300px;background: #F9FAFC;height: 100%;padding: 24px;margin-right:24px;display: flex;flex-direction: column;justify-content: space-between">
        <div>总金额：{{ socialPayInfo.setlinfo.medfee_sumamt }}</div>
        <div>基金支付金额：{{ socialPayInfo.setlinfo.fund_pay_sumamt }}</div>
        <div> 个人医保支付金额：{{ socialPayInfo.setlinfo.acct_pay }}</div>
        <div style="color: #ff0000"> 个人现金支付金额：{{ socialPayInfo.setlinfo.psn_cash_pay }}</div>
      </div>
      <div style="flex:1;height: 100%">
        <div class="price-type" v-if="socialPayInfo.setlinfo.psn_cash_pay>0">
          <div
              class="btn"
              :style="{
                      backgroundColor:
                        selectedIndex == index
                          ? item.activeBackgroundColor
                          : hoverIndex == index
                          ? item.activeBackgroundColor
                          : item.backgrountColor,
                    }"
              v-for="(item, index) in btnsList"
              :key="index"
              @click="changePriceType(item.type,index)"
              @mouseover="hoverIndex = index"
              @mouseleave="hoverIndex = null"
          >
            <img
                class="image"
                :src="selectedIndex == index || hoverIndex == index ? item.imgActive : item.img"
                alt=""
                srcset=""
                style="margin-right: 4px"
            />
            <span class="pay-left-text" :style="{color: selectedIndex==index?'#fff':''}">{{ item.name }}</span>
          </div>
          <el-input v-model="cash" placeholder="请输入收到现金的数量" style="height: 100%"></el-input>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="bottom">
        <div class="btn">
          <span class="default-btn" @click="openDetail">查看详情</span>
          <span class="default-btn" @click="cecalOrder">取消支付</span>
          <span class="default-btn" @click="completeSettlement">完成订单</span>
        </div>
      </div>
    </template>
  </Mask>
  <PaymentDetail ref="detailRef"></PaymentDetail>
</template>
<script setup lang="ts">
import Mask from "@/components/common/Mask.vue";
import {nextTick, 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";
import PaymentDetail from "@/components/charge/RecordsLog/PaymentDetail.vue";

const socialPayInfo = ref<any>(null)

const payType = ref(null)
const selectedIndex = ref(null)
const changePriceType = (type: any, index: any) => {
  selectedIndex.value = index
  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
  }
  const params = {
    mdtrtCertType: orderInfo.value.mdtrtCertType,
    mdtrtCertNo: orderInfo.value.mdtrtCertNo,
    insutype: orderInfo.value.insutype,
    changeOrderCode: orderInfo.value.changeOrderCode,
  }
  post("charge/socialRealPay", {...params}).then((res: any) => {
    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')
  //   })
  // })
  close()
}
const close = () => {
  show.value = false
  cash.value = 0
}
defineExpose({open})

const psnPaymentRef = ref();
const openPsnPayment = (payInfo: any, orderInfo: any) => {
  nextTick(() => {
    psnPaymentRef.value.open(payInfo, orderInfo);
  })

}
const orderCompleted = () => {
  show.value = false;
  emit('orderCompleted')
}
const orderCanceled = () => {
  show.value = false;
}
const hoverIndex = ref<any>(null)
const btnsList = [
  {
    type: 1,
    name: '微信支付',
    backgrountColor: '#ecf8fe',
    activeBackgroundColor: '#80cfdb',
    img: '/static/images/slices/2.png',
    imgActive: '/static/images/slices/2-active.png',
  },
  {
    type: 2,
    name: '支付宝',
    backgrountColor: '#fff5ec',
    activeBackgroundColor: '#fdb376',
    img: '/static/images/slices/3.png',
    imgActive: '/static/images/slices/3-active.png',
  },
  {
    type: 3,
    name: '现金支付',
    backgrountColor: '#ffeeee',
    activeBackgroundColor: '#ff8686',
    img: '/static/images/slices/4.png',
    imgActive: '/static/images/slices/4-active.png',
  },
  {
    type: 4,
    name: '其他支付',
    backgrountColor: '#e5f9ff',
    activeBackgroundColor: '#30e3ca',
    img: '/static/images/slices/5.png',
    imgActive: '/static/images/slices/5-active.png',
  },
]
const detailRef = ref()
const openDetail = () => {
  nextTick(() => {
    detailRef.value?.init(socialPayInfo.value.setlinfo)
  })
}
</script>

<style scoped lang="scss">
.price-type {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;

  .btn {
    width: 124px;
    height: 46px;
    background: #ECF8FE;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &:nth-child(3) {
      margin: 17px 0;
    }

    &:nth-child(4) {
      margin: 17px 0;
    }

    .image {
      width: 24px;
      height: 24px;
    }
  }

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

}

.bottom {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 24px;

  .btn {
    span {
      display: inline-block;
      width: 120px;
      height: 48px;
      text-align: center;
      line-height: 48px;
      border-radius: 8px;
      border: 1px solid #D8D8D8;
      margin-left: 21px;
      cursor: pointer;

      &:nth-child(2) {
        background: #4D6DE4;
        color: #fff;
      }
    }
  }
}

:deep(.el-input__inner) {
  height: 68px;
  font-size: 22px;
}
</style>