<template>
  <a-modal
    class="global-view-img"
    width="600px"
    centered
    maskClosable
    :footer="null"
    @cancel="handledClose"
    :closable="false"
  >
    <div class="preview-img">
      <div
        class="preview"
        v-for="(item, index) in imgList"
        :key="item"
        :style="{display: current === index ? 'block' : 'none'}"
      >
        <img :src="item.url" alt="">
      </div>
      <i class="iconfont icon-guanbi close" @click="handledClose"></i>
      <span class="left-arrow arrow" @click="prev" v-if="imgList.length > 1">
        <i class="iconfont icon-youjiantoujinru"></i>
      </span>
      <span class="right-arrow arrow" @click="next" v-if="imgList.length > 1">
        <i class="iconfont icon-youjiantoujinru"></i>
      </span>
      <span class="total" v-if="imgList.length > 1">{{ current + 1 }}/{{ len }}</span>
    </div>
  </a-modal>
</template>
<script>
import { reactive, toRefs, ref, watch } from 'vue'

export default {
  name: 'CascaderImg',
  emits: ['callbackview'],
  props: {
    // 图片列表
    list: {
      type: Array,
      default: () => []
    },
    // 切换到指定面板
    order: {
      type: Number,
      default: 0
    }
  },
  setup(props, { emit }) {
    const carousel = ref()
    const state = reactive({
      len: 0,
      imgList: [
        // {
        //   id: 0,
        //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
        // },
        // {
        //   id: 1,
        //   url: 'https://img2.baidu.com/it/u=3114536182,1506614914&fm=253&fmt=auto&app=120&f=JPEG?w=1000&h=655'
        // },
        // {
        //   id: 2,
        //   url: 'https://img2.baidu.com/it/u=4123386159,2839457053&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=448'
        // },
        // {
        //   id: 3,
        //   url: 'https://img2.baidu.com/it/u=1779043861,3055912273&fm=253&fmt=auto&app=120&f=JPEG?w=690&h=1227'
        // }
      ],
      current: 0
    })
    // 监听 order
    // watch(() => props.order, val => {
    //   // console.log('order-xxxxx', val)
    //   nextTick(() => {
    //     state.current = val + 1
    //     if (carousel.value) { // carousel没值不执行，会报错
    //       carousel.value.goTo(val)
    //     }
    //   })
    // }, { immediate: true, deep: true })

    // 监听 list
    watch(() => props.list, val => {
      state.imgList = val || []
      state.len = state.imgList.length
    }, { immediate: true, deep: true })

    // 关闭或者取消
    const handledClose = () => {
      emit('callbackview')
    }
    // onChange
    const onChange = index => {
      state.current = index + 1
    }
    // 切换下一个
    const next = () => {
      // carousel.value.next()
      state.current === (state.len - 1) ? state.current = 0 : state.current++
    }
    // 切换上一个
    const prev = () => {
      // carousel.value.prev()
      state.current === 0 ? state.current = state.len - 1 : state.current--
    }
    return {
      ...toRefs(state),
      carousel,
      handledClose,
      onChange,
      next,
      prev
    }
  }
}
</script>
<style lang="less" scoped>
.preview-img {
  position: relative;
  .total {
    display: block;
    height: 26px;
    line-height: 26px;
    padding: 0 9px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    position: absolute;
    bottom: 12px;
    right: 16px;
    z-index: 2;
  }
  .close {
    font-size: 36px;
    color: #FFFFFF;
    position: absolute;
    // bottom: -15%;
    bottom: -94px;
    right: 282px;
    z-index: 2;
    cursor: pointer;
  }
  .arrow {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    // top: 260px;
    top: 50%;
    z-index: 2;
    cursor: pointer;
    i {
      display: inline-block;
      font-size: 16px;
      color: #FFFFFF;
    }
  }
  .left-arrow {
    left: -72px;
    i {
      transform: rotate(180deg);
      margin-left: 13px;
    }
  }
  .right-arrow {
    right: -72px;
    i {
      margin-left: 10px;
    }
  }
  .preview {
    width: 100%;
    // height: 560px;
    height: 100%;
    transition: height linear 3s;
    img {
      width: 100%;
      height: 100%;
      border-radius: 12px;
      transition: height linear 3s;
    }
  }
}
</style>
