<template>
  <view>
    <view id="header">
      <!--新增委托navbar-->
      <u-navbar title="选择面料"
                :border-bottom="false"
                :background="{backgroundColor: 'whitesmoke'}">
        <template v-slot:right>
          <view class="u-p-r-30 u-font-27"
              @click="addMaterialModeling">新增面料</view>
        </template>
      </u-navbar>
      <view class="title u-p-30">选择面料</view>
      <view class="u-p-30 bg-fff">
        <!--新增委托navbar-->
        <u-search placeholder="请输入面料名称" v-model="keyword" @search="search"
                  border-color="#e1e1e1" height="76"
                  bg-color="#fff" :show-action="false"></u-search>
      </view>
    </view>
    <!-- 列表 确定-->
    <scroll-view class="u-p-30 body"
                 :scroll-y="true"
                 @scrolltolower="loadMore"
          :style="{ bottom: footerHeight+ 'px', top: headerHeight + 'px' }">
      <view v-for="(item, index) in computedList" :key="item.id" class="u-flex u-m-b-20">
        <view class="u-m-r-30">
          <u-icon :name="index === selectedIndex ? 'checkmark-circle-fill': 'checkmark-circle'"
                  color="#000" size="40"
                  @click="triggerSelectItem(index)"
          />
        </view>
        <hs-material-thumbnail :item="item"></hs-material-thumbnail>
      </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>


    <!-- 底部按钮 确定-->
    <view class="footer" id="footer">
      <view class="footer-btn">
        <!--        /* 以下形式在微信小程序会无效，APP和H5有效 */-->
        <u-button :disabled="selectedIndex === -1"
                  @click="selectType"
                  class="custom-style" shape="circle"
        >
          确定
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
import dom from "../designCommissioned/mixins/dom";
import { mapGetters } from 'vuex';
export default {
  name: "list",
  mixins:[dom],
  data(){
    return {
      keyword: '',
      selectedIndex: -1,
      pageOptions: {
        current: 1,
        size: 10,
      },
      loadStatus: 'loadmore',
      list: []
    }
  },
  computed:{
    ...mapGetters([
      'categoryDictionary', // 版型
    ]),
    computedList(){
      return this.list.map((item) => {
        return {
          ...item,
          materialCategory: this.categoryDictionary.find(($item) =>{
            return item.category == $item.value
          })?.label,
          materialDoorWidth: item.clothWidth,
          materialElement: item.saoriStandard,
        }
      })
    },
    isEmpty(){
      return this.list.length === 0
    }
  },
  onLoad(){
    this.getList(false);
  },
  methods:{
    // 触底加载更多
    loadMore() {
      if (this.pageOptions.current < this.pageOptions.pages) {
        this.pageOptions.current += 1;
        this.getList(false);
      }
    },
    search(){
      this.pageOptions = {
        current: 1,
        size: 10,
      }
      this.getList(true);
    },
    getList(isReload){
      this.loadStatus = 'loading';
      this.$http('materialinfo.getMaterialList', {
        "codeAndName": this.keyword,
        "isFilter": true,
        "isDisabled": false,
        "materialCode": "",
        "materialType": "面料",
        ...this.pageOptions
      }).then(res => {
        let { code, data } = res;
        if (code == 200) {
          this.list = isReload ? data.page.records :
              this.list.concat(data.page.records || []);
          this.pageOptions.pages = data.page.total;
          this.loadStatus = this.list.length  < data.page.total ? 'loadmore' : 'nomore';
        }
      });
    },
    triggerSelectItem(index){
      this.selectedIndex = index === this.selectedIndex ? -1 : index;
    },

    // 跳转到面料详情
    toMaterialDetail({id}){
      this.$Router.push({
        path:"/pages/home/fabricDetails",
        query:{
          id
        }
      })
    },
    // 新增面料建模
    addMaterialModeling(){
      this.$Router.push({
        path:"/pages/modeling/addItem"
      })
    },
    // 跳转到选款
    selectType(){
      let selectItem = this.list[this.selectedIndex];
      this.$Router.push({
        path:"/pages/material/selectType",
        query:{
          materialId: selectItem.id
        }
      })
    }

  }
}
</script>

<style scoped lang="scss">
$h-color: #AF8D66;
$main-color: #fff;
.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;
}
.item{
  border-radius: 8rpx;
  border: 1px solid #bd4848;
  height: 160rpx; width: 100%;
  overflow: hidden;
  background-size: contain;

  .active{
    border: 1px solid #000;
  }

}
.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;
  }
}
</style>
