<template>
    <!-- 推荐尺寸 -->
    <el-dialog v-model="props.addTem" :align-center="true" :show-close="true" :close-on-press-escape="false" 
    :close-on-click-modal="false" style="width: 373px;" class="small-padding" @close="close">
        <template #header>
            <div class="text-title text-center fz16 PingFangSC">创建设计</div>
        </template>
        <div class="addTemplateBox fz14" style="padding: 0 70px;">
            <div class="q-mt-xs q-mb-lg col row flex-between">
                <template v-for="(item,index) in typeArr">
                    <div class="MarketButton cursor-pointer" style="margin-right: 0;"
                        v-if="item.type>0"
                        :class="[setTemplateType == item.type?'active':'']" :key="index"
                        @click="onTypeChangeHandler(item.type,2)">
                            {{item.typeName}}
                    </div>
                </template>
            </div>
        </div>
        <div class="addTemplateBox fz14">
            <div class="color0 q-mb-lg text-left">推荐尺寸</div>
            <div class="q-mt-xs">
                <div v-for="(item,index) in RecommendedSizes">
                    <div v-if="setTemplateType==1&&item.type" class="row addTemplateBoxRec rounded6 cursor-pointer"
                    :class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'active':'']" @click="Recommended(item)">
                        <span class="color0"
                        :class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'colorF':'color0']">{{item.Name}}</span>
                        <p class="q-pl-md"
                        :class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'colorF':'colorBA']">
                            <span class="q-ml-xs">{{item.width}} * {{item.height}} px</span>
                        </p>
                    </div>
                    <div v-if="setTemplateType==2&&!item.type" class="row addTemplateBoxRec rounded6 cursor-pointer"
                    :class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'active':'']" @click="Recommended(item)">
                        <span class="color0"
                        :class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'colorF':'color0']">{{item.Name}}</span>
                        <p class="q-pl-md"
                        :class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'colorF':'colorBA']">
                            <span class="q-ml-xs">{{item.width}} * {{item.height}} px</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="addTemplateBox fz14" v-if="setTemplateType==2">
            <div class="color0 text-left q-pb-lg">自义定尺寸</div>
            <div class="addTemplateInput q-mt-xs  row items-center">
                <el-input type="number" min="750" v-model="datas.CustomSize.width"
                placeholder="宽" class="input-with-select" @change="setDimension"></el-input>
                <span class="q-px-md">*</span>
                <el-input type="number" min="383" v-model="datas.CustomSize.height"
                placeholder="高" class="input-with-select" @change="setDimension"></el-input>
                <span class="q-ml-md">px</span>
            </div>
        </div>
        <div class="text-center">
            <el-button class="MarketIndexButtom MarketRec" type="primary" @click="ConfirmCreation">
                确认创建
            </el-button>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, inject, onMounted, watch} from "vue";
import LineService from '@/services/LineService'
import ConfigService from '@/services/ConfigService'
import { useUserStore } from "@/store/user";
import { useSellTemplateStore,useSlidesStore } from '@/store'
import { useScreenStore } from "@/store/screen";
import { storeToRefs } from "pinia";
import { injectKeyTemplate } from '@/types/injectKey'
import { createOpEditorLink, createSaleCreateLink, managerTemplateLink } from '@/utils/common'
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import UserCard from "@/components/User/UserCard.vue";
import { Delete,View } from '@element-plus/icons-vue';
import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
import foote from '@/components/footer/index.vue';

import { noDataImg } from "@/utils/common";

const {
    userInfo
} = storeToRefs(useUserStore())
const slidesStore = useSlidesStore()
const router = useRouter();
const typeArr = ref([] as Array < any > ); //类型
const layouts = ref([
    {Name: '不限',Id:0},
    {Name: '横版',Id:1},
    {Name: '竖版',Id:2},
])
const marketRef = ref<any>()
const RecommendedSizes = ref([
    {Name: '手机海报',width:750,height:1334,Id:1,checked:false},
    {Name: '小红书配图',width:1242,height:1660,Id:2,checked:false},
    {Name: '公众号首图',width:900,height:383,Id:3,checked:false},
    {Name: 'PPT(16:9)',width:1754,height:1240,Id:4,checked:false,type:1},
    {Name: 'PPT(9:16)',width:1240,height:1754,Id:5,checked:false,type:1},
])
const scrollContainer = ref<any>()
const scrollToElement = ref<any>()


const loading = ref(false as any)
const searchData = ref({} as any)
searchData.value = inject(injectKeyTemplate)
const marketStore = useScreenStore()
const { market, ConfigId} = storeToRefs(useScreenStore())

const SalesEditorStore = useSellTemplateStore()
const { SalesEditor, SalesBack } = storeToRefs(useSellTemplateStore())
const personVisible = ref(false)

const model = ref(2)
const showCurrentTemplate = ref<any>()
const imgList = ref<any>()
const deleteLoading = ref<any>(null)
const datas = reactive({
    TemplateBoxRec: null,// 推荐尺寸
    DetailsVisible: false,
    loading: false,
    ColorValue: '',
    scrollTop: 0,
    moreList:[
        {icon: require("@/assets/img/homeMore0.png"),Name:'添加到桌面'},
        {icon: require("@/assets/img/homeMore1.png"),Name:'关注公众号'},
        {icon: require("@/assets/img/homeMore2.png"),Name:'我的订单'},
        {icon: require("@/assets/img/homeMore3.png"),Name:'意见反馈'},
    ],
    CustomSize:{ // 自定义尺寸
        width: null,
        height: null,
    },
    SwitchingDiagram: [
        require("@/assets/img/left.png"),
        require("@/assets/img/leftActive.png"),
        require("@/assets/img/right.png"),
        require("@/assets/img/rightActive.png"),
    ],
    currentImg: 0,// 当前查看img
})


const setTemplateType = ref(1)
if(router.currentRoute.value.path.includes('create')) {
    if(router.currentRoute.value.fullPath.indexOf('/ad')!=-1) setTemplateType.value = 2
    else if(router.currentRoute.value.fullPath.indexOf('/trip')!=-1) setTemplateType.value = 1
}
//类型
for(let i=0;i<3;i++){
    let text = '所有模版'
    if(i==1) text = '行程'
    if(i==2) text = '广告'
    typeArr.value.push({
        type:i,
        typeName:text
    })
}
const props = defineProps({
    addTem:{
        type: Boolean,
        default: false,
    },
})
const emit = defineEmits<{
    (event: 'close'): void,
    (event:'OK'): void,
}>()

const close = () => {
    emit('close')
}

const setDimension = () => {
    datas.TemplateBoxRec = null
}
const Recommended = (row:Object) => {
    datas.TemplateBoxRec = row
    datas.CustomSize.width = null
    datas.CustomSize.height = null
}
const ConfirmCreation = () => {
    if(setTemplateType.value==1&&!datas.TemplateBoxRec) {
        return ElMessage.warning({
            showClose: true,
            message: `请选择推荐尺寸`,
        })
    }
    if(setTemplateType.value==2&&!datas.TemplateBoxRec&&!datas.CustomSize.width&&!datas.CustomSize.height) {
        return ElMessage.warning({
            showClose: true,
            message: `请选择推荐尺寸或自定义尺寸`,
        })
    }
    if(setTemplateType.value==2&&!datas.TemplateBoxRec&&
    ((datas.CustomSize.width&&!datas.CustomSize.height)
    ||(!datas.CustomSize.width&&datas.CustomSize.height))){
        if(!datas.width){
            return ElMessage.warning({
                showClose: true,
                message: `请输入自定义宽`,
            })
        }
        if(!datas.height){
            return ElMessage.warning({
                showClose: true,
                message: `请输入自定义高`,
            })
        }
    }
    let viewportRatios = 0
    if(datas.TemplateBoxRec&&datas.TemplateBoxRec.Id){
        VIEWPORT_SIZE.value = datas.TemplateBoxRec.width
        VIEWPORT_VER_SIZE.value = datas.TemplateBoxRec.height
        
        
        if(datas.TemplateBoxRec.Id==4||datas.TemplateBoxRec.Id==5) {
            viewportRatios = datas.TemplateBoxRec.Id==4? 0.7069 : 1.414
            slidesStore.setViewportRatio(viewportRatios)
            datas.TemplateBoxRec = null
            addTemplate(1)
        }else {
            viewportRatios = datas.TemplateBoxRec.height/datas.TemplateBoxRec.width
            slidesStore.setViewportRatio(viewportRatios)
            datas.TemplateBoxRec = null
            addTemplate(2)
        }
    }else{
        VIEWPORT_SIZE.value = datas.CustomSize.width
        VIEWPORT_VER_SIZE.value = datas.CustomSize.height
        viewportRatios = datas.CustomSize.height/datas.CustomSize.width
        slidesStore.setViewportRatio(viewportRatios)
        datas.CustomSize.width = null
        datas.CustomSize.height = null
        addTemplate(2)
    }
}

const addTemplate = (type:number) =>{
    let list = [
      {
        id: 'test-slide-1',
        pageType: setTemplateType.value!=2?1:0,
        elements: [],
        background: {
          type: 'solid',
          color: '#ffffff',
        },
      }
    ]
    let Title = '模版名称'
    if(setTemplateType.value==2) Title = '广告名称'
    slidesStore.setTitle(Title)
    slidesStore.setSlides(list)
    router.push({
        path:`/create_template/${type}`
    })
}
//类型切换
const onTypeChangeHandler = (Type: string) => {
    setTemplateType.value = Type
}


</script>

<style lang="scss" scoped>
 @font-face {
        font-family: "aliMarketfont";
        font-weight: 400;
        src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/285OveHVCHM7.woff2") format("woff2"),
            url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff");
        font-display: swap;
    }
    .addTemplateInput {
        ::v-deep(.el-input__wrapper){
            background-color: #EFEFEF;
            box-shadow: 0 0 0
        }
    }
    .MarketRec{
        margin-top: 23px;
        margin-bottom: 24px;
    }
    .addTemplateBoxRec.active{
        background: #FF674D;
    }
    .addTemplateBoxRec{
        line-height: 36px;
        background: #EFEFEF;
        padding: 0 15px;
        margin-bottom: 17px;
    }
    .addTemplateBox{
        padding: 0 41px;
    }
    .MarketButton{
        width: 90px;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        text-align: center;
        color: #9EA2B3;
        position: relative;
        margin-right: 13px;
    }
    .MarketButton.active{
        background: #F4F7FE;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        color: #1C1C1C;
    }
    .MarketButton.active::after{
        content: "";
        position: absolute;
        left: 35.5px;
        bottom: 0;
        width: 19px;
        height: 4px;
        background: linear-gradient(134deg, #649DED, #570AD8);
    }
    .input-with-select{
        height: 46px;
    }
    .aliMarketfont {
        font-family: aliMarketfont;
    }
    .MarketIndexButtom{
        color: #ffff;
        width: 86px;
        height: 36px;
        letter-spacing: 1px;
        font-size: 14px !important;
        border-radius: 6px;
    }
</style>