<template>
  <view>
    <!--导航栏 navbar-->
    <view id="header">
      <u-navbar :title="title"
                :border-bottom="false"
                :background="{backgroundColor: 'whitesmoke'}">
      </u-navbar>

    </view>
    <view class="body " :style="{ bottom: footerHeight + 'px', top: headerHeight+ 'px'}">
      <view class="u-relative">
        <u-image height="750rpx"></u-image>
        <view v-if="!isEdit">
          <view class="u-absolute prev">上一款</view>
          <view class="u-absolute next">下一款</view>
        </view>
        <view v-if="isEdit"
            class="u-absolute step u-p-r-30 u-p-l-30">
          <view class="step-main u-p-r-20 u-p-l-20 u-flex">
            <text class="width_100">{{angle}}°</text>
            <view class="u-relative u-flex-1">
              <view class="line" id="line">
                <view class="line-center"></view>
                <view class="line-step" id="line-step"
                      :style="{
                        left:
                         (offset.x - lineOffset.left) / lineWidth * 100
                         + '%'
                      }"
                      @touchmove="touchMove"
                      @touchend="touchEnd"
                      @touchstart="touchStart"
                      />
              </view>
            </view>
            <text class="u-m-l-24">重置</text>
          </view>
        </view>
      </view>
      <view class="">
        <view class="u-m-b-20 bg-fff u-p-r-30 u-p-l-30">
          <view class="title u-flex u-p-t-26 u-p-b-18">
            <view class="title-tip u-m-r-10"></view>
            可调整部位
          </view>
          <view class="overflow u-m-b-24">
            <view class="button inline-block active">主身</view>
            <view class="button inline-block">主身</view>
          </view>
          <view class="u-p-b-20">
            <u-search placeholder="请输入面料名称" v-model="keyword"
                      border-color="#e1e1e1" height="76"
                      bg-color="#fff" :show-action="false"></u-search>
          </view>
          <view class="overflow u-p-b-30 u-border-bottom">
            <view class="image u-m-r-10 active">
              <image src="" style="width: 100%;height: 100%"></image>
              <view class="image-tip u-line-1">颜色</view>
            </view>
            <view class="image u-m-r-10">
              <image src="" style="width: 100%;height: 100%"></image>
              <view class="image-tip u-line-1">颜色</view>
            </view>
            <view class="image u-m-r-10">
              <image src="" style="width: 100%;height: 100%"></image>
              <view class="image-tip u-line-1">颜色</view>
            </view>
          </view>
          <view class="u-p-t-30 u-p-b-20 text-right">
            <view class="button inline-block button-plain button-plain-default">取消</view>
            <view class="button inline-block button-default">确定</view>
          </view>
        </view>
        <view class="bg-fff u-p-r-30 u-p-l-30">
          <view class="title u-flex u-p-t-26 u-p-b-18">
            <view class="title-tip u-m-r-10"></view>
            颜色选择
          </view>
          <view class="u-border-bottom u-p-b-32">
            <view class="">主图颜色</view>
            <view>
              <view class="image u-m-r-10">
                <image src="" style="width: 100%;height: 100%"></image>
                <view class="image-tip u-line-1">颜色</view>
              </view>
              <view class="image u-m-r-10">
                <image src="" style="width: 100%;height: 100%"></image>
                <view class="image-tip u-line-1">颜色</view>
              </view>
              <view class="image u-m-r-10">
                <image src="" style="width: 100%;height: 100%"></image>
                <view class="image-tip u-line-1">颜色</view>
              </view>
              <view class="image u-m-r-10">
                <image src="" style="width: 100%;height: 100%"></image>
                <view class="image-tip u-line-1">颜色</view>
              </view>
              <view class="image u-m-r-10">
                <image src="" style="width: 100%;height: 100%"></image>
                <view class="image-tip u-line-1">颜色</view>
              </view>
              <view class="image u-m-r-10">
                <image src="" style="width: 100%;height: 100%"></image>
                <view class="image-tip u-line-1">颜色</view>
              </view>
            </view>
          </view>
          <view>
            <view class="u-p-t-32">
              其他可选颜色
              <text>(可多选)</text>
            </view>
            <view>
              <view class="image u-m-r-10">
                <image src="" style="width: 100%;height: 100%"></image>
                <view class="image-tip u-line-1">颜色</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view id="footer" class="footer">
      <view class="footer-btn">
        <view class="button button-default button-plain button-plain--default">
          加入待上架
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dom from "@/mixins/dom";
export default {
  name: "createMaterial",
  mixins:[dom],
  data(){
    return {
      title: '111',

      keyword: '',

      offset :{
        x: 0
      },
      startTime: 0,
      lineStepWidth: 0,
      lineWidth: 0,
      lineOffset: 0,

      isEdit: false,
    }
  },
  computed:{
    angle(){
      let { lineOffset,offset,lineWidth} = this;
      let left = (offset.x - lineOffset.left) / lineWidth * 100;
      return Math.ceil((left-50) / 50 * 180);
    }
  },
  mounted() {
    this.uGetRect("#line").then(res => {
      this.lineWidth = res.width;
      this.lineOffset = {
        left: res.left,
        right: res.right,
      };
      this.offset.x = res.width /2  + res.left
    })
    this.uGetRect("#line-step").then(res => {
      this.lineStepWidth = res.width;
    })
  },
  created() {
    let {id,materialId} = this.$Route.query;
    this.getItem(id);
    this.getMaterialItem(materialId);
  },
  methods:{
    getItem(id){
      this.$http("stylelibraryorder.details", id)
        .then(res =>{

        })
    },
    getMaterialItem(id){
      this.$http("materialinfo.getMaterialById", id)
          .then(res =>{

          })
    },

    touchMove(e){
      let left =  e.changedTouches[0].pageX;
      if(
          left >= this.lineOffset.left &&
          left <= this.lineOffset.right
      ){
        this.offset.x = left
      }
    },
    touchEnd(e){
      let left =  e.changedTouches[0].pageX;
      // console.log(left)
      // console.log(this.lineOffset.right)
      if(
          left >= this.lineOffset.left &&
          left <= this.lineOffset.right
      ){
        this.offset.x = left
      }
    },
    touchStart(e){
      this.offset.x = e.changedTouches[0].pageX;
    }
  }
}
</script>

<style scoped lang="scss">
.bg-fff{ background: #fff}
.width_100{ width: 100rpx}
.inline-block{
  display: inline-block;
  margin-right: 10rpx;
}
.step{
  width: 100%; height: 60rpx;
  bottom: 16rpx;
  left: 0;
  color: #fff;
  &-main{
    background: rgba(0,0,0,0.20);
  }
}
.line{
  height: 6rpx;
  width: 100%;
  background: #fff;
  position: relative;
  &-center{
    border-radius: 50%;
    height: 16rpx; width: 16rpx;
    position: absolute;
    left: 50%; top: 50%;
    margin-right: -8rpx;
    margin-top: -8rpx;
    background: #fff;
  }
  &-step{
    border-radius: 50%;
    height: 40rpx; width: 40rpx;
    position: absolute;
    top: 50%;
    margin-top: -20rpx;
    background: #fff;
    margin-left: -20rpx;
  }
}


.prev,.next{
  width: 144rpx; height: 88rpx; line-height: 88rpx;
  color: #D5AA7A; text-align: center;
  font-size: 28rpx;
  box-shadow: 0px 2rpx 8rpx 0px rgba(0,0,0,0.10);
  bottom: 60rpx;
}
.prev{
  border-top-right-radius: 100rpx;
  border-bottom-right-radius: 100rpx;
  left: 0;
}
.next{
  border-top-left-radius: 100rpx;
  border-bottom-left-radius: 100rpx;
  right: 0;
}
.title{
  &-tip{
    width: 8rpx;
    height: 32rpx;
    background: #af8d66;
    border-radius: 6rpx;
  }
}
.image{
  position: relative;
  width: 160rpx;
  height: 160rpx;
  display: inline-block;
  border-radius: 8rpx;
  &-tip{
    text-align: center;
    width: 100%;
    height: 40rpx;line-height: 40rpx;
    background: rgba(255,255,255,0.80);
    font-size: 24rpx;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  &.active{
    border: 1px solid #DDA973;
  }
}

.button{
  border: 1px solid #333;
  border-radius: 44rpx;
  width: 160rpx;
  height: 64rpx;
  line-height: 64rpx;
  text-align: center;
  &-plain{
    &--default{
      color: #333;
    }
  }
  &-default{
    background: #333;
    color: #fff;
  }
  &.active{
    color: #AF8D66;
    border: 1px solid #DDA973;
  }
}
.body{
  position: absolute;
  background: rgba(239,239,239,0.61);
  width: 100%;
  height: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow-y: auto;
}
.overflow{
  overflow-x: auto;
  white-space: nowrap;
}
.footer {
  position: fixed;
  width: 100%;
  bottom: 0;

  z-index: 998;
  background: #fff;
  box-shadow: 0px -4rpx 6rpx 0px rgba(178,182,214,0.10);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .footer-btn{
    padding: 20rpx 60rpx;
    .button{
      border: 1px solid #333;
      border-radius: 44rpx;
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      font-size: 34rpx;
      &-default{
        background: #333;
        color: #fff;
      }
    }
  }
}
</style>
