<script setup>
import { onMounted, ref } from 'vue'
import Download from '@/components/icon/download.vue'
import Warning from '@/components/icon/warning.vue'
import Search from '@/components/icon/search.vue'
import { get } from '../../utils/request'
import { userStore } from '@/store/userInfo'
import { productListNameMapping } from '../../utils/mapping'

const currentPage = ref(1)
const size = ref(5)
const tableData = ref([])
const dialogVisible = ref(false)
const cancelEmail = ref('')
const cancelUniqueSn = ref('')
const total = ref(0)
const productList = ref([])
const productId = ref('')
const url = ref('')
const role = userStore().user.role
const ProURL = ref('')
const memberRole = ref('')

onMounted(() => {
  let pageText = document.getElementsByClassName('el-pagination__jump')[0]
  if (pageText) {
    pageText.childNodes[0].nodeValue = 'Jump to Page'
  }
  const userAgent = navigator.userAgent
  const isWindows = /Windows/.test(userAgent)
  const baseurl = import.meta.env.MODE === 'production' ? 'https://www.pdfreaderpro.com' : 'http://test-pdf-pro.kdan.cn:3021'
  const base = baseurl + '/store/pdftecheditor'
  url.value = base + '?email=' + userStore().user.email
  ProURL.value = baseurl
  pagingQuery()
  getproductList()
  memberRole.value = userStore().user.role
})
//筛选
const searchInfo = () => {
  currentPage.value = 1
  pagingQuery()
}
//获取分页数据
const pagingQuery = () => {
  //初始化表格
  tableData.value = []
  get(
    '/pdf-tech/vppOrderDetail/pageByCompany?page=' +
    currentPage.value +
    '&' +
    'pageSize=' +
    size.value +
    '&' +
    'code=' +
    productId.value
  ).then((res) => {
    tableData.value = productListNameMapping(res.data.result.list)
    // 根据支付方式设置价格
    for (let i = 0; i < tableData.value.length; i++) {
      if (tableData.value[i].payment === 0 || tableData.value[i].payment === 3) {
        tableData.value[i].price = '$' + tableData.value[i].price
      } else if (tableData.value[i].payment === 1 || tableData.value[i].payment === 2) {
        tableData.value[i].price = '￥' + tableData.value[i].price
      }
      // 如果订单是未支付状态不显示价格,
      if (tableData.value[i].detailType !== 2) {
        tableData.value[i].price = ''
      }
    }
    total.value = res.data.result.total
  })
}
//获取已购买产品
const getproductList = (val) => {
  get('/pdf-tech/product/listWithAll').then(
    (res) => {
      productList.value = productListNameMapping(res.data.result)
    }
  )
}
//打开对话框
const handleClick = (val) => {
  dialogVisible.value = true
  cancelEmail.value = val.email
  cancelUniqueSn.value = val.uniqueSn
}
const handleSizeChange = (value) => {
  size.value = value
  currentPage.value = 1
  pagingQuery()
}
const handleCurrentChange = (value) => {
  currentPage.value = value
  pagingQuery()
}
</script>

<template>
  <div class="flex flex-col items-center">
    <div class="w-full">
      <h1 class="leading-40px">Order</h1>
      <div class="
          mt-36px
          mb-16px
          leading-20px
          text-16px
          font-bold
          flex
          justify-between
        ">
        <span>Content</span>
        <a v-if="role === '1'" href="/product/custom"
          class="h-28px px-10px py-4px bg-[#1460F3] rounded-4px text-14px leading-20px font-400 text-[#fff] cursor-pointer hover:opacity-80">
          Buy More Product</a>
      </div>
      <div class="flex bg-[#fff] pt-32px px-24px rounded-t-8px w-full">
        <select v-model="productId" class="w-140px" :class="{ '!text-[#232A40]': productId !== '' }">
          <option value="" selected>Product</option>
          <option v-for="item in productList" :key="item.id" :label="item.name" :value="item.code"></option>
        </select>
        <button @click="searchInfo()" class="
            w-70px
            h-28px
            border-1px border-[#1460F3]
            rounded-4px
            ml-16px
            text-[#1460F3]
            hover:opacity-80
          ">
          Confirm
        </button>
      </div>
      <el-table :data="tableData" class="px-24px pb-40px rounded-b-8px !w-full">
        <el-table-column prop="name" label="Product"> </el-table-column>
        <el-table-column prop="quantity" label="Total Number of Licenses" label-class-name="wordBreak"></el-table-column>
        <el-table-column prop="availableDeviceAmount" label="Remaining Activatable Devices"> </el-table-column>
        <el-table-column prop="price" label="Purchase Price"> </el-table-column>
        <el-table-column prop="createdAt" label="Purchase Date"></el-table-column>
        <el-table-column prop="expirationAt" label="Expiration Date" min-width="110"></el-table-column>
        <el-table-column prop="detailType" label="Actions" min-width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.detailType === 1 && memberRole?.indexOf('1') !== -1">
              <a :href="`${ProURL}/store/purchase-pdftech-editor/${scope.row.id}`" target="_blank" class="w-68px inline-block text-center h-20px mt-8px rounded-4px border-1px border-[#1460F3] text-[#1460F3] leading-18px hover:bg-[#1460F333]">
                Purchase
              </a>
            </div>
          </template>
        </el-table-column>
        <p slot="empty">No Data Available</p>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="currentPage" :page-sizes="[5, 10, 20]" :page-size="5" :background="true"
        layout="prev, pager, next, sizes, jumper" :total="total"
        class="px-24px !rounded-0 rounded-b-8px mt-20px flex justify-end">
      </el-pagination>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.el-table__header-wrapper::v-deep .el-table__header {
  display: flex;
  width: 1100px !important;
}

.el-table__header {
  display: flex;
  width: 1100px !important;
}

.el-table::v-deep .el-table__cell {
  padding-right: 20px !important;
  padding-left: 20px !important;
}

.el-table::v-deep thead {
  color: #000 !important;
}

.el-table::v-deep .el-table__cell .wordBreak {
  word-break: normal !important;
}

.el-table::v-deep .cell {
  word-break: break-word;
}
</style>

