<template>
  <view>
    <u-navbar
      title=""
      :border-bottom="false"
      :background="background"
      style="height: 0px"
    >
    </u-navbar>
    <view>
      <u-image
        height="750rpx"
        :src="`${imgUrl}${tabledata.originalImageCode}`"
      ></u-image>
    </view>
    <view class="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-border-bottom u-line-88">款式信息</view>
        <view class="fabric u-m-t-24">
          <text class="textStyle1">产品款号</text>
          <text class="textStyle2">{{ tabledata.styleCode }}</text>
        </view>
        <view class="fabric u-m-t-8">
          <text class="textStyle1">面料供应商</text>
          <text class="textStyle2">{{ tabledata.supplierName }}</text>
        </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">
          <material
            :item="item"
            :colourApiList="tabledata.colourApiList"
          ></material>
        </view>
        <!-- 其他颜色 -->
        <view class="u-flex">
          <view class="overflow u-flex-1">
            <view>其他颜色</view>
            <view>
              <view
                class="image u-m-r-10"
                v-for="(item, index) in tabledata.colourApiList"
                :key="index"
              >
                <image
                  v-if="item.isMain"
                  :src="`${imgUrl}${item.fileCode}`"
                  style="width: 100%; height: 100%"
                ></image>
                <view class="image-tip u-line-1">颜色</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 这个空的是为了让下面那个不盖住内容 -->
      <view class="mask-template"></view>
      <view class="sampling">
        <u-button @click="samplingFn">我要采购布样</u-button>
      </view>
    </view>
    <u-popup v-model="show" mode="center">
      <view style="height: 200rpx; width: 366rpx" class="telephone">
        <view>面料供应商联系方式</view>
        <text class="tele">{{ smapTelePhone }}</text>
        <view class="cacle">
          <view @click="cancel" class="cacleStyle">取消</view>
          <view @click="call" class="callStyle">拨打</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import material from "./components/hs-material-thumbnail.vue";
export default {
  components: {
    material,
  },
  data() {
    return {
      show: false,
      background: {
        backgroundColor: "rgba(245,245,245,0)",
      }, //颜色透明
      tabledata: {},
      item: {},
      id: "",
      imgUrl: this.$IMG_URL, // 上传地址
      smapTelePhone: "", //联系人电话
    };
  },
  watch: {
    id: {
      handler() {
        this.detail();
      },
    },
  },

  created() {
    this.detail();
  },
  onLoad(options) {
    this.id = options.id;
  },
  methods: {
    // 采样按钮
    samplingFn() {
      this.show = true;
      this.supplierFn(this.$route.query.id);
    },
    // 取消
    cancel() {
      this.show = false;
    },
    // 拨打
    call() {
      uni.makePhoneCall({
        phoneNumber: this.smapTelePhone,
      });
    },

    // 详情接口
    detail() {
      let param = {
        id: this.id,
      };
      this.$http("mobileBrand.styleDetail", param).then((res) => {
        let { code, data } = res;
        if (code === 200) {
          this.tabledata = data;
          this.item = data.materialInfo;
        }
      });
    },
    // 面料商联系方式接口
    supplierFn(item) {
      let param = {
        id: item,
      };
      this.$http("mobileBrand.supplierInfo", param).then((res) => {
        let { code, data } = res;
        if (code === 200) {
          this.smapTelePhone = data.phoneNumber;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
$h-color: #af8d66;
$activeColor: #dda973;
$color: rgba(175, 141, 102, 0.1);
$main-color: #fff;
// 款式信息
.textStyle1 {
  display: inline-block;
  width: 160rpx;
  color: rgba(0, 0, 0, 0.4);
}
.textStyle2 {
  margin-left: 40rpx;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 500;
  color: #333333;
}
// 我要采购布样
.mask-template {
  width: 750rpx;
  height: 100rpx;
}
.sampling {
  position: fixed;
  bottom: 0;
  width: 750rpx;
  height: 100rpx;
  background: #ffffff;
  box-shadow: 0px -2px 3px 0px rgba(178, 182, 214, 0.1);
  display: flex;
  align-items: center;
  .u-btn {
    width: 630rpx;
    height: 88rpx;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 44rpx;
    color: white;
  }

  .textStyle2 {
    margin-left: 40rpx;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 500;
    color: #333333;
  }
}

.u-line-88 {
  line-height: 88rpx;
}

.bg-fff {
  position: relative;
  top: -10rpx;
  background: #fff;
}

.item {
  width: 100%;
  margin-bottom: 28rpx;

  &--round {
    border-radius: 16rpx;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

  &-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.8);
    font-size: 24rpx;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

.overflow {
  overflow-x: auto;
  white-space: nowrap;
}

// 弹出拨打号码
.telephone {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  .tele {
    display: inline-block;
    width: 100%;
    text-align: center;
  }
  .cacle {
    width: 100%;
    display: flex;
    justify-content: space-around;
    .cacleStyle {
      &:hover {
        color: #3144be;
        cursor: pointer;
      }
    }
    .callStyle {
      &:hover {
        color: #3144be;
        cursor: pointer;
      }
    }
  }
}
</style>
