<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>
    <view class="x-box">
      <view class="box-top">
        <view style="width: 100%;">
          <view class="touxiang">
            <image src="../../static/detection/touxiang.png" mode=""></image>
          </view>

          <view v-if="workerName" class="h-title">{{ workerName }}</view>
          <view class="sanniu" @click="getWorker()">
            <text>选择上门员工</text>
          </view>
        </view>


      </view>
      <!-- 	<view class="box-dis">

        <view class="ds-right">
          <view class="h-title">{{orderInfo.goodsTitle}} </view>
          <view class="dis-hui">
            <text>上门时间：</text>
            <text>{{orderInfo.appointmentDay?orderInfo.appointmentDay:""}}{{orderInfo.appointmentTime?orderInfo.appointmentTime:""}}</text>
          </view>
          <view class="dis-hui">
            <text>手机号：</text>
            <text>{{orderInfo.userPhone}}</text>
          </view>
          <view class="dis-hui">
            <text>地址：</text>
            <text>{{orderInfo.adressDetail}}</text>
          </view>
        </view>
      </view> -->
    </view>
    <view class="x-box">
      <view class="h-title">{{ orderInfo.goodsTitle }}</view>
      <view class="on-input">
        <view class="o-left">上门时间：</view>
        <view class="o-right">{{ orderInfo.appointmentDay ? orderInfo.appointmentDay : "" }}
          {{ orderInfo.appointmentTime ? orderInfo.appointmentTime : "" }}
        </view>
      </view>
      <view class="on-input">
        <view class="o-left">手机号：</view>
        <view class="o-right">{{ orderInfo.userPhone }}</view>
      </view>
      <view class="on-input">
        <view class="o-left">地址：</view>
        <view class="o-right">{{ orderInfo.adressDetail }}</view>
      </view>
    </view>
    <view class="annniu">
      <view @click="takeOut()" 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.nickname }}</text>
              </view>
              <view class="banniu">
                <text @click="sureWorkerFun(item)">选择</text>
              </view>
            </view>
            <view class="ckgd" @click="jiazai()">
              <text>点击加载更多</text>
            </view>
          </scroll-view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import config from '@/config'
import request from '../../utils/request';

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

      workerId: '',
      columns: [],
      workerList: [],
      cph: '',
      orderId: '',
      id: '',
      partnerId: uni.getStorageSync("partnerId"),
      orderInfo: {},
      searchValue: '',
      sureWorker: {},
      pageNum: 1, //第几页
      pageSize: 10, //一页多少张
      workerName: ''
    }
  },

  onLoad(opion) {
    this.id = opion.id
    this.getindex()
  },
  methods: {
    getback() {
      uni.navigateBack()
    },
    async takeOut() {
      if (!this.sureWorker.id) {
        uni.showToast({
          title: "请选择招待员",
          icon: "error"
        })
        return
      }


      let res = await request({
        url: '/partnerOwn/partner/designatePickCarWorker',
        method: 'post',
        params: {
          pickCarId: this.id,
          workerId: this.workerId
        },
      })
      if (res.code == 200) {
        uni.showToast({
          title: "指派成功"
        })
        uni.navigateBack()
      } else {
        uni.showToast({
          title: "异常错误",
          icon: "error"
        })
      }

    },
    async sureWorkerFun(data) {

      this.sureWorker = data
      this.workerName = data.nickname
      this.workerId = data.id
      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,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        },
      })

      if (res.code == 200) {
        this.workerList = this.workerList.concat(res.rows)

      } else {
        uni.showToast({
          title: "获取员工失败",
          icon: 'none'
        })
      }

    },
    jiazai() {
      this.pageNum++;
      this.getWorker()
    },
    async getindex() {
      // 获取上门信息
      let res = await request({
        url: '/partnerOwn/partner/getPickCarDetail?dataId=' + this.id,
        method: 'get',
      })
      this.orderInfo = res.data
      this.workerName = res.data.workerName


    },

    closexl(e) {
      this.xling = false

    },
    openxl(e) {
    },
    close(e) {
    },

    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;
}

.ckgd {
  width: 100%;
  text-align: center;
  color: #0D2E8D;
  margin-top: 20px;
}

.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: #0D2E8D;
  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%, #0D2E8D 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;
  text-align: center;
  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 #0D2E8D;
  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>