<template>
	<view
		class="xd-tab"
		:class="{noBorder: noBorder}"
		:style="{background:bgColor}"
	>
		<scroll-view
      class="tab-scroll"
      scroll-x
      :scroll-with-animation="scrollWithAnimation"
      :scroll-into-view="toView"
      :style="{
        width: 'calc(100% - '+ getSettingWidth + 'px)',
        height: height + 'rpx'
      }"

    >
			<view class="tab-scroll__box">
				<view
          :id="`tab-scroll__index-${index}`"
          v-for="(item, index) in list"
          :key="index"
          :style="{color: activeIndex === index? (actColor||styleMainColor): color, height: height + 'rpx'}"
          class="tab-scroll__item"
          :class="{active:activeIndex === index}"
				  @click="clickTab(item, index)"
        >
          <view
						:style="{
							fontWeight: activeIndex === index? actFontWeight: fontWeight,
							fontSize: (activeIndex === index ? actFontSize : fontSize) + 'rpx',
							height: height + 'rpx',
							lineHeight: height + 'rpx'
						}">{{item.name}}</view>
          <view
						v-if="showFooterLine"
						:style="{
							background: activeIndex === index? (actColor||styleMainColor): '',
							bottom: (lineBottom) + 'rpx'
						}"
					></view>
        </view>
			</view>
		</scroll-view>
		<view
      class="tab-icons"
      @click="handleClickSetting"
      :style="{width: settingWidth + 'rpx'}"
      v-if="showSetting"
    >
      <xd-font-icon
        icon="iconshezhi1"
        color="#666"
        size="40"
        width="50"
        height="50"
      ></xd-font-icon>
		</view>
	</view>
</template>

<script>

  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
  import {
    getParentsStyle, //获取页面风格单个键值值
  } from '@/utils/xd.base';

	export default {
    name: 'XdTab',
    components: {
      XdFontIcon
    },
    props: {
      settingWidth: {
        type: Number,
        default: 70
      },
      showSetting: {
        type: Boolean,
        default: false,
      },
      list: {
        type: Array,
        default() {
          return []
        }
      },
      tabIndex: {
        type: Number,
        default: 0
      },
      showFooterLine: {
        type: Boolean,
        default: false
      },
      scrollWithAnimation:{
        type: Boolean,
        default: true
			},
      noBorder: {
        type: Boolean,
        default: true
			},
      color: {
        type: String,
        default: '#333'
      },
      bgColor: {
        type: String,
        default: '#fff'
			},
      fontSize: {
        type: Number | String, //rpx
        default: 30
      },
      actFontSize:{
        type: Number | String, //rpx
        default: 38
      },
      fontWeight: {
        type: Number | String, //rpx
        default: 100
      },
      actFontWeight: {
        type: Number | String, //rpx
        default: 500
      },
      height: {
        type: Number | String, //rpx
        default: 90
      },
			lineBottom: {
        type: Number | String, //rpx
        default: 10
			},
      actColor: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        activeIndex: 0,
        toView: null,
        styleMainColor: '', //插件主题风格样式
      };
    },

    computed: {
      getSettingWidth() {
        if (this.showSetting) {
          return 100 * this.$rpxNum;
        }
        return 0;
      }
    },
    watch: {
      tabIndex(newVal, oldVal) {
        if(newVal !== oldVal) {
          this.activeIndex = newVal;
          this.toView = `tab-scroll__index-${newVal}`;
        }
      }
    },
    async created() {
      this.styleMainColor = await getParentsStyle(this.$parent, '$mainColor');
		},

    mounted(){
	    this.$nextTick(()=>{
        this.toView = 'tab-scroll__index-0'
        if(this.scrollWithAnimation) {
          setTimeout(() => {
            this.activeIndex = this.tabIndex;
            this.toView = `tab-scroll__index-${this.tabIndex}`;
            this.$emit('onInit', this.list[this.activeIndex], this.activeIndex);
          }, 50);
				}
        else{
          this.activeIndex = this.tabIndex;
          this.toView = `tab-scroll__index-${this.tabIndex}`;
          this.$emit('onInit', this.list[this.activeIndex], this.activeIndex);
				}
      });
    },

		methods: {
			clickTab(item, index) {
				this.activeIndex = index;
        this.toView = `tab-scroll__index-${this.activeIndex}`;
				this.$emit('onTab', item, index);
			},
      handleClickSetting(){
			  this.$emit('onSetting');
      },
		}
	}
</script>

<style lang="less">
	.xd-tab {
		display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
    padding: 0;
    height: unit(100, rpx);
		&.noBorder {
			border-bottom: 1px #f5f5f5 solid;
		}

		.tab-scroll {
			.tab-scroll__box {
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				box-sizing: border-box;

				.tab-scroll__item {
					flex-shrink: 0;
					padding: 0 unit(20, rpx);
					color: #333;
					font-size: unit(30, rpx);
					height: unit(100, rpx);
					line-height: unit(100, rpx);
          position: relative;
					display: flex;
					align-items: center;
					align-content: center;

					&.active {
						color: @xd-base-color;
					}


          & > view:nth-child(2) {
            position: absolute;
            bottom: unit(10,rpx);
            left: unit(20,rpx);
            right: unit(20, rpx);
            height: unit(6,rpx);
          }
				}
			}
		}

		.tab-icons {
			position: relative;
			justify-content: flex-end;
      display: flex;
			align-items: center;
      height: unit(100, rpx);

      /deep/ span {
        font-size: unit(40, rpx) !important;
      }

      .tab-icons-box {
        width: unit(60, rpx);
        height: unit(60, rpx);
        line-height: unit(60, rpx);
        text-align: center;
        vertical-align: middle;
        display: block;
      }

			&::after {
				content: '';
				position: absolute;
				top: unit(30, rpx);
				bottom: unit(30, rpx);
				left: 0;
				width: 1px;
				background-color: #ddd;
			}
		}
	}


</style>
