<template> 
    <div class="q-mt-xs bg-white q-pa-xs rounded ElementTemplateData">
        <div class="column text-mdall">
            <p class="q-mt-md">当前类型：
                <span class="q-ml-xs">{{getPageType()}}</span>
            </p>
        </div>
        <template v-if="datas.DataSource.pageType!=1">
            <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.typeId" class="m-2" 
                    placeholder="请选择需要绑定的数据" @change="getPageDatas()">
                        <el-option
                            v-for="item in datas.bindDatas"
                            :key="item.Id"
                            :label="item.Name"
                            :value="item.Id"
                        />
                </el-select>
            </div>
        </template>
    </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'
  import AliyunUpload from '@/utils/upload/aliyun'
  import useEditor from '@/utils/Editor/index'

    const datas = reactive({
        DataSource:{},
        CountryValue: null,
        bindDatas: 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 slidesStore = useSlidesStore()
    const sourceLoadingStore = useScreenStore()
    const { slides, slideIndex, viewportRatio } = storeToRefs(slidesStore)
    const { setNewDatasList } = useEditor()

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

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

    const getPageDatas = () =>{
        let typeObj = datas.bindDatas.find(x=>{
            return x.Id == datas.DataSource.typeId
        })
        console.log(datas.bindDatas,'-------')
        if(typeObj){
            sourceLoadingStore.setSourceLoading(true)
            setNewDatasList(datas.DataSource,typeObj)
        }
    }
    
    const getPageType = () => {
        let obj = TemplateType.value.find(x=>{ return x.FiledType==datas.DataSource.pageType})
        if(obj&&obj.Name){
            return obj.Name
        }
    }
    const getBindDatas = () =>{
        let obj = TemplateType.value.find(x=>{ return x.FiledType==datas.DataSource.pageType})
        if(obj&&obj.Name){
            let Path = obj.Content.split('.')
            TemplateType.value.forEach(x=>{
                let dataPath = x.Content.split('.')
                let value=JSON.parse(JSON.stringify(datas.DataSource.TravelAatas));
                for (let i = 0; i < dataPath.length; i++) {
                    const oo = dataPath[i];
                    if(oo==Path[0]&&value&&value[oo]){
                        datas.bindDatas = value[oo]
                    }
                }
            })
        }
    }

    getBindDatas()
  </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>