<template>
  <view>
    <!-- 展示图 -->
    <view id="header" class="back_img">
      <u-navbar title="" :border-bottom="false" :background="background">
        <template slot="right">
          <view @click="searchCli" class="u-m-r-24 search"
            ><image
              class="hs-img"
              src="../../static/images/home/search@2x.png"
              mode=""
            ></image
          ></view>
        </template>
      </u-navbar>
    </view>
    <!-- 按钮 -->
    <view class="home_btn">
      <view class="" v-for="item in buts" @click="goCli(item.url)">
        <image class="hs-img-56" :src="item.img" mode=""></image>
        <view class="u-m-t-8">{{ item.name }}</view>
      </view>
    </view>
    <!-- 提示信息 -->
    <view
      v-if="abolishIds.length > 0"
      class="u-m-t-20 tips background_d5aa7a u-font-28"
    >
      <view>
        {{ abolishIds.length }}个委托单
        <span class="color_fff">等待确认寄样，请尽快确认！</span>
      </view>
      <view class="color_fff btn u-p-l-10 u-p-r-10" @click="sampleConfirm"
        >寄样确认</view
      >
    </view>
    <!-- 具体内容  我的面料 -->
    <view class="home_con u-m-t-20">
      <view class="home_con_tit">
        <view>
          <span class="u-font-32">我的面料</span>
          <span style="line-height: 0" class="u-m-l-10 color_000 u-font-24"
            >MY FABRIC</span
          >
        </view>
        <view class="u-font-24 color_d5aa7a" @click="seeFabric">查看更多</view>
      </view>
      <view class="home_con_fabric">
        <view
          class="home_con_content u-m-t-24"
          @click="detailFabric(item)"
          v-for="item in fiabricList"
        >
          <image
            class="hs-img"
            src="../../static/images/home/1@2x.png"
            mode=""
          ></image>
          <view class="home_con_content_font ov_hiden">{{
            item.materialName
          }}</view>
        </view>
      </view>
    </view>
    <!-- 具体内容  我的订单 -->
    <view class="home_con u-m-t-20">
      <view class="home_con_tit">
        <view>
          <span class="u-font-32">我的订单</span>
          <span class="u-m-l-10 color_000 u-font-24">MY FABRIC</span>
        </view>
        <view class="u-font-24 color_d5aa7a">查看更多</view>
      </view>
      <view class="home_con_order">
        <view class="home_con_content_order u-m-t-24" v-for="item in 4">
          <image
            style="width: 160rpx; height: 160rpx"
            src="../../static/images/home/2.png"
            mode=""
          ></image>
          <view class="order_tit">
            <view class="u-font-32">加厚荷兰绒绒布布料备份</view>
            <view class="u-font-24 u-m-t-20">
              <span>针织</span>
              ｜
              <span>180cm</span>
              ｜
              <span>100%面备份</span>
            </view>
          </view>
        </view>
      </view>
    </view>

    <hs-tab-bar></hs-tab-bar>
  </view>
</template>
<script>
import HsTabBar from "../../components/hs-tab-bar/hs-tab-bar";
export default {
  components: { HsTabBar },
  data() {
    return {
      background: { backgroundColor: "rgba(245,245,245,0)" },
      quantityNum: 0,
      exceptionNum: 0,
      abolishIds: [],
      // 我的面料
      fiabricList: [],
      buts: [
        {
          name: "面料建模",
          img: "../../static/images/home/fabricModeling@2x.png",
          url: "/pages/fabricModeling/modelingOrder",
        },
        {
          name: "搜款",
          img: "../../static/images/home/styleEntrustment@2x.png",
          url: "/pages/material/list",
        },
        {
          name: "上架管理",
          img: "../../static/images/home/styleManageme@2x.png",
          url: "/pages/material/entrustManagement",
        },
        // TODO 旧版本  可能以后会用到
        // {
        // 	name: '面料建模',
        // 	img: '../../static/images/home/fabricModeling@2x.png',
        // 	url: '/pages/fabricModeling/modelingOrder'
        // },
        // {
        // 	name: '款式委托',
        // 	img: '../../static/images/home/styleEntrustment@2x.png',
        // 	url: '/pages/home/styleEntrustment'
        // },
        // {
        // 	name: '检测委托',
        // 	img: '../../static/images/home/styleManageme@2x.png',
        // 	url: ''
        // },
        // {
        // 	name: '款式管理',
        // 	img: '../../static/images/home/testCommission@2x.png',
        // 	url: ''
        // }
      ],
    };
  },
  onLoad() {
    // this.toBeSelectedQuantity();
    // this.orderTicketExceptionNum();
    // this.noSampleOrder();
    // this.materialList();
  },
  onPageScroll(object) {
    let height = 486 / 2;
    if (object.scrollTop >= height) {
      this.background.backgroundColor = "rgba(245,245,245,1)";
    } else {
      this.background.backgroundColor = "rgba(245,245,245,0)";
    }
  },
  methods: {
    // 选款总数
    toBeSelectedQuantity() {
      this.$http("orderTicket.toBeSelectedQuantity", {}).then((res) => {
        let { code, data } = res;
        if (code == 200) {
          this.quantityNum = data;
        }
      });
    },
    // 异常总数
    orderTicketExceptionNum() {
      this.$http("orderTicket.orderTicketExceptionNum", {}).then((res) => {
        let { code, data } = res;
        if (code == 200) {
          this.exceptionNum = data;
        }
      });
    },
    // 寄样单总数
    noSampleOrder() {
      this.$http("orderTicket.noSampleOrder", {}).then((res) => {
        let { code, data } = res;
        if (code == 200) {
          this.abolishIds = data;
        }
      });
    },
    // 我的面料
    materialList() {
      this.$http("orderTicket.materialList", {
        size: 4,
        materialCode: "",
        materialName: "",
      }).then((res) => {
        let { code, data } = res;
        if (code == 200) {
          this.fiabricList = data.data;
        }
      });
    },
    searchCli() {
      // 搜索面料===1  搜索建模===2
      this.$Router.push("/pages/home/search");
    },
    seeFabric() {
      this.$Router.push("/pages/home/fabricList");
    },
    detailFabric(data) {
      this.$Router.push("/pages/home/fabricDetails?id=" + data.id);
    },
    sampleConfirm() {
      this.$Router.push(
        "/pages/home/sampleConfirmation?abolishIds=" + this.abolishIds
      );
    },
    goCli(url) {
      if (url) {
        this.$Router.push(url);
      } else {
        uni.showToast({
          title: "该功能正在开发中...",
          icon: "none",
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.back_img {
  height: 486rpx;
  width: 100%;
  background: url(../../static/images/home/exhibition.png) no-repeat;
  background-size: 100% 100%;
}
.home_top {
  position: relative;
  width: 100%;
  height: 486rpx;
  .home_top_out {
    position: absolute;
    top: 20rpx;
    width: 100%;
    padding: 0 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .out {
      width: 32rpx;
      height: 32rpx;
    }
  }
}
.search {
  width: 60rpx;
  height: 60rpx;
}
.tips {
  display: flex;
  height: 80rpx;
  align-items: center;
  justify-content: space-around;
  padding: 0 20rpx;
}
.home_btn {
  width: 100%;
  height: 180rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  background: #fff;
}
.home_con {
  width: 100%;
  box-sizing: border-box;
  padding: 30rpx;
  background: #fff;
  .home_con_tit {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .home_con_fabric {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .home_con_order {
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;
  }
}
.home_con_content {
  position: relative;
  width: 48%;
  height: 160rpx;
  border-radius: 8rpx;
  overflow: hidden;
  // background-image: url(../../static/images/home/1@2x.png);
  .home_con_content_font {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60rpx;
    line-height: 60rpx;
    box-sizing: border-box;
    padding: 0 10rpx;
    background: rgba(255, 255, 255, 0.8);
  }
}
.home_con_content_order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 160rpx;
  border-radius: 8rpx;
  overflow: hidden;
  .order_tit {
    flex-direction: column;
    display: flex;
    justify-content: center;
    padding: 20rpx;
    flex: 1;
    height: 100%;
    background: rgba(172, 166, 166, 0.5);
  }
}
.ov_hiden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn {
  line-height: 50rpx;
  text-align: center;
  height: 50rpx;
  border: 1rpx solid #fff;
}
.color_000 {
  color: rgba(0, 0, 0, 0.2);
}
.color_d5aa7a {
  color: #d5aa7a;
}
.color_dda973 {
  color: #dda973;
}
.color_fff {
  color: #fff;
}
.background_d5aa7a {
  background: #d5aa7a;
}
</style>
