<template>
  <div class="putin">
    <div class="search">
      <van-search
        v-model="address"
        label="仓库"
        readonly
        placeholder="点击选择仓库"
        @click="showPicker = true"
      />
      <div class="buttonContainer">
        <van-button
          type="primary"
          size="small"
          class="button"
          @click="onRefresh"
          >查询</van-button
        >
        <van-tag type="warning">查询前请先选择仓库信息</van-tag>
      </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.param">
          <p class="date">预约入库时间：{{ item.param }}</p>
          <div
            v-for="chid in item.child"
            :key="chid.driverCode"
            @click="jump(chid.driverCode)"
          >
            <div class="title">
              <img src="@/assets/coldfood/code_icon.png" alt="" />
              <p>
                预约编号：<span>{{ chid.driverNo }}</span>
              </p>
            </div>
            <div class="info">
              <p>
                预约人：<span>{{ chid.name }}</span>
              </p>
              <p>
                手机号：<span>{{ chid.phone }}</span>
              </p>
              <p>
                司机姓名：<span>{{ chid.driverName }}</span>
              </p>
              <p>
                车牌号：<span>{{ chid.carNumber }}</span>
              </p>
            </div>
            <div class="foot">
              <div class="button" @click.stop="pass(chid)">通过</div>
              <div class="button" @click.stop="remeber(chid)">拒绝</div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    <van-dialog
      v-model="show"
      show-cancel-button
      @confirm="deny"
      @cancel="cancel"
    >
      <van-field
        v-model="reason"
        rows="1"
        autosize
        label="拒绝理由"
        type="textarea"
        placeholder="请输入拒绝理由"
      />
    </van-dialog>
  </div>
</template>

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

Vue.use(PullRefresh)
  .use(List)
  .use(Search)
  .use(Field)
  .use(Popup)
  .use(Picker)
  .use(Tag)
  .use(Button);
export default {
  props: ["addressList"],
  data() {
    return {
      userInfo: {},
      address: "",
      addressCode: "",
      showPicker: false,
      refreshing: false,
      loading: false,
      finished: true,
      pageNum: 1,
      list: [],
      record: {},
      show: false,
      reason: ""
    };
  },
  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: 10000,
        addressCode: this.addressCode,
        state: 0
      };
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中..."
      });
      reportList(params).then(res => {
        let arr = res.data.list;
        let newArr = dealWithData(arr, "determineTime");
        this.$toast.clear();
        this.loading = false;
        this.refreshing = false;
        const current = res.data.pageNum;
        const totalPage = res.data.pages;
        if (current === 1 && !newArr.length) {
          this.pageNum = 1;
          this.list = [];
          this.finished = true;
        } else {
          this.pageNum = current;
          this.finished = current >= totalPage;
          this.list = newArr;
        }
      });
    },
    pass(item) {
      this.$dialog
        .confirm({
          message: "确认通过该预约申报单吗？"
        })
        .then(() => {
          let params = {
            appId: 1234,
            driverCode: item.driverCode,
            name: this.userInfo.realName,
            userId: this.userInfo.userId,
            state: 11
          };
          updateState(params).then(() => {
            this.$toast("通过成功");
            this.onRefresh();
          });
        })
        .catch(() => {
          console.log("取消");
        });
    },
    remeber(item) {
      this.show = true;
      this.record = item;
    },
    cancel() {
      this.record = {};
      this.reason = "";
      this.show = false;
    },
    deny() {
      if (!this.reason) {
        this.$toast("请输入拒绝理由");
        return;
      }
      let params = {
        appId: 1234,
        driverCode: this.record.driverCode,
        name: this.userInfo.realName,
        userId: this.userInfo.userId,
        state: 2,
        reason: this.reason
      };
      updateState(params).then(() => {
        this.$toast("拒绝成功");
        this.cancel();
        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
        }
      });
    }
  },
  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;

      .button {
        width: 100%;
      }
    }
  }

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

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

      .date {
        margin-bottom: 10px;
        padding: 20px 30px;
        background: #fff;
        color: #333;
        font-size: 32px;
      }

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

        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;
        background: #fff;

        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;
        background: #fff;

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