<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">待上架：{{ pageOptions.pages }}款</view>
        <view class="entrust bg-fff u-p-30"
              v-for="(item,index) in computedList">
          <view class="entrust-title u-flex">
            <u-icon :name="checkSelect(item) ? 'checkmark-circle-fill': 'checkmark-circle'"
                    color="#000" size="40"
                    @click="triggerSelectList(item)"
            />
            <text class="u-flex-1 u-p-l-30" @click="triggerToggle(index)">
              {{item.label}} (<text class="active-color">{{checkSelectedLength(item)}}</text>/{{item.children.length}})
            </text>
            <u-icon
                :name="checkToggle(index) ? 'arrow-up': 'arrow-down'"
                color="#000" size="40"
                @click="triggerToggle(index)"
            />
          </view>
          <view v-if="checkToggle(index)">
            <view class="u-flex u-p-t-30" v-for="(item) in item.children">
              <u-icon name="checkmark-circle"
                      color="#000" size="40"
                      :name="selectedIds.indexOf(item.id) > -1 ? 'checkmark-circle-fill': 'checkmark-circle'"
                      @click="() => { triggerSelectItem(item)}"
              />
              <view class="item u-flex-1 u-flex u-p-l-30" @click="goItem(item)">
                <view class="item-img"></view>
                <view class="u-flex-1 u-p-l-20">
                  <view class="item-title u-line-1 u-font-28">{{ item.materialName}}</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">
                      {{ item.styleCode }}
                    </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">
                      {{ item.materialName }}
                    </view>
                  </view>
                  <view class="item-tags">
                    <view class="item-tag u-font-20" :key="tag.id"
                          v-for="(tag) in item.styleLibraryTagVOList">
                      {{ tag.materialTagName }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="activeStatus === 1">
        <view class="u-p-t-24 u-p-b-24">已上架：{{ pageOptions.pages }}款</view>
        <view class="entrust bg-fff u-p-30" v-for="(item,index) in computedList" >
          <view class="entrust-title u-flex">
            <text class="u-flex-1 u-p-l-30">
              {{ item.label}}
            </text>
            <u-icon name="arrow-down"
                    color="#000" size="40"
                    @click="triggerToggle(index)"
            />
          </view>
          <view class="u-flex u-p-t-30" v-for="item in item.children">
            <view class="item u-flex-1 u-flex u-p-l-30"   @click="goItem(item)">
              <view class="item-img"></view>
              <view class="u-flex-1 u-p-l-20">
                <view class="item-title u-line-1 u-font-28">{{ item.materialName }}</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">
                    {{ item.styleCode }}
                  </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">
                    {{ item.materialName }}
                  </view>
                </view>
                <view class="item-tags">
                  <view class="item-tag u-font-20" :key="tag.id"
                        v-for="(tag) in item.styleLibraryTagVOList">
                    {{ tag.materialTagName }}
                  </view>
                </view>
              </view>
            </view>
          </view>

        </view>
      </view>
      <view v-if="activeStatus === 2">
        <view class="u-p-t-24 u-p-b-24">全部：{{ pageOptions.pages }}款</view>

        <view v-for="item in list" @click="goItem(item)" :key="item.id">
          <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">
                {{
                  item.styleTag
                }}
              </text>
              <text>{{item.putawayStatus | putawayStatusFilter}}</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">
                  <!--                  <image :src="`${$IMG_URL}${item.pci}`"></image>-->
                </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">
                      {{ item.styleCode }}
                    </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">
                      {{ item.materialName }}
                    </view>
                  </view>
                  <view class="item-tags">
                    <view class="item-tag u-font-20" :key="tag.id"
                          v-for="(tag) in item.styleLibraryTagVOList">
                      {{ tag.materialTagName }}
                    </view>
                  </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" @click="submit">
            一键上架({{selected.length}})
          </view>
        </view>
      </view>
    </view>

    <!--提示-->
    <u-toast ref="uToast" />
  </view>
</template>

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

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

      activeStatus: 0,
      statusList: [
        {label: '待上架', value: '2'},
        {label: '已上架', value: '3'},
        {label: '全部', value: '1'},
      ],
      selected: [],
      hideList: [],
      list:[],
      pageOptions: {
        current: 1,
        size: 10,
        pages: 0,
      },
    }
  },
  computed:{
    computedList(){
      function arr2Tree(data,id = 'materialName'){
        const newList = [], map = Array.from(
            new Set(
                data.map(item =>{
                  return item[id]
                })
            )
        ) ;
        for (let i = 0; i < data.length; i++) {
          let item = data[i],
              name = item[id],
              index = map.indexOf(name);
          if(newList[index]){
            newList[index]['children'].push(item)
          }else{
            newList.push({
              label: name,
              children: [item]
            })
          }
        }
        return newList;
      }
      return arr2Tree(this.list).map((item) => {
        return {
          ...item,
          show: true
        }
      })
    },
    selectedIds(){
      return this.selected.map((item) => item.id);
    }
  },
  filters:{
    putawayStatusFilter(v){
      switch (v) {
        case 1:
          return '未上架'
        case 2:
          return '待上架'
        case 3:
          return '待上架'
        default:
          return  ''
      }
    }
  },
  created() {
    this.getList();
  },
  methods:{
    goItem({id}){
      this.$Router.push({
        path: '/pages/material/entrustManagementItem',
        query:{
          id
        }
      })
    },
    submit(){
      this.$http("stylelibraryorder.oneClickListing", this.selectedIds)
          .then(res => {
            let {
              code, msg
            } = res;
            if(code === 200){
              this.$refs['uToast'].show({
                title: msg
              })
              this.selected = [];
              this.hideList = [];
              this.getList();
            }else{
              this.$refs['uToast'].show({
                title: msg
              })
            }
          })
    },

    resetPage(){
      this.getHeaderHeight();
      this.getFooterHeight();
    },
    setActiveStatus(index){
      this.activeStatus = index;
      this.resetPage();
      this.getList(true);
    },
    checkSelectedLength({children}){
      // 获取所有id
      let childrenIds = children.map(item => item.id);
      // 核对是否存在
      return this.selectedIds.filter(id => childrenIds.indexOf(id)).length
    },
    checkToggle(index){
      return this.hideList.indexOf(index) > -1
    },
    checkSelect({children}){
      let childrenIds = children.map(item => item.id);
      return new Set(this.selectedIds.concat(childrenIds)).size === this.selected.length
    },
    // 多选 确定/取消
    triggerSelectList(item){
      // console.log(children)
      if(!this.checkSelect(item)){
        this.selected = this.selected.concat(
            item.children.filter(($item) => this.selectedIds.indexOf($item.id) === -1)
        );
      }else{
        // this.selected = this.selected.concat(
        //     item.children.filter(($item) => this.selectedIds.indexOf($item.id) === -1)
        // );
      }
    },
    // 单选 确定/取消
    triggerSelectItem(item){
      let index = this.selectedIds.indexOf(item.id);
      if(index > -1){
        this.selected.splice(index,1)
      }else {
        this.selected.push(item)
      }
    },
    triggerToggle(index){
      let $index = this.hideList.findIndex($I => $I === index);
      if($index > -1){
        this.hideList.splice($index,1)
      }else{
        this.hideList.push(index)
      }
    },
    // 触底加载更多
    onReachBottom() {
      if (this.pageOptions.current < this.pageOptions.pages) {
        this.pageOptions.current += 1;
        this.getList();
      }
    },
    getList(isReload = false){
      this.$http("stylelibraryorder.getToShelvesManagerList",{
        status: this.statusList[this.activeStatus].value,
        ...this.pageOptions
      })
          .then(res => {
            let { code, data } = res;
            if (code === 200) {
              if(Object.keys(data).length > 0){
                this.list = isReload ? data.records: this.list.concat(data.records);
                this.pageOptions.pages = data.total;
                this.loadStatus = this.list.length  < data.total ? 'loadmore' : 'nomore';
              }else{
                this.list = [];
                this.pageOptions.pages = 0;
                this.loadStatus = 'nomore';
              }
            }
          })
    },
    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: $activeColor}
.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>
