<template>
  <view
    :class="['uni-collapse-cell', { 'uni-collapse-cell--disabled': disabled, 'uni-collapse-cell--open': isOpen }]"
    :hover-class="disabled ? '' : 'uni-collapse-cell--hover'">
    <view
      class="uni-collapse-cell__title header"
      @click="onClick">
      <view
        v-if="thumb"
        class="uni-collapse-cell__title-extra"><image
          :src="thumb"
          class="uni-collapse-cell__title-img" /></view>
      <view class="uni-collapse-cell__title-inner">
        <view class="uni-collapse-cell__title-text">{{ title }}</view>
      </view>
      <view
        :class="{ 'uni-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
        class="uni-collapse-cell__title-arrow">
        <uni-icons
          color="#bbb"
          size="20"
          type="arrowdown" />
      </view>
    </view>
    <view
      :style="{ height: isOpen ? 'auto' : '0px' }"
      class="uni-collapse-cell__content">
      <view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" :style="{ transform: isOpen ? 'translateY(0px)' : 'translateY(-50%)','-webkit-transform' : isOpen ? 'translateY(0px)' : 'translateY(-50%)' }">
        <slot />
      </view>
    </view>
  </view>
</template>

<script>
import uniIcons from '../uni-icons/uni-icons.vue'
export default {
  name: 'UniCollapseItem',
  components: {
    uniIcons
  },
  props: {
    title: {
      // 列表标题
      type: String,
      default: ''
    },
    name: {
      // 唯一标识符
      type: [Number, String],
      default: 0
    },
    disabled: {
      // 是否禁用
      type: [Boolean, String],
      default: false
    },
    showAnimation: {
      // 是否显示动画
      type: Boolean,
      default: false
    },
    open: {
      // 是否展开
      type: [Boolean, String],
      default: false
    },
    thumb: {
      // 缩略图
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isOpen: false
    }
  },
  watch: {
    open (val) {
      this.isOpen = val
    }
  },
  inject: ['collapse'],
  created () {
    this.isOpen = this.open
    this.nameSync = this.name ? this.name : this.collapse.childrens.length
    this.collapse.childrens.push(this)
    if (String(this.collapse.accordion) === 'true') {
      if (this.isOpen) {
        let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
        if (lastEl) {
          this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
        }
      }
    }
  },
  methods: {
    onClick () {
      if (this.disabled) {
        return
      }
      if (String(this.collapse.accordion) === 'true') {
        this.collapse.childrens.forEach(vm => {
          if (vm === this) {
            return
          }
          vm.isOpen = false
        })
      }
      this.isOpen = !this.isOpen
      this.collapse.onChange && this.collapse.onChange()
			this.$forceUpdate()
    }
  }
}
</script>

<style lang="scss">
@mixin collapse-hover {
	background-color: #f5f5f5;
}

@mixin collapse-disabled {
	opacity: 0.3;
}

$collapse-title-pd: $uni-spacing-col-lg $uni-spacing-row-lg;

.uni-collapse-cell {
	position: relative;
	&--hover {
		@include collapse-hover;
	}

	&--open {
		@include collapse-hover;
	}

	&--disabled {
		@include collapse-disabled;
	}

	&--animation {
		transition: all 0.3s;
	}

	&:after {
		position: absolute;
		z-index: 3;
		right: 0;
		bottom: 0;
		left: 0px;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: $uni-border-color;
	}

	&__title {
		padding: $collapse-title-pd;
		width: 100%;
		box-sizing: border-box;
		flex: 1;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		&-extra {
			margin-right: 18upx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		&-img {
			height: $uni-img-size-base;
			width: $uni-img-size-base;
		}

		&-arrow {
			width: 20px;
			height: 20px;
			transform: rotate(0deg);
			transform-origin: center center;

			&.uni-active {
				transform: rotate(180deg);
			}
		}

		&-inner {
			flex: 1;
			overflow: hidden;
			display: flex;
			flex-direction: column;
		}

		&-text {
			font-size: $uni-font-size-lg;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: inherit;
			line-height: 1.5;
			overflow: hidden;
		}
	}

	&__content {
		position: relative;
		width: 100%;
		overflow: hidden;

		.view {
			font-size: $uni-font-size-base;
		}
	}
}
</style>
