<template>
  <view>
    <view>
      <u-image height="750rpx" :src="`${$IMG_URL}${item.originalImageCode}`"></u-image>
    </view>
    <view class="u-p-t-20 u-p-r-30 u-p-l-30 ">
      <view class="bg-fff u-p-t-20 u-p-r-30 u-p-b-30 u-p-l-30 item">
        <view class="u-flex">
          <text class="u-flex-1">{{ item.styleTag}}</text>
          <text class="active">{{item.status | filterStatus}}</text>
        </view>
        <view class="u-flex">
          <text class="u-flex-1 u-font-28">{{ item.styleCode}}</text>
          <text class="u-font-24">
            加入日期：{{ item.createTime.split(' ')[0]}}
          </text>
        </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 class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 item ">
        <view class="u-border-bottom u-line-88">所选面料</view>
        <view class="u-m-t-30 u-m-b-56">
          <hs-material-thumbnail :item="materialInfo"></hs-material-thumbnail>
        </view>
        <view class="u-flex  base-line ">
          <view class="">
            <view>主图颜色</view>
            <view class="image">
              <image :src="`${$IMG_URL}${mainPic.fileCode}`" style="width: 100%;height: 100%"></image>
              <view class="image-tip u-line-1">{{mainPic.describes}}</view>
            </view>
          </view>
          <view class="overflow u-flex-1">
            <view>其他颜色</view>
            <view>
              <view class="image u-m-r-10" v-for="pic in subPic" :key="pic.id">
                <image :src="`${$IMG_URL}${item.fileCode}`" style="width: 100%;height: 100%"></image>
                <view class="image-tip u-line-1">{{pic.describes}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import HsMaterialThumbnail from "@/components/hs-material-thumbnail/hs-material-thumbnail";
export default {
  name: "entrustManagementItem",
  components: {HsMaterialThumbnail},
  data(){
    return{
      item:{
        createTime: '',
        colourApiList: []
      }
    }
  },
  computed:{
    mainPic(){
      // return this.item.colourApiList.filter((item) => item.isMain)[0];
      return this.item.colourApiList.length > 0 ?
          this.item.colourApiList.filter((item) => item.isMain)[0]:
          {
            fileCode: ''
          }
    },
    subPic(){
      return this.item.colourApiList.length > 0 ?
          this.item.colourApiList.filter((item) => !item.isMain):
          {
            fileCode: ''
          }
    },
    materialInfo(){
      let item = this.item.materialInfo || {};
      return Object.assign({}, item,{
        materialCategory: item.category,
        materialDoorWidth: item.fabricWidth,
        materialElement: item.saoriStandard,
      })
    }
  },
  filters:{
    filterStatus(v){
      // 1-待领取、2-待处理、3-待审核、4-已启动、5-已停用
      switch (v) {
        case 1:
          return '待领取'
        case 2:
          return '待处理'
        case 3:
          return '待审核'
        case 4:
          return '已启动'
        case 5:
          return '已停用'
      }
    }
  },
  created() {
    let { id} =this.$Route.query;
    this.getItem(id);
  },
  methods:{
    getItem(id){
      this.$http("stylelibraryorder.getStyleDetails",id)
          .then(res =>{
            let{
              code, data
            } = res;
            if(code === 200){
              this.item = data;
            }
          })
    }
  }
}
</script>

<style scoped lang="scss">
$h-color: #AF8D66;
$activeColor: #DDA973;
$color: rgba(175,141,102,0.10);
$main-color: #fff;
.base-line{     align-items: baseline;}
.u-line-88{
  line-height: 88rpx;
}
.bg-fff{
  background: #fff;
}
.item{
  width: 100%;
  margin-bottom: 28rpx;

  &--round{
    border-radius: 16rpx;
    border: 1px solid rgba(0,0,0,0.10);
  }
  &-tag{
    padding: 6rpx 2px;
    background: $color;
    text-align: center;
    color: $h-color;
    display: inline-block;
    margin-right: 10rpx;
  }
}

.image{
  position: relative;
  width: 160rpx;
  height: 160rpx;
  display: inline-block;
  &-tip{
    text-align: center;
    width: 100%;
    height: 40rpx;line-height: 40rpx;
    background: rgba(255,255,255,0.80);
    font-size: 24rpx;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
.overflow{
  overflow-x: auto;
  white-space: nowrap;
}
</style>
