<template>
  <div>
    <div class="box" style="min-height: 50vh">
      <div class="indexTitle">
        <h3 class="leftboderTT">{{ language == 0 ? '我的发票' : 'My invoice' }}
          <el-button @click="goAdd" v-if="activeId!=0" type="primary" class="btn-lineG fr">
            {{language == 0 ? '开发票' : 'Invoicing' }}
          </el-button>
        </h3>
      </div>
      <el-card class="mt30" v-for="b in list" :key="b.id">
        <div class="billItem">
          <!-- parentType -->
          <div>
            申请日期：
            {{ b.createTime }}
          </div>
          <div style="display: flex;justify-content: space-between;">
            <div> 发票形式 -
              <span v-if="b.invoiceForm=='1'">电子发票</span>
              <span v-if="b.invoiceForm=='2'">纸质普票</span>
              <span v-if="b.invoiceForm=='3'">纸质专票</span>
            </div>
            <div class="text-warning">¥ <span class="price">{{ b.total }}</span></div>
          </div>
          <div style="margin: 20px 0 0;display: flex;justify-content: space-between;">
            <div class="status">
              <div class="text-success" v-if="b.isInvoice == '1'"> 已开票</div>
              <div class="text-warning" v-if="b.isInvoice == '0'">未开票</div>
              <div class="text-success" v-if="b.isInvoice == '3'"> 已寄出</div>
              <div class="text-warning" v-if="b.isInvoice == '2'"> 已取消</div>
            </div>
            <div>
              <el-button type="primary" plain round v-if="b.isInvoice == '0'" @click.stop="editDetail(b)">
                {{ language == 0 ? '修改发票' : 'Edit' }}
              </el-button>
              <el-button type="primary" plain round
                      @click.stop="showDetail(b)">{{ language == 0 ? '详情' : 'Detail' }}
              </el-button>

            </div>
          </div>

        </div>

      </el-card>
      <el-empty :image="`/img/order_no.png`" :image-size="228" v-if="list?.length == 0"/>

      <div class="mb60"></div>
    </div>
  </div>

  <chose-bills ref="dialogChoseBillsRef" @transfer="getChoosed"/>
</template>

<script setup>
import ChoseBills from './component/choseBills'
import {onMounted, ref} from 'vue'
import {getBaseInfoByActiveId, getInvoiceByActiveId} from "@/apiPc/booking"
import {getCurrentInstance} from "@vue/runtime-core"
import {useStorage} from "@vueuse/core/index";
import useUserStore from "@/store/modules/user";
const router = useRouter()
const route = useRoute()

const language = useStorage('language', 0)
const {proxy} = getCurrentInstance()
const list = ref([])
const form = ref({})
const activeId = ref('0')
const user = useUserStore().user
const query = ref({
  createById: user.userId
})
onMounted(()=>{
  if(route.query.activeId){
    activeId.value = route.query.activeId
    query.value.activeId = activeId.value
    getBase()
  }
  getList()
})
function getBase() {
  getBaseInfoByActiveId(activeId.value).then(res => {
    form.value = res.data || null
  }).catch(err => {
    form.value = null
  })
}
function getList() {
  if (!user) {
    useUserStore().setReLogin()
    return
  }
  getInvoiceByActiveId(query.value).then(res => {
    list.value = res.rows
  })
}

function goAdd() {
  //选择开票订单
  var obj = {
    title: language.value == 0 ? '选择开票订单' : 'Select the invoicing order',
    show: true,
    choosedList: []
  }
  proxy.$refs['dialogChoseBillsRef'].open(obj)
}

function showDetail(item) {
  router.push({
    name:'invoiceDetail',
    query:{
      invoiceId:item.id
    }
  })
}

function editDetail(item) {
  router.push({
    name:'addInvoice',
    query:{
      invoiceId:item.id,
      isEdit:true,
      activeId: activeId.value,
      kpType: form.value.kpType
    }
  })
}

function getChoosed(list) {
  console.log(list)
  if (list.length > 0) {
    let ids = []
    let totalMoney = 0
    for(let c of list){
      ids.push(c.id);
      totalMoney = (totalMoney + c.total)
    }
    // 去开票 必须有activeId 才能获取开票类型
    router.push({
      path: '/booking/addInvoice',
      query: {
        orders: encodeURIComponent(JSON.stringify(list)),
        activeId: activeId.value,
        kpType: form.value.kpType,
        totalMoney:totalMoney
      }
    })
  }
}

</script>

<style scoped lang="scss">
.billItem{
  .price{padding-right: 20px;font-size: 24px;font-weight: bold;font-family: "DIN Alternate"}
}

.leftboderTT {
  font-size: 20px;

  .btn-lineG {
    text-transform: uppercase;

    span {
      color: #fff;
    }
  }
}
</style>