<template>
  <view class="content">
<!--    <view class="top-heder">-->
<!--      <view class="t-left" @click="getback()">-->
<!--        <uni-icons type="left" size="18"></uni-icons>-->
<!--      </view>-->
<!--      <view class="t-title">-->
<!--        <text>订单详情</text>-->
<!--      </view>-->
<!--      <view class="t-you"></view>-->
<!--    </view>-->
    <headersVue titles="订单详情" style="position: static !important;">
      <u-icon name="arrow-left" color="#fff" size="18"></u-icon>
    </headersVue>
    <view class="x-box">
      <view class="box-top">
        <view style="border-right: 1px solid  #EEEEEE; width: 50%;">
          <view class="touxiang" v-if="!sureWorker.avatar">
            <image src="../../static/detection/touxiang.png" mode=""></image>
          </view>
          <view v-else>
            <image :src="sureWorker.avatar" mode=""></image>
          </view>
          <view style="margin-left: 35%;" v-if="sureWorker.nickname" class="h-title">{{ sureWorker.nickname }}</view>
          <view class="sanniu" @click="getWorker()">
            <text>选择接待员</text>
          </view>
        </view>
        <view style=" width: 50%;">
          <view class="t-input">
            <input type="text" v-model="cph" placeholder="请输入车牌号">
          </view>
          <!-- 	<view class="t-input" @click="show = true">
            <text style="color: #0D2E8D;">{{lei}}</text>
            </view> -->
        </view>

      </view>
      <view class="box-dis">
        <view class="shop-img">
          <image :src="orderInfo.goodsImage" mode=""></image>
        </view>
        <view class="ds-right">
          <view class="h-title">{{ orderInfo.goodsTitle }}</view>
          <view class="dis-hui">
            <text>客户：</text>
            <text>{{ orderInfo.buyUserName ? orderInfo.buyUserName : "" }}</text>
          </view>
          <view class="dis-hui">
            <text>手机号：</text>
            <text>{{ orderInfo.buyUserPhone }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="x-box">
      <view class="h-title">订单详情</view>
      <view class="on-input">
        <view class="o-left">订单编号：</view>
        <view class="o-right">{{ orderInfo.orderNo }}</view>
      </view>
      <view class="on-input">
        <view class="o-left">支付时间：</view>
        <view class="o-right">{{ orderInfo.payTime }}</view>
      </view>
      <view class="on-input">
        <view class="o-left">商品原价：</view>
        <view class="o-right">{{ orderInfo.goodsPrice / 100 }}</view>
      </view>
      <view class="on-input">
        <view class="o-left">折扣：</view>
        <view class="o-right">{{ orderInfo.reduceMoney / 100 }}</view>
      </view>
      <view class="on-input">
        <view class="o-left">优惠券减免：</view>
        <view class="o-right">{{ orderInfo.couponDiscount / 100 }}</view>
      </view>
      <view class="bottom-input">
        <view class="o-left">实付金额：</view>
        <view class="o-zui">{{ (orderInfo.payMoney + orderInfo.balance) / 100 }}</view>
      </view>

      <view class="on-input" @click="showLeadMan = true">
        <view class="o-left">
          <text style="color: red;font-weight: bold;text-align: center;">*</text>
          引车员
          <text class="xixi">点击选择</text>
        </view>
        <view class="o-right">
          <input type="text" disabled v-model="leadManName" placeholder="请选择引车员">
        </view>
      </view>
      <view class="on-input" @click="toSelectProject()">
        <view class="o-left">检测流程</view>
        <view class="o-right">
          <input type="textarea" disabled v-model="inspectionWorkNodeStr" placeholder="点击选择检测流程">
        </view>
      </view>
    </view>
    <view @click="takeOut()" class="annniu">
      <view class="">开始检测</view>
    </view>
    <u-picker :show="show" :columns="columns" keyName="label" @close="close" @confirm="confirm" @change="change"
              @cancel="cancel"></u-picker>
    <u-popup :show="xling" @close="closexl" :round="10" @open="openxl">
      <view class="popup-box">
        <view class="sousuo">
          <uni-icons type="search" size="22"></uni-icons>
          <input type="text" v-model="searchValue" placeholder="请输入招待员信息">
          <text @click="getWorker()">搜索</text>
        </view>
        <view class="list-box">
          <scroll-view class="list_scroll" scroll-y="true">
            <view class="list-qiu" v-for="(item,index) in workerList" :key="index">
              <view class="">{{ item.nickname }}
                <text class="tel">{{ item.mobile }}</text>
              </view>
              <view class="banniu">
                <text @click="sureWorkerFun(item)">选择</text>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </u-popup>
    <u-picker :show="showLeadMan" :columns="leadManList" :defaultIndex="defaultIndex" @confirm="confirmLeadMan"
              @cancel="cancelLeadMan"
              keyName="nickname"></u-picker>
  </view>
</template>

<script>
import config from '@/config'
import request from '../../utils/request';
import headersVue from "@/components/header/headers.vue";

export default {
  components: {headersVue},
  data() {
    return {
      baseUrl: this.$baseUrl,
      show: false,
      xling: false,
      lei: '请选择车辆类型',

      columns: [],
      workerList: [],
      cph: '',
      orderId: '',
      partnerId: uni.getStorageSync("partnerId"),
      orderInfo: {},
      searchValue: '',
      inspectionWorkNodeStr: "",
      inspectionWorkNodes: [],
      sureWorker: {},
      leadManList: [],
      showLeadMan: false,
      defaultIndex: [0],
      isInsert: true,
      leadManName:'',
      leadManId:'',
    }
  },

  onLoad(opion) {
    this.orderId = opion.orderId
    this.getindex()
    uni.$on('selectProject', (data) => {
      this.inspectionWorkNodes = data
      for (var i = 0; i < this.inspectionWorkNodes.length; i++) {
        this.inspectionWorkNodeStr = this.inspectionWorkNodeStr + this.inspectionWorkNodes[i].projectName + "  "
        this.inspectionWorkNodes[i].orderNum = i + 1
      }
    });
    this.getLeadeMan()
  },
  methods: {
    async takeOut() {
      if (!this.sureWorker.id) {
        uni.showToast({
          title: "请选择招待员",
          icon: "error"
        })
        return
      }
      if (!this.cph) {
        uni.showToast({
          title: "请输入车牌号",
          icon: "error"
        })
        return
      }
      if (!this.inspectionWorkNodes.length) {
        uni.showToast({
          title: "请选择检测流程",
          icon: "error"
        })
        return
      }
      if (!this.leadManId) {
        uni.showToast({
          title: "请选择引车员",
          icon: "error"
        })
        return
      }

      let res = await request({
        url: '/partnerOwn/partner/takeOut',
        method: 'post',
        data: {
          partnerId: this.partnerId,
          orderId: this.orderId,
          workId: this.sureWorker.id,
          inspectionWorkNodes: this.inspectionWorkNodes,
          leadManId: this.leadManId,
          carNum: this.cph
        },
      })
      if (res.code == 200) {
        uni.showToast({
          title: "订单正式开始"
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1000);
      } else {
        uni.showToast({
          title: "异常错误",
          icon: "error"
        })
      }

    },
    cancelLeadMan() {
      this.showLeadMan = false
    },
    confirmLeadMan(e) {
      this.leadManName = e.value[0].nickname
      this.leadManId = e.value[0].id
      this.showLeadMan = false
    },
    toSelectProject() {
      uni.navigateTo({
        url: `/pages/index/selectProject?selectProject=${JSON.stringify(this.inspectionWorkNodes)}`
      })
    },
    /*获取引车员信息*/
    getLeadeMan() {
      request({
        url: '/system/role/getUsersByRoleCode',
        method: 'get',
        params: {
          code: "jcycy"
        }
      }).then(res => {
        this.leadManList.push(res.data)
      })
    },
    async sureWorkerFun(data) {
      this.sureWorker = data
      this.xling = false
    },
    async getWorker() {
      this.xling = true
      let res = await request({
        url: '/partnerOwn/partner/getWorkList',
        method: 'get',
        params: {
          partnerId: this.partnerId,
          workName: this.searchValue,
          pageNum: 1,
          pageSize: 1000,
        },
      })
      this.workerList = res.rows
    },
    async getindex() {
      let res = await request({
        url: '/rescue/dict/data/type/inspection_car_type',
        method: 'get',
      })
      this.columns.push(res.data)
      let orderRes = await request({
        url: '/partnerOwn/partner/orderDetail',
        method: 'get',
        params: {
          partnerId: this.partnerId,
          orderId: this.orderId
        }
      })
      this.orderInfo = orderRes.data
      this.cph = orderRes.data.carNum
    },
    closexl(e) {
      this.xling = false

    },
    openxl(e) {
    },
    close(e) {
    },
    confirm(e) {
      this.show = false,
          this.lei = e.value[0].label
      this.carType = e.value[0].value
    },
    change(e) {
    },
    cancel(e) {
      this.show = false
    },
  }
}
</script>

<style scoped lang="scss">
image {
  width: 100%;
  height: 100%;
}

.content {
  box-sizing: border-box;
  width: 100%;
  // height: calc(100vh);
  background: #F4F4F4;
}

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

.t-title {
  font-size: 17px;
  font-weight: bold;
  color: #333333;
}

.t-left {
  width: 10%;
}

.t-you {
  height: 100%;
  width: 10%;
}

.x-box {
  width: 95%;
  margin: 10px auto;
  ackground: #FFFFFF;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 10px;
  background: white;
}

.touxiang {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin: 10px auto;

}

.sanniu {
  width: 105px;
  height: 35px;
  background: #0174F6;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 15px;
  margin: 0 auto;
}

.annniu {
  width: 90%;
  height: 45px;
  background: linear-gradient(180deg, #3F61C0 0%, #0174F6 100%);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 15px;
  margin: 15px auto;
}

.banniu {
  width: 20%;
  height: 30px;
  background: linear-gradient(180deg, #3F61C0 0%, #0D2E8D 100%);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 400;
  color: #FFFFFF;
}

.box {

}

.box-dis {
  box-sizing: border-box;
  padding: 15px;
  // border-bottom: 1px solid #EEEEEE;
  display: flex;
}

.shop-img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 10px;
}

.dis-hui {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 400;
  color: #999999;
  margin-bottom: 5px;
}

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

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

.t-input {
  width: 90%;
  margin: 20px auto;
  border: 1px solid #0174F6;
  border-radius: 6px;
  box-sizing: border-box;
  padding: 2px 5px;

}

.on-input {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px auto;
}

.bottom-input {
  border-top: 1px solid #F4F4F4;
  box-sizing: border-box;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.o-left {
  font-size: 15px;
  font-weight: 400;
  color: #666666;
}

.o-right {
  font-size: 15px;
  font-weight: 400;
  color: #333333;
}

.o-zui {
  font-size: 20px;
  font-weight: 500;
  color: #333333;
}

.popup-box {
  overflow: hidden;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 15px;
  width: 100%;
  background-color: white;
}

.sousuo {
  width: 95%;
  margin: 0 auto;
  margin-left: 0px;
  height: 30px;
  background: #F0F0F0;
  border-radius: 50px;
  color: #999999;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  input {
    width: 80%;
  }
}

.list-box {
  width: 100%;
  height: 300px;
  overflow: hidden;
  box-sizing: border-box;

}

.list_scroll {
  height: 100%; // 需设置高度
  display: flex;
  flex-direction: column;

}

.list-qiu {
  width: 95%;
  border-bottom: 1px solid #EEEEEE;
  box-sizing: border-box;
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tel {
  margin-left: 5px;
  font-size: 15px;
  font-weight: 400;
  color: #666666;
}
</style>
