<template>
	<view class="xd-tab-scroll"
    :style="{
      width: width,
      margin: '0 auto'
    }"
  >
		<scroll-view
      class="xd-tab-scroll__box"
      scroll-x
      :scroll-with-animation="true"
      :scroll-into-view="toView"
    >
      <view class="xd-tab-scroll__list">
        <slot>
          <view
            v-for="(item,index) in uiList"
            :key="index"
            :id="`${toViewFix}-${index}`"
            :style="getItemStyle"
            @click="clickTab(item,index)"
          >
            <view :style="'border-radius:' + itemRadius + ';' + (index === activeIndex ? activeStyle: '')">
              <view :style="{width: imageWidth + 'rpx', height: imageHeight + 'rpx'}">
                <image
                  :src="item.image"
                  :style="{
                    maxHeight: (imageHeight - 30) + 'rpx',
                    maxWidth: (imageWidth - 30) + 'rpx',
                  }"
                ></image>
              </view>
              <view v-if="item.name">{{item.name}}</view>
            </view>
          </view>
        </slot>
      </view>
		</scroll-view>
	</view>
</template>

<script>

  /**
   * XdTabScroll 全局Ui
   * @description 左右滚动项目路径
   * @property list {String} 滚动显示项目 默认：null (在使用插槽情况下可以不用设置列表值)
   * @property background {String} 插件项目列表显示背景颜色 默认：''
   * @property width {Number} 插件容器宽度 默认：100%
   * @property itemRadius {Number|String}  插件项目列表边框圆角值 默认： 10rpx
   * @property marginRight {String} 插件项目列表右边框值 默认: 10rpx
   * @property imageWidth {Number|String}  项目图片宽度值 默认：默认: 164
   * @property imageHeight {Number}  项目图片高度值 默认：120
   * @property index {Array|Object}  默认显示第几个  默认：0
   * @property activeStyle {Boolean}  当前选中项样式  默认：'''
   *
   * @event {Function} onChange    点击项目事件
   */
	export default {
	  name:'XdTabScroll',
    components: {},
		props: {
			list: {
				type: Array | null,
				default () {
					return []
				}
			},
      background: {
        type: String, //rpx
        default: ''
      },

      width: {
        type: String, //rpx
        default: '100%'
      },

      itemRadius: {
        type: String, //rpx
        default: '10rpx'
      },

      marginRight:{
        type: String, //rpx
        default: '10rpx'
      },

      imageWidth: {
        type: Number | String, //rpx
        default: 164
      },

      imageHeight: {
        type: Number | String, //rpx
        default: 120
      },

			index: {
				type: Number,
				default: 0
			},

      activeStyle:{
        type: String, //css写法
        default: ''
      }
		},
    data() {
      return {
        activeIndex: 0,
        toViewFix: 'xd-scroll__index',
        toView: null,

        uiList: [],
        dataTest: [
          {image: 'https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/20200709113615729.jpg?x-oss-process=style/common', name: '', url: ''},
          {image: 'https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/20200709113447212.jpg?x-oss-process=style/common', name: '', url: ''},
          {image: 'https://sandbox-image.jufubao.cn/20210719171512575.png', name: '', url: ''},
          {image: 'https://sandbox-image.jufubao.cn/20210719171512575.png', name: '', url: ''},
          {image: 'https://sandbox-image.jufubao.cn/20210719171512575.png', name: '', url: ''},
          {image: 'https://sandbox-image.jufubao.cn/20210719171512575.png', name: '', url: ''},
          {image: 'https://sandbox-image.jufubao.cn/20210719171512575.png', name: '', url: ''},
          {image: 'https://sandbox-image.jufubao.cn/20210719171512575.png', name: '', url: ''},
          {image: 'https://sandbox-image.jufubao.cn/20210719171512575.png', name: '', url: ''}
        ]
      };
    },

    computed:{
      getItemStyle() {
        let style = `width:${this.imageWidth}rpx;background:${this.background};
        border-radius:${this.itemRadius};margin-right:${this.marginRight};`
        return `${style}`
      }
    },
    mounted(){
	    this.$nextTick(()=>{
	      if(this.list === null) {
	        this.uiList = this.$xdUniHelper.cloneDeep(this.dataTest);
        }
	      else{
          this.uiList = this.$xdUniHelper.cloneDeep(this.list);
        }
	      this.toView = `${this.toView}-0`;
        setTimeout(() => {
          this.activeIndex = this.index;
          this.toView = `${this.toViewFix}-${this.index}`;
        }, 10);
      });
    },

		methods: {
			clickTab(item, index) {
				this.activeIndex = index;
        this.toView = `${this.toViewFix}-${this.activeIndex}`;
				this.$emit('onChange', item, index);
			},
		}
	}
</script>

<style lang="less">
	.xd-tab-scroll {
		display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
    padding: 0;

    &__box {
      width: 100%;
      height: 100%;
    }

    &__list {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      height: 100%;
      box-sizing: border-box;

      & > view {

        & > view {
          flex-shrink: 0;

          & > view:first-child {
            display: flex;
            justify-content: center;
            align-items: center;
          }

          & > view:nth-child(2) {
            text-align: center;
            padding: 0 unit(20, rpx);
            margin-bottom: unit(15, rpx);
            font-size: unit(24, rpx);
            .uni-max-cut(1, 26);
            line-height: unit(26, rpx);


          }
        }
      }
    }
	}


</style>
