<template>
  <div>
    <div class="box">
      <div class="indexTitle">
        <h3 class="leftboderTT">{{ language == 0 ? '我的发票' : 'My invoice' }}
          <el-button @click="goAdd" 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-empty :image="`/img/order_no.png`" :image-size="228" v-if="list?.length == 0"/>

      </el-card>
      <div class="mb60"></div>
    </div>
  </div>

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

<script setup>
import ChoseBills from './component/choseBills'
import {ref} from 'vue'
import {getInvoiceByActiveId} from "@/apiPc/booking"
import {getCurrentInstance} from "@vue/runtime-core"
import {useStorage} from "@vueuse/core/index";
import useUserStore from "@/store/modules/user";

const language = useStorage('language', 0)
const {proxy} = getCurrentInstance()
const list = ref([])
const user = useUserStore().user
const query = ref({
  createById: user.userId
})
getList()

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 editDetail(item) {

}

function getChoosed(list) {
  console.log(list)
  if (list.length > 0) {
    // 去开票
  }
}

</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>