<template>
    <!-- 新增 -->
    <el-dialog :title="addEditStatus=='add' ? t('新增') : t('修改')" align-center :close-on-click-modal="false" v-model="showDialog" :width="formAll.promotionalStyle==1 ?'1900px':'700px'" append-to-body>
        <!-- <el-scrollbar max-height="900px" > -->
            <el-form ref="formRef" :model="formAll" :rules="rules" label-width="130px" class="add-form">
                <el-row :gutter="20">
                    <el-col :span="formAll.promotionalStyle==1?12:24">

                <el-form-item :label="t('版式风格')" prop="iconType">
                    <el-radio-group v-model="formAll.iconType" @change="generateImage" style="margin-bottom: 0px">
                        <el-radio-button :value="1">{{ t('方形图标') }}</el-radio-button>
                        <el-radio-button :value="2">{{ t('竖版图标') }}</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="t('平台名称')" prop="platformName">
                    <el-input v-model="formAll.platformName" disabled />
                </el-form-item>
                <el-form-item :label="t('最低准入')" prop="minAmount">
                    <number-input v-model="formAll.minAmount" ></number-input>
                </el-form-item>
                <el-form-item :label="t('平台宣传语')" prop="promotionalText">
                    <el-input v-model="formAll.promotionalText" :placeholder="t('请输入平台宣传语')" />
                </el-form-item>
                <el-form-item :label="t('平台跳转方式')" prop="iosJump">
                    <div style="width: 100%;display: flex;">
                        <div style="width: 80px;text-align: right;margin-right: 10px;">IOS:</div>
                        <el-radio-group v-model="formAll.iosJump" style="margin-bottom: 0px">
                            <el-radio :value="1">{{ t('内嵌') }}</el-radio>
                            <el-radio :value="2">{{ t('外链') }}</el-radio>
                        </el-radio-group>
                    </div>
                    <div style="width: 100%;display: flex;">
                        <div style="width: 80px;text-align: right;margin-right: 10px;">Android:</div>
                        <el-radio-group v-model="formAll.androidJump" style="margin-bottom: 0px">
                            <el-radio :value="1">{{ t('内嵌') }}</el-radio>
                            <el-radio :value="2">{{ t('外链') }}</el-radio>
                        </el-radio-group>
                    </div>
                    <div style="width: 100%;display: flex;">
                        <div style="width: 80px;text-align: right;margin-right: 10px;">H5:</div>
                        <el-radio-group v-model="formAll.h5Jump" style="margin-bottom: 0px">
                            <el-radio :value="1">{{ t('内嵌') }}</el-radio>
                            <el-radio :value="2">{{ t('外链') }}</el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>
                <el-form-item :label="t('宣传图样式')" prop="promotionalStyle">
                    <el-radio-group v-model="formAll.promotionalStyle">
                        <el-radio :value="1">{{ t('默认') }}</el-radio>
                        <el-radio :value="2">{{ t('自定义') }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div v-if="formAll.promotionalStyle == 1">
                    <el-form-item :label="t('宣传图图标')" prop="promotionalIcon">
                        <banner-icon @clickSelect="handleSelection('three',$event)" :disabled="shouwLoding" :imageUrl="formAll.promotionalIcon" :query="materialIcon" url="/game/material/group/select"></banner-icon>
                    </el-form-item>
                </div>
                <div v-if="formAll.promotionalStyle == 2">
                    <el-form-item :label="t('宣传图')" prop="customPromotionalImage">
                        <div v-if="formAll.iconType == 2" class="upload-box-vioce11">
                            <image-upload v-model="formAll.customPromotionalImage" :typeUpImg="3" :limit="1" :isShowTip="false"
                                :isdrag="true"></image-upload>
                        </div>
                        <div v-if="formAll.iconType == 1" class="upload-box-vioce22">
                            <image-upload  v-model="formAll.customPromotionalImage" :typeUpImg="3" :limit="1" :isShowTip="false"
                                :isdrag="true"></image-upload>
                        </div>
                        <div >{{ t('只能上传png文件，且不超过1MB，图片尺寸为300px * 400px') }}</div>
                    </el-form-item>
                    <el-form-item :label="t('热门图')" prop="customPopularStyle">
                        <div v-if="formAll.iconType == 2" class="upload-box-vioce11">
                            <image-upload   v-model="formAll.customPopularStyle" :typeUpImg="3" :limit="1" :isShowTip="false"
                                :isdrag="true"></image-upload>
                        </div>
                        <div v-if="formAll.iconType == 1" class="upload-box-vioce22">
                            <image-upload  v-model="formAll.customPopularStyle" :typeUpImg="3" :limit="1" :isShowTip="false"
                                :isdrag="true"></image-upload>
                        </div>
                        <div >{{ t('只能上传png文件，且不超过1MB，图片尺寸为300px * 400px') }}</div>
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="12" v-if="formAll.promotionalStyle == 1">
              
                <div v-if="formAll.promotionalStyle == 1">
              
                <el-form-item :label="t('图片背景')" prop="promotionalBackground">
                    <BannerColour  @clickSelect="handleSelection('two',$event)" :disabled="shouwLoding" :backgroundColor="formAll.promotionalBackground" :query="materialTypess" url="/game/material/group/select"></BannerColour>
                </el-form-item>
                <el-form-item v-if="formAll.promotionalStyle == 1" :label="t('品牌LOGO')" prop="platformLogo">
                    <div class="upload-box-vioce" style="border:1px solid #409eff;border-radius: 5px;width: 213px;height:90px !important;text-align: center;display: flex;justify-content: center;align-items: center;">
                        <img style="width: 100px;" :src="fileHost+formAll.platformLogo"/>
                    </div>
                </el-form-item>
                <el-form-item v-if="formAll.promotionalStyle == 2" :label="t('品牌LOGO')" prop="customPlatformLogo">
                    <div class="upload-box-vioce">
                        <image-upload v-model="formAll.customPlatformLogo" :typeUpImg="3" :limit="1" :isShowTip="false"
                        :isdrag="true"></image-upload>
                    </div>
                </el-form-item>
                <el-form-item  :label="t('宣传图预览')">
                    <div style=" position: absolute; top: -9999px; left: -9999px; visibility: hidden; ">
                    <div class="" v-if="formAll.iconType == 1" ref="captureArea" :style="`display: flex;align-items: center;justify-content: space-between;width: 400px;height: 150px;background: url(${formAll.popularStyleGb}) no-repeat;background-size: 100% 100%;`">
                        <div class="" style="width: 40%;">
                            <p style="margin: 0;text-align: center;"><img style="width: 100px;height: auto;" :src="formAll.platformLogoGb"/></p>
                            <p style="margin: 0;text-align: center;font-size: 16px;font-weight: 600;"> </p>
                        </div>
                        <div style="width: 60%;">
                            <div style="width: 260px;height: 150px;">
                                <img style="width: 100%;height: 100%;" :src="formAll.promotionalImageGb"/>
                            </div>
                        </div>
                    </div>
                    <div v-if="formAll.iconType == 2" class="" ref="captureArea" :style="`display: flex;align-items: center;justify-content: space-between;width: 210px;height: 280px;background: url(${formAll.popularStyleGb}) no-repeat;background-size: 100% 100%;`">
                        <div :style="`width: 210px; height: 280px;display: flex;align-items: center;position: relative;background: url(${formAll.promotionalImageGb});
                            background-size: cover;
                            background-position: center;
                            background-repeat: no-repeat;`">
                            <div class="" :style="`position: absolute;bottom: 0;left: 0;width: 100%;`">
                                <div style="margin: 0;text-align: center;position: relative;top: 0px;"><img style="width: 58px;height: auto;" crossorigin="anonymous" :src="formAll.platformLogoGb"/></div>
                                <div style="margin: 0;text-align: center;font-size: 16px;font-weight: 600;color: #fff;height: 35px;"> </div>
                            </div>
                        </div>
                    </div>
                </div>
                    <img :src="resolvedImageUrl" style="border-radius: 5px;" alt="Generated Image" />
                </el-form-item>
                <el-form-item  :label="t('热门图预览')">
                    <div style="position: absolute; top: -8999px; left: -8999px; visibility: hidden;">
                    <div class="" v-if="formAll.iconType == 1" ref="captureAreaPop" :style="`display: flex;align-items: center;justify-content: space-between;width: 400px;height: 150px;background: url(${formAll.popularStyleGb}) no-repeat;background-size: 100% 100%;`">
                        <div class="" style="width: 40%;">
                            <p style="margin: 0;text-align: center;"><img style="width: 100px;height: auto;" :src="formAll.platformLogoGb"/></p>
                            <p style="margin: 0;text-align: center;font-size: 16px;font-weight: 600;"> </p>
                        </div>
                        <div style="width: 60%;">
                            <div style="width: 260px;height: 150px;">
                                <img style="width: 100%;height: 100%;" :src="formAll.promotionalImageGb"/>
                            </div>
                        </div>
                    </div>
                    <div v-if="formAll.iconType == 2" class="" ref="captureAreaPop" :style="`display: flex;align-items: center;justify-content: space-between;width: 210px;height: 280px;background: url(${formAll.popularStyleGb}) no-repeat;background-size: 100% 100%;`">
                        <div :style="`width: 210px; height: 245px;display: flex;align-items: center;margin-top:35px; position: relative;background: url(${formAll.promotionalImageGb});
                            background-size: cover;
                            background-position: center;
                            background-repeat: no-repeat;`">
                            <div class="" :style="`position: absolute;top: -40px;left: 0;width: 100%;`">
                                <div style="margin: 0;text-align: center;"><img style="width: 70px;height: auto;" crossorigin="anonymous" :src="formAll.platformLogoGb"/></div>
                            </div>
                            <div class="" :style="`position: absolute;height:80px;bottom: 0;left: 0;width: 100%;`">
                                <div style="margin: 0;text-align: center;font-size: 16px;font-weight: 600;color: #fff;margin-top: 45px;height: 35px;">  </div>
                            </div>
                        </div>
                    </div>
                </div>
                    <img :src="resolvedPopularStyle" style="border-radius: 5px;" alt="Generated Image" />
                </el-form-item>
               </div>
            </el-col>
        </el-row>
              
            </el-form>
        <!-- </el-scrollbar> -->
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm" :loading="loadingButton">{{ t('确 定') }}</el-button>
                <el-button @click="closeDialog">{{ t('取 消') }}</el-button>
            </div>
        </template>
        
    </el-dialog>
</template>
<script setup>
import {  formatTime,finalTimestamp } from '@/utils/ruoyi'; // 时间格式化
import ImageUpload from "@/components/ImageUpload";
import NumberInput from "@/components/NumberInput";
import { updatePlatform } from "@/api/game/platform";
import BannerColour from "@/components/BannerColour"; // Banner图颜色
import BannerIcon from "@/components/BannerIcon"; // Banner图标
import { getToken } from '@/utils/auth'
import { nextTick, onMounted, ref } from "vue"; // 获取当前实例
import { getLocalStorage } from "@/utils/auth";
const fileHost = getLocalStorage('fileUrl') || '';    // 文件host

import html2canvas from 'html2canvas';
const uploadUrl = getLocalStorage('uploadUrl');
const uploadImgUrl = ref(uploadUrl + "/file/upload/localSysFile/3"); // 上传的图片服务器地址
const loadingButton = ref(false);
const oldForm = shallowRef({  });
const langList = getLocalStorage('langList')?.filter(v => v.langType == 1 && v.langStatus).map(item => {
    return {
        label: item.name,
        value: item.id
    };
});   // 语种选项
const { proxy } = getCurrentInstance() // 获取当前实例
const emits = defineEmits(['submit', 'update:show']) // 自定义事件
const props = defineProps({ // 父组件向子组件传值
    data: {
        type: Object, // 父组件传值
        default: {}
    },
    show: {
        type: Boolean, // 显示
        default: false
    },
    addEditStatus:{ // 添加/修改
        type: String,
        default: 'add'
    },
    modifyDate: {  //修改数据
        type: Object,
        default: {}
    }
})
const materialIcon = ref({ //图标请求参数
    materialTypes:'2'
});
const materialTypess = ref({ //颜色请求参数
    materialTypes:'1'
});
const showDialog = computed({ //弹窗显示控制
    get() {
        return props.show
    },
    set(value) {
        emits('update:show', value)
    }
})

const activeNameLang = ref(0);//语言切换选中

const langOptionAll = ref([]); // 语言tabs切换的数据
const formAll = reactive({
    iconType:1, // 平台类型 1:方形图标 2:竖版图标
})
const loadImageAsBase64 = async(url)=> {
  const res = await fetch(uploadUrl+url, { mode: 'cors' })
  const blob = await res.blob()
  return await new Promise((resolve) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.readAsDataURL(blob)
  })
}

// 修改时数据更新相关内容
nextTick(async () => {
    if (props.addEditStatus != 'edit') return;
    Object.assign(formAll, props.modifyDate)
    formAll.id = props.modifyDate.id;
    formAll.iconType = props.modifyDate.iconType|| 1;
    formAll.platformName = props.modifyDate.platformName;
    formAll.minAmount = props.modifyDate.minAmount;
    if (props.modifyDate.promotionalStyle == 1){
        formAll.promotionalImage = props.modifyDate.promotionalImage;
        formAll.platformLogoGb = await loadImageAsBase64(props.modifyDate.platformLogo);
        formAll.popularStyleGb = await loadImageAsBase64(props.modifyDate.promotionalBackground);
        formAll.promotionalImageGb = await loadImageAsBase64(props.modifyDate.promotionalIcon);
        formAll.popularStyle =  props.modifyDate.popularStyle;
    }
    formAll.promotionalStyle = props.modifyDate.promotionalStyle;
    setTimeout(() => {
        let objForm =  { ...formAll }
        oldForm.value = JSON.stringify(objForm);
    }, 500); 
});
const captureArea = ref(null);
const captureAreaPop = ref(null);
// 加入图片加载检测
const waitForImagesLoaded = async (container) => {
  const imgs = container.querySelectorAll('img');
  await Promise.all([...imgs].map(img => {
    return new Promise(resolve => {
      if (img.complete) return resolve();
      img.onload = img.onerror = () => resolve();
    });
  }));
};
const shouwLoding = ref(false);
const generateImage = async () => {
    shouwLoding.value = true;
  const el = captureArea.value;
  const el2 = captureAreaPop.value;
  if (!el || !el2) return;

  el.style.visibility = 'visible';
  el2.style.visibility = 'visible';

  await nextTick();
  await waitForImagesLoaded(el);
  await waitForImagesLoaded(el2);
  await new Promise(resolve => setTimeout(resolve, 100));

  const canvas = await html2canvas(el, {
    useCORS: true,
    backgroundColor: '#fff'
  });
  formAll.promotionalImage = canvas.toDataURL('image/png');

  await new Promise(resolve => setTimeout(resolve, 100)); // 控制节奏
  const canvas2 = await html2canvas(el2, {
    useCORS: true,
    backgroundColor: '#fff'
  });
  formAll.popularStyle = canvas2.toDataURL('image/png');
  shouwLoding.value = false;
  el.style.visibility = 'hidden';
  el2.style.visibility = 'hidden';
};


//表单验证规则
const rules = reactive({
    promotionalStyle: [
        { required: true, message: proxy.t('请选择icon图样式'), trigger: 'change' }, 
    ],
    minAmount: [
        { required: true, message: proxy.t('请输入最小投注金额'), trigger: 'change' }, 
    ]
})
// 关闭弹窗
const closeDialog = () => {
    showDialog.value = false
}
const resolvedImageUrl = computed(() => {
  const url = formAll.promotionalImage
  if (!url) return ''
  
  if (url.startsWith('data:image/')) {
    return url // base64 图片
  }

  if (url.startsWith('http://') || url.startsWith('https://')) {
    return url // 完整 URL，不加 fileHost
  }

  return fileHost + url // 相对路径，加上 fileHost
})
const resolvedPopularStyle = computed(() => {
  const url = formAll.popularStyle
  if (!url) return ''
  
  if (url.startsWith('data:image/')) {
    return url // base64 图片
  }

  if (url.startsWith('http://') || url.startsWith('https://')) {
    return url // 完整 URL，不加 fileHost
  }

  return fileHost + url // 相对路径，加上 fileHost
})

const getColorFromUrl = (url) => {
  // 匹配最后一个斜杠后的颜色字符串，不带扩展名
  const match = url.match(/\/([^\/]+)\.png$/)
  if (match && match[1]) {
    return `#${match[1]}`  // 加上 #
  }
  return null
}
const colorGb = ref('');
const isShow = ref(true); // 是否显示
// 处理选中排版、颜色、图标和图片上传后的数据更新
const handleSelection = async(type, en) => {
    switch (type) {
        case 'two':
            isShow.value = false;
            const color = getColorFromUrl(en.url);
            colorGb.value = color;
            if (formAll.promotionalBackground == en.url){
                return
            }
            formAll.popularStyleGb = await loadImageAsBase64(en.url);
            formAll.promotionalBackground = en.url;
            nextTick(() => {
                isShow.value = true;
                generateImage();
            });
            break;
        case 'three':
            isShow.value = false;
            if (formAll.promotionalIcon == en.url){
                return
            }
            formAll.promotionalImageGb = await loadImageAsBase64(en.url);
            formAll.promotionalIcon = en.url;
            nextTick(() => {
                isShow.value = true;
                generateImage();
            });
            break;
        default:
            break;
    }
};
function base64ToFile(base64, filename = 'image.png') {
  const arr = base64.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], filename, { type: mime })
}
const uploadBase64Image = async(base64) =>{
    if (!/^data:image\/(png|jpeg|jpg|gif|bmp);base64,/.test(base64)) {
        // 不是 Base64，说明已经是 URL，直接返回
        return { url: base64 };
    }
  const file = base64ToFile(base64, 'upload.png')
  const formData = new FormData()
  formData.append('file', file)
  const res = await fetch(uploadImgUrl.value, {
    method: 'POST',
    headers: {
        Authorization: 'Bearer ' + getToken(),
    },
    body: formData
  })

  return await res.json()
}
// 提交
const formRef = ref(null)

// 提交修改和新增数据表单
const submitForm = async() => {
    // 验证表单
    formRef.value.validate(async(valid) => {
        if (valid) {
            loadingButton.value = true;
            let promotionalImages =  await uploadBase64Image(formAll.promotionalImage)
            let popularStyles =  await uploadBase64Image(formAll.popularStyle)

            // 初始化表单数据
            let formData = {
                ...formAll,
                promotionalImage:promotionalImages.url,
               popularStyle:popularStyles.url,
            };
            delete formData.platformLogoGb;
            delete formData.popularStyleGb;
            delete formData.promotionalImageGb;
            if (JSON.stringify(formAll) != oldForm.value) {
            updatePlatform(formData).then(res => {
                loadingButton.value = false;
                proxy.$modal.msgSuccess(proxy.t('修改成功！'));
                emits('submit');
                closeDialog();
            }).catch(error => {
                loadingButton.value = false;
            });
        }else{
            loadingButton.value = false;
            closeDialog();
        }
        }
    });
};


</script>
<style scope lang="scss">
.w100 {
    width: 100%;
}

.upload-box-vioce{
    height: 90px !important;
    overflow: hidden;
   .upload-tips {
      color: #999;
      font-size: 12px;
      line-height: 1.5;
      padding-left: 10px;
   }
   .component-upload-image .el-upload--picture-card {
        width: 180px !important;
        height: 90px !important;
    }
    .el-upload-list--picture-card .el-upload-list__item {
        width: 180px!important;
        height: 90px!important;
    }
   :deep(.el-upload-list) {
      width:180px!important;
      height: 90px!important;
      .el-upload,
      .el-upload-list--picture-card .el-upload-list__item {
         width: 180px!important;
         height: 90px!important;
      }

      .el-upload-list__item {
         margin: 0;
         border: none;
         width: 180px!important;
         height: 90px!important;
      }

   }
}

.upload-box-vioce11{
    height: 400px !important;
    overflow: hidden;
   .upload-tips {
      color: #999;
      font-size: 12px;
      line-height: 1.5;
      padding-left: 10px;
   }
   .component-upload-image .el-upload--picture-card {
        width: 300px !important;
        height: 400px !important;
    }
    .el-upload-list--picture-card .el-upload-list__item {
        width: 300px!important;
        height: 400px!important;
    }
   :deep(.el-upload-list) {
      width:300px!important;
      height: 400px!important;
      .el-upload,
      .el-upload-list--picture-card .el-upload-list__item {
         width: 300px!important;
         height: 400px!important;
      }

      .el-upload-list__item {
         margin: 0;
         border: none;
         width: 300px!important;
         height: 400px!important;
      }

   }
}

.upload-box-vioce22{
    height: 200px !important;
    overflow: hidden;
   .upload-tips {
      color: #999;
      font-size: 12px;
      line-height: 1.5;
      padding-left: 10px;
   }
   .component-upload-image .el-upload--picture-card {
        width: 400px !important;
        height: 200px !important;
    }
    .el-upload-list--picture-card .el-upload-list__item {
        width: 400px!important;
        height: 200px!important;
    }
   :deep(.el-upload-list) {
      width:400px!important;
      height: 200px!important;
      .el-upload,
      .el-upload-list--picture-card .el-upload-list__item {
         width: 400px!important;
         height: 200px!important;
      }

      .el-upload-list__item {
         margin: 0;
         border: none;
         width: 400px!important;
         height: 200px!important;
      }

   }
}
.disable-click {
    pointer-events: none;
}
</style>