<template> 
    <div class="q-mt-xs bg-white q-pa-xs rounded ElementTemplateData">
        <div class="column text-mdall">
            <div class="column">
                <template v-if="CoverImg">
                    <p>封面图：</p>
                    <div
                    class="origin-image q-mt-md"
                    :style="{ backgroundImage: `url(${CoverImg})` }"
                    ></div>
                </template>
                <div class="row">
                    <Button v-loading="isCoverImg" style="flex: 1;" @click="setDialogForExport('image')">
                        <span class="Required" v-if="!CoverImg">*</span>
                        {{CoverImg?'重新生成封面图':'生成封面图'}}
                    </Button>
                </div>
            </div>
            <div class="row q-mt-md">
                <Button style="flex: 1;" @click="AllDataSource()">
                    <!-- <span class="Required">*</span> -->
                    数据源
                </Button>
            </div>
            <p class="q-mt-md"><span class="Required q-mr-md">*</span>页面类型：</p>
            <div class="row wrap q-mt-md">
                <el-select v-model="datas.DataSource.pageType" class="m-2" 
                    placeholder="请页面类型" @change="getPageType()">
                        <el-option
                            v-for="item in TemplateType"
                            :key="item.FiledType"
                            :label="item.Name"
                            :value="item.FiledType"
                        />
                </el-select>
            </div>

            <p class="q-mt-md"><span class="Required q-mr-md">*</span>模版名称：</p>
            <div class="row wrap q-mt-md">
                <el-input v-model="queryObj.Title" placeholder="输入模板名称" class="input-with-select"></el-input>
            </div>
            <p class="q-mt-md"><span class="Required q-mr-md">*</span>国家：</p>
            <div class="row wrap q-mt-md">
                <el-select v-model="queryObj.CountryName" class="m-2" placeholder="请选择国家">
                        <el-option
                            v-for="item in dispositionObj.CountryList"
                            :key="item.CountryValue"
                            :label="item.CountryName"
                            :value="item.CountryValue"
                        />
                </el-select>
            </div>
            <p class="q-mt-md"><span class="Required q-mr-md">*</span>选择线路：</p>
            <div class="row wrap q-mt-md">
                <el-select v-model="queryObj.LineId" class="m-2" 
                    filterable placeholder="请选择线路"
                    @change="onLineChangeHandler(1)">
                        <el-option
                            v-for="item in lines"
                            :key="item.LineID"
                            :label="item.LineName"
                            :value="item.LineID"
                        />
                </el-select>
            </div>
            <template v-if="Series.length>0">
                <p class="q-mt-md"><span class="Required q-mr-md"></span>选择系列：</p>
                <div class="row wrap q-mt-md">
                    <el-select v-model="queryObj.LtId" class="m-2" 
                    filterable placeholder="请选择系列">
                            <el-option
                                v-for="item in Series"
                                :key="item.LtID"
                                :label="item.LtName"
                                :value="item.LtID"
                            />
                    </el-select>
                </div>
            </template>
            <p class="q-mt-md"><span class="Required q-mr-md"></span>标签：</p>
            <div class="row wrap q-mt-md">
                <el-tag
                    v-for="tag in dynamicTags"
                    :key="tag"
                    class="mx-1 q-mr-md q-mb-md"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)">
                    {{ tag }}
                </el-tag>
                <el-input
                    v-if="inputVisible"
                    ref="InputRef"
                    v-model="inputValue"
                    class="ml-1 w-20"
                    size="small"
                    @keyup.enter="handleInputConfirm"
                    @blur="handleInputConfirm"
                />
                <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
                    + 添加标签
                </el-button>
            </div>
            <p class="q-mt-md"><span class="Required q-mr-md"></span>选择颜色：</p>
            <div class="row wrap q-mt-md">
                <el-select v-model="queryObj.ColorStr" class="m-2" placeholder="请选择颜色"
                @change="setCountryValue">
                        <el-option
                            v-for="item in dispositionObj.ColorList"
                            :key="item.ColorValue"
                            :label="item.ColorName"
                            :value="item.ColorValue"
                        />
                </el-select>
            </div>
            <p class="q-mt-md"><span class="Required q-mr-md">*</span>选择季节：</p>
            <div class="row wrap q-mt-md">
                <el-select v-model="queryObj.SeasonName" class="m-2" placeholder="请选择季节">
                        <el-option
                            v-for="item in dispositionObj.SeasonList"
                            :key="item.SeasonValue"
                            :label="item.SeasonName"
                            :value="item.SeasonValue"
                        />
                </el-select>
            </div>
        </div>
    </div>

    <!-- 生成封面图 -->
    <div style="opacity: 0;position: absolute;left: 100px;top: 0;bottom: 0;z-index: -1;" 
    v-if="isCoverImg">
        <div class="export-img-dialog">
          <div class="thumbnails-view">
            <div class="thumbnails" ref="FeatureImgRef">
              <ThumbnailSlide 
                class="thumbnail" 
                :key="slides[slideIndex].id" 
                :slide="slides[slideIndex]" 
                :size="viewportRatio==0.7069?1754:1240" 
              />
            </div>
          </div>
        </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  
  import { computed, ref, reactive, watch, inject, nextTick } from 'vue'
  import { storeToRefs } from 'pinia'
  import { ElInput } from 'element-plus'
  import { useMainStore, useSlidesStore, useScreenStore } from '@/store'
  import LineService from '@/services/LineService'
  import ConfigService from '@/services/ConfigService'
  import { injectKeyDataSource } from '@/types/injectKey'
  import { getHtmlPlainText } from '@/utils/common'
  import useExport from '@/hooks/useExport'
  import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'

    const datas = reactive({
        DataSource:{},
        CountryValue: null,
    })
    const dispositionObj = ref({} as any)
    const queryObj = ref({} as any)
    datas.DataSource = inject(injectKeyDataSource)
    queryObj.value = inject(injectKeyDataSource).queryObj
    const lines = ref([] as Array < any > ) //线路
    const Series = ref([] as Array < any > ) //系列

    const cursors = [] as Array<any>

    const inputValue = ref('')
    const dynamicTags = ref([])
    const inputVisible = ref(false)
    const InputRef = ref<InstanceType<typeof ElInput>>()
    if(queryObj.value.TagJsonStr!=''){
        dynamicTags.value = queryObj.value.TagJsonStr.split(',')
    }
   
    const slidesStore = useSlidesStore()
    const { slides, slideIndex, viewportRatio } = storeToRefs(slidesStore)

    const isCoverImgStore = useScreenStore()
    const { model, ConfigId, TemplateDataSource, TemplateType, CoverImg, isCoverImg } = storeToRefs(useScreenStore())

    const mainStore = useMainStore()
    const mainMenuVisible = ref(false)

    const FeatureImgRef = ref(null)
    const { exportImage } = useExport()

    watch(() => datas.DataSource.pageType, (n,o) => {
        
    })


    const getPageType = () => {
        let TemplateList = TemplateDataSource.value.filter(x=>{
            return x.FiledType==datas.DataSource.pageType
        })
        const newSlides = slides.value
        newSlides.forEach((slide,indexs)=>{
            if(slideIndex.value==indexs){
                slide.pageType = datas.DataSource.pageType
                datas.DataSource.DataSourceList = []
                slide.elements.forEach(item=>{
                    if(item.type=="text"||item.type=="image") {
                        item.TemplateList = JSON.parse(JSON.stringify(TemplateList))
                        item.TemplateDataSource = {
                            Content: '',
                            Name: '',
                            Id: null,
                        }
                        if(datas.DataSource.pageType!=1){
                            let index = item.TemplateDataSource&&item.TemplateDataSource.index>=0?item.TemplateDataSource.index:null as Number
                            Reflect.set(item.TemplateDataSource, 'index', index)
                        }
                        let contentStr
                        if(item.type=="text") contentStr = getHtmlPlainText(item.content)
                        if(item.type=="image") contentStr = item.src
                    
                        let Obj = {}
                        Obj = {
                            ...item,
                            contentStr: contentStr,
                            TemplateList: TemplateList,
                            TemplateDataSource: {
                                Content: item.TemplateDataSource&&item.TemplateDataSource.Content?item.TemplateDataSource.Content:'',
                                Name: item.TemplateDataSource&&item.TemplateDataSource.Name?item.TemplateDataSource.Name:'',
                                Id: item.TemplateDataSource&&item.TemplateDataSource.Id?item.TemplateDataSource.Id:null as Number,
                                index: item.TemplateDataSource&&item.TemplateDataSource.index>=0?item.TemplateDataSource.index:null as Number,
                            }
                        }
                        if(Obj) datas.DataSource.DataSourceList.push(Obj)
                    }
                })
                
            }
        })
        slidesStore.setSlides(JSON.parse(JSON.stringify(newSlides)))
    }
    const showInput = () => {
        inputVisible.value = true
        nextTick(() => {
            InputRef.value.input.focus()
        })
    }

    const handleClose = (tag: string) => {
        dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
        queryObj.value.TagJsonStr = dynamicTags.value.join(',')
    }

    const handleInputConfirm = () => {
        if (inputValue.value) {
            dynamicTags.value.push(inputValue.value)
        }
        queryObj.value.TagJsonStr = dynamicTags.value.join(',')
        inputVisible.value = false
        inputValue.value = ''
    }

    const setDialogForExport = (type: DialogForExportTypes) => {
        // mainStore.setDialogForExport(type)
        mainMenuVisible.value = false
        isCoverImgStore.setIsCoverImg(true)
        setTimeout(()=>{
            exportImage(FeatureImgRef.value, 'png', 1, false)
        },300)
    }

    const setCountryValue = () =>{
        let obj = dispositionObj.value.ColorList.find(x=>{
            return x.ColorValue == queryObj.value.ColorStr
        })
        queryObj.value.ColorName = obj.ColorName
    }

    let pageObj = slides.value.find((slide,indexs) => {
            return slideIndex.value==indexs
    })
    
    // 所有数据源
    const AllDataSource = () => {
        getPageType()
        datas.DataSource.DataSourceOverlay = !datas.DataSource.DataSourceOverlay
        return
        if(slides.value.elements&&slides.value.elements.length==0){
            return ElMessage({
                showClose: true,
                message: '请完善PDF内容填充',
                type: 'warning',
            })
        }
        // 绑定数据源
        const newElements = slides.value.find((slide,indexs) => {
            return slideIndex.value==indexs
        })
        datas.DataSource.DataSourceOverlay = !datas.DataSource.DataSourceOverlay
        let TemplateList = TemplateDataSource.value.filter(x=>{
            return x.FiledType==newElements.pageType
        })
        datas.DataSource.DataSourceList = []
        newElements.elements.forEach(slide=>{
            if(slide.type=="text"||slide.type=="image") {
                let contentStr
                if(slide.type=="text") contentStr = getHtmlPlainText(slide.content)
                if(slide.type=="image") contentStr = slide.src
                let Obj = {}
                Obj = {
                    ...slide,
                    contentStr: contentStr,
                    TemplateList: TemplateList,
                    TemplateDataSource: {
                        Content: slide.TemplateDataSource&&slide.TemplateDataSource.Content?slide.TemplateDataSource.Content:'',
                        Name: slide.TemplateDataSource&&slide.TemplateDataSource.Name?slide.TemplateDataSource.Name:'',
                        Id: slide.TemplateDataSource&&slide.TemplateDataSource.Id?slide.TemplateDataSource.Id:null as Number,
                    },
                }
                if(newElements.pageType!=1){
                    let index = slide.TemplateDataSource&&slide.TemplateDataSource.index>=0?slide.TemplateDataSource.index:null as Number
                    Reflect.set(Obj.TemplateDataSource, 'index', index)
                }
                if(Obj){
                    datas.DataSource.DataSourceList.push(Obj)
                }
            }
        })
    }


    /**
     * 获取线路列表
     */
     const getLinesHandler = async () => {
        try {
            let response = await LineService.GetLineListAsync()
            if (response.data.resultCode == 1) {
                lines.value = response.data.data;
                onLineChangeHandler()
            }
        } catch (error) {
            console.log("GetLineListAsync", error);
        }
    }

    /**
     * 获取系列列表
     */
    const onLineChangeHandler = async (type) =>{
        let obj = lines.value.find(x=>{
            return x.LineID == queryObj.value.LineId
        })
        if(type){
            queryObj.value.LtId = null
        }
        if(obj&&obj.LineName) queryObj.value.LineName = obj.LineName
        try {
            let queryMsg = {
                lineID: queryObj.value.LineId,
                placeID: 0,
                isTOOP: 1
            }
            let response = await LineService.GetSeriesListAsync(queryMsg)
            if (response.data.resultCode == 1) {
                Series.value = response.data.data;
            }
        } catch (error) {
            console.log("GetSeriesListAsync", error);
        }
    }

    /**
     * 获取配置项数据(颜色、国家、季节)
     */
     const GetTemplateConfigData = async () => {
        try {
            let response = await LineService.GetTemplateConfigData()
            if (response.data.resultCode == 1) {
                dispositionObj.value = response.data.data;
            }
        } catch (error) {
            console.log("GetTemplateConfigData", error);
        }
    }
    GetTemplateConfigData()
    getLinesHandler()
  </script>
  
  <style lang="scss" scoped>
    .origin-image {
        height: 100px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-color: $lightGray;
        margin-bottom: 10px;
    }
    .ElementTemplateData{
        /* min-height: 500px; */
    }
    .el-select{
        width: 100%;
    }
    .Required{
        color: red;
    }
  </style>