<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 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="请页面类型">
                        <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>
  </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'

    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 } = storeToRefs(slidesStore)

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

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

    watch(() => datas.DataSource.pageType, () => {
        const newSlides = slides.value
        newSlides.forEach((slide,indexs)=>{
            if(slideIndex.value==indexs){
                slide.pageType = datas.DataSource.pageType
            }
        })
        slidesStore.setSlides(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)
    }

    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 = () => {
        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 FiledTypeStr
                if(slide.type=="text") FiledTypeStr = getHtmlPlainText(slide.content)
                if(slide.type=="image") FiledTypeStr = slide.src
                let Obj = {}
                Obj = {
                    ...slide,
                    FiledTypeStr: FiledTypeStr,
                    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(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("getLinesHandler", 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("getLinesHandler", error);
        }
    }

    /**
     * 获取配置项数据(颜色、国家、季节)
     */
     const GetTemplateConfigData = async () => {
        try {
            let response = await LineService.GetTemplateConfigData()
            if (response.data.resultCode == 1) {
                dispositionObj.value = response.data.data;
            }
        } catch (error) {
            console.log("getLinesHandler", 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>