<template>
  <view>
    <view id="header">
      <!--选款-->
      <u-navbar title="选款"
                :border-bottom="false"
                :background="{backgroundColor: 'whitesmoke'}">
      </u-navbar>
      <view class="u-p-30 u-font-32 u-flex">
        <text class="title">选择面料</text>
        <u-icon size="24" color="#000" name="arrow-right" class="u-m-r-10 u-m-l-10"></u-icon>
        <text>选择款式</text>
      </view>
      <view class="u-p-30 bg-fff u-flex">
        <!--新增委托navbar-->
        <view class="u-flex-1">
          <u-search placeholder="请输入面料名称" v-model="keyword"
                    border-color="#e1e1e1" height="76"
                    bg-color="#fff" :show-action="false"></u-search>
        </view>
        <image src="@/static/images/search/filter.png" class="filter"
               @click="popupShow = true"
               mode="widthFix"></image>
      </view>
    </view>
    <!-- 列表 确定-->
    <scroll-view class="body bg-fff u-p-r-30 u-p-b-30 u-p-l-30"
                 :scroll-y="true"
                 @scrolltolower="loadMore"
          :style="{ bottom: footerHeight+ 'px', top: headerHeight + 'px' }">
        <view v-for="(item, index) in list" :key="item.id"
              @click="$Router.push({
              path: '/pages/material/createMaterial',
              query:{
                materialId: $Route.query.materialId,
                id: item.id
              }
            })"
              class="u-flex u-m-b-20">
          <view class="item item--round u-flex ">
            <view class="item-img u-relative">
              <image :src="`${$IMG_URL}${item.effectPictureCode}`"
                     mode="fit"
                     style="width:100%; height: 100%"></image>
              <u-image width="100rpx" height="100rpx" v-if="item.putawayStatus === 1"
                       class="item--status"
                       mode="widthFix"
                       src="@/static/images/material/status.png">
              </u-image>
            </view>
            <view class="u-p-l-20 u-p-r-30 u-border-left item-content">
              <view class="item-title u-flex ">
                <view class="u-flex-1 u-line-1 u-font-32 u-p-t-20 u-p-b-8">{{item.styleTag}}</view>
                <u-icon size="24" color="#000" name="arrow-right"></u-icon>
              </view>
              <view class="item-desc u-font-24">{{ item.styleCode }}</view>
              <view class="item-tags u-p-b-24">
                <view class="item-tag u-font-20"
                      :key="tag.id"
                      v-for="tag in item.styleLibraryTagVOList">
                  {{ tag.materialTagName }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 加载更多 -->
        <u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
        <!-- 缺省页 -->
        <hs-empty  v-if="isEmpty" tipText="没有数据"></hs-empty>
    </scroll-view>
    <u-popup v-model="popupShow" mode="bottom" height="100%">
      <view class="u-relative">
        <!--选款-->
        <view class="position-sticky">
          <u-navbar title="按照面料标签筛选" :is-fixed="false"
                    :border-bottom="false" :custom-back="() =>{ popupShow = false;}"
                    :background="{backgroundColor: 'whitesmoke'}">
          </u-navbar>
          <view class="bg-fff u-p-30">
            <u-search placeholder="请输入面料标签名称" v-model="tagKeyword"
                      border-color="#e1e1e1" height="76"
                      bg-color="#fff" :show-action="false"></u-search>
          </view>
        </view>

        <view class="tags u-p-l-30 u-p-r-30">
          <view class="tag u-line-1" @click="triggerClickTag(tag)"
                v-for="(tag) in computedMaterialLabelList"
                :class="[tagIds.indexOf(tag.materialLabelId) > -1 ? 'active': '']">
            {{tag.labelName}}
          </view>
        </view>
        <view class="footer">
          <view class="footer-btn ">
            <view class="u-flex">
              <view class="u-line-1 ">
                已选择：<text class="active-color">{{tagIds.length}} 条数据</text>
              </view>
              <view class="u-flex-1 text-right">
                <view class="button inline-block" @click="tagIds = []">重置</view>
                <view class="button button-default inline-block u-m-l-20" @click="popupConfirm">确定</view>
              </view>
            </view>

          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import dom from "../designCommissioned/mixins/dom";

export default {
  name: "selectType",
  mixins:[dom],
  data(){
    return {
      keyword: '',
      selectedIndex: -1,
      pageOptions: {
        current: 1,
        size: 10,
      },
      list: [],

      popupShow: false,
      tagKeyword: '',
      tagIds: [],

      materialLabelList: [],
    }
  },
  onLoad(){
    this.labelListTo();
    this.getList();

  },
  computed:{
    isEmpty(){
      return this.list.length === 0
    },
    computedMaterialLabelList(){
      return this.materialLabelList.filter((item) => {
        return item.labelName.indexOf(this.tagKeyword) > -1
      })
    }
  },

  methods:{
    // 触底加载更多
    loadMore() {
      if (this.pageOptions.current < this.pageOptions.pages) {
        this.pageOptions.current += 1;
        this.getList([],false);
      }
    },
    popupConfirm(){
      this.getList(this.tagIds,true);
      this.popupShow = false;
    },
    triggerClickTag({materialLabelId}){
      let index = this.tagIds.indexOf(materialLabelId)
      if(index > -1){
        this.tagIds.splice(index,1)
      }else{
        this.tagIds.push(materialLabelId)
      }
    },
    search(){
      this.pageOptions = {
        current: 1,
        size: 10,
      }
      this.getList();
    },
    getList(materialTagIdList = [],isReload = false){
      this.loadStatus = 'loading';
      this.$http('stylelibraryorder.page', {
        styleTag: this.keyword,
        isFilter: true,
        status: 0,
        materialTagIdList,
        ...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.loadStatus = 'nomore';
          }
        }
      });
    },
    // 获取标签
    labelListTo(){
      this.$http("materialLabel.list",{
        isDeleted: 0
      }).then(res =>{
        let {
          code, data
        } = res;
        if(
            code === 200
        ){
          this.materialLabelList = data.platformLabel.map(($item) => {
            let { id, ...item} = $item;
            return {
              ...item,
              materialLabelId: id
            }
          });
          // console.log(this.materialLabelList)
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
$h-color: #AF8D66;
$color: rgba(175,141,102,0.10);
$main-color: #fff;

.active-color{
  color: #d4aa79;
}
.inline-block{
  display: inline-block;
}
.position-sticky{
  position: sticky;
  top: 0;
  z-index: 9999;
}
.tags{
  display: grid;
  grid-gap: 20rpx;
  grid-template-columns: 1fr 1fr 1fr;
  .tag{
    line-height: 80rpx;
    text-align: center;
    border-radius: 6rpx;
    position: relative;
    background: #f4f4f4;
    color: #666666;
    &.active{
      color: #d4aa79;
      background: #f7ede4;
      &::after{
        content: ' ';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 42rpx;
        height: 32rpx;
        background: url("@/static/images/search/checked.png");
      }
    }
  }
}
.filter{
  margin-left: 36rpx;
  width: 42rpx;
  height: 48rpx;
}
.body{
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  //overflow-y: auto;

}
.title{
  color: $h-color;
  background-color: whitesmoke;
}
.bg-fff{
  background: $main-color;
}
.custom-style{
  color: #fff;
  background: #000;
}
.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 30rpx;
  }
}

.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;
  }
}
.item{
  width: 100%;

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

  }
  &-tag{
    padding: 6rpx 2px;
    background: $color;
    text-align: center;
    color: $h-color;
    display: inline-block;
    margin-right: 10rpx;
  }
}
</style>
