    <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.contentStr}}
                                    </div>
                                    <div v-if="scope.row.type=='image'">
                                        <img style="width: 20px; height: 20px"
                                            :src="scope.row.contentStr" />
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                        prop=""
                        label="排序" v-if="datas.DataSource.pageType!=1">
                            <template #default="scope">
                                <div v-if="scope.row.TemplateList">
                                    <el-select v-model="scope.row.TemplateDataSource.index"
                                    clearable class="m-2" 
                                    placeholder="请选择排序"
                                    @change="setTemplateDataSource(scope.row.TemplateDataSource.Id,scope.$index,1)">
                                    <el-option
                                        v-for="item in datas.sortList"
                                        :key="item"
                                        :label="item"
                                        :value="item"/>
                                    </el-select>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                        prop=""
                        label="绑定数据源"
                        width="170">
                            <template #default="scope">
                                <div v-if="scope.row.TemplateList">
                                    <el-select v-model="scope.row.TemplateDataSource.Id"
                                    clearable class="m-2" 
                                    placeholder="请绑定数据源"
                                    @change="setTemplateDataSource(scope.row.TemplateDataSource.Id,scope.$index)">
                                    <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, useScreenStore } from '@/store'
  import { injectKeyDataSource } from '@/types/injectKey'
  import { getHtmlPlainText } from '@/utils/common'
  import useEditor from '@/utils/Editor/index'

    const datas = reactive({
        sortList:[],
        DataSource:{},
        loading: false,//是否更新数据源
    })
    for(let i=0;i<11;i++){
        datas.sortList.push(i)
    }
    datas.DataSource = inject(injectKeyDataSource)
    const slidesStore = useSlidesStore()
    const sourceLoadingStore = useScreenStore()
    const { slides, slideIndex } = storeToRefs(slidesStore)
    const { setNewDatasList } = useEditor()
    
    watch(() => datas.DataSource.DataSourceOverlay, (n,o) => {
        if(n){
            datas.loading= false
            sourceLoadingStore.setSourceLoading(false)
        }
       if(!n&&datas.loading){
        setNewDatasList(datas.DataSource)
       }
    })
    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 setTemplateDataSource = (Id,index,type) => {
        sourceLoadingStore.setSourceLoading(true)
        datas.loading = true
        if(type) return
        datas.DataSource.DataSourceList.forEach((x,indexs)=>{
            if(index==indexs){
                let obj = x.TemplateList.find(y=>{
                    return y.Id==x.TemplateDataSource.Id
                })
                if(obj){
                    x.TemplateDataSource.Content = obj.Content
                    x.TemplateDataSource.Name = obj.Name
                }else{
                    x.TemplateDataSource.Content = ''
                    x.TemplateDataSource.Name = ''
                    x.TemplateDataSource.index = null
                }
                // if(x.type=="text"){
                //     x.contentStr = obj.Name
                //     x.content = x.content.replace(getHtmlPlainText(x.content),obj.Name)
                // }
            }
        })
        
    }

    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: 20px 40px 40px 40px;
        border-radius: 10px;
        background: #fff;
    }
    .DataaSourceButtom{
        text-align: right;
        padding-bottom: 10px;
    }
    .DataaSourceList{
        height: 96%;
        border: 1px solid #ebeef5;
        padding: 20px;
        border-radius: 5px;
        overflow: auto;
    }
    .DataaSourceL{
        font-weight: bold;
        color: black;
        font-size: 14px;
    }
  </style>