<template>
<div>
  <div class="pd20">
    <el-form>
      <el-form-item>
        <el-input type="text" size="large" :placeholder="language==0?'请输入证件号查询':'Query ID Card'"
                  v-model="query.idCard" clearable @keyup.enter="search"
                  @clear="search"
        />
      </el-form-item>
    </el-form>
  <div class="list">
    <div class="nowteamItem " v-for="(n,i) in list" :key="i">
      <div class="p9 f12">{{ language==0?'订单编号':'Order Number' }}： {{n.id}}</div>
      <div>{{n.ticketName}} </div>
      <div>{{ language==0?'场次':'Session' }}：{{n.ticketTypeName}} </div>
      <div>{{ language==0?'票型':'Ticket Type' }}：{{language==0? n.typeName:n.typeNameEn }}
        <el-tag v-if="n.discount == 1">{{ language==0?'优惠':'DISCOUNT' }}</el-tag>
      </div>
      <div>
<!--        观看人：-->
        <div>
          <div class="customer">
              <div class="name">{{ n.name }}
                <span class="fr fwb text-warning" v-if="language==0&&n.discount == 0"> ¥{{n.price}} </span>
                <span class="fr fwb text-warning" v-if="language==1&&n.discount == 0"> €{{n.priceEn}} </span>
                <span class="fr fwb text-warning" v-if="language==0&&n.discount == 1"> ¥{{n.rebatePrice}} </span>
                <span class="fr fwb text-warning" v-if="language==1&&n.discount == 1"> €{{n.rebatePriceEn}} </span>
              </div>
              <p>
                <label v-if="n.idcType == 0">{{ language==0?'身份证':'ID Card' }}：</label>
                <label v-if="n.idcType == 1">{{ language==0?'护照':'Passport' }}：</label>
                <label v-if="n.idcType == 2">{{ language==0?'其他':'Other' }}：</label>
                <span v-html="n.idCard"></span>
              </p>
          </div>
        </div>

      </div>
    </div>
  </div>
    <div style="height: 100px"></div>
    <el-empty v-if="list.length==0" />
  </div>

  <div class="fixed-bottom">
    <el-button @click="search" v-loading="loading" round type="primary" class="btn-lineG">
      {{ language==0?'查询':'Search' }}
    </el-button>
  </div>
</div>
</template>

<script setup>
import {ref, computed, onMounted} from 'vue'
import {queryTicket} from "@/apiPc/common";
import {ElMessage} from "element-plus";
import {useStorage} from "@vueuse/core/index";
const language = useStorage('language', 0)
const form = ref({})
const list = ref([])
const query = ref({
  status:1
})
const loading = ref(false)
function search() {
  if(!query.value.idCard){
    ElMessage.warning('请输入证件号')
    return
  }
  loading.value = true
  queryTicket(query.value).then(res=>{
    list.value = res.data
    for(let bill of list.value){
        // p.idCard = p.idCard.substring(0,4)+'****'+p.idCard.substring(8,p.idCard.length)
      const pattern = new RegExp(query.value.idCard, 'gi')
      bill.idCard = bill.idCard.replace(pattern, `<span class="highlight">$&</span>`)

    }
    loading.value = false
  })
}
</script>

<style scoped lang="scss">
.highlight{background: yellow;}
.fixed-bottom{position: fixed;bottom: 30px;padding: 0 30px;width: 100%;
  .btn-lineG{display: block;width: 100%;font-size: 18px;line-height: 2;height: auto;
    border-radius: 50px;
  }
}
.list{
  .nowteamItem {line-height: 1.6;font-size: 16px;
    width: 100%;border: 1px solid #c8c5ff; margin-top: 20px;
    position: relative;border-radius: 4px;padding:10px 15px;
    background: #FFFFFF;
    box-sizing: border-box;
    &>div{flex-wrap: nowrap;white-space: nowrap;
    }
    .p9{color: #999;}
    .f12{font-size: 14px}

    .customer{margin: 10px 0 0px;background: #f1f0ff;padding: 4px 12px;border-radius: 4px;
      .name{font-size: 17px}
      p{margin: 0;
        label{color: #666;font-weight: normal;}
      }
    }
  }
}
</style>