<template>
  <div class="content">
    <div class="jjinfo">
      <van-field
        ref="searchRef"
        :value="recipientsName"
        @focus="onFocus"
        name="phone"
        label="收件人姓名"
        placeholder="请输入收件人姓名"
        :rules="[{ required: true }]"
      />
      <van-field
        :value="recipientsPhone"
        @focus="onFocusPhone"
        name="phone"
        label="收件人手机号"
        placeholder="请输入手机号后四位"
        :rules="[{ required: true }]"
      />
      <van-field
        :value="groupValue.departmentName"
        readonly
        name="phone"
        label="收件人部门"
        placeholder="自动填充"
      />
      <van-field
        :value="groupValue.seatNo"
        readonly
        name="phone"
        label="收件人座位"
        placeholder="自动填充"
      />
    </div>

    <!-- 寄件属性 -->
    <div class="choose">
      <div>
        <div class="type_wp">
          <div>
            <p>物品类型</p>
            <p v-if="wptype == ''" @click="wpshow = true">请选择</p>
            <p v-else @click="wpshow = true">{{ wptype }}</p>
          </div>
          <div>
            <p>
              <template>重量(公斤)</template>
            </p>
            <p>
              <van-field name="Kilogram" style="padding: 0px;">
                <template #input>
                  <van-stepper v-model="Kilogram" :max="100"></van-stepper>
                </template>
              </van-field>
            </p>
          </div>
          <div>
            <p>
              <template>数量(件数)</template>
            </p>
            <p>
              <van-field name="stepper" style="padding: 0px;">
                <template #input>
                  <van-stepper v-model="stepper" :max="100"></van-stepper>
                </template>
              </van-field>
            </p>
          </div>
        </div>
      </div>
    </div>

    <!--商品订单编号-->
    <div class="bz" style="padding-bottom: 0;" v-show="this.accountType == 1">
      <div>
        <van-field
          maxlength="50"
          v-model="goodOrderNo"
          name="调拨单号"
          label="调拨单号"
          placeholder="请输入调拨单号"
        />
      </div>
    </div>

    <!-- 备注 -->
    <div class="bz">
      <div>
        <van-field
          v-model="bz"
          name="备注"
          label="备注"
          placeholder="包装运输等要求"
        />
      </div>
    </div>
    <!-- 我同意 -->
    <div class="check">
      <van-checkbox icon-size=".24rem" v-model="check" shape=""
        >我同意《电子运单契约条款》</van-checkbox
      >
    </div>
    <!-- 寄件 -->
    <div class="btn-jj">
      <van-button type="info" color="#0c2469" @click="printer()"
        >立即寄件</van-button
      >
    </div>
    <!-- 弹窗物品类型 -->
    <van-popup v-model="wpshow" position="bottom">
      <van-picker
        title="物品类型"
        show-toolbar
        :columns="wplist"
        @confirm="onConfirm1"
        @cancel="wpshow = false"
      />
    </van-popup>

    <!-- 姓名输入后弹出 -->
    <van-popup v-model="nameShowA" :style="{ height: '100%', width: '100%' }">
      <form action="" style="display: flex; justify-content: space-between;">
        <van-search
          ref="searchNameRef"
          style="width: 100%;"
          @search="searchCrux"
          v-model="searchKey"
          placeholder="请输入搜索关键词"
        />
      </form>
      <div
        style="height: calc(100vh - 105px); overflow-y: auto; padding: 0 20px;"
      >
        <van-cell-group
          class="vanPopup"
          @click="onGroup(item)"
          v-for="(item, index) in searchNameList"
          :key="index"
          inset
        >
          <van-cell :value="item.departmentName"
            >{{ item.name }}- {{ item.departmentName }} -
            {{ item.seatNo }}</van-cell
          >
        </van-cell-group>
      </div>
      <van-button class="goback" @click="nameShowA = false" type="info">
        退出
      </van-button>
    </van-popup>
    <!-- 手机号输入后弹出 -->
    <van-popup v-model="nameShowB" :style="{ height: '100%', width: '100%' }">
      <form action="" style="display: flex;  justify-content: space-between;">
        <van-search
          ref="searchPhoneRef"
          style="width: 100%;"
          @search="searchCruxPhone"
          v-model="searchKeyPhone"
          placeholder="请输入手机后四位"
        />
      </form>
      <div
        style="height: calc(100vh - 105px); overflow-y: auto; padding: 0 20px;"
      >
        <van-cell-group
          class="vanPopup"
          @click="onGroupPhone(item)"
          v-for="(item, index) in searchNameListPhone"
          :key="index"
          inset
        >
          <van-cell :value="item.departmentName"
            >{{ item.name }}- {{ item.phone }} -
            {{ item.departmentName }}</van-cell
          >
        </van-cell-group>
      </div>
      <van-button class="goback" @click="nameShowB = false" type="info">
        退出
      </van-button>
    </van-popup>

    <!-- 打印机选择器 -->
    <van-popup v-model="printerShow" position="bottom">
      <van-picker
        show-toolbar
        :columns="getPrintersList"
        @confirm="onPrinter"
        @cancel="printerShow = false"
      >
        <template v-slot:option="value">
          {{ value.printerName }}
        </template>
      </van-picker>
    </van-popup>
  </div>
</template>

<script>
import areaList from "@/script/areas.js";
import { Stepper, Toast } from "vant";
import { saveInternal, getUserByName, getListOfPrinters } from "../api/index";
export default {
  data() {
    return {
      titlename: "内部件",
      wptype: "产品", //物品类型
      wpshow: false, //物品类型弹窗显示
      wplist: ["产品", "文件"],
      pricetype: "", //付款类型
      stepper: "", //件数
      Kilogram: "", //重量
      max: "",
      name: "",
      phone: "",
      index: "",
      jjadd: "",
      sjname: "",
      sjadd: "",
      bz: "",
      check: false,
      showPicker: false, //快递
      value: "",
      columns: [],
      columns2: ["个人件", "公司件"],
      user: {},
      expressInfoShow: "", //快递公司展示
      expressPhone: "", //快递公司电话传值
      expressInfo: "", //快递公司传值
      showPicker2: false,
      mainType: "",
      jjaddress: "", //寄件个人地址
      dsList: [], //代收人列表
      userId: "",
      sjInfo: {},
      declaredValue: "",
      innerType: "可销品", //内部调拨
      wpshow2: false, //内部类型弹窗显示
      innerlist: ["可销品", "非卖品"],
      addresstype: "办公室", //地址类型
      addressTypeSend: "", //上传地址类型字段
      addressshow: false, //地址类型弹窗显示
      addlist: ["办公室", "仓库", "店铺调拨"], //
      goodOrderNo: "",
      accountType: "", //账号类型
      // searchQuery: '',
      // showDropdown: false,
      // vanListLoading: false,
      // finished: false,
      // searchResults: [],
      searchKey: "", //姓名搜索结果
      searchKeyPhone: "", //手机搜索结果
      recipientsName: "", //收件人姓名
      recipientsPhone: "", //收件人手机号
      recipientsDoor: "", //部门
      recipientsSet: "", //座位
      nameShowA: false, // 姓名点击聚焦
      nameShowB: false, // 手机号点击聚焦
      searchNameList: [], //搜索后的数据
      searchNameListPhone: [], //手机号搜索后的数据
      groupValue: {}, //点击后的数据

      getPrintersList: [], // 打印机列表
      printerShow: false
    };
  },
  created: function() {
    this.userId = localStorage.getItem("userId");
    this.accountType = localStorage.getItem("accountType");
  },
  mounted() {
    // this.$refs.searchRef.focus();
  },
  methods: {
    //姓名点击聚焦
    onFocus() {
      this.nameShowA = true;
      this.$nextTick(() => {
        if (this.$refs.searchNameRef) {
          const inputEle = this.$refs.searchNameRef.querySelector("input");
          inputEle.focus();
        }
      });
    },
    // 手机号点击聚焦
    onFocusPhone() {
      this.nameShowB = true;
      this.$nextTick(() => {
        if (this.$refs.searchPhoneRef) {
          const inputEle = this.$refs.searchPhoneRef.querySelector("input");
          inputEle.focus();
        }
      });
    },
    // 搜索关键
    async searchCrux() {
      const res = await getUserByName(
        { NAME: this.searchKey },
        { loading: true }
      );
      if (
        res.userByName != "" &&
        res.userByName != undefined &&
        res.userByName != null
      ) {
        if (res.msg == "success") {
          this.searchNameList = res.userByName;
        }
      } else {
        Toast("没有此数据");
      }
    },
    // 手机号搜索关键
    async searchCruxPhone() {
      if (!/^\d{4}$/.test(this.searchKeyPhone)) {
        return Toast("请输入手机号后四位");
      }
      const res = await getUserByName(
        { PHONE: this.searchKeyPhone },
        { loading: true }
      );
      if (
        res.userByName != "" &&
        res.userByName != undefined &&
        res.userByName != null
      ) {
        if (res.msg == "success") {
          this.searchNameListPhone = res.userByName;
        }
      } else {
        Toast("没有此数据");
      }
    },

    // 点击回显
    onGroup(value) {
      this.groupValue = value;
      this.recipientsName = value.name;
      this.recipientsPhone = value.phone;
      this.nameShowA = false;
    },
    // 手机号点击回显
    onGroupPhone(value) {
      this.groupValue = value;
      this.recipientsName = value.name;
      this.recipientsPhone = value.phone;
      this.nameShowB = false;
    },

    // 选择快递公司
    onConfirm(e) {
      this.expressInfoShow = e.text;
      this.expressInfo = e.id;
      this.expressPhone = e.phone;
      this.showPicker = false;
    },
    onConfirm0(e) {
      this.mainType = e;
      this.showPicker2 = false;
    },
    // 选择物品确定
    onConfirm1(e) {
      //确定
      if (e == "产品") {
        this.innerlist = ["可销品", "非卖品"];
        this.innerType = "可销品";
      } else {
        this.innerlist = ["小样", "物料"];
        this.innerType = "小样";
      }

      this.wptype = e;
      this.wpshow = false;
    },
    // 选择内部确定
    onConfirm11(e) {
      //确定
      this.innerType = e;
      this.wpshow2 = false;
    },

    // 地址簿跳转
    link(obj) {
      this.$router.push({ path: "/Inaddressbook", query: { active: obj } });
    },
    async printer() {
      const getPrinters = await getListOfPrinters({});
      if (getPrinters.code == 0) {
        if (getPrinters.data.length == []) {
          this.save();
          Toast("没有打印机");
        } else {
          this.getPrintersList = getPrinters.data.map(item => {
            return { printerName: item.printerName, id: item.id };
          });

          if (this.getPrintersList.length === 1) {
            this.save(this.getPrintersList[0].id);
          } else {
            this.printerShow = true;
          }
        }
      } else {
        Toast("系统异常");
      }
      return;
    },
    async onPrinter(e) {
      const printerId = e.id;
      this.save(printerId);
    },
    //立即寄件交互
    async save(printerId) {
      if (this.recipientsName == "" || this.recipientsName == undefined) {
        return Toast("请输入收件人姓名");
      }

      if (this.wptype == "" || this.wptype == undefined) {
        Toast("请选择物品类型");
        return;
      }

      if (this.stepper == "" || this.stepper == undefined) {
        Toast("请选择数量");
        return;
      }

      if (this.check == false) {
        Toast("请点击同意《电子运单契约条款》");
        return;
      }

      const toast = Toast.loading({
        message: "保存中...",
        forbidClick: true,
        duration: 0
      });
      let wptypeValue = "";
      if (this.wptype == "产品") {
        wptypeValue = 2;
      } else {
        wptypeValue = 1;
      }
      let parmas = {
        addresseeId: this.groupValue.userId,
        expressType: wptypeValue, //快件类型 1-文件 2-物品
        expressNum: this.stepper, //快递数量
        expressRemark: this.bz, //快递备注
        expressWeight: this.Kilogram, //公斤
        printId: printerId
      };
      const res = await saveInternal({ ...parmas });
      if (res.msg == "success") {
        this.$router.push("/");
        Toast("寄件成功");
      } else {
        // Toast(res.error)
        this.$toast(res.msg);
      }
      toast.clear();
    }
  },
  computed: {
    areaList() {
      return areaList;
    }
  }
};
</script>

<style scoped lang="less">
.vanPopup {
  border-bottom: 1px solid #eaeaea;
  padding: 12px 0;
  border-radius: 0px;

  .van-cell {
    padding: 0;
  }

  .van-cell::after {
    border: none;
  }
}

.content {
  .jjinfo {
    font-size: 0.24rem;
    color: #999999;
    padding: 0.33rem;
    word-break: break-word;

    // >div {
    // 	background: white;
    // 	border-radius: .05rem;
    // 	padding: .1rem .3rem;

    // 	.jj {
    // 		display: flex;
    // 		justify-content: space-between;
    // 		padding: .2rem 0rem;

    // 		.jjaddress {
    // 			display: flex;
    // 			padding: .1rem 0rem;

    // 			>p {
    // 				font-size: .24rem;
    // 				font-weight: bold;
    // 				display: inline-block;
    // 				width: .5rem;
    // 				height: .5rem;
    // 				background: #0c2469;
    // 				text-align: center;
    // 				line-height: .5rem;
    // 				color: white;
    // 				border-radius: 50%;
    // 				margin-right: .3rem;
    // 			}

    // 			div {
    // 				//font-weight: bold;
    // 				max-width: 4.2rem;

    // 				p:nth-of-type(1) {
    // 					font-size: .24rem;
    // 					color: #333;
    // 					margin-bottom: .2rem;
    // 				}

    // 				p:nth-of-type(2) {
    // 					font-size: .3rem;
    // 				}
    // 			}
    // 		}

    // 		.dzb {
    // 			text-align: center;
    // 			border-left: .01rem solid #ededed;
    // 			padding-left: .3rem;

    // 			img {
    // 				width: .39rem;
    // 				height: .42rem;
    // 				padding-top: .2rem;
    // 			}

    // 			p {
    // 				font-size: .2rem;
    // 			}

    // 		}
    // 	}
    // }
  }

  .kdshow {
    font-size: 0.3rem;
    padding: 0.3rem 0px;
    width: 6.84rem;
    background: white;
    // border-radius: .05rem;
    margin: 0rem auto 0.2rem;

    /deep/.van-cell {
      padding: 0px 0.3rem;
      overflow: unset;

      input {
        text-align: right;
        height: 0.5rem;
        padding-right: 0.25rem;
      }
    }

    /deep/.van-cell::after {
      content: "";
      display: inline-block;
      border-right: 0.01rem solid #b0b0b0;
      border-bottom: 0.01rem solid #b0b0b0;
      transform: rotate(-45deg);
      left: unset;
      position: absolute;
      right: 0.3rem;
      bottom: 0.15rem;
      width: 0.2rem;
      height: 0.2rem;
    }
  }

  .choose {
    font-size: 0.3rem;
    color: #999999;
    font-weight: bold;
    padding: 0rem 0.33rem;

    > div {
      background: white;

      padding: 0.3rem 0.3rem;
      // border-radius: .05rem;

      .type_wp {
        display: flex;
        justify-content: center;

        div {
          flex: 1;
          text-align: center;

          p:nth-of-type(2) {
            color: #333;
            margin-top: 0.2rem;
            font-size: 0.36rem;
            //position: relative;
          }
        }

        div:nth-of-type(1) {
          border-right: 0.01rem solid #ededed;

          p:nth-of-type(2):after {
            content: "";
            display: inline-block;
            width: 0.15rem;
            height: 0.15rem;
            border-bottom: 0.01rem solid #999;
            border-right: 0.01rem solid #999;
            transform: rotate(45deg);
            margin-left: 0.15rem;
            position: relative;
            top: -0.08rem;
          }
        }
      }

      .type_inner {
        display: flex;
        justify-content: center;

        div {
          flex: 1;
          text-align: center;

          p:nth-of-type(2) {
            color: #333;
            margin-top: 0.2rem;
            font-size: 0.36rem;
            //position: relative;
          }

          p:nth-of-type(2):after {
            content: "";
            display: inline-block;
            width: 0.15rem;
            height: 0.15rem;
            border-bottom: 0.01rem solid #999;
            border-right: 0.01rem solid #999;
            transform: rotate(45deg);
            margin-left: 0.15rem;
            position: relative;
            top: -0.08rem;
          }

          /* .inner_p{

							color: black;
							margin-top: .2rem;
							font-size: .36rem;
						} */
        }

        div:nth-of-type(2) {
          border-right: 0.01rem solid #ededed;

          p:nth-of-type(2):after {
            content: "";
            display: inline-block;
            width: 0.15rem;
            height: 0.15rem;
            border-bottom: 0.01rem solid #999;
            border-right: 0.01rem solid #999;
            transform: rotate(45deg);
            margin-left: 0.15rem;
            position: relative;
            top: -0.08rem;
          }
        }
      }
    }
  }

  .bz {
    padding: 0.33rem;
    font-size: 0.3rem;

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

  .check {
    font-size: 0.24rem;

    text-align: center;

    /deep/.van-checkbox {
      justify-content: center;

      .van-checkbox__label {
        color: #999;
      }
    }
  }

  .btn-jj {
    padding: 0.33rem;

    button {
      width: 100%;
    }
  }
}

.goback {
  position: fixed;
  height: 50px;
  width: 100%;
  bottom: 0;
  left: 0;
}

.whrite_add {
  width: 6.6rem;
  padding: 0.4rem 0.2rem;

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

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