<template>
    <div class="row items-center flex-between q-mb-lg">
      <div></div>
      <el-input style="max-width:600px" v-model="queryObj.keyWords" placeholder="请输入关键字" class="q-pr-33" clearable
      @keyup.enter="search">
        <template #append>
          <div class="Market-select-line absolute"></div>
          <div class="row items-center pointer">
              <img src="../../assets/img/home-search.png" width="21" height="21"
              @click="search"/>
          </div>
        </template>
      </el-input>
      <el-button type="primary" size="default" style="color: #ffff;" @click="addFont">
        新增字体
      </el-button>
    </div>
    <el-table v-loading="loading" ref="dataTableRef" highlight-current-row 
    v-load-more="tableScrollHandler" :data="dataList" class="tableHBEbeef5 col" height="82vh">
      <el-table-column label="字体名称" width="240">
        <template #default="scope">
          <span :style="{'font-family':scope.row.reduceName}">{{scope.row.label}}</span>
        </template>
      </el-table-column>
      <el-table-column label="font-family" width="190">
        <template #default="scope">
          {{scope.row.fontFamily}}
        </template>
      </el-table-column>
      <el-table-column label="url">
        <template #default="scope">
          {{scope.row.fontUrl}}
        </template>
      </el-table-column>
      
      <el-table-column label="裁剪URL">
        <template #default="scope">
          {{scope.row.reduceUrl}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130">
        <template #default="scope">
          <el-button type="default" link :icon="Edit" size="small" @click.stop="editDelete(scope.row)">编辑</el-button>
          <el-button type="default" link :icon="Delete" size="small" @click.stop="editDelete(scope.row,scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑字体 -->
    <el-dialog v-model="datas.addEditVisible" :align-center="true" :show-close="true" :close-on-press-escape="false" 
    :close-on-click-modal="false" style="width: 573px;" class="small-padding" @close="close">
        <template #header>
            <div class="text-title text-center fz16 PingFangSC">{{datas.params.id?'编辑':'新增'}}字体</div>
        </template>
        <div class="addTemplateBox q-mb-lg fz14">
          <div class="row flex-end q-mb-lg">
            <el-button type="primary" size="small" style="color: #ffff;">
              <el-upload
                :on-change="(uploadFile:any, uploadFiles:any)=> uploadFontHandler(uploadFile, uploadFiles,datas.params.fontFamily)"
                action=""
                :limit="1"
                :auto-upload="false"
                accept=".ttf, .woff, otf"
                :show-file-list="false"
            >
                <template #trigger>
                  {{datas.params.id?'替换':'上传'}}字体
                </template>
              </el-upload>
            </el-button>
          </div>
          <div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
              <span class="q-pr-md shrink">名称：</span>
              <el-input min="750" v-model="datas.params.label"
              placeholder="请输入字体名称" class=""></el-input>
              <span class="q-px-md shrink">fontFamily：</span>
              <el-input min="750" v-model="datas.params.fontFamily"
              placeholder="请输入fontFamily" class=""></el-input>
          </div>
          <div class="addTemplateInput q-mt-xs q-mb-lg row items-center">
            <span class="q-pr-md shrink">URL：</span>
            <el-input min="750" type="textarea" v-model="datas.params.fontUrl"
            placeholder="请输入URL" class=""></el-input>
          </div>
          <div class="addTemplateInput q-mt-xs row items-center">
            <span class="q-pr-md shrink">裁剪URL：</span>
            <el-input min="750" type="textarea" v-model="datas.params.reduceUrl"
            placeholder="请输入裁剪字体URL" class=""></el-input>
          </div>
       </div>
        <div class="text-center">
          <el-button class="MarketIndexButtom MarketRec" type="primary" @click="ConfirmCreation"
          :loading="requestLoading">
              确认{{datas.params.id?'编辑':'新增'}}
          </el-button>
      </div>
    </el-dialog>
  </template>
    
    <script lang="ts" setup>
    import { reactive, ref, inject, onMounted, watch} from "vue";
    import { ENT_USER_THEME, VIP_USER_THEME } from "@/configs/customer";
    import { useUserStore, useFontStore } from "@/store";
    import { storeToRefs } from "pinia";
    import { USER_DEFAULT_HEADER } from '@/configs/customer'
    import { Edit,Delete } from '@element-plus/icons-vue';
    import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
    import { CustomerFonts } from '@/store/font'
    import {getFonts} from '@/utils/psdParser/index'
    import FontService from '@/services/FontService'
    import AliyunUpload from '@/utils/upload/aliyun'
    import { reduceFont } from '@/utils/fonts/convertFont'
    import FileService from '@/services/FileService'
  
    const useUser = useUserStore()
    const { userInfo } = storeToRefs(useUser)
  
    const { formatFonts } = storeToRefs(useFontStore())
  
    const userTheme = useUser.getUserTheme
    
    const vipTheme = VIP_USER_THEME
    const enTheme = ENT_USER_THEME
  
    const dataList = ref([] as Array < any > );
    const RawDataList =  ref([] as Array < any > );
    const loading = ref(false as any)
    const deleteLoading = ref<any>(null)
    const queryObj = reactive({
      pageIndex: 1,
      pageCount: 0,
      keyWords: ''
    })
    const dataTableRef = ref()
    const datas = reactive({
      requestLoading: false,
      addEditVisible: false,
      params: {
        id: 0,
        fontFamily: '',
        label: '',
        fontUrl: '',
        reduceName: '',
        reduceUrl: '',
      }
    })
  
    const fonts = ref<{fontFamily:string,uploadType:number,selectedFont?:string}[]>()
    const uploadingIndex = ref(-1)
  
    const close = () => {
      datas.params = {
        id: 0,
        fontFamily: '',
        label: '',
        fontUrl: '',
        reduceName: '',
        reduceUrl: '',
      }
    }
    const ConfirmCreation = async () => {
      //添加、编辑字体
      if(!datas.params.label)return ElMessage({
        message:'请输入名称',
        type:'error'
      })
      if(!datas.params.fontFamily)return ElMessage({
        message:'请输入fontFamily',
        type:'error'
      })
      if(!datas.params.fontUrl)return ElMessage({
        message:'请输入URL',
        type:'error'
      })
      if(!datas.params.reduceUrl)return ElMessage({
        message:'请输入裁剪URL',
        type:'error'
      })
      datas.requestLoading = true
      const result = await useFontStore().uploadFontAsync(datas.params)
      if(result){
        ElMessage({
            showClose: true,
            message: `操作${datas.params.label}成功`,
            type: 'success',
        })
        datas.addEditVisible = false
        datas.requestLoading = false
        querySearchHandler()
      }else{
          ElMessage({
              message:'字体上传失败,请重试',
              type:'error'
          })
          datas.requestLoading = false
      }
    }
    const addFont = () => {
      datas.addEditVisible = true
    }
    const editDelete = (item: Object,index: Number) => {
      if(index>=0){
        deleteFont(index,item)
      }else{
        datas.params = JSON.parse(JSON.stringify(item))
        datas.addEditVisible = true
      }
    }
  
    const deleteFont = (index: Number, item: Object) => {
      ElMessageBox.confirm(
          `此操作将删除 ${item.label} 字体，是否确定?`,
          '提示',
          {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          }
      ).then(async () => {
          try {
              deleteLoading.value = ElLoading.service({
                  lock:true,
                  text:'正在处理'
              })
              let dataRes = await FontService.RemoveTripFile(item.id)
              if (dataRes.data.resultCode == 1) {
                  ElMessage({
                      showClose: true,
                      message: `删除${item.label}成功`,
                      type: 'success',
                  })
                  search()
              }else {
                  ElMessage({
                      showClose: true,
                      message: `删除${item.label}失败`,
                      type: 'warning',
                  }) 
              }
          } catch (error) {}
          deleteLoading.value.close()
          deleteLoading.value = null
      }).catch(() => {
        deleteLoading.value.close()
        deleteLoading.value = null
      })
      
    }
  
    const uploadFontHandler = async (uploadFile:any, uploadFiles:any, fontName:string) => {
      const ns = uploadFile.name.toLowerCase().split('.')
      const n = ns[ns.length-1]
      const acceptFile = ['ttf','otf','woff']
      if(acceptFile.indexOf(n)==-1){
          ElMessage.error({
              message:`不支持此类文件上传，目前只支持${acceptFile.join(',')}等文件上传`
          })
          return;
      }
      uploadingIndex.value = dataList.value?.findIndex(x=>x.fontFamily==fontName)??-1
      try {
          let info:any = null
          try {
              info = await reduceFont(uploadFile?.raw)
          } catch (error) {
              ElMessage.error({message:'字体无法识别，请更换'})
              uploadingIndex.value=-1
              return
          }
  
          const flagIndex = dataList.value.findIndex(x=>x.label==info.name)
          if(flagIndex>0){
              ElMessage.error({message:`${info.name} 字体已存在，请选择使用已有字体`})
              uploadingIndex.value=-1
              return
          }
          let url = await FileService.uploadToFontServerAsync(uploadFile?.raw)
          if(url && url!=''){
            
              if(url.indexOf('"')!=-1) url = url.replaceAll('"','')
              let label=uploadFile.name.split('.')[0],reduceName='',reduceUrl=''
              try {
                  if(info.file){
                      label = info.name
                      reduceName = `${fontName}_reduce`
                      reduceUrl = await AliyunUpload.UploadAsync(info.file,"tripfont/"+info.file.name)
                  }
              } catch (error) { 
              }
              datas.params.label = label
              datas.params.fontFamily = fontName
              datas.params.fontUrl = url
              datas.params.reduceName = reduceName
              datas.params.reduceUrl = reduceUrl
              await ConfirmCreation()
          }else{
              ElMessage({
                  message:'上传失败，请重试',
                  type:'error'
              })
          }
      } catch (error) {
      }
  }
    const tableScrollHandler = ()=>{
      if(queryObj.pageCount>queryObj.pageIndex){
          queryObj.value.pageIndex++
          refreshHandler()
      }
    }
    const search = () => {
      queryObj.pageIndex = 1
      querySearchHandler()
    }
  
    const querySearchHandler = async () => {
      loading.value = true
      try {
          let pageRes = await FontService.GetManagerFontList();
          if (pageRes.data.resultCode == 1) {
              dataList.value = pageRes.data.data
              RawDataList.value = pageRes.data.data
          }
          loading.value = false
      } catch (error) {
          loading.value = false
      }
  }
  querySearchHandler()
    </script>
    
    <style scoped>
    .addTemplateInput span {
      width: 95px;
      text-align: right;
    }
    .user-header {
      padding: 16px 24px;
      position: relative;
      font-size: 14px;
      color:#FFF;
      z-index: 1;
      width:100%;
      overflow: hidden;
    }
    
    .user-header::after {
      position: absolute;
      top: 0;
      right: -48px;
      bottom: -12px;
      z-index: -1;
      width: 100%;
      background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713496804000_500.png') no-repeat right center / contain;
      content: "";
      transform: scale(2);
      transform-origin: right center;
    }
    .user-label{
      font-size: 12px;
      margin-bottom: 8px;
    }
    .user-card {
      width: 33%;
      min-height: 112px;
    }
    .user-card .title,
    .enter-card .title{
      font-size: 15px;
      font-weight: bold;
      color: #000;
    }
    </style>