<template>
  <div>
    <backindex :title="titlename"></backindex>
    <div class="content">
      <div class="sm">
        <van-search v-model="value" @search="onSearch" placeholder="点击搜索单号" />
        <img src="../assets/user/sm.png" alt="" @click="wxScanCode()">
      </div>
      <!-- 收件登记 -->
      <div class="kdtype">
        <ul>
          <li :class="sdata == 0?'active':''">
            <img src="../assets/user/kd1.png" alt="" @click="setExpressCompanyName('顺丰快递')">
            <p>顺丰</p>
          </li>
          <li :class="sdata == 1?'active':''">
            <img src="../assets/user/kd2.png" alt="" @click="setExpressCompanyName('中通快递')">
            <p>中通</p>
          </li>
          <li :class="sdata == 2?'active':''">
            <img style="width: 1rem;height: auto;padding-top: .22rem;" src="../assets/user/kd3.png" alt=""
              @click="setExpressCompanyName('京东快递')">
            <p>京东</p>
          </li>
          <li :class="sdata == 3?'active':''">
            <img src="../assets/user/kd4.png" alt="" @click="setExpressCompanyName('闪送快递')">
            <p>闪送</p>
          </li>
          <li :class="sdata == 4?'active':''">
            <img style="width: 1.24rem;height: auto;padding: .3rem 0rem .1rem;" src="../assets/user/kd5.png" alt=""
              @click="setExpressCompanyName('EMS')">
            <p>EMS</p>
          </li>
          <li :class="sdata == 5?'active':''">
            <img style="width: 1.1rem;height: auto;padding-top: .15rem;" src="../assets/user/kd6.png" alt=""
              @click="setExpressCompanyName('DHL')">
            <p>DHL</p>
          </li>
        </ul>

        <van-field type="text" v-model="expressNo" label="快递单号" placeholder="填写快递单号" />
        <van-field type="text" v-model="expressCompanyName" label="快递公司" placeholder="填写快递公司" />
      </div>
      <!-- 快递属性 -->
      <div class="ktsx">
        <van-field readonly clickable name="picker" :value="phone" label="收件人手机" placeholder="输入手机号后四位查询"
          @click="addshow=true" />
        <van-field readonly type="text" v-model="recipient" label="收件人" />
        <van-field readonly type="text" v-model="company" label="公司" />
        <van-field readonly type="text" v-model="department" label="部门" />
        <van-field readonly type="text" v-model="costCenterName" label="成本中心" />
        <van-field readonly type="text" v-model="sendSeat" label="派件座位" />
        <van-field readonly clickable :value="expressType" label="快件类型" placeholder="选择快件类型" @click="wpshow=true" />
        <van-popup v-model="wpshow" position="bottom">
          <van-picker title="快件类型" show-toolbar :columns="wplist" @confirm="onConfirm1" @cancel="wpshow=false" />
        </van-popup>
        <van-field readonly clickable :value="isPayOnDelivery" label="是否到付件" placeholder="选择是否到付件"
          @click="payshow=true" />
        <van-popup v-model="payshow" position="bottom">
          <van-picker title="是否到付件" show-toolbar :columns="paylist" @confirm="onConfirm2" @cancel="payshow=false" />
        </van-popup>
        <van-field v-if="payMoneyShow" type="number" v-model="payMoney" label="到付件金额" placeholder="输入到付件金额" />
        <van-field readonly clickable :value="isIncludeChldren" label="是否包含子件" placeholder="选择是否包含子件"
          @click="chldrenshow=true" />
        <van-popup v-model="chldrenshow" position="bottom">
          <van-picker title="是否包含子件" show-toolbar :columns="paylist" @confirm="onConfirm3"
            @cancel="chldrenshow=false" />
        </van-popup>
        <van-field type="text" v-model="shelfAndFloorNum" label="货架号" placeholder="如1-2(1号柜2层)" />
        <van-field type="text" v-model="remark" label="快递备注" placeholder="输入快递备注" />
        <div>
          <button @click="clear()">清空</button>
          <button @click="addPer()">新增临时收件人</button>
        </div>
      </div>
      <div style="text-align:center;margin-top: .3rem;">
        <button
          style="color: #fff;background: #02bfb3;border:.01rem solid #02bfb3;width: 50%;height: 40px;border-radius: 0.1rem;"
          @click="saveDj()">保存</button>
      </div>

      <!-- 填写手机号码 -->
      <van-popup round v-model="addshow" class="whrite_add" closeable @closed="close" :close-on-click-overlay="false">
        <div>
          <p style="font-size: 16px;text-align: center;margin-bottom: 16px;">填写号码</p>
          <van-form @submit="onSubmit">
            <van-field v-model="phone" name="收件人手机" label="收件人手机" type="number" maxlength="20" placeholder="输入手机号后四位"
              @change="searchList()" />
            <ul>
              <li v-for="(item,i) in employeeList" @click="choose(i,item)">
                <p>{{item.name}}</p>
                <p>{{item.department}}</p>
                <van-icon v-if="index == i" name="passed" />
              </li>
            </ul>
            <div style="margin-top: 16px;">
              <van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
            </div>
          </van-form>
        </div>
      </van-popup>


      <van-popup round v-model="tjshow" class="whrite_add" closeabl="false" :close-on-click-overlay="false"
        closed="close">
        <div>
          <p style="font-size: 16px;text-align: center;margin-bottom: 16px;">登记成功</p>
          <img src="../assets/user/success.png" alt="" style="display: block;margin: 0 auto;width: 1.76rem;">

          <p style="text-align: center;">登记成功，是否继续登记下一单？</p>
          <div style="margin-top: 16px;">
            <van-button color="#00c4b8" block type="info" native-type="submit" @click="clear()">确定</van-button>
          </div>
        </div>

      </van-popup>
    </div>
  </div>
</template>

<script>
  import {
    Toast,
    Dialog
  } from 'vant'
  export default {
    inject: ['reload'],
    data() {
      return {
        chldrenshow: false,
        payMoneyShow: false,
        payshow: false,
        paylist: ["是", "否"],
        wpshow: false,
        wplist: ["物品", "文件"],
        titlename: "收件登记",
        addshow: false,
        tjshow: false,
        value: '',
        sdata: '-1',
        employeeList: [], //员工列表
        index: '-1',
        recipient: '', //人名
        department: '', //部门
        costCenterName: '',
        mailRoomId: '',
        expressCompanyName: '', //快递公司名字
        expressCompany: '',//快递公司
        expressNo: '',
        recipient: '',
        phone: '',
        company: '',
        sendSeat: '', //派件座位
        isPayOnDelivery: '', //是否到付件
        payMoney: '', //到付件金额
        isIncludeChldren: '', //是否包含子件
        expressType: '', //快件类型
        shelfAndFloorNum: '1-1', //货架号
        remark: '', //快递备注
        expressNo: '', //快递号
        sendexpressCompany: '', //快递公司发送数据
        user_id: '', //收件人id
      }
    },
    created: function() {
      this.isLogin();
      this.isPayOnDelivery= '否'; //是否到付件
      this.isIncludeChldren='否'; //是否包含子件
      this.expressType='文件'; //快件类型
    },
    methods: {
      //点击图片填入快递公司
      setExpressCompanyName(e) {
        this.expressCompanyName = e;
        console.log("e:" + e);
      },
      //快件类型
      onConfirm1(e) {
        this.expressType = e;
        this.wpshow = false;
      },
      //是否到付件
      onConfirm2(e) {
        this.isPayOnDelivery = e;
        if (this.isPayOnDelivery == '是') {
          this.payMoneyShow = true;
        } else {
          this.payMoneyShow = false;
        }
        this.payshow = false;
      },
      //是否包含子件
      onConfirm3(e) {
        this.isIncludeChldren = e;
        this.chldrenshow = false;
      },
      //微信扫码
      wxScanCode() {
        this.$http.post(this.$store.state.host + "/weixin/getWxConfig", {
            url: window.location.href.split("#")[0]
          }, {
            emulateJSON: true
          })
          .then(res => {
            //发送成功
            var timestamp = res.body.wxConfig.timestamp;
            var noncestr = res.body.wxConfig.nonceStr;
            var signature = res.body.wxConfig.signature;
            var appId = res.body.wxConfig.appId;
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              //debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: appId, // 必填，公众号的唯一标识
              timestamp: timestamp, // 必填，生成签名的时间戳
              nonceStr: noncestr, // 必填，生成签名的随机串
              signature: signature, // 必填，签名，见附录1
              jsApiList: [
                "scanQRCode",
              ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            wx.ready(() => {
              wx.scanQRCode({
                needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                success: (res) => {
                  var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果

                  if (result.indexOf(",") != -1) {
                    let result1 = res.resultStr.split(",");
                    result = result1[result1.length - 1];
                  }

                  // location.href=res.resultStr;//扫描结果传递到的处理页面,跳转到这个页面
                  // alert(result);
                  // location.href=res.resultStr;//扫描结果传递到的处理页面,跳转到这个页面
                  // sessionStorage.setItem('saomiao_result',result);
                  //其它网页调用二维码扫描结果：
                  // var result = sessionStorage.getItem("saomiao_result");

                  this.onSearch(result)
                },
                error: function(res) {
                  console.log(res);
                }
              });
            });
          }, res => {
            //发送失败
            Toast("加载中!")
          })

      },

      //选择员工
      choose(val, item) {
        this.index = val
        this.recipient = item.name
        this.department = item.department
        this.company = item.company
        this.phone = item.phone
        this.costCenterName = item.costCenterName
        this.user_id = item.user_id
        this.sendSeat = item.seat
      },
      //手机号后四位搜索
      searchList() {
        this.$http.post(this.$store.state.host + "/solic/getEmployeeInfoByPhone", {
            phone: this.phone
          }, {
            emulateJSON: true
          })
          .then(res => {
            //发送成功
            if (res.body.msg == 'success') {
              this.employeeList = res.body.employeeList
              console.log("员工:" + this.employeeList.length);
            }
          }, res => {
            //发送失败
            Toast("网络错误!")
          })
      },
      //搜索
      onSearch(val) {
        this.expressNo = val;
        this.$http.post(this.$store.state.host + "/solic/getExpressDetail", {
            expressNo: val,
            type: 2
          }, {
            emulateJSON: true
          })
          .then(res => {
            //发送成功
            if (res.body.msg == 'success') {
              if (res.body.expressInfo != undefined && res.body.expressInfo != null) {
                switch (res.body.expressInfo.expressInfo) {
                  case "1":
                    this.sdata = 0;
                    this.expressCompanyName = '顺丰快递';
                    break;
                  case "2":
                    this.sdata = 1;
                    this.expressCompanyName = '中通快递';
                    break;
                  case "6":
                    this.sdata = 2;
                    this.expressCompanyName = '京东快递';
                    break;
                  case "5":
                    this.sdata = 3;
                    this.expressCompanyName = '闪送快递';
                    break;
                  case "4":
                    this.sdata = 4;
                    this.expressCompanyName = 'EMS';
                    break;
                  case "3":
                    this.sdata = 5;
                    this.expressCompanyName = 'DHL';
                    break;
                  default:
                    this.sdata = -1;
                    break;
                }
                this.company = res.body.expressInfo.company;
                this.department = res.body.expressInfo.department;

                this.recipient = res.body.expressInfo.receiver;
                this.user_id = res.body.expressInfo.user_id;
                this.phone = res.body.expressInfo.expressPhone;
                this.expressType = res.body.expressInfo.itemType;
                this.isPayOnDelivery = res.body.expressInfo.isPayOnDelivery;
                this.costCenterName = res.body.expressInfo.costCenterName;
                this.sendSeat = res.body.expressInfo.seat;
                this.isIncludeChldren = res.body.expressInfo.isIncludeChldren;
                this.isPayOnDelivery = res.body.expressInfo.isPayOnDelivery;
                if (this.isPayOnDelivery == '是') {
                  this.payMoneyShow = true;
                }
                this.payMoney = res.body.expressInfo.payMoney;
              } else {
                Toast("查无此单!");
              }
            } else {
              Toast(res.body.msg);
            }

          }, res => {
            //发送失败
            Toast("加载中!")
          })
      },
      //新增临时收件人
      addPer(val) {
        this.$router.push({
          path: '/Addper'
        })
      },
      //选择快递
      active(val) {
        this.sdata = val
      },
      onSubmit() {
        if (this.recipient == '') {
          Toast('请选择收件人')
          return
        }
        this.addshow = false
        //this.tjshow=true
      },
      close() {
        //this.phone = ''
        //this.name = ''
        //this.department = ''
        this.index = ''
      },
      //清空
      clear() {
        this.reload();
      },
      //保存
      saveDj() {
        if (localStorage.getItem('roomId') == '' || localStorage.getItem('roomId') == undefined) {
          Toast('请重新登录！');
          return;
        }
        if (this.expressNo == '' || this.expressNo == undefined) {
          Toast('请填写快递单号！');
          return;
        }

        if (this.expressCompanyName == '' || this.expressCompanyName == undefined) {
          Toast('请填写快递公司！');
          return;
        }else{
          switch (this.expressCompanyName) {
            case "顺丰快递":
              this.expressCompany = '1';
              break;
            case "中通快递":
              this.expressCompany = '2';
              break;
            case "京东快递":
              this.expressCompany = '6';
              break;
            case "闪送":
              this.expressCompany = '0';//数据库里面快递公司没有闪送
              break;
            case "EMS":
              this.expressCompany = '0';//数据库里面快递公司没有EMS
              break;
            case "DHL":
              this.expressCompany = '3';
              break;
            default:
              this.expressCompany = '0';
              break;
          }
        }

        if (this.sdata != '' && this.sdata != -1) {
          this.sendexpressCompany = this.sdata;
        } else {
          this.sendexpressCompany = this.expressCompany
        }

        if (this.recipient == '' || this.recipient == undefined) {
          Toast('请选择收件人！');
          return;
        }
        if (this.shelfAndFloorNum == '' || this.shelfAndFloorNum == undefined) {
          Toast('请填写货架号！');
          return;
        } else {
          if (!this.shelfAndFloorNum.match("-") || this.shelfAndFloorNum.split("-")[1] == '') {
            Toast('货架号-层号输入格式有误！');
            return;
          }
        }

        this.$http.post(this.$store.state.host + "/solic/saveExpressRecord", {
            mailRoomId: localStorage.getItem('roomId'),
            expressCompany: this.sendexpressCompany,
            expressCompanyName: this.expressCompanyName,
            user_id: this.user_id,
            expressNo: this.expressNo,
            recipient: this.recipient,
            phone: this.phone,
            company: this.company,
            sendSeat: this.sendSeat,
            isPayOnDelivery: this.isPayOnDelivery,
            payMoney: this.payMoney,
            isIncludeChldren: this.isIncludeChldren,
            expressType: this.expressType,
            shelfAndFloorNum: this.shelfAndFloorNum,
            remark: this.remark,
          }, {
            emulateJSON: true
          })
          .then(res => {
            //发送成功
            if (res.body.msg == 'success') {
              this.tjshow = true;
            } else {
              Toast("登记失败!")
            }
          }, res => {
            //发送失败
            Toast("网络错误!")
          })
        //this.tjshow=true;
      }
    },
    mounted: function() {

    }
  }
</script>

<style scoped lang="less">
  .content {
    padding: 0.25rem .37rem;
    font-size: .3rem;

    .sm {
      display: flex;
      margin-bottom: .2rem;
      justify-content: space-between;

      /deep/.van-search {
        width: 6.2rem;
        height: .76rem;
        border-radius: 25px;
        overflow: hidden;
        padding: 0rem;
        background-color: white;

        .van-search__content {
          background-color: white;
        }

        input {
          background-color: white;
        }
      }

      img {
        width: .4rem;
        height: .4rem;
        position: relative;
        top: .18rem;
      }
    }

    .kdtype {
      background: white;
      padding: .4rem .4rem .2rem;
      border-radius: .05rem;

      ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        text-align: center;

        li {
          width: 1.5rem;
          padding: .2rem 0rem;
          border: .01rem solid #eef7ff;
          margin-bottom: .2rem;
          border-radius: .05rem;

          img {
            height: .7rem;
            margin-bottom: .25rem;
          }

          p {
            font-size: .26rem;
            color: #666666;
          }
        }

        .active {
          border: .01rem solid #74bdfc;
        }
      }
    }

    .ktsx {
      padding: .2rem .3rem;
      background: white;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      font-size: .28rem;
      line-height: 200%;
      border-radius: .05rem;
      margin-top: .2rem;

      /deep/.van-cell {
        .van-field__label {
          span {
            font-size: .28rem;
            color: #333;
          }
        }

        padding: 0px 0rem;
        overflow: unset;
        border-top: unset;
        border-bottom: .01rem solid #F6F6F6;
        padding-bottom: .1rem;

        input {
          text-align: right;
          height: .5rem;
          padding-right: .25rem;
          font-size: .28rem;
        }
      }

      /deep/.van-cell::after {
        content: "";
        display: none;
        border-right: .01rem solid #b0b0b0;
        border-bottom: .01rem solid #b0b0b0;
        transform: rotate(-45deg);
        left: unset;
        position: absolute;
        right: 0rem;
        bottom: .25rem;
        width: .2rem;
        height: .2rem;
      }

      p {
        width: 100%;
      }

      div {
        width: 100%;
        border-top: .01rem solid #F6F6F6;
        text-align: right;
        padding-top: .2rem;
        margin-top: .2rem;

        button {
          font-size: .28rem;
          border: .01rem solid #00c4b8;
          color: #00c4b8;
          background: white;
          padding: 0rem .3rem;
          border-radius: .05rem;
        }

        button:nth-of-type(2) {
          font-size: .28rem;
          border: .01rem solid #0086c4;
          color: #0086c4;
          background: white;
          padding: 0rem .3rem;
          border-radius: .05rem;
        }
      }
    }

    .whrite_add {
      width: 6.6rem;
      padding: .4rem .2rem;

      /deep/.van-field__value {
        input {
          text-align: right;
        }

      }

      /deep/.van-popup__close-icon--top-right {
        top: 5px;
        right: 10px;
      }

      ul {
        li {
          padding: 10px 36px 10px 16px;
          display: flex;
          justify-content: space-between;
          position: relative;

          i {
            position: absolute;
            right: 0px;
            top: .25rem
          }

          i:before {
            background: #00c4b8;
            color: white;
            border-radius: 50%;
          }
        }
      }
    }
  }
</style>
