<template>
  <view class="whole">

    <view class="back" :style="topHeight==0?'':{'padding-top':resultpx}">
     <!-- <view class="back"> -->
      <view class="u-flex">
        <u-navbar :is-back="true" :background="{ backgroundColor: '#F5F5F5' }" title="面料详情">
          <template v-slot:right>
            <view class="nav-nav" @click="edit()">编辑</view>
          </template>

        </u-navbar>
      </view>
      <view
        :class="fabricObj.materialPictureVOList!=undefined&&fabricObj.materialPictureVOList.length>4?'back-two':'back-back'">
        <view class="row" style="color:#F5B674"> {{fabricObj.materialName}}
        </view>
        <view class="row" style="color:#fff">
          <view v-for="item,index in dataList" :key="index">
            <view v-if="item.id==fabricObj.category">{{item.name}}</view>
          </view>｜{{fabricObj.clothWidth}}cm｜{{fabricObj.component}}
        </view>
        <view style="display:flex;flex-wrap: wrap;">
          <view class="row" v-for="item,index in fabricObj.materialPictureVOList" :key="index"
            style="margin-right:30rpx">
            <view @click="previewImage(`${imgUrl}${item.fileCode}`)">
              <image :src="`${imgUrl}${item.fileCode}`" mode="aspectFill"
                style="width:120rpx;height:120rpx;display:flex">
              </image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="whole-whole">
      <view
        :class="fabricObj.materialPictureVOList!=undefined&&fabricObj.materialPictureVOList.length>4?'body-two':'body'">
        <view class="font"><strong>已上架款式</strong></view>
        <view class="item" v-for="itemTab,indexTab in tableList" :key="indexTab">
          <view class="item-left">
            <view @click="previewImage(`${imgUrl}${itemTab.effectPictureCode}`)">
              <image class="item-img" :src="`${imgUrl}${itemTab.effectPictureCode}`" mode="aspectFill">
              </image>
            </view>
            <!-- <image class="item-img" src="../../static/images/home/1@2x.png" mode=""></image> -->
          </view>
          <view class="item-right">
            <view class="right-one">{{itemTab.styleTag}}</view>
            <view class="right-two">
              <view class="two-left">款号</view>
              <view class="two-right">{{itemTab.styleCode}}</view>
            </view>
            <view class="right-two">
              <view class="two-left">品类</view>
              <view class="two-right" v-for="itemId,indexId in dataList" :key="indexId">
                <view v-if="itemId.id==itemTab.categoryId">{{itemId.name}}</view>
              </view>
            </view>
            <!-- <view>
              <u-tag :text="itemTab.styleTag" bg-color="#f6f3ef" border-color="#f6f3ef" size="mini" color="#AF8D66"
                type="success" />
            </view> -->
            <view v-for="itemTagVo,indexTagVo in itemTab.styleLibraryTagVOList" :key="indexTagVo">
              <u-tag v-if="!itemTagVo.isDeleted" :text="itemTagVo.materialTagName" bg-color="#f6f3ef"
                border-color="#f6f3ef" size="mini" color="#AF8D66" type="success" />
            </view>
          </view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
  import utils from "../../mixins/utils"
  export default {
    mixins: [utils],
    data() {
      return {
        imgUrl: this.$IMG_URL,
        id: "",
        topHeight: null,
        heightpx: null,
        resultpx:"",
        fabricObj: {},
        tableList: [],
        dataList: [],
      };
    },
    watch: {
      id: {
        handler() {
          // this.materialDetail()
          // this.detail()
        }
      }
    },
    computed: {
      // heightpx() {

      //   return uni.upx2px(100) + 'px'
      // },
      // topHeight() {
      //   uni.getSystemInfo({
      //     success: (result) => {
      //       // this.topHeight = result.safeArea.top
      //       console.log(result.safeArea.top, "result.safeArea.top")
      //       return result.safeArea.top + 'px'
      //     }
      //   })
      // }
    },
    onLoad(option) {
      this.id = option.id
      this.materialDetail()
      this.detail()
      this.$http("category.query", {}).then(res => {
        let {
          code,
          data
        } = res;
        if (code === 200) {
          this.dataList = data;

        }
      })
      console.log(uni.upx2px(100), )
      uni.getSystemInfo({
        success: (result) => {
          this.topHeight = result.safeArea.top
          console.log(result.safeArea.top, "result.safeArea.top")

        }
      })
      this.heightpx = uni.upx2px(100)
      this.resultpx=(this.heightpx-this.topHeight)+'px'
      console.log(this.resultpx,"this.resultpx")
    },
    onShow() {
      this.id = this.$route.query.id
      this.materialDetail()
      this.detail()
    },
    // created() {
    //   this.materialDetail()
    //   this.detail()
    //   this.id = this.$route.query.id
    // },
    methods: {
      materialDetail() {
        this.$http('materialinfo.getMaterialById', this.id).then(res => {
          let {
            code,
            data
          } = res;
          if (code === 200) {
            this.fabricObj = data;
          }
        });
      },
      detail() {
        this.$http('modelingtask.materialDetail', this.id).then(res => {
          let {
            code,
            data
          } = res;
          if (code === 200) {
            this.tableList = data.styleLibraryTaskItemVOList;
          }
        });
      },
      edit() {
        this.$Router.push({
          path: "/pages/home/editFabric",
          query: {
            id: this.id
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .whole {
    // padding: 0 30rpx;
    background: #f5f5f5;

    .back {
      background: url(../../static/images/home/backimg.png) no-repeat;
      background-size: 100% 100%;
      height: 580rpx;
      padding: 0 30rpx;
      padding-top: 100rpx;

      .nav-nav {
        display: flex;
        justify-content: end;
        margin-right: 40rpx;
        width: 100%;
      }

      .back-two {
        background: #3b342f;
        height: 410rpx;
        padding: 30rpx 30rpx;
        opacity: 0.8;
      }

      .back-back {
        background: #3b342f;
        height: 340rpx;
        padding: 30rpx 30rpx;
        opacity: 0.8;
        // margin-top: 80rpx;


      }
    }

    .row {
      display: flex;
      margin-bottom: 18rpx;

      .img {
        width: 60px;
        height: 60px;
        margin-right: 30rpx;
      }
    }

    .whole-whole {

      padding: 0 30rpx;

      .body {
        background: #ffffff;
        border-radius: 4px;
        padding: 30rpx;
        margin-top: -60rpx;
      }

      .body-two {
        background: #ffffff;
        border-radius: 4px;
        padding: 30rpx;
        // margin-top: -20rpx;
      }

      .font {
        padding-bottom: 30rpx;
      }

      .item {
        padding-bottom: 30rpx;
        display: flex;

        .item-left {
          margin-right: 20rpx;

          .item-img {
            width: 80px;
            height: 80px;
          }
        }
      }

      .item:last-child {
        padding-bottom: 0px;
      }

      .item-right {
        .right-one {
          font-weight: bold;
        }

        .right-two {
          display: flex;
          color: rgba(0, 0, 0, 0.40);

          .two-left {
            margin-right: 40rpx;
          }
        }
      }

    }
  }
</style>