<template>
  <view class="basic-background">

    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed>背景</tn-nav-bar>

    <!-- 页面内容 -->
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">

      <view class="tn-flex tn-flex-nowrap background-container">
        <view class="background__left-container">
          <scroll-view :style="[scrollViewStyle]" scroll-y>
            <view class="background__left__picker">
              <view class="background__left__picker__item-wrapper" @click="pickerColorClick(0)">
                <view
                  class="background__left__picker__item background__left__picker__item--basic picker-color-item-0"
                  :class="[{'tn-shadow-blur': currentColorIndex === 0}]" style="background-color: #01BEFF;">
                    <text class="tn-icon-logo-tuniao"></text>
                  </view>
              </view>
              <block v-for="(item, index) in colorList" :key="index">
                <view class="background__left__picker__item-wrapper" @click="pickerColorClick(index + 1)">
                  <view class="background__left__picker__item" :class="[`picker-color-item-${index + 1} tn-bg-${item.color}`, {'tn-shadow-blur': currentColorIndex === index + 1}]"></view>
                </view>
              </block>
              
              <!-- 选中后的边框 -->
              <view class="background__left__picker__item__select-wrapper" :style="[colorSelectItemStyle]">
                <view class="circle-wrapper right">
                  <view class="circle-progress right-circle"
                    :class="{'circle-progress--active': colorSelectFlag}"
                    :style="{borderColor: currentColorIndex === 0 ? '#01BEFF' : colorList[currentColorIndex - 1]['value']['dark']}"></view>
                </view>
                <view class="circle-wrapper left">
                  <view class="circle-progress left-circle"
                    :class="{'circle-progress--active': colorSelectFlag}"
                    :style="{borderColor: currentColorIndex === 0 ? '#01BEFF' : colorList[currentColorIndex - 1]['value']['dark']}"></view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="background__right-container">
          <scroll-view :style="[scrollViewStyle]" scroll-y>
            <view class="background__right__show" :class="{'background__right__show--visible': colorSelectFlag}">
              <block v-if="currentColorIndex === 0">
                <view class="background__right__show--title">图鸟基础配色</view>
                <!-- 色盘 start-->
                <view class="box" >
                  <view v-for="(item,index) in 16" :key="index" :class="'colorwheel-box colorwheel-' + (index+1)"></view>
                </view>
                <!-- 色盘 end-->
                <view class="background__right__show__content">
                  <view class="background__right__show__content__item tn-shadow-blur" style="background-color: #01BEFF;">
                    <view class="background__right__show__content__item--title">主色蓝</view>
                    <view class="background__right__show__content__item--value">#01BEFF</view>
                  </view>
                  <view class="background__right__show__content__item tn-shadow-blur" style="background-color: #FBBD12;">
                    <view class="background__right__show__content__item--title">主色橙</view>
                    <view class="background__right__show__content__item--value">#FBBD12</view>
                  </view>
                  <view class="background__right__show__content__item tn-shadow-blur" style="background-color: #00FFC6;">
                    <view class="background__right__show__content__item--title background__right__show__content__item--title--light">点缀青</view>
                    <view class="background__right__show__content__item--value">#00FFC6</view>
                  </view>
                  <view class="background__right__show__content__item tn-shadow-blur" style="background-color: #FFF00D;">
                    <view class="background__right__show__content__item--title background__right__show__content__item--title--light">点缀黄</view>
                    <view class="background__right__show__content__item--value">#FFF00D</view>
                  </view>
                  <view class="background__right__show__content__item tn-shadow-blur" style="background-color: #FF71D2;">
                    <view class="background__right__show__content__item--title">辅助粉</view>
                    <view class="background__right__show__content__item--value">#FF71D2</view>
                  </view>
                  <view class="background__right__show__content__item tn-shadow-blur" style="background-color: #82B2FF;">
                    <view class="background__right__show__content__item--title">辅助蓝</view>
                    <view class="background__right__show__content__item--value background__right__show__content__item--value--light">#82B2FF</view>
                  </view>
                  <view class="background__right__show__content__item tn-shadow-blur" style="background-color: #080808;">
                    <view class="background__right__show__content__item--title">文字颜色</view>
                    <view class="background__right__show__content__item--value background__right__show__content__item--value--light">#080808</view>
                  </view>
                  <view class="background__right__show__content__item tn-shadow-blur" style="background-color: #F4F4F4;">
                    <view class="background__right__show__content__item--title background__right__show__content__item--title--light">背景灰</view>
                    <view class="background__right__show__content__item--value background__right__show__content__item--value--light">#F4F4F4</view>
                  </view>
                </view>
              </block>
              <block v-else>
                <view class="background__right__show--title">{{ selectColorInfo.name }}-{{ selectColorInfo.color }}</view>
                
                <view class="background__right__show__content">
                  <block v-for="(value, key, index) in selectColorInfo.value" :key="index">
                    <view class="background__right__show__content__item tn-shadow-blur" :class="[key === 'normal' ? `tn-bg-${selectColorInfo.color}` : `tn-bg-${selectColorInfo.color}--${key}`]">
                      <view class="background__right__show__content__item--title" :class="[['disabled','light'].includes(key) ? 'background__right__show__content__item--title--light' : '']">{{ key }}</view>
                      <view class="background__right__show__content__item--value" 
                        :class="[['disabled','light'].includes(key) ? 'background__right__show__content__item--value--light' : '',{'tn-color-white': selectColorInfo.color === 'gray' && key === 'normal'}]"
                      >
                      {{ value }}</view>
                    </view>
                  </block>
                </view>
                
                <block v-if="!['brown','grey','gray'].includes(selectColorInfo.color)">
                  <view class="background__right__show--title background__right__show--title--gradient" :class="[`tn-cool-bg-color-${currentColorIndex % 16 + 1}`]">渐变色</view>
                  
                  <view class="background__right__show__content">
                    <view class="background__right__show__content__item tn-shadow-blur" :class="[`tn-main-gradient-${selectColorInfo.color}`]">
                      <view class="background__right__show__content__item--title"></view>
                      <view class="background__right__show__content__item--value"></view>
                    </view>
                    <view class="background__right__show__content__item tn-shadow-blur" :class="[`tn-main-gradient-${selectColorInfo.color}--reverse`]">
                      <view class="background__right__show__content__item--title"></view>
                      <view class="background__right__show__content__item--value"></view>
                    </view>
                    <view class="background__right__show__content__item tn-shadow-blur" :class="[`tn-main-gradient-${selectColorInfo.color}--light`]">
                      <view class="background__right__show__content__item--title"></view>
                      <view class="background__right__show__content__item--value"></view>
                    </view>
                    <view class="background__right__show__content__item tn-shadow-blur" :class="[`tn-main-gradient-${selectColorInfo.color}--light--reverse`]">
                      <view class="background__right__show__content__item--title"></view>
                      <view class="background__right__show__content__item--value"></view>
                    </view>
                  </view>
                </block>
              </block>
            </view>
          </scroll-view>
        </view>
      </view>

    </view>

  </view>
</template>

<script>
  export default {
    name: 'basicBackground',
    data() {
      return {
        colorList: [{
            name: '红色',
            color: 'red',
            value: {
              normal: '#E83A30',
              dark: '#BA2E26',
              disabled: '#F39C97',
              light: '#FAD8D6'
            }
          },
          {
            name: '紫红色',
            color: 'purplered',
            value: {
              normal: '#E72F8C',
              dark: '#B9266F',
              disabled: '#F397C5',
              light: '#FAD5E8'
            }
          },
          {
            name: '紫色',
            color: 'purple',
            value: {
              normal: '#892FE8',
              dark: '#6E26BA',
              disabled: '#C497F3',
              light: '#E7D5FA'
            }
          },
          {
            name: '蓝紫色',
            color: 'bluepurple',
            value: {
              normal: '#5F4FD9',
              dark: '#4C3FAE',
              disabled: '#AFA7EC',
              light: '#DFDCF7'
            }
          },
          {
            name: '海蓝色',
            color: 'aquablue',
            value: {
              normal: '#3646FF',
              dark: '#2B38CC',
              disabled: '#9AA2FF',
              light: '#D7DAFF'
            }
          },
          {
            name: '蓝色',
            color: 'blue',
            value: {
              normal: '#3D7EFF',
              dark: '#3165CC',
              disabled: '#9EBEFF',
              light: '#D8E5FF'
            }
          },
          {
            name: '靛蓝色',
            color: 'indigo',
            value: {
              normal: '#31C9E8',
              dark: '#27A1BA',
              disabled: '#98E4F3',
              light: '#D6F4FA'
            }
          },
          {
            name: '青色',
            color: 'cyan',
            value: {
              normal: '#2DE8BD',
              dark: '#24BA97',
              disabled: '#96F3DE',
              light: '#D5FAF2'
            }
          },
          {
            name: '青绿色',
            color: 'teal',
            value: {
              normal: '#24F083',
              dark: '#1DC069',
              disabled: '#91F7C1',
              light: '#D3FCE6'
            }
          },
          {
            name: '绿色',
            color: 'green',
            value: {
              normal: '#31E749',
              dark: '#27B93A',
              disabled: '#98F3A4',
              light: '#D6FADB'
            }
          },
          {
            name: '黄绿色',
            color: 'yellowgreen',
            value: {
              normal: '#A4E82F',
              dark: '#82BA26',
              disabled: '#D1F397',
              light: '#EDFAD5'
            }
          },
          {
            name: '酸橙色',
            color: 'lime',
            value: {
              normal: '#D5EB00',
              dark: '#AABC00',
              disabled: '#E9F57F',
              light: '#F7FBCC'
            }
          },
          {
            name: '黄色',
            color: 'yellow',
            value: {
              normal: '#FFF420',
              dark: '#CCC21A',
              disabled: '#FFF88F',
              light: '#FFFDD2'
            }
          },
          {
            name: '橘黄色',
            color: 'orangeyellow',
            value: {
              normal: '#FFCA28',
              dark: '#CCA220',
              disabled: '#FFE493',
              light: '#FFF4D4'
            }
          },
          {
            name: '橙色',
            color: 'orange',
            value: {
              normal: '#FFA726',
              dark: '#CC851E',
              disabled: '#FFD392',
              light: '#FFEDD4'
            }
          },
          {
            name: '橘红色',
            color: 'orangered',
            value: {
              normal: '#FF7043',
              dark: '#CC5A36',
              disabled: '#FFB7A1',
              light: '#FFE2D9'
            }
          },
          {
            name: '棕色',
            color: 'brown',
            value: {
              normal: '#914F2C',
              dark: '#743F23',
              disabled: '#C8A795',
              light: '#E9DCD5'
            }
          },
          {
            name: '玄灰色',
            color: 'grey',
            value: {
              normal: '#78909C',
              dark: '#5F7E8B',
              disabled: '#C6D1D8',
              light: '#E4E9EC'
            }
          },
          {
            name: '灰色',
            color: 'gray',
            value: {
              normal: '#AAAAAA',
              dark: '#838383',
              disabled: '#E6E6E6',
              light: '#F8F7F8'
            }
          }
        ],
        // scrollView的样式
        scrollViewStyle: {
          height: 0
        },
        // picker列表颜色列表信息
        pickerColorInfos: [],
        // picker列表颜色选中框样式
        colorSelectItemStyle: {
          top: 0,
          left: 0
        },
        // 当前选中的颜色序号
        currentColorIndex: 0,
        colorSelectFlag: false,
        // 当前选中颜色的色值信息
        selectColorInfo: {}
      }
    },
    onLoad() {
      this.initScrollViewHeight()
    },
    onReady() {
      // 等待加载组件完成
      setTimeout(() => {
        this.getPickerColorItemInfo()
      }, 10)
    },
    methods: {
      // 计算scrollView的高度
      initScrollViewHeight() {
        // 获取当前屏幕的安全高度
        uni.getSystemInfo({
          success: (systemInfo) => {
            this.scrollViewStyle.height = systemInfo.safeArea.height - this.vuex_custom_bar_height + systemInfo
              .statusBarHeight + 'px'
          }
        })
      },
      // 获取色值列表的位置信息
      getPickerColorItemInfo() {
        // 获取picker容器的信息
        this._tGetRect('.background__left__picker').then((pickerInfo) => {
          let view = uni.createSelectorQuery().in(this)
          for (let i = 0; i <= this.colorList.length; i++) {
            view.select('.picker-color-item-' + i).boundingClientRect()
          }
          view.exec(res => {
            // 如果没有获取到，则重新获取
            if (!res.length) {
              setTimeout(() => {
                this.getPickerColorItemInfo()
                return
              }, 10)
            }
            // 将每个选择颜色值的宽高，位置信息存入列表中
            res.map((item, index) => {
              this.pickerColorInfos.push({
                x: (item.top - pickerInfo.top) + (item.height / 2),
                y: (item.left - pickerInfo.left) + (item.width / 2)
              })
              
              // 初始化选中的圆环
              this.updatePickerColorSelectItem()
              this.updateSelectColorInfo()
            })
          })
        })
      },
      // 色值选择
      pickerColorClick(index) {
        if (this.colorSelectFlag === false || index === this.currentColorIndex) {
          return
        }
        this.currentColorIndex = index
        this.updatePickerColorSelectItem()
        this.updateSelectColorInfo()
      },
      // 设置选中圆环信息
      updatePickerColorSelectItem() {
        // 先设置已选中状态为false，然后再设置选中圆环的位置信息，等待动画执行完毕后在设置已选中状态为true
        this.colorSelectFlag = false
        
        const colorInfos = this.pickerColorInfos[this.currentColorIndex]
        this.colorSelectItemStyle.top = colorInfos.x - uni.upx2px(40) + 'px'
        this.colorSelectItemStyle.left = colorInfos.y - uni.upx2px(40) + 'px'
        
        setTimeout(() => {
          this.colorSelectFlag = true
        }, 10)
      },
      // 设置选中颜色的信息
      updateSelectColorInfo() {
        if (this.currentColorIndex === 0) {
          return
        }
        this.selectColorInfo = this.colorList[this.currentColorIndex - 1]
      }
    }
  }
</script>

<style lang="scss" scoped>
  /* 色盘 start*/
  .box{
      position: relative;
      margin: auto;
      display: block;
      width: 550rpx;
      height: 600rpx;
      background: none;
  }
  .colorwheel-box{
      position: absolute;
      width: 80%;
      height: 50%;
      left: 10%;
      bottom: 20%;
      border-radius: 100% 10rpx;
      opacity: 0.4;
  }
  .colorwheel-1{
      background: #2DE8BD;
      transform: rotate(-78.75deg);
  }
  .colorwheel-2{
      background: #24F083;
      transform: rotate(-90deg);
  }
  .colorwheel-3{
      background: #31E749;
      transform: rotate(-101.25deg);
  }
  .colorwheel-4{
      background: #A4E82F;
      transform: rotate(-112.5deg);
  }
  .colorwheel-5{
      background: #D5EB00;
      transform: rotate(-123.75deg);
  }
  .colorwheel-6{
      background: #FFF420;
      transform: rotate(-135deg);
  }
  .colorwheel-7{
      background: #FFCA28;
      transform: rotate(-146.25deg);
  }
  .colorwheel-8{
      background: #FFA726;
      transform: rotate(-157.5deg);
  }
  .colorwheel-9{
      background: #FF7043;
      transform: rotate(-168.75deg);
  }
  .colorwheel-10{
      background: #E83A30;
      transform: rotate(0deg);
  }
  .colorwheel-11{
      background: #E72F8C;
      transform: rotate(-11.25deg);
  }
  .colorwheel-12{
      background: #892FE8;
      transform: rotate(-22.5deg);
  }
  .colorwheel-13{
      background: #5F4FD9;
      transform: rotate(-33.75deg);
  }
  .colorwheel-14{
      background: #3646FF;
      transform: rotate(-45deg);
  }
  .colorwheel-15{
      background: #3D7EFF;
      transform: rotate(-56.25deg);
  }
  .colorwheel-16{
      background: #31C9E8;
      transform: rotate(-67.5deg);
  }
  /* 色盘 end*/
  
  
  /* 背景颜色容器 start */
  .background-container {
    .background {

      /* 左边容器 start */
      &__left-container {
        width: 16%;
        height: 100%;
        box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
      }

      &__left {
        &__picker {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-top: 20rpx;
          position: relative;
          
          &__item-wrapper {
            width: 100%;
          }

          &__item {
            width: 50rpx;
            height: 50rpx;
            margin: 18rpx auto;
            border-radius: 50%;
            border: none;
            
            &--basic {
              text-align: center;
              color: #FFFFFF;
              line-height: 50rpx;
            }

            &__select-wrapper {
              width: 80rpx;
              height: 80rpx;
              position: absolute;
              
              .circle-wrapper {
                width: 40rpx;
                height: 80rpx;
                position: absolute;
                top: 0;
                overflow: hidden;
                
                &.right {
                  right: 0;
                }
                
                &.left {
                  left: 0;
                }
                
                .circle-progress {
                  display: inline-block;
                  width: 80rpx;
                  height: 80rpx;
                  border: 6rpx solid transparent;
                  border-radius: 50%;
                  position: absolute;
                  top: 0;
                  transform: rotate(225deg);
                  
                  &.right-circle {
                    right: 0;
                    border-bottom-color: transparent !important;
                    border-left-color: transparent !important;
                    // transition: transform 0.3s cubic-bezier(0,.13,0,1.43);
                  }
                  
                  &.left-circle {
                    left: 0;
                    border-top-color: transparent !important;
                    border-right-color: transparent !important;
                    // transition: transform 0.3s cubic-bezier(0,.13,0,1.43);
                  }
                  
                  &--active {
                    transform: rotate(45deg);
                  }
                }
              }
            }
          }
        }
      }

      /* 左边容器 end */

      /* 右边容器 start */
      &__right-container {
        width: 84%;
        height: 100%;
      }
      
      &__right {
        &__show {
          padding: 30rpx;
          overflow: hidden;
          transform-origin: 0 50%;
          // transform: scaleX(0) rotate(-90deg);
          // transform: rotateY(-90deg);
          // transform: scaleX(0);
          // transition: all 0.2s linear;
          
          &--visible {
            // transform: scaleX(1) rotate(0deg);
            // transform: rotateY(0deg);
            // transform: scaleX(1);
          }
          
          &--title {
            font-size: 46rpx;
            text-transform: capitalize;
            
            &--gradient {
              -webkit-background-clip: text;
              color: transparent;
            }
          }
          
          &__content {
            
            margin-top: 40rpx;
            
            &__item {
              width: 100%;
              height: 160rpx;
              border-radius: 10rpx;
              margin-bottom: 40rpx;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              align-content: center;
              flex-wrap: wrap;
              padding-left: 40rpx;
              
              &--title {
                width: 100%;
                font-size: 1.4em;
                line-height: 1.4em;
                color: #FFFFFF;
                text-transform: capitalize;
                
                &--light {
                  color: #080808 !important;
                }
              }
              
              &--value {
                width: 100%;
                font-size: 0.8em;
                color: #AAAAAA;
                
                &--light {
                  color: #818181 !important;
                }
              }
            }
          }
        }
      }

      /* 右边容器 end */
    }
  }

  /* 背景颜色容器 end */

  @-webkit-keyframes circleProgressLoad_right {
    0% {
      transform: rotate(225deg);
    }

    100% {
      transform: rotate(45deg);
    }
  }
  
  @-webkit-keyframes circleProgressLoad_left {
    0% {
      transform: rotate(225deg);
    }
  
    100% {
      transform: rotate(45deg);
    }
  }
</style>
