<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" @click="pay">潜在客户</span>
          <span class="u-m-l-10 color_000 u-font-24">MY ORDER</span>
        </view>
        <!--				<view class="u-font-24 color_d5aa7a">查看更多</view>-->
      </view>
      <view class="home_con_order">
        <view class="u-p-t-20  u-p-b-20 ">
          <u-search placeholder="请输入客户名称" v-model="keyWord"
                    border-color="#e1e1e1" height="76" @search="searchPotentialCustomers"
                    bg-color="#fff" :show-action="false"></u-search>
        </view>
        <view class="item item--round" v-for="(item) in list"
              @click="$Router.push({
             path: '/pages/order/item',
             query:{
               id: item.enterpriseId
             }
           })"
        >
          <view class="u-font-32 u-m-b-8 u-line-1">{{ item.fullName }}</view>
          <view class="u-font-24">更新时间：{{ item.createTime }}</view>
        </view>
        <!-- 加载更多 -->
        <u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
        <!-- 缺省页 -->
        <hs-empty  v-if="isEmpty" tipText="没有数据"
                   marginTop="100rpx"
                   :image="emptyImage"></hs-empty>
      </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 {
      emptyImage :require("@/static/images/components/empty/empty.png"),
      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: ''
        // }
      ],

      keyWord: '',
      loadStatus: 'loadmore',
      pageOptions:{
        current: 1,
        size: 10,
      },
      list: []
    };
  },
  computed:{
    isEmpty(){
      return this.list.length === 0
    }
  },
  onLoad() {
    // this.toBeSelectedQuantity();
    // this.orderTicketExceptionNum();
    // this.noSampleOrder();
    // this.materialList();
    // 潜在客户
    this.potentialCustomersPage();
  },
  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: {
    pay(){
      this.$Router.push({
        path: '/pages/webview/index'
      })
    },
    searchPotentialCustomers(){
      this.pageOptions = {
        current: 1,
        size: 10,
      };
      this.potentialCustomersPage();
    },
    // 潜在客户
    potentialCustomersPage(){
      this.loadStatus = 'loading';
      this.$http("stylelibraryorder.potentialCustomersPage",{
        ...this.pageOptions,
        customerName: this.keyWord,
        status: 0
      })
          .then(res => {
            let { code, data } = res;
            if (code === 200) {
              if(Object.keys(data).length > 0){
                this.list = data.records;
                this.pageOptions.pages = data.total;
                this.loadStatus = this.list.length  < data.total ? 'loadmore' : 'nomore';
              }else{
                this.list = []
                this.loadStatus = 'nomore';
              }
            }
          })
    },
    // 触底加载更多
    onReachBottom() {
      if (this.pageOptions.current < this.pageOptions.pages) {
        this.pageOptions.current += 1;
        this.potentialCustomersPage();
      }
    },
    // 选款总数
    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>
.item--round{ border-radius: 8rpx;}
.item{
  padding: 36rpx 30px;
  height: 160rpx;
  background: url(~@/static/images/home/exhibition.png) no-repeat;
  background-size: 100% 100%;
  margin-bottom: 20rpx;
  color: #fff;
}

.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>
