<template>
  <view>
    <view id="header">
      <!--新增委托navbar-->
      <view class="navbar u-p-t-20 u-p-r-30 u-p-b-20 u-p-l-30 u-flex">
        <u-icon name="arrow-left" color="#000" @click="$Router.back()"></u-icon>
        <text class="u-flex-1 text-center">款式委托</text>
        <text @click="goEntrustList">上架单</text>
      </view>
      <view class="u-p-30">
        <u-search placeholder="请输入款式名称或面料名称" v-model="keyword"
                  border-color="#e1e1e1" height="76"
                  bg-color="#fff" :show-action="false"></u-search>
      </view>
      <view class="status-list u-flex bg-fff">
        <view v-for="(status,index) in statusList"
              class="status-item u-flex-1 text-center"
              :class="[activeStatus === index ? 'active' : '']"
              @click="setActiveStatus(index)"
        >
          {{status.label}}
        </view>
      </view>
    </view>
    <view id="body" class="body u-p-r-30 u-p-l-30" :style="{ bottom: footerHeight + 'px', top: headerHeight+ 'px'}">
      <view v-if="activeStatus === 0">
        <view class="u-p-t-24 u-p-b-24">待上架：300款</view>
        <view class="entrust bg-fff u-p-30">
          <view class="entrust-title u-flex">
            <!--          :name="index === selectedIndex ? 'checkmark-circle-fill': 'checkmark-circle'"-->
            <u-icon name="checkmark-circle"
                    color="#000" size="40"
                    @click="triggerSelectItem()"
            />
            <text class="u-flex-1 u-p-l-30">
              加厚荷兰绒绒布布料(<text class="active-color">1</text>/3)
            </text>
            <u-icon name="arrow-down"
                    color="#000" size="40"
                    @click="triggerToggle()"
            />
          </view>
          <view class="u-flex u-p-t-30">
            <u-icon name="checkmark-circle"
                    color="#000" size="40"
                    @click="triggerSelectItem()"
            />
            <view class="item u-flex-1 u-flex u-p-l-30">
              <view class="item-img"></view>
              <view class="u-flex-1 u-p-l-20">
                <view class="item-title u-line-1 u-font-28">男装-上装-青年-时尚休闲</view>
                <view class="u-flex u-m-t-6 u-m-b-6">
                  <view class="u-m-r-40 label u-font-24">款号</view>
                  <view class="u-line-1 u-flex-1 content u-font-24">
                    11
                  </view>
                </view>
                <view class="u-flex u-m-t-6 u-m-b-6">
                  <view class="u-m-r-40 label u-font-24">所选面料</view>
                  <view class="u-line-1 u-flex-1 content u-font-24">
                    11
                  </view>
                </view>
                <view class="item-tags">
                  <view class="item-tag u-font-20">
                    标签
                  </view>
                  <view class="item-tag u-font-20">
                    标签
                  </view>
                </view>
              </view>
            </view>
          </view>

        </view>
      </view>
      <view v-if="activeStatus === 1">
        <view class="u-p-t-24 u-p-b-24">已上架：300款</view>
        <view class="entrust bg-fff u-p-30">
          <view class="entrust-title u-flex">
            <text class="u-flex-1 u-p-l-30">
              加厚荷兰绒绒布布料(3)
            </text>
            <u-icon name="arrow-down"
                    color="#000" size="40"
                    @click="triggerToggle()"
            />
          </view>
          <view class="u-flex u-p-t-30">
            <view class="item u-flex-1 u-flex u-p-l-30">
              <view class="item-img"></view>
              <view class="u-flex-1 u-p-l-20">
                <view class="item-title u-line-1 u-font-28">男装-上装-青年-时尚休闲</view>
                <view class="u-flex u-m-t-6 u-m-b-6">
                  <view class="u-m-r-40 label u-font-24">款号</view>
                  <view class="u-line-1 u-flex-1 content u-font-24">
                    11
                  </view>
                </view>
                <view class="u-flex u-m-t-6 u-m-b-6">
                  <view class="u-m-r-40 label u-font-24">所选面料</view>
                  <view class="u-line-1 u-flex-1 content u-font-24">
                    11
                  </view>
                </view>
                <view class="item-tags">
                  <view class="item-tag u-font-20">
                    标签
                  </view>
                  <view class="item-tag u-font-20">
                    标签
                  </view>
                </view>
              </view>
            </view>
          </view>

        </view>
      </view>
      <view v-if="activeStatus === 2">
        <view class="u-p-t-24 u-p-b-24">全部：300款</view>
        <view class="entrust bg-fff u-p-30">
          <view class="entrust-title u-flex">
            <view class="entrust-tip"></view>
            <text class=" u-flex-1 u-p-l-30">
              加厚荷兰绒绒布布料(3)
            </text>
            <text>已上架</text>
          </view>
          <view class="u-flex u-p-t-30">
            <view class="item u-flex-1 u-flex u-p-l-30">
              <view class="item-img"></view>
              <view class="u-flex-1 u-p-l-20">
                <view class="u-flex u-m-t-6 u-m-b-6">
                  <view class="u-m-r-40 label ">款号</view>
                  <view class="u-line-1 u-flex-1 content">
                    11
                  </view>
                </view>
                <view class="u-flex u-m-t-6 u-m-b-6">
                  <view class="u-m-r-40 label">所选面料</view>
                  <view class="u-line-1 u-flex-1 content">
                    11
                  </view>
                </view>
                <view class="item-tags">
                  <view class="item-tag u-font-20">
                    标签
                  </view>
                  <view class="item-tag u-font-20">
                    标签
                  </view>
                </view>
              </view>
            </view>
          </view>

        </view>
      </view>
    </view>
    <view id="footer" class="footer" v-if="activeStatus === 0">
      <view class="footer-btn">
        <view class="custom-style-round-circle custom-style-btn custom-style"
        >
          <view class="custom-style-left save">删除</view>
          <view class="custom-style-right submit">
            一键上架(3)
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dom from "@/mixins/dom";

export default {
  name: "entrustManagement",
  mixins:[dom],
  data(){
    return{
      keyword: '',

      activeStatus: 0,
      statusList: [
        {label: '待上架', value: '1'},
        {label: '已上架', value: '2'},
        {label: '全部', value: '3'},
      ]
    }
  },
  methods:{
    resetPage(){
      this.getHeaderHeight();
      this.getFooterHeight();
    },
    setActiveStatus(index){
      this.activeStatus = index;
      this.resetPage();
    },

    triggerSelectItem(){

    },
    triggerToggle(){

    },
    goEntrustList(){
      this.$Router.push({
        path: '/pages/material/entrustList'
      })
    }
  }
}
</script>

<style scoped lang="scss">
$h-color: #AF8D66;
$activeColor: #DDA973;
$color: rgba(175,141,102,0.10);
$main-color: #fff;
@mixin vue-flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  flex-direction: $direction;
  /* #endif */
}
.active-color{ color: $color}
.bg-fff{ background: #fff;}
.item{
  width: 100%;
  margin-bottom: 28rpx;

  &--round{
    border-radius: 16rpx;
    border: 1px solid rgba(0,0,0,0.10);
  }
  &--status{
    left: 0;
    top: 0;
    position: absolute;
  }
  &-img{
    width: 160rpx;
    height: 160rpx;
    //height: 100%
  }
  &-title{}
  &-desc{}
  &-tags{

  }
  &-tag{
    padding: 6rpx 2px;
    background: $color;
    text-align: center;
    color: $h-color;
    display: inline-block;
    margin-right: 10rpx;
  }
}
.entrust{
  border-radius: 8rpx;
  &-tip{
    width: 8rpx;
    height: 32rpx;
    background: #af8d66;
    border-radius: 6rpx;
  }
}
.custom-style{
  color: #fff; height: 88rpx; line-height: 88rpx;
  @include vue-flex;
  &-btn{
    overflow: hidden;
  }
  &-round-circle{
    border-radius: 100rpx;
  }
  /*background: #000;*/
  .custom-style-left{ width: 240rpx; background: #d6d6d6; text-align: center }
  .custom-style-right{ flex: 1; background: rgba(0,0,0,0.80);text-align: center}
  .save{
    font-size: 34rpx;
    color: #000000;
  }
  .submit{
    font-weight: 500;
    font-size: 34rpx;
    //line-height: 100%;
    .title{
      //margin: 8rpx 0;
    }
    .desc{

      font-size: 20rpx;
      .color{
        color: #DDA973;
      }
    }
  }
}
.label{
  color: rgba(0,0,0,0.40);
  font-size: 28rpx;
  min-width: 140rpx;
}
.context{
  color: #000;
  font-size: 28rpx;
}
.status-list{
  height: 80rpx;
  border-top-right-radius: 8rpx;
  border-top-left-radius: 8rpx;
  .status-item{
    color: #666;
    font-size: 28rpx;
    &.active{
      font-size: 32rpx;
      color:$activeColor;
    }
  }
}
.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;
}

.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>
