<template>
  <Mask :width="1252" :height="777" :is-show="show" @close="show = false" title="订单详情"
        :show-footer="true">
    <template #default>
      <div class="content">
        <div class="left">
          <div class="goods-detail">
            <div class="title">药品详情</div>
            <el-table border :header-cell-style="{ backgroundColor: '#F1F5FB' }" :data="orderInfo.goodsDetail"
                      style="flex: 1">
              <el-table-column label="商品" prop="name" width="100" show-overflow-tooltip></el-table-column>
              <el-table-column label="数量" prop="number" width="100" show-overflow-tooltip></el-table-column>
              <el-table-column label="单位" prop="unit" width="100" show-overflow-tooltip></el-table-column>
              <el-table-column label="单价" width="100" show-overflow-tooltip>
                <template #default="scope">
                  {{ scope.row.preUnitPrice }}元
                </template>
              </el-table-column>
              <el-table-column label="实价" width="100" show-overflow-tooltip>
                <template #default="scope">
                  {{ scope.row.unitPrice }}元
                </template>
              </el-table-column>
              <el-table-column label="小计" width="100" show-overflow-tooltip>
                <template #default="scope">
                  {{ scope.row.subTotalPrice }}元
                </template>
              </el-table-column>
              <el-table-column label="追溯码" show-overflow-tooltip>
                <template #default="scope">
                  {{ scope.row.traceabilityCode?.length == 2 ? "未绑定追溯码" : scope.row.traceabilityCode }}
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="service-detail">
            <div class="title">服务详情</div>
            <el-table border :header-cell-style="{ backgroundColor: '#FBF6EB' }" :data="orderInfo.serviceDetail"
                      style="flex: 1">
              <el-table-column label="商品" prop="name" width="100" show-overflow-tooltip></el-table-column>
              <el-table-column label="数量" prop="number" width="100" show-overflow-tooltip></el-table-column>
              <el-table-column label="单位" prop="unit" width="100" show-overflow-tooltip></el-table-column>
              <el-table-column label="单价" width="100" show-overflow-tooltip>
                <template #default="scope">
                  {{ scope.row.preUnitPrice }}元
                </template>
              </el-table-column>
              <el-table-column label="实价" width="100" show-overflow-tooltip>
                <template #default="scope">
                  {{ scope.row.unitPrice }}元
                </template>
              </el-table-column>
              <el-table-column label="小计" width="100" show-overflow-tooltip>
                <template #default="scope">
                  {{ scope.row.subTotalPrice }}元
                </template>
              </el-table-column>
              <el-table-column label="追溯码" show-overflow-tooltip>
                <template #default="scope">
                  -
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="right">
          <div class="title">支付信息</div>
          <div class="info">
            <div class="item">
              <div class="label">开单时间</div>
              <div class="value">{{ formatDate(orderInfo.createDatetime) }}</div>
            </div>
            <div class="item">
              <div class="label">完成时间</div>
              <div class="value">{{ formatDate(orderInfo.payTime) }}</div>
            </div>
            <div class="item">
              <div class="label">收费员</div>
              <div class="value">{{ orderInfo.salePersonName }}</div>
            </div>
            <div class="item">
              <div class="label">药师</div>
              <div class="value">{{ orderInfo.dockerName }}</div>
            </div>
            <div class="item">
              <div class="label">销售人</div>
              <div class="value">{{ orderInfo.salePersonName }}</div>
            </div>
            <div class="item">
              <div class="label">原价</div>
              <div class="value">￥{{ orderInfo.preTotalPrice }}</div>
            </div>
            <div class="item">
              <div class="label">优惠</div>
              <div class="value">￥{{ (orderInfo.preTotalPrice - orderInfo.totalPrice).toFixed(2) }}</div>
            </div>
            <div class="item">
              <div class="label">应收</div>
              <div class="value">￥{{ orderInfo.totalPrice }}</div>
            </div>
            <div class="item">
              <div class="label">实收</div>
              <div class="value">￥{{ orderInfo.totalPrice }}</div>
            </div>
            <div class="item">
              <div class="label">支付方式</div>
              <div class="value">{{ getPayTypeStr(orderInfo.payType) }}</div>
            </div>
            <div class="item">
              <div class="label" style="color: #333333">收-{{ orderInfo.payType ? getPayTypeStr(orderInfo.payType) : "" }}</div>
              <div class="value" style="color: #FF0000">￥{{ orderInfo.totalPrice }}</div>
            </div>
            <div class="item">
              <div class="label">备注</div>
              <div class="value">-</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template #footer>
      <div class="footer">
        <!--       <el-button type="primary" plain>追溯码</el-button>-->
        <div>
          <!--        <el-button type="danger" plain @click="cancel" v-if="orderInfo.status == 0">取消</el-button>-->
          <span class="default-btn" @click="refund" v-if="orderInfo.status == 1">退款</span>
          <span class="default-btn" @click="print" v-if="orderInfo.status == 1" style="margin-left: 24px">
            打印
            <el-icon class="el-icon--right">
              <Upload/>
            </el-icon>
          </span>
        </div>
      </div>
    </template>
  </Mask>
</template>
<script setup lang="ts">
import {onMounted, onUnmounted, ref} from "vue";
import Mask from "@/components/common/Mask.vue";
import CloseBtn from "@/components/CloseBtn.vue";
import {Upload} from "@element-plus/icons-vue";
import {post} from "@/utils/request.ts";
import {useWsStore} from "@/stores/wsStore.ts";
import type {Request, Response} from "@/utils/ws.ts";
import {ElMessage} from "element-plus";
import {medTypeJson} from "@/assets/config/constants.ts";

const show = ref<boolean>(false);
const orderInfo = ref<any>({});

const init = (code: any) => {
  show.value = true;
  post("charge/getByCode", {code: code}).then((res: any) => {
    orderInfo.value = res;
  })

}
//修改时间格式化
const formatDate = (isoStr: any) => {
  if (!isoStr) {
    return ""
  }
  const date = new Date(isoStr);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
const payTypeObj = {
  0: "微信",
  1: "支付宝",
  2: "现金",
  3: "医保"
}
type PayTypeKey = 0 | 1 | 2 | 3;
const emit = defineEmits(['updateOrderList'])

const getPayTypeStr = (payType: number): string => {
  if (Object.keys(payTypeObj).includes(String(payType))) {
    return payTypeObj[payType as PayTypeKey] || "未知";
  }
  return "未知";
};
const close = () => {
  show.value = false;
  emit('updateOrderList')
}
defineExpose({init})
const refund = () => {
  console.log(orderInfo.value)
  post("charge/refund", {changeOrderCode: orderInfo.value.code}).then((res: any) => {
    close()
  })
}
// const cancel = () => {
//   post("retail/cancelOrder",{orderId:orderInfo.value.id}).then((res:any)=>{
//     close()
//   })
//
// }
const wsStore = useWsStore();
// 定义 medType 的合法键类型
type MedTypeKey = keyof typeof medTypeJson;

const print = () => {
  if (!orderInfo.value.code) {
    return
  }
  let code = orderInfo.value.code;

  const printConfig = {} as any;
  post("common/config/getPrintConfig").then((res: any) => {
    printConfig.printName = res.printName
    printConfig.pageType = res.pageType
    if (!printConfig.printName || !printConfig.pageType) {
      ElMessage.error("打印机未设置，请先到设置-打印管理中设置")
      return;
    }
    post("charge/getPrintInfoByCode", {code}).then((res: any) => {
      res.printerName = printConfig.printName
      res.pageType = printConfig.pageType
      if (res.chargeSocialPayLog) {
        res.chargeSocialPayLog.medTypeStr = medTypeJson[res.chargeSocialPayLog.medType as MedTypeKey];
      }
      console.log(res)
      wsStore.sendMessage({
        type: "PrintReceipt",
        config: null,
        data: res
      })
    })

  })
}


let request: Request = {
  type: "getPrintList",
  config: null,
  data: null
}
wsStore.sendMessage(request);
const reciceMessage = (response: Response) => {
}
onMounted(async () => {
  wsStore.setMessageCallback(reciceMessage)
})
onUnmounted(() => {
  wsStore.removeAllMessageCallback()
})

</script>
<style scoped lang="scss">
@use "@/assets/scss/base";

:deep(.el-scrollbar__view) {
  height: 100%;
}


.content {
  width: 100%;
  height: 100%;
  display: flex;
  min-height: 0;

  .left {
    flex: 1;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;

    .goods-detail {
      height: 311px;
      background: #F9FAFC;
      padding: 24px;
      display: flex;
      flex-direction: column;

      .title {
        font-weight: bold;
        margin-bottom: 24px;
      }
    }

    .service-detail {
      flex: 1;
      background: #FEFCF8;
      padding: 24px;
      min-height: 0;
      display: flex;
      flex-direction: column;

      .title {
        font-weight: bold;
        margin-bottom: 24px;
      }
    }
  }

  .right {
    width: 314px;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 24px;
    .title {
      font-weight: 800;
      font-size: 18px;
      color: #333333;
      font-style: normal;
      margin-bottom: 24px;
    }

    .info {
      flex: 1;
      font-weight: 500;
      font-size: 16px;
      color: #999999;
      font-style: normal;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 0;

      .item {
        display: flex;
        justify-content: space-between;

        .value {
          color: #000;
        }
      }

    }

  }
}

.footer {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 24px;
}
</style>