<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">
        <!--新增委托navbar-->
        <u-search placeholder="请输入面料名称" v-model="keyword"
                  border-color="#e1e1e1" height="76"
                  bg-color="#fff" :show-action="false"></u-search>
      </view>
    </view>
    <!-- 列表 确定-->
    <view class="body bg-fff u-p-r-30 u-p-b-30 u-p-l-30" :style="{ bottom: footerHeight+ 'px', top: headerHeight + 'px' }">
      <view v-for="(item, index) in list" :key="item.id"
            @click=""
            class="u-flex u-m-b-20">
        <view class="item item--round u-flex ">
          <view class="item-img u-relative">
            <image src="" mode="fit" style="width:100%; height: 100%"></image>
            <u-image width="100rpx" height="100rpx"
                     class="item--status"
                     mode="widthFix"
                     src="@/static/images/material/status.png">
            </u-image>
          </view>
          <view class="u-flex-1 u-p-l-20 u-p-r-30 u-border-left">
            <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">男装</view>
              <u-icon size="24" color="#000" name="arrow-right"></u-icon>
            </view>
            <view class="item-desc u-font-24">ASD</view>
            <view class="item-tags u-p-b-24">
              <view class="item-tag u-font-20">
                标签
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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

export default {
  name: "selectType",
  mixins:[dom],
  data(){
    return {
      keyword: '',
      selectedIndex: -1,
      list: [
        {
          materialName: '加厚荷兰绒绒布布料',

          id: 2
        },
        {
          materialName: '加厚荷兰绒绒布布料加厚荷兰绒绒布布料',
          id: 12
        },
        {
          materialName: '加厚荷兰绒绒布布料',
          id: 221
        },
        {
          materialName: '加厚荷兰绒绒布布料',
          id: 22
        },
        {
          materialName: '加厚荷兰绒绒布布料',
          id: 224
        },
        {
          materialName: '加厚荷兰绒绒布布料',
          id: 222
        }
      ]
    }
  },
  onLoad(){

  },
  methods:{

  }
}
</script>

<style scoped lang="scss">
$h-color: #AF8D66;
$color: rgba(175,141,102,0.10);
$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;
}
.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;
  }
}

.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%
  }
  &-title{}
  &-desc{}
  &-tags{

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