<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
import { get } from '../../../utils/request'
import { userStore } from '@/store/userInfo'
import { productListNameMapping } from '../../../utils/mapping'

const { proxy } = getCurrentInstance()

const currentPage = ref(1)
const size = ref(5)
const tableData = ref([])
const total = ref(0)
const productList = ref([])
const code = ref('')

onMounted(() => {
  let pageText = document.getElementsByClassName('el-pagination__jump')[0]
  if (pageText) {
    pageText.childNodes[0].nodeValue = 'Jump to Page'
  }
  pagingQuery()
  getProductList()
  updateUserInfo()
})
//筛选
const searchInfo = () => {
  currentPage.value = 1
  pagingQuery()
}
//获取分页数据
const pagingQuery = () => {
  //初始化表格
  tableData.value = []
  get(
    '/pdf-tech/vppOrderDetail/pageForReseller?page=' +
      currentPage.value +
      '&' +
      'pageSize=' +
      size.value +
      '&' +
      'code=' +
      code.value
  ).then((res) => {
    const data = res.data.result.list
    for (let i = 0; i < data.length; i++) {
      if (data[i].code === 'com.brother.pdfreaderpro.mac.product_1') {
        data[i].name = 'PDF Reader Pro Mac Premium'
      } else if (data[i].code === 'com.brother.pdfreaderpro.windows.product_1'){
        data[i].name = 'PDF Reader Pro Win Premium'
      }
    }
    tableData.value = productListNameMapping(res.data.result.list)
    total.value = res.data.result.total
  })
}
//获取已购买产品
const getProductList = (val) => {
  get('/pdf-tech/product/listWithAll').then(
    (res) => {
      const data = res.data.result
      for (let i = 0; i < data.length; i++) {
        if (data[i].code === 'com.brother.pdfreaderpro.mac.product_1') {
          data[i].name = 'PDF Reader Pro Mac Premium'
        } else if (data[i].code === 'com.brother.pdfreaderpro.windows.product_1'){
          data[i].name = 'PDF Reader Pro Win Premium'
        }
      }
      productList.value = productListNameMapping(res.data.result)
    }
  )
}

const handleSizeChange = (value) => {
  size.value = value
  currentPage.value = 1
  pagingQuery()
}
const handleCurrentChange = (value) => {
  currentPage.value = value
  pagingQuery()
}
// 获取用户信息
const updateUserInfo = () => {
  get(
    '/pdf-tech/vppMember/getMemberInfo'
  ).then((res) => {
    if (res.data.code === 200 && res.data.msg == 'success') {
      userStore().setUserInfo(res.data.result)
      if(res.data.result.validFlag === '0'){
        proxy.$router.push('/login')
      }
    }
  })
}
</script>

<template>
  <div class="flex flex-col items-center">
    <div class="w-full">
      <h1 class="leading-40px">Product Management</h1>
      <div
        class="
          mt-36px
          mb-16px
          leading-20px
          text-16px
          font-bold
          flex
          justify-between
        "
      >
        <span>Content</span>
      </div>
      <div class="flex bg-[#fff] pt-32px px-24px rounded-t-8px w-full">
        <select v-model="code" class="w-230px" :class="{ '!text-[#232A40]': code !== '' }">
          <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 rounded-b-8px !w-full">
        <el-table-column prop="name" label="Product"> </el-table-column>
        <el-table-column prop="totalNumber" label="Total License Number" label-class-name="wordBreak">
        </el-table-column>
        <el-table-column prop="activatedNumber" label="Activated License Number">
        </el-table-column>
        <el-table-column prop="refundNumber" label="Refunded License Number">
        </el-table-column>
        <el-table-column prop="createdAt" label="Creation Date" min-width="100">
        </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>

