<script setup>
import { reactive, ref } from 'vue'
import apiReport from '@/api/report'
import { vInfiniteScroll } from '@vueuse/components'
import { showToast } from 'vant'



const props = defineProps({
  defaultVal: ''
})
const emit = defineEmits(['close','confirm'])

const imgTypeOpts = [
  { text:'版头',value: 1 },
  { text:'版尾',value: 2 },
]

const list = ref([])
const filterState = reactive({
    type: props.defaultVal?props.defaultVal:1,
    page:1,
    pageSize:20,
    finished:false,
    searchVal: ''
})            
async function getList() {
  const res=await apiReport.imgReourceList({
      CurrentIndex:filterState.page,
      PageSize:filterState.pageSize,
      Type:filterState.type,
      Keyword:filterState.searchVal
  })
  if(res.Ret===200){
      const arr = res.Data.List || [];
      list.value =
          filterState.page === 1
          ? arr
          : [...this.list.value, ...arr];
      filterState.finished =  res.Data.Paging.IsEnd;
  }
}
getList()

function initList() {
  filterState.page = 1;
  getList()
}

function onLoadMore() {
  if(filterState.finished) return

  filterState.page++
  getList()
}


const selectItem = ref(null)
function handleSelect(e) {
  selectItem.value = e
}

function handleCancle() {
  emit('close')
}
function handleConfirm() {
  if(!selectItem.value) return showToast('请选择图片')

  emit('confirm',{
    type:filterState.type,
    data:selectItem.value
  })
}

</script>
<template>
  <div class="img-source-cont">
    <div class="top-box">
        <span style="color:#666666" @click="handleCancle">取消</span>
        <van-dropdown-menu>
          <van-dropdown-item v-model="filterState.type" :options="imgTypeOpts" @change="initList" :disabled="defaultVal?true:false"/>
        </van-dropdown-menu>
        <span :style="{color:selectItem?'#0052D9':'#666'}" @click="handleConfirm">确定</span>
    </div>

    <div class="container">
      <div class="top">

        <van-search v-model="filterState.searchVal" placeholder="请输入搜索关键词" @search="initList"/>

      </div>
      <ul class="img-list" v-infinite-scroll="[onLoadMore, { 'distance' : 10 }]" v-if="list.length">
        <li 
            :class="['item',selectItem&&selectItem.ResourceId===item.ResourceId?'active':'']" 
            v-for="item in list" 
            :key="item.ResourceId"
            @click="handleSelect(item)"
        >
            
            <img :src="item.ImgUrl" alt="">
            <div class="title">{{item.ImgName}}</div>
            <svg v-if="selectItem&&selectItem.ResourceId===item.ResourceId" width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.5 28C22.232 28 28.5 21.732 28.5 14C28.5 6.26801 22.232 0 14.5 0C6.76801 0 0.5 6.26801 0.5 14C0.5 21.732 6.76801 28 14.5 28ZM7.5 14.413L8.913 13L12.5 16.586L20.085 9L21.5 10.415L12.5 19.414L7.5 14.413Z" fill="#0052D9"/>
            </svg>
        </li>
      </ul>

      <div v-if="!list.length&&filterState.finished">
          <img class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
          <p style="text-align:center;color:#999999;font-size:12px">暂无图片</p>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.img-source-cont {
  display: flex;
  flex-direction: column;
}
.top-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 116px;
    border-bottom: 1px solid $border-color;
    padding: 0 34px;
}
.img-list{
    height: 800px;
    padding: 4px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item{
        width: 48%;
        background: #FFFFFF;
        border: 1px solid $border-color;
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.03);
        border-radius: 4px;
        margin-bottom: 30px;
        overflow: hidden;
        padding: 14px;
        box-sizing: border-box;
        position: relative;
        max-height: 400px;
        img{
            width: 100%;
        }
    }
    .active{
        border-color: $theme-color;
        svg{
            width: 28px;
            height: 28px;
            position: absolute;
            right: 22px;
            bottom: 22px;
        }
    }
}
:deep(.van-dropdown-menu__bar) {
  box-shadow: none;
}
@media screen and (min-width:$media-width){
  .top-box{
    height: 60px;
    padding: 0 30px;
  }
  .img-list{
    height: 600px;
  }  
}
</style>