<template>
  <div class="putin">
    <div class="search">
      <van-search v-model="driverNo" label="单号" placeholder="请输入申请单号" />
      <van-search
        v-model="address"
        label="仓库"
        readonly
        placeholder="点击选择仓库"
        style="margin-top: -15px"
        @click="showPicker = true"
      />
      <div class="buttonContainer">
        <van-button type="primary" size="small" class="button" @click="onRefresh"
          >查询</van-button
        >
        <van-tag type="warning">查询前请先选择仓库信息</van-tag>
        <!-- <van-button type="warning" size="small" class="button" @click="reset"
          >重置</van-button
        > -->
      </div>
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="
            addressList.map((item) => {
              return item.company;
            })
          "
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
    </div>
    <van-pull-refresh v-model="refreshing" class="list" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        finished-text="没有更多了"
      >
        <div
          class="card"
          v-for="item in list"
          :key="item.driverCode"
          @click="jump(item.driverCode)"
        >
          <div class="title">
            <img src="@/assets/coldfood/code_icon.png" alt="" />
            <p>
              预约编号：<span>{{ item.driverNo }}</span>
            </p>
          </div>
          <div class="info">
            <p>
              预约人：<span>{{ item.name }}</span>
            </p>
            <p>
              手机号：<span>{{ item.phone }}</span>
            </p>
            <p>
              司机姓名：<span>{{ item.driverName }}</span>
            </p>
            <p>
              车牌号：<span>{{ item.carNumber }}</span>
            </p>
          </div>
          <div class="foot">
            <div class="button" @click.stop="remeber(item)">出库</div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    <van-dialog v-model="show" show-cancel-button @confirm="putout" @cancel="cancel">
      <van-field label="上传出库证明" required>
        <template #input>
          <van-uploader :after-read="afterRead" v-model="prove" />
        </template>
      </van-field>
      <van-field v-model="deliveryCar" label="出库车牌号" required />
      <van-field v-model="deliveryName" label="驾驶员姓名" required />
    </van-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import {
  PullRefresh,
  List,
  Search,
  Field,
  Popup,
  Picker,
  Button,
  Uploader,
  Tag,
} from "vant";
import { getCarNumber, updateState, uploadFile } from "@/api/coldfood";

Vue.use(PullRefresh)
  .use(List)
  .use(Search)
  .use(Field)
  .use(Popup)
  .use(Picker)
  .use(Button)
  .use(Uploader)
  .use(Tag);
export default {
  props: ["addressList"],
  data() {
    return {
      userInfo: {},
      show: false,
      driverNo: "",
      address: "",
      addressCode: "",
      showPicker: false,
      refreshing: false,
      loading: false,
      finished: true,
      pageNum: 1,
      list: [],
      prove: [],
      deliveryCar: "", // 出库车牌号
      deliveryName: "", // 驾驶员姓名
      record: {},
    };
  },
  methods: {
    onRefresh() {
      this.init(1, "refresh");
    },
    onLoad() {
      this.init(this.pageNum, "loading");
    },
    init(pageNum, type) {
      if (!this.address) {
        this.$toast("请先选择仓库");
        this.refreshing = false;
        return;
      }
      let params = {
        appId: 1234,
        pageNum: type === "refresh" ? pageNum : parseInt(pageNum) + 1,
        pageSize: 20,
        driverNo: this.driverNo,
        addressCode: this.addressCode,
        state: 5,
      };
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      getCarNumber(params).then((res) => {
        this.$toast.clear();
        this.loading = false;
        this.refreshing = false;
        const current = res.data.pageNum;
        const totalPage = res.data.pages;
        const records = res.data.list;
        if (current === 1 && !records.length) {
          this.pageNum = 1;
          this.list = records;
          this.nodata = this.finished = true;
        } else {
          this.pageNum = current;
          this.finished = current >= totalPage;
          if (type === "refresh") this.list = records;
          else this.list = this.list.concat(records);
          this.nodata = false;
        }
      });
    },
    remeber(item) {
      this.show = true;
      this.record = item;
    },
    cancel() {
      this.record = {};
      this.prove = [];
      this.deliveryCar = "";
      this.deliveryName = "";
      this.show = false;
    },
    putout() {
      const { record, prove, deliveryCar, deliveryName } = this;
      if (this.prove.length <= 0) {
        this.$toast("请上传出库证明照片");
        this.cancel();
        return;
      } else if (!deliveryCar) {
        this.$toast("请填写出库车牌号");
        this.cancel();
        return;
      } else if (!deliveryName) {
        this.$toast("请填写驾驶员姓名");
        this.cancel();
        return;
      }
      console.log(prove.map((item) => {return item.url}));
      let params = {
        appId: 1234,
        driverCode: record.driverCode,
        name: this.userInfo.realName,
        userId: this.userInfo.userId,
        driverUrls: prove.map((item) => {return item.url}),
        deliveryCar,
        deliveryName,
        state: 9,
      };
      updateState(params).then(() => {
        this.$toast("出库成功");
        this.cancel();
        this.onRefresh();
      });
    },
    reset() {
      this.address = "";
      this.driverNo = "";
      this.addressCode = "";
      this.onRefresh();
    },
    onConfirm(value, index) {
      this.address = value;
      this.addressCode = this.addressList[index].code;
      this.showPicker = false;
    },
    jump(code) {
      this.$router.push({
        name: "MyReportDetail",
        query: {
          code,
        },
      });
    },
    afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";
      let param = new FormData();
      param.append("file", file.file);
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "上传图片中...",
      });
      uploadFile(param)
        .then((res) => {
          this.$toast.clear();
          file.status = "done";
          file.message = "上传成功";
          file.url = res.data;
        })
        .catch((err) => {
          console.log(err);
          file.status = "failed";
          file.message = "上传失败";
        });
    },
  },
  created() {
    // this.init(1, "refresh");
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    this.userInfo = JSON.parse(res);
  },
};
</script>

<style lang="stylus" scoped>
.putin {
  .search {
    background: #fff;

    .buttonContainer {
      padding: 0 20px 10px;
      // display: flex;
      // align-items: center;
      // justify-content: space-around;

      .button {
        width: 100%;
      }
    }
  }

  .list {
    margin-top: 20px;
    height: calc(100vh - 440px);
    overflow-y: auto;

    .card {
      width: 100%;
      margin-bottom: 20px;
      background: #fff;

      .title {
        height: 90px;
        padding: 0 30px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eee;

        img {
          width: 32px;
          height: 32px;
        }

        p {
          margin-left: 20px;
          font-size: 32px;
          color: #666666;

          span {
            color: #333333;
          }
        }
      }

      .info {
        padding: 20px 30px;
        border-bottom: 1px solid #eee;

        p {
          font-size: 28px;
          color: #666666;
          line-height: 50px;

          span {
            color: #333333;
          }
        }
      }

      .foot {
        height: 90px;
        padding: 0 30px;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .button {
          width: 160px;
          padding: 11px 0;
          border-radius: 25px;
          border: 2px solid #EB4E3F;
          text-align: center;
          font-size: 28px;
          color: #EB4E3F;
        }
      }
    }
  }
}
</style>
