<template>
  <el-card class="container">
    <div v-loading="loading">
      <div class="title">
        {{ languageFormat(language, "订单确认", "Order confirmation") }}
      </div>
      <div class="content pd20">
        <el-row gutter="20">
          <el-col :lg="16" class="left">
            <div class="info">
              <div class="name">{{ TickForm.name }}</div>
              <div class="address">{{ TickForm.address }}</div>
            </div>

            <div class="ticket_info mb20">
              <div class="tit_box">
                <div class="line"></div>
                <div class="txt">
                  {{ languageFormat(language, "订票信息", "Ticket Info") }}
                </div>
              </div>

              <div class="form">
                <el-form ref="formRef" :model="orderForm" :rules="rules" label-width="120px">
                  <!--                  <el-form-item-->
                  <!--                    :label="language == 0 ? '联系人' : 'contact'" prop="contacts"-->
                  <!--                  >-->
                  <!--                    <el-input-->
                  <!--                      v-model="orderForm.contacts"-->
                  <!--                      :placeholder=" language == 0 ? '请输入联系人' : 'Please enter the contact'"-->
                  <!--                      style="width: 320px"-->
                  <!--                    />-->
                  <!--                  </el-form-item>-->
                  <el-form-item
                    :label="language == 0 ? '联系人电话' : 'contact phone'" prop="phone"
                  >
                    <el-input
                      v-model="orderForm.phone"
                      :placeholder=" language == 0 ? '请输入联系电话' : 'Please enter the contact phone number'"
                      style="width: 320px"
                    />
                  </el-form-item>
                  <el-form-item :label="language == 0 ? '观看人' : 'Viewer'" prop="message">
                    <div class="p_box">
                      <div class="people">
                        <el-checkbox-group v-model="orderForm.message" @change="changeGroup">
                          <div
                            v-for="(it, index) in personnelList" :key="index" class="prople_item">
                            <div>
                              <div class="name">{{ it.name }}
                                <span v-if="it.discount" class="tag_t p-right">{{
                                    language == 0 ? '优惠' : 'Discounts'
                                  }}</span>
                              </div>
                              <div class="idcard">{{ it.idCard }}</div>
                            </div>
                            <el-checkbox
                              :disabled="!it.pay ||(orderForm.message.length==5&&!orderForm.message.some(v=>v.id==it.id))"
                              :value="it"/>
                          </div>
                        </el-checkbox-group>
                      </div>
                      <div class="btn" @click="addPeopl">
                        {{ languageFormat(language, "新增", "Add") }}
                      </div>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-col>

          <el-col :lg="8" class="right">
            <div class="tit_box">
              <div class="line"></div>
              <div class="txt">
                {{ languageFormat(language, "订单明细", "Order summary") }}
              </div>
            </div>

            <div class="detail">
              <div class="detail_top">
                <div class="time">
                  {{ tickType.name }}
                  <span v-if="tickType.ticketType == 1" class="tag_t">
                    {{ languageFormat(language, "套票", "Package ticket") }}
                  </span>
                </div>
                <p>{{
                    language == 0 ? '原价票' : 'Cost Ticket'
                  }}</p>
                <div class="ticket detail_top">
                  {{ language == 0 ? tickType.price : tickType.priceEn }}
                  <span> {{ language == 0 ? '元' : 'Euro' }}</span>
                  {{ languageFormat(language, "票档", "Ticket file") }}
                  x {{ customerArr_q.length }}
                  {{ languageFormat(language, "张", "tickets") }}
                </div>
                <p>{{ language == 0 ? '优惠票' : 'Concession Ticket' }}</p>
                <div class="ticket">
                  {{ language == 0 ? tickType.rebatePrice : tickType.rebatePriceEn }}
                  <span> {{ language == 0 ? '元' : 'Euro' }}</span>
                  {{ languageFormat(language, "票档", "Ticket file") }}
                  x {{ customerArr_b.length }}
                  {{ languageFormat(language, "张", "tickets") }}
                </div>
              </div>
              <div class="detail_b">
                <div class="sum_txt">
                  {{ languageFormat(language, "共计", "Total") }}
                </div>
                <div class="price_num">
                  <span>{{ language == 0 ? "¥" : "€" }}</span>
                  {{
                    language == 0 ? (price.total_cn * 1).toFixed(2) : (price.total_en * 1).toFixed(2)
                  }}
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="footer">
        <div>
        <span class="label">
          {{ languageFormat(language, "共计金额", "Subtotal") }}：
        </span>
          <span class="value">
          <span>{{ language == 0 ? "¥" : "€" }}</span>
          {{ language == 0 ? (price.total_cn * 1).toFixed(2) : (price.total_en * 1).toFixed(2) }}
        </span>
        </div>
        <div class="pay" @click="paymentHandle">
          {{ languageFormat(language, "立即支付", "Pay Now") }}
        </div>
      </div>

    </div>
  </el-card>

</template>

<script setup>
import {ref, computed} from 'vue'
import {
  customerListApi,
  getTicketTotalApi,
  submitOrderTicket,
  listApi,
  getTicketListApi, getTicketInfoByActivityId,
} from '@/apiPc/booking'
import {ElMessage, ElMessageBox} from "element-plus";
import {languageFormat} from "@/viewsPc/seat/utils/language.js";
import useUserStore from "/@/store/modules/user";
import {useStorage} from "@vueuse/core/index";

const useStore = useUserStore()

const user = computed(() => useUserStore().user)
const language = useStorage('language', 0)
console.log(language)
const loading = ref(false);
const route = useRoute();
const router = useRouter();
const order = ref({
  data: {}
})
const payment = ref({})
const props = defineProps({
  activityId: [String, Number],
});
const form = ref({})
const personnelList = ref([])
const customerArr_q = ref([])//全票人
const customerArr_b = ref([])//优惠票人
const orderForm = ref({
  activeId: route.params.activeId,
  atId: route.params.latId,
  attId: route.params.attId,
  ticketDate: null,
  ticketType: null,
  phone: null,
  customerList: [],//人员ids列表
  message: [],//完整的人员列表
  num: 0,
  total: null
})
const price = ref({
  total_en: 0,
  total_cn: 0
})
const tickType = ref({})
const matchType = ref({})
const rules = ref({
  contacts: [
    {
      required: true,
      message: languageFormat(language, "请输入联系人", "Please enter the contact person"),
      trigger: "blur"
    },
  ],
  phone: [
    {
      required: true,
      message: languageFormat(language, "请输入联系电话", "Please enter the contact phone number"),
      trigger: "blur"
    },
  ],
  message: [
    {
      required: true,
      message: languageFormat(language, "请选择观众", "Please select the audience"),
      trigger: "blur"
    },
  ],
})
const formRef = ref(null)
const TickForm = ref({})
let timer = null;

customerList()

function changeGroup(e) {
  if (orderForm.value.message.length == 6) {
    ElMessageBox.confirm(language.value == 0 ? '最多只能选择5个观众' : 'You can only select up to 5 audience members', {
      confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
      cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
      type: 'warning'
    })
  } else {
    orderForm.value.num = orderForm.value.message.length
    orderForm.value.customerList = orderForm.value.message.map(v => v.id)
    customerArr_q.value = orderForm.value.message.filter(v => !v.discount)
    customerArr_b.value = orderForm.value.message.filter(v => v.discount)
    // 计算价格
    price.value = {
      total_en: 0,
      total_cn: 0
    }
    orderForm.value.message.forEach(v => {
      if (v.discount) {
        price.value.total_cn += (tickType.value.rebatePrice * 1)
        price.value.total_en += (tickType.value.rebatePriceEn * 1)
      } else {
        price.value.total_cn += (tickType.value.price * 1)
        price.value.total_en += (tickType.value.priceEn * 1)
      }
    })
  }
  console.log(orderForm.value.message)

}

// 获取人员列表
async function customerList() {
  const res = await customerListApi({
    activeId: orderForm.value.activeId,
    attId: orderForm.value.attId,
    atId: orderForm.value.atId
  })
  personnelList.value = res.rows
}

// 获取票档信息
async function getTicketListType() {
  const res = await listApi({latId: orderForm.value.latId})
  tickType.value = res.rows.find(item => item.id == orderForm.value.attId)
  orderForm.value.ticketDate = JSON.stringify(tickType.value)
  console.log(tickType.value)

}

getTicketListType()

// 票档信息
async function getTicketList() {
  const res = await getTicketListApi({activityId: route.params.activeId})
  matchType.value = res.rows.find(item => item.id == orderForm.value.atId)
  orderForm.value.ticketType = JSON.stringify(matchType.value)
}

getTicketList()

// 提交
async function paymentHandle() {
  if (!user.value) {
    useStore().setVisitor()
    return
  }

  await formRef.value.validate()

  await ElMessageBox.confirm(language.value == 0 ? '确认提交订单吗？' : 'Confirm to submit the order?', {
    confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
    cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
    type: 'warning'
  }).then(async () => {
    try {
      const res = await submitOrderTicket({
        activeId: orderForm.value.activeId,
        atId: orderForm.value.atId,
        attId: orderForm.value.attId,
        ticketType: orderForm.value.ticketType,
        ticketDate: orderForm.value.ticketDate,
        phone: orderForm.value.phone,
        customerList: orderForm.value.customerList,
        num: orderForm.value.num,
        message: JSON.stringify(orderForm.value.message),
        total: language.value == 0 ? price.value.total_cn : price.value.total_en
      })
      if (res.code == 200 && res.data.orderId > 0) {
        // 去付钱
        router.push({
          name: 'bookingPay',
          query: {
            orderId: res.data.orderId,
            money: res.data.total,
            type: 'ticket'
          }
        })
      } else if (res.code == 200 && res.data.orderId == -400) {
        ElMessageBox.confirm(language.value == 0 ? '剩余票数不足，请选择其他日期' : 'There are not enough votes left. Please select another date', {
          confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
          cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
          type: 'warning'
        })
      } else if (res.code == 200 && res.data.orderId == -500) {
        ElMessageBox.confirm(language.value == 0 ? '每人每天限购一张票,请确认后下单' : 'One ticket per person per day, please confirm and place your order', {
          confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
          cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
          type: 'warning'
        })
      } else {
        ElMessage.error(language.value == 0 ? '下单失败,' : 'Order failure')
      }
    } catch (e) {
      ElMessage.error(language.value == 0 ? '下单失败,' : 'Order failure')
    } finally {

    }

  })
}

async function getDetail() {
  const res = await getTicketInfoByActivityId({activityId: orderForm.value.activeId})
  TickForm.value = res.data
}

getDetail()


function addPeopl() {
  router.push({
    path: '/booking/ticket/peopleManage',
    query: {
      activeId: orderForm.value.activeId,
      attId: orderForm.value.attId,
      atId: orderForm.value.atId
    }
  })
}
</script>


<style lang="scss" scoped>
div {
  box-sizing: border-box;
}

.qrcode {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.container {
  //padding: 20px 0;
  width: 1200px;
  margin: 20px auto;

  .tag_t {
    padding: 1px 10px;
    font-weight: 400;
    font-size: 12px;
    color: #493ceb;
    border-radius: 6px;
    border: 1px solid #453dea;
    margin-left: 5px;
  }

  .title {
    padding: 11px;
    text-align: center;
    background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
    font-size: 18px;
    color: #ffffff;
  }

  .content {
    background-color: #fff;
  }

  .line {
    width: 4px;
    height: 18px;
    background: linear-gradient(180deg, #493ceb 0%, #8623fc 100%);
    border-radius: 4px;
  }

  .left {
    .info {
      background: rgba(69, 61, 234, 0.04);
      border-radius: 8px;
      border: 1px solid #d3d1f6;
      padding: 20px 0 28px 33px;
      margin-bottom: 20px;

      .name {
        font-weight: 500;
        font-size: 18px;
        color: #000000;
        margin-bottom: 20px;
      }

      .address {
        font-weight: 400;
        font-size: 14px;
        color: #929aa0;
      }
    }

    .ticket_info {
      .tit_box {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;

        .txt {
          font-weight: bold;
          font-size: 16px;
          color: #493ceb;
        }
      }

      .form {
        min-height: 464px;
        padding: 20px 60px;
        border-radius: 5px;
        border: 1px solid #dcdfe6;

        .p_box {
          display: flex;
          width: 100%;
          gap: 10px;
          max-width: 400px;

          .people {
            width: 100%;
            background: #fbfcfd;
            border-radius: 2px;
            border: 1px solid #dcdfe6;
            padding: 0 14px;

            .prople_item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 14px 0;
              border-bottom: 1px solid #dcdfe6;
              width: 100%;
              position: relative;

              &:last-child {
                border: none;
              }

              .name {
                font-size: 16px;
                color: #929aa0;
                margin-bottom: 20px;

                .tag_t {
                  position: absolute;
                  right: 30px;
                  padding: 8px;
                }
              }

              .idcard {
                font-size: 10px;
                color: #929aa0;
              }
            }
          }

          .btn {
            width: 90px;
            height: 40px;
            background: #fbfcfd;
            border-radius: 20px;
            border: 1px solid #493ceb;
            margin-top: 10px;
            font-size: 14px;
            color: #493ceb;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
            user-select: none;
          }
        }
      }
    }
  }

  .right {
    .tit_box {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;

      .txt {
        font-weight: bold;
        font-size: 16px;
        color: #493ceb;
      }
    }

    .detail {
      padding: 15px 26px;
      border-radius: 5px;
      border: 1px solid #dcdfe6;

      .detail_top {
        padding-bottom: 13px;
        border-bottom: 1px solid #dcdfe6;

        .time {
          font-weight: 500;
          font-size: 20px;
          color: #2d373f;
          line-height: 25px;
          margin-bottom: 8px;
        }

        .ticket {
          font-size: 16px;
          color: #2d373f;
        }
      }

      .detail_center {
        margin-top: 14px;
        display: flex;
        flex-direction: column;
        padding-bottom: 13px;
        border-bottom: 1px solid #dcdfe6;
        gap: 8px;

        .ticket {
          font-size: 16px;
          color: #2d373f;
        }
      }

      .detail_b {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 16px;

        .sum_txt {
          font-weight: 600;
          font-size: 18px;
          color: #2d373f;
          line-height: 25px;
        }

        .price_num {
          font-weight: 600;
          font-size: 36px;
          color: #ff8124;
          line-height: 50px;
        }
      }
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    height: 70px;
    align-items: center;
    background: #ffffff;
    box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
    margin-top: 9px;
    padding: 0 30px;

    .label {
      font-size: 16px;
      color: #7b7f83;
      line-height: 22px;
    }

    .value {
      font-size: 22px;
      color: #ff8124;
      line-height: 30px;
      font-weight: 600;
    }

    .pay {
      width: 200px;
      height: 40px;
      background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
      border-radius: 20px;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      user-select: none;
    }
  }
}

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
  }
}
</style>