<template>
    <el-dialog v-model="showVisible" :show-close="false" :close-on-press-escape="false" 
    :close-on-click-modal="false" style="width: 680px;">
        <template #header>
            <div class="text-title">选择、上传图片</div>
        </template>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="erp资料库" name="1">
                <div class="q-mb-md">
                    <el-input v-model="datas.queryMsg.Name" 
                    placeholder="输入关键字快速查找" clearable
                    class="input-with-select">
                        <template #append>
                            <el-button type="primary" @click="SearchHandler">搜索</el-button>
                        </template>
                    </el-input>
                </div>
                <div class="row UploadPicture-box" v-loading="datas.loading">
                    <div v-for="(item,index) in datas.imgList" class="UploadPicture-list">
                        <div class="UploadPicture-listBox">
                            <img :src="item.Path" class="rounded" @click="getImgs(item,index)"/>
                            <div class="UploadPicture-Hover" v-if="item.show">
                                <div>
                                    <el-icon :size="20"><CircleCheckFilled/></el-icon>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="q-mt-md" style="display: flex;justify-content: center;">
                    <el-pagination
                    v-model:current-page="currentPage"
                    :page-size="datas.queryMsg.pageSize"
                    :small="small"
                    :disabled="disabled"
                    :background="background"
                    layout="prev, pager, next"
                    :total="datas.queryMsg.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    />
                </div>
                
            </el-tab-pane>
            <el-tab-pane label="本地图" name="2">
                <FileInput @change="files => insertImageElement(files)">
                    <div class="upload-box">
                        <img v-if="imgPath" :src="imgPath" style="height: 200px;"/>
                        <div v-else>
                            <el-icon size="80" color="#a8abb2" class="el-icon--upload">
                                <upload-filled/> 
                            </el-icon>
                            <p><em>点击上传图片</em></p>
                        </div>
                    </div>
                </FileInput>
                <!-- 
                <div>
                    <el-upload
                        v-loading="isUpload"
                        ref="upload"
                        class="upload-drop-box"
                        :on-change="handleChange"
                        action=""
                        drag
                        :limit="1"
                        :on-exceed="handleExceed"
                        :auto-upload="false"
                        accept=".png,.jpg"
                        :show-file-list="false"
                    >
                        
                        <el-icon v-if="!imgPath" class="el-icon--upload">
                            <upload-filled />
                        </el-icon>
                        <div v-if="!imgPath" class="el-upload__text">
                            <template>
                                拖动文件到这里释放或<em>点击上传</em>
                            </template>
                        </div>
                        <template #tip>
                        </template>
                    </el-upload>
                </div> -->
            </el-tab-pane>
            <el-tab-pane label="图片地址" name="3">
                <div class="row wrap q-mt-md">
                    <el-input v-model="imgUrl" placeholder="输入图片的地址" class="input-with-select"></el-input>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div class="q-mt-lg row items-center">
            <div class="col">
                
            </div>
            <div>
                <el-button class="q-ml-lg" @click="close()">取消</el-button>
                <el-button  type="primary" class="q-ml-lg" @click="setImgs()">确定</el-button>
            </div>
        </div>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, inject } from 'vue'
import { storeToRefs } from 'pinia'
import type { UploadProps, UploadUserFile,UploadInstance } from 'element-plus'
import useCreateElement from '@/hooks/useCreateElement'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import { getImageDataURL } from '@/utils/image'
import { useMainStore, useSlidesStore, useScreenStore } from '@/store'
import { injectKeyDataSource } from '@/types/injectKey'
import ConfigService from '@/services/ConfigService'

import FileInput from '@/components/FileInput.vue'
const showVisible = ref(true)
const activeName = ref("1")
const imgPoolVisibleStore = useScreenStore()
const imgReplaceVisibleStore = useScreenStore()

const imageFile = ref({})
const isUpload = ref(false)
const imgOnline = ref('')
const imgPath = ref('')
const imgUrl = ref('')
const currentPage = ref(1)
const upload = ref<UploadInstance>()

const imgType = ref(0) // 1 插入图片  2替换图片
imgType.value = inject('imgType')
const propsDatas = ref({src: ''})
const datas = reactive({
  DataSource:{},
  loading: false,
  imgList: [],
  queryMsg:{
    pageSize: 16,
    pageIndex: 1,
    currentPage: 1,
    total: 0,
    Type: 0, //1-酒店,2-餐厅,3-景点,4-票务,5-车辆,6-领队,7-购物店
    Name: "", //资源图片名称
    SourceId: 0 //资源编号
  }
})
datas.DataSource = inject(injectKeyDataSource)
if(datas.DataSource.pageType==2) datas.queryMsg.Type = 1
else if(datas.DataSource.pageType==3) datas.queryMsg.Type = 3
else if(datas.DataSource.pageType==4) datas.queryMsg.Type = 2
const mainStore = useMainStore()

const { createImageElement } = useCreateElement()
const { addHistorySnapshot } = useHistorySnapshot()
const slidesStore = useSlidesStore()
const { handleElement, handleElementId } = storeToRefs(mainStore)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    datas.queryMsg.pageIndex = val
    getImgList()
}

const insertImageElement = (files: FileList) => {
  const imageFile = files[0]
  if (!imageFile) return
  getImageDataURL(imageFile).then(dataURL => 
    imgPath.value = dataURL,
    propsDatas.value = { src: dataURL }
        //   createImageElement(dataURL)
  )
}

const setImgs = () => {
    let text = '请选择图片'
    let url = imgOnline.value
    const props = { url: url}
    if(activeName.value=='1') propsDatas.value = { src: imgOnline.value } 
    else if(activeName.value=='2') {
        text = '请上传图片'
        url = imgPath.value
    }
    else if(activeName.value=='3') {
        text = '请输入图片url地址'
        url = imgUrl.value
        propsDatas.value = { src: imgUrl.value } 
    }
    if(!url){
        return ElMessage({
            showClose: true,
            message: text,
            type: 'warning',
        })
    }
    if(imgType.value==1){
        createImageElement(url)
        close()
    }
    if(imgType.value==2){
        slidesStore.updateElement({ id: handleElementId.value, props:propsDatas.value })
        addHistorySnapshot()
        close()
    }
    
}


const getImgs = (item:any,index:number) => {
    datas.imgList.forEach(x=>{x.show=false})
    item.show = true
    imgOnline.value = item.Path
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
    if(activeName.value!='1'){
        imgOnline.value = ''
        datas.imgList.forEach(x=>{x.show=false})
    }else if(activeName.value!='2'){
        imgPath.value = ''
        imageFile.value = {}
    }else if(activeName.value!='3'){
        imgUrl.value = ''
    }
}

const close = () =>{
    // imgOnline.value = ''
    // datas.imgList.forEach(x=>{x.show=false})
    // imgPath.value = ''
    // imageFile.value = {}
    // imgUrl.value = ''
    showVisible.value = false
    imgPoolVisibleStore.setImgPoolVisible(false)
    imgReplaceVisibleStore.setImgReplaceVisible(false)
}
const SearchHandler = async () => {
    datas.queryMsg.pageIndex = 1
    await getImgList()
}
const getImgList = async () =>{
    datas.loading = true
    try {
      let datasRes = await ConfigService.GetPicList(datas.queryMsg);
      if (datasRes.data.resultCode == 1) {
        let data = datasRes.data.data.pageData
        let arrData = function(list){
            list.forEach(item => {
                item.show = false
            });
        }
        arrData(data)
        datas.imgList = data
        datas.queryMsg.total = datasRes.data.data.count;
      }
      datas.loading = false
  } catch (error) {
    datas.loading = false
  }
}

const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
    isUpload.value=true
    console.log(uploadFile,'---------')
    if(uploadFile){
        imageFile.value = uploadFile
        imgPath.value = URL.createObjectURL(uploadFile?.raw)
        isUpload.value=false
    }
}

const handleExceed: UploadProps['onExceed'] = (files) => {
    console.log('执行clear')
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    upload.value!.handleStart(file)
}

getImgList()
</script>
<style lang="scss" scoped>
.upload-box{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px dashed #dcdfe6;
    border-radius: 6px;
    padding: 40px 10px;
    cursor: pointer;
}
.UploadPicture-box{
    flex-wrap: wrap;
}
.UploadPicture-list{
    width: 150px;
    /* height: 150px; */
    margin: 5px;
}
.UploadPicture-listBox{
    width: 150px;
    height: 0;
    position: relative;
    padding-bottom: 56.25%;
}
.UploadPicture-list img{
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    cursor: pointer;
}
.UploadPicture-Hover{
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(23,23,23,0.5);
    /* opacity: 0; */
    display: none;
    transition: opacity 0.5s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: $themeHoverColor;
}
</style>