    <template>
        <div v-if="datas.DataSource.DataSourceOverlay">
            <div class="DataaSourceOverlay" @click="OffDataSource"></div>
            <div class="DataaSource">
                <div class="DataaSourceList">
                    <el-table
                    :data="dataArray"
                    style="width: 100%"
                    height="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'">
                                        <el-image class="row items-center flex-center" 
                                        :src="scope.row.contentStr" style="width: 100px; height: 70px;"
                                        fit="cover">
                                        </el-image>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                        prop=""
                        label="排序" v-if="datas.DataSource.pageType!=1">
                            <template #header>
                                <div class="row items-center">
                                    <span>排序</span>
                                </div>
                            </template>
                            <template #default="scope">
                                <div v-if="scope.row.TemplateList">
                                    <!-- <el-input style="width: 214px;" type="number" v-model="scope.row.TemplateDataSource.index" 
                                    @change="setTemplateDataSource(scope.row.TemplateDataSource.Id,scope.$index,1)"
                                    clearable></el-input> -->
                                    <el-select v-model="scope.row.TemplateDataSource.index"
                                    filterable
                                    allow-create
                                    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'

  import { Plus, Top, Bottom, Delete, Edit, View  } from "@element-plus/icons-vue";

    const datas = reactive({
        sortList:[],
        maxSort:11 as number,
        DataSource:{} as any,
        loading: false,//是否更新数据源
    })

    datas.DataSource = inject(injectKeyDataSource)
    const slidesStore = useSlidesStore()
    const sourceLoadingStore = useScreenStore()
    const { slides, slideIndex } = storeToRefs(slidesStore)
    const { setNewDatasList } = useEditor()
    const { SourceLoading } = storeToRefs(useScreenStore())
    
    watch(() => datas.DataSource.DataSourceOverlay, (n,o) => {
        if(n){
            datas.loading= false
            sourceLoadingStore.setSourceLoading(false)
        }
       if(!n){
        
       }
    })

    const addSort = () => {
        datas.sortList = []
        for(let i=0;i<=datas.maxSort;i++){
            datas.sortList.push(i)
        }
    }
    addSort()

    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) {
            datas.DataSource.DataSourceList.forEach((x,indexs)=>{
                if(index==indexs&&x.type=="image"){
                    x.TemplateDataSource.Id = setType(x)[0].Id
                    x.TemplateDataSource.Content = setType(x)[0].Content
                    x.TemplateDataSource.Name = setType(x)[0].Name
                }
            })
            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
        if(SourceLoading.value) setNewDatasList(datas.DataSource)
    }
    
    const dataArray = computed(() => {
        if(datas.DataSource && datas.DataSource.DataSourceList){
            return datas.DataSource.DataSourceList.filter((x:any)=>!x.lock)
        }
        return []
    })
    
  </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>