    <template>
        <div v-if="datas.DataSource.DataSourceOverlay">
            <div class="DataaSourceOverlay" @click="OffDataSource"></div>
            <div class="DataaSource">
                <div class="DataaSourceList">
                    <el-table
                    :data="datas.DataSource.DataSourceList"
                    style="width: 100%"
                    border
                    >
                        <el-table-column
                        prop=""
                        label="基础数据">
                            <template #default="scope">
                                <div class="DataaSourceL">
                                    <div v-if="scope.row.type=='text'">
                                        {{scope.row.FiledTypeStr}}
                                    </div>
                                    <div v-if="scope.row.type=='image'">
                                        <img style="width: 20px; height: 20px"
                                            :src="scope.row.FiledTypeStr" />
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                        prop=""
                        label="绑定数据源"
                        width="170">
                            <template #default="scope">
                                <div class="DataaSourceR" v-if="scope.row.TemplateList">
                                    <el-select v-model="scope.row.TemplateDataSource.Id" class="m-2" 
                                    placeholder="请绑定数据源"
                                    @change="setTemplateDataSource(scope.row.TemplateDataSource.Id,scope.$index)">
                                    <!-- :disabled="scope.row.type=='image'&&item.Name.indexOf('图')==-1" -->
                                    <el-option
                                        v-for="item in setType(scope.row)"
                                        :key="item.Id"
                                        :label="item.Name"
                                        :value="item.Id"/>
                                    </el-select>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </template>
  
  <script lang="ts" setup>
  import { computed, nextTick, ref, watch, reactive, inject } from 'vue'
  import { storeToRefs } from 'pinia'
  import { useSlidesStore } from '@/store'
  import { injectKeyDataSource } from '@/types/injectKey'
  import { getHtmlPlainText } from '@/utils/common'

    const datas = reactive({
        DataSource:{},
    })
    datas.DataSource = inject(injectKeyDataSource)
    const slidesStore = useSlidesStore()
    const { slides, slideIndex } = storeToRefs(slidesStore)
    

    const setType = (x) =>{
        if(x.type=="image"){
            return x.TemplateList.filter(item=>{ return item.Name.indexOf('图')!=-1})
        }if(x.type=="text"){
            return x.TemplateList.filter(item=>{ return item.Name.indexOf('图')==-1})
        }
    }
    const setNewDatas = () => {
        const slidesData = slides.value
        // 更新Slides数据
        const savelides = []
        const newSlides = []
        let obj = slidesData.find((x,index)=>{
            return slideIndex.value == index
        })
        if(obj){
            obj.elements.forEach(x=>{
                let dataObj = datas.DataSource.DataSourceList.find(y=>{
                    return y.id == x.id
                })
                if(dataObj){
                    x = dataObj
                }
                savelides.push(x)
            })
            obj.elements = JSON.parse(JSON.stringify(savelides))
            slidesData.forEach((x,index)=>{
                if(slideIndex.value == index){
                    x.pgaeType = datas.DataSource.pgaeType
                    x.elements = obj.elements
                }
                newSlides.push(x)
            })
            slidesStore.setSlides(JSON.parse(JSON.stringify(newSlides)))
        }
    }
    // 数据源关键数据赋值
    const setTemplateDataSource = (Id,index) => {
        datas.DataSource.DataSourceList.forEach((x,indexs)=>{
            if(index==indexs){
                let obj = x.TemplateList.find(y=>{
                    return y.Id==x.TemplateDataSource.Id
                })
                x.TemplateDataSource.Content = obj.Content
                x.TemplateDataSource.Name = obj.Name

                if(x.type=="text"){
                    x.FiledTypeStr = obj.Name
                    x.content = x.content.replace(getHtmlPlainText(x.content),obj.Name)
                }
            }
        })
        setNewDatas()
    }

    const OffDataSource = () =>{
        datas.DataSource.DataSourceOverlay = !datas.DataSource.DataSourceOverlay
    }
  
    
  </script>
  
  <style lang="scss" scoped>
    .DataaSourceOverlay{
        position: fixed;
        left: 160px;
        top: 80px;
        right: 260px;
        bottom: 0;
        z-index: 1;
        background: rgba(23,23,23,0.5);
        cursor: pointer;
    }
    .DataaSource{
        position: fixed;
        left: 200px;
        top: 120px;
        right: 300px;
        bottom: 30px;
        z-index: 2;
        padding: 40px;
        border-radius: 10px;
        background: #fff;
    }
    .DataaSourceList{
        height: 100%;
        border: 1px solid #ebeef5;
        padding: 20px;
        border-radius: 5px;
        overflow: auto;
    }
    .DataaSourceL{
        font-weight: bold;
        color: black;
        font-size: 14px;
    }
  </style>