<!--新增委托-->
<template>
  <view>
    <view id="header">
      <!--新增委托navbar-->
      <u-navbar title="面料建模"
                :border-bottom="false"
                :background="{backgroundColor: 'whitesmoke'}">
      </u-navbar>
      <view class="title u-p-30">选择面料</view>
      <view class="u-p-30 bg-fff">
        <!--新增委托navbar-->
        <u-search placeholder="请输入面料名称" v-model="keyword"
                  border-color="#e1e1e1" height="76"
                  bg-color="#fff" :show-action="false"></u-search>
      </view>
    </view>
    <!-- 列表 确定-->
    <view class="u-p-30 body" :style="{ bottom: footerHeight+ 'px', top: headerHeight + 'px' }">
      <view v-for="(item, index) in list" :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" @click="toMaterialDetail(item)"></hs-material-thumbnail>
      </view>
    </view>
    <!-- 底部按钮 确定-->
    <view class="footer" id="footer">
      <view class="footer-btn">
<!--        /* 以下形式在微信小程序会无效，APP和H5有效 */-->
        <u-button :disabled="selectedIndex === -1"
                  @click="toAddItem"
                  class="custom-style" shape="circle"
        >
          确定
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
import dom from '../../mixins/dom'
import HsSelectItem from "../../components/hs-select-item/hs-select-item";
import HsMaterialThumbnail from "../../components/hs-material-thumbnail/hs-material-thumbnail";
export default {
  name: "listSelectToAdd",
  components: {HsMaterialThumbnail, HsSelectItem},
  mixins:[dom],
  data(){
    return {
      keyword: "",
      selectedIndex: -1,
      list: [
        {
          title: '加厚荷兰绒绒布布料',
          id: 2
        },
        {
          title: '加厚荷兰绒绒布布料加厚荷兰绒绒布布料',
          id: 12
        },
        {
          title: '加厚荷兰绒绒布布料',
          id: 221
        },
        {
          title: '加厚荷兰绒绒布布料',
          id: 22
        },
        {
          title: '加厚荷兰绒绒布布料',
          id: 224
        },
        {
          title: '加厚荷兰绒绒布布料',
          id: 222
        }
      ]
    }
  },
  onLoad(){
    this.getList();
  },
  methods:{
    getList(){
      this.$http('orderTicket.materialList', {
        size: 4,
        materialCode: '',
        materialName: ''
      }).then(res => {
        let { code, data } = res;
        if (code == 200) {
          this.list = data.data;
        }
      });
    },
    triggerSelectItem(index){
      this.selectedIndex = index === this.selectedIndex ? -1 : index;
    },
    // 跳转到新增详情页面
    toAddItem(){
      uni.setStorageSync("_item", this.list[this.selectedIndex]);
      this.$Router.push({
        path:"/pages/modeling/addItem",
        // query:{
        //   id: this.list[this.selectedIndex].id
        // }
      })
    },
    // 跳转到面料详情
    toMaterialDetail({id}){
      this.$Router.push({
        path:"/pages/home/fabricDetails",
        query:{
          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>