<!-- 订单管理 -->
<template>
  <view class="content">
    <view style="width: 100%; height: 55px;"></view>
    <view class="top-heder">
      <!-- <view class="t-left" @click="getfan()">
        <uni-icons type="left" size="18"></uni-icons>
      </view> -->
      <view class="t-input">
        <uni-icons type="search" color="#BCBCBC" size="22"></uni-icons>
        <input type="text" v-model="carNum" placeholder="搜索车牌号.....">
      </view>
      <view class="sou" @click="getList()">搜索</view>
    </view>
    <view class="tap">
      <view class="tap-box" v-for="(item,index) in tapList" :key="index" @click="tapqh(index)">
        <view class="xhuihui" :class="{'xzhei':tapindex == index}">{{ item.text }}</view>
        <view class="gang" v-if="tapindex == index"></view>
      </view>
    </view>

    <view class="mub">
      <view class="top-ail">
        <view class="jsy" v-if="infoDatas.length == 0">
          <image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
        </view>
        <view class="m-box" v-for="(item,index) in infoDatas" :key="index">
          <view class="sshi" v-if="item.isPass == '0'">
            <image v-if="item.status == 1" :src="imgurl + '/noPass.png'" mode=""></image>
            <view v-else class="">
              <text>重审中</text>
            </view>
          </view>
          <view class="sshi" v-if="item.isPass == '1'">
            <image :src="imgurl + '/pass.png'" mode=""></image>
          </view>

          <view class="m-top">
            <view class="top-left">
              <view class="dhei">{{ item.goodsName }}</view>
              <text class="xhui">接待员：{{ item.workerName }}</text>
              <text class="xhui" style="margin-left: 50rpx;">检测项目：{{ item.projectName }}</text>
            </view>
            <view @click="callUser(item.buyPhone)" class="top-right">
              <image src="../../static/detection/teel.png" mode=""></image>
            </view>
          </view>
          <view class="">
            <view class="on-input">
              <uni-icons type="person" color="#999999" size="16"></uni-icons>
              <text>客户：</text>
              <text>{{ item.buyName ? item.buyName : "" }}</text>
            </view>
            <view class="on-input">
              <uni-icons type="phone" color="#999999" size="16"></uni-icons>
              <text>电话：</text>
              <text>{{ item.buyPhone }}</text>
            </view>
            <view class="on-input">
              <uni-icons type="map" color="#999999" size="16"></uni-icons>
              <text>订单号：</text>
              <text>{{ item.orderNo }}</text>
            </view>
            <view class="on-input">
              <uni-icons type="more" color="#999999" size="16"></uni-icons>
              <text>车牌号：</text>
              <text>{{ item.carNum }}</text>
            </view>
            <view class="bottom-di">
              <view class="button-container">
                <u-button class="button" v-if="item.workNodeStatus === '0'" @click="orderTaking(item)" size="10">同意</u-button>
                <u-button class="button" v-if="item.workNodeStatus === '1'" @click="cancelAnOrder(item)" size="10">取消接单</u-button>
                <u-button class="button" @click="godetails(item)" size="10">查看详情</u-button>
              </view>
            </view>
          </view>

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

    <view class="lanniu" @click="gogogo">
      <text>+ 添加线下订单</text>
    </view>
    <view style="width: 100%; height: 50px;"></view>
    <tabBar :msg="msg"></tabBar>

  </view>
</template>

<script>
import config from '@/config'
import request from '../../utils/request';
import tabBar from '../../components/staffTabBer/tabBar.vue'

export default {
  data() {
    return {
	  msgSocket: this.$msgSocket,
      imgurl: this.$imgeUrl,
      baseUrl: this.$baseUrl,
      infoDatas: {},
      partnerId: uni.getStorageSync("partnerId"),
      goodsTitle: '',
      tapindex: 0,
      msg: '1',
      carNum: '',
      pageNum: 1,//第几页
      pageSize: 20,//一页多少张
      totalPages: 0,//总数
      tapList: [
        {
          text: "待接受",
          value: "1"
        },
        {
          text: "进行中",
          value: "2"
        },

        {
          text: "已完成",
          value: "3",
        }
      ]
    }
  },
  onLoad() {
	  this.$startSocketConnect(uni.getStorageSync('userId'))
	  this.msgInfo()
  },
  onShow() {
    this.getList()
  },
  watch: {
  	msgSocket(newVal, oldVal) {
  		console.log('msgSocket值发生变化', newVal, oldVal)
  		this.msgInfo()
  	},
  	deep: true,
  },
  onReachBottom() {
    if (this.pageNum >= this.totalPages) {
      uni.showToast({
        title: '没有下一页数据',
        icon: 'none'
      })

    } else {
      this.pageNum++
      this.getList()
    }
  },
  components: {
    tabBar,
  },
  methods: {
	  msgInfo() {
	  	console.log(this.msgSocket, 'msgSocket')
	  	if (this.msgSocket) {
	  		console.log('消息回调启动成功')
	  		this.msgSocket.onMessage(res => {
				this.pageNum = 1
				this.totalPages =0
	  			this.getList()
	  		})
	  	}

	  },
    callUser(phone) {
      uni.makePhoneCall({
        phoneNumber: phone //仅为示例
      });
    },
    async getList() {
      let res = await request({
        url: '/system/info/geStelectInspection',
        method: 'get',
        params: {
          partnerId: this.partnerId,
          status: this.tapindex + 1,
          carNum: this.carNum,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
        }
      })
      if (res.code == 200) {

        if (this.pageNum != 1) {
          this.infoDatas = this.infoDatas.concat(res.rows)
        } else {
          this.infoDatas = res.rows
        }
        let total = res.total
        this.totalPages = Math.ceil(total / this.pageSize);
      }
    },
    getfan() {
      uni.navigateBack()
    },
    godetails(item) {
      uni.navigateTo({
        url: "/pages/index/orderdetails?inspectionInfoId=" + item.id +"&workNodeId=" + item.workNodeId + "&workNodeStatus=" + item.workNodeStatus
      })
    },
    orderTaking(data){
      request({
        url:'/system/info/orderTaking',
        method:'post',
        params:{
          inspectionId:data.id,
          workNodeId:data.workNodeId
        }
      }).then(res=>{
        if(res.code == 200){
          uni.showToast({
            title:'接单成功',
            icon:'none'
          })
          // this.tapindex = 1
          this.getList()
        }
      })
    },
    cancelAnOrder(data){
      request({
        url:'/system/info/cancelAnOrder',
        method:'post',
        params:{
          inspectionId:data.id,
          workNodeId:data.workNodeId
        }
      }).then(res=>{
        if(res.code == 200){
          uni.showToast({
            title:'取消接单成功',
            icon:'none'
          })
          this.getList()
        }
      })
    },
    gogogo() {
      uni.navigateTo({
        url: '/pages/index/Neworder'
      })
    },
    tapqh(index) {
      this.tapindex = index
      this.infoDatas = []
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh);
  background: white;
}

.sshi {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 115px;
  height: 115px;
  box-sizing: border-box;
  padding: 10px;

  image {
    width: 100%;
    height: 100%;
  }
}

.top-heder {
  width: 100%;
  height: 46px;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 5px 15px;
}

.t-left {
  width: 10%;
}

.t-input {
  width: 75%;
  height: 36px;
  background: #F0F0F0;
  border-radius: 50px;
  box-sizing: border-box;
  padding: 0 15px;
  display: flex;
  align-items: center;

}

.top-ail {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  background-color: #F4F4F4;

}

.mub {
  background-color: #F4F4F4;
  height: calc(100vh);
}

.tap {
  width: 100%;
  height: 44px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tap-box {
  width: 50%;

}

.xhuihui {
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #666666;
}

.gang {
  width: 24px;
  height: 4px;
  background: #0D2E8D;
  border-radius: 4px;
  margin: 2px auto;
}

.xzhei {

  font-weight: bold !important;
  color: #333333 !important;
}

.m-box {
  position: relative;
  background: #FFFFFF;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 15px 10px;
  margin: 10px auto;

}

.m-top {
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 15px;
  border-bottom: 1px solid #EEEEEE;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-left {

}

.top-right {
  z-index: 9999;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;
  }

}

.dhei {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 5px;
}

.xhui {
  font-size: 15px;
  font-weight: 400;
  color: #999999;
}

.on-input {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #999999;
  margin-bottom: 10px;
  margin-top: 10px;
  // justify-content: space-between;
}

.bottom-di {
  display: flex;
  justify-content: center;
  align-items: center;

}

.button-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.button {
  width: 80%;
  height: 45px;
  background: linear-gradient(180deg, #3F61C0 0%, #0D2E8D 100%);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;

  color: white;
}


.ju {
  font-size: 24px;

  font-weight: 600;
  color: #FF571A;
}

.lanniu {
  width: 90%;
  position: fixed;
  bottom: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0D2E8D;
  color: white;
  height: 44px;
  border-radius: 8px;
  font-weight: bold;
  transform: translate(-50%);
  left: 50%;
  z-index: 9999999999999999999999999999999999999999999999999999999;
}

.csz {
  font-size: 20px;
  font-weight: bold;
  color: #FF571A;
}
</style>
