<template>
  <view
    :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }"
    class="uni-collapse-cell"
  >
    <view
      class="uni-collapse-cell__title"
      @click="onClick"
    >
      <view
        v-if="iconText"
        class="uni-collapse-cell__title-iconText"
        v-bind:style="{background:background}"
      >{{iconText}}</view>
      <image
        v-if="thumb"
        :src="thumb"
        class="uni-collapse-cell__title-img"
      />
      <text class="uni-collapse-cell__title-text">{{ title }}</text>
      <text class="uni-collapse-cell__time-text">{{ time }}</text>
      <!-- #ifdef MP-ALIPAY -->
      <view
        :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
        class="uni-collapse-cell__title-arrow"
      >
        <uni-icons
          color="#bbb"
          size="20"
          type="arrowdown"
        />
      </view>
      <!-- #endif -->
      <!-- #ifndef MP-ALIPAY -->
      <uni-icons
        :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
        class="uni-collapse-cell__title-arrow"
        color="#bbb"
        size="20"
        type="arrowdown"
      />
      <!-- #endif -->
    </view>
    <view
      :class="{'uni-collapse-cell__content--hide':!isOpen}"
      class="uni-collapse-cell__content"
    >
      <view
        :class="{ 'uni-collapse-cell--animation': showAnimation === true }"
        class="uni-collapse-cell__wrapper"
        :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}"
      >
        <slot />
      </view>
    </view>
  </view>
</template>

<script>
import UniIcons from '../UniIcons/UniIcons.vue'
export default {
  name: 'UniCollapseItem',
  components: {
    UniIcons
  },
  props: {
    title: {
      // 列表标题
      type: String,
      default: ''
    },
    time: {
      // 列表时间 朱海涛加的，验光数据需要
      type: String,
      default: ''
    },
    name: {
      // 唯一标识符
      type: [Number, String],
      default: 0
    },
    disabled: {
      // 是否禁用
      type: Boolean,
      default: false
    },
    showAnimation: {
      // 是否显示动画
      type: Boolean,
      default: false
    },
    open: {
      // 是否展开
      type: Boolean,
      default: false
    },
    thumb: {
      // 缩略图
      type: String,
      default: ''
    },
    iconText: {
      // 名字头像
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isOpen: false,
      background: ''

    }
  },
  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) {
        const lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
        if (lastEl) {
          this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
        }
      }
    }
  },
  computed: {
    // 给头像搞个随机背景颜色，验光数据页面需要
    getRandomColor() {
      const r = Math.floor(Math.random() * 256)
      const g = Math.floor(Math.random() * 256)
      const b = Math.floor(Math.random() * 256)
      const color = '#' + r.toString(16) + g.toString(16) + b.toString(16)
      this.background = color
      // return color;
    }
  },
  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()
      // console.log(this.isOpen)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.uni-collapse-cell {
  flex-direction: column;
  border-color: #ffffff;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.uni-collapse-cell--hover {
  background-color: #ffffff;
}

.uni-collapse-cell--open {
  background-color: #ffffff;
}

.uni-collapse-cell--disabled {
  background-color: #ffffff;
  // opacity: 0.3;
}

.uni-collapse-cell--hide {
  height: 48px;
}

.uni-collapse-cell--animation {
  transition: transform all 0.5s ease;
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: ease;
}

.uni-collapse-cell__title {
  // padding: 12px 12px;
  font-size: 16px;
  color: #333333;
  position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  width: 100%;
  box-sizing: border-box;
  /* #endif */
  height: 48px;
  line-height: 24px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.uni-collapse-cell__title-iconText {
  border: 1px solid #ffffff;
  height: 50rpx;
  width: 50rpx;
  border-radius: 26rpx;
  // background-color: #47A6F0;
  font-size: 12px;
  color: #ffffff;
  line-height: 50rpx;
  text-align: center;
  margin-right: 20rpx;
}
.uni-collapse-cell__title:active {
  background-color: #ffffff;
}

.uni-collapse-cell__title-img {
  height: $uni-img-size-base;
  width: $uni-img-size-base;
  margin-right: 10px;
  // height: 50rpx;
  // width: 50rpx;
  // border-radius: 25rpx;
  // border-radius: 25rpx;
}

.uni-collapse-cell__title-arrow {
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
  transform-origin: center center;
}

.uni-collapse-cell__title-arrow-active {
  transform: rotate(0deg);
}

.uni-collapse-cell__title-text {
  flex: 1;
  font-size: $uni-font-size-base;
  /* #ifndef APP-NVUE */
  white-space: nowrap;
  color: inherit;
  /* #endif */
  /* #ifdef APP-NVUE */
  lines: 1;
  /* #endif */
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: #333333;
}
.uni-collapse-cell__time-text {
  font-size: 12px;
  color: #999999;
  margin-right: 20rpx;
}
.uni-collapse-cell__content {
  overflow: hidden;
}

.uni-collapse-cell__wrapper {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
}

.uni-collapse-cell__content--hide {
  // height: 0px;
  // line-height: 0px;
}
</style>