<template>
  <div class="review">
    <div class="search">
      <van-search v-model="driverNo" label="货物编号" placeholder="请输入货物编号" />
      <div class="buttonContainer">
        <van-button type="primary" size="small" class="button" @click="submit"
          >查询</van-button
        >
        <van-tag type="warning">查询前请先输入申请单号</van-tag>
      </div>
    </div>
    <div class="list">
      <div class="card" v-if="record.driverNo" @click="jump(record.driverCode)">
        <div class="title">
          <img src="@/assets/coldfood/code_icon.png" alt="" />
          <p>
            预约编号：<span>{{ record.driverNo }}</span>
          </p>
        </div>
        <div class="info">
          <p>
            预约人：<span>{{ record.name }}</span>
          </p>
          <p>
            手机号：<span>{{ record.phone }}</span>
          </p>
          <p>
            状态：<span>{{ record.stateName }}</span>
          </p>
        </div>
        <div class="foot">
          <div class="button" @click.stop="addTrace(record.driverCode)">增加流向追溯</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Button, Search, Tag } from "vant";
import { getCarNumber } from "@/api/coldfood";
import { coldfoodEnume } from "@/utils/utils";

Vue.use(Button).use(Search).use(Tag);

export default {
  data() {
    return {
      driverNo: "",
      record: {},
    };
  },
  methods: {
    init() {},
    submit() {
      if (!this.driverNo) {
        this.$toast("请输入申请单号");
        return;
      }
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      getCarNumber({
        appId: 1234,
        driverNo: this.driverNo,
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        this.$toast.clear();
        if (res.data.list.length <= 0) {
          this.$toast("请确认填写正确的货物编号");
          return;
        }
        let state = parseInt(res.data.list[0].state);
        if (state === 7 || state === 9) {
          this.record = res.data.list[0];
          this.record.stateName = coldfoodEnume(res.data.list[0].state);
        } else {
          this.$toast("请确认填写的货物编号为待出库或已出库状态");
        }
      });
    },
    jump(code) {
      this.$router.push({
        name: "MyReportDetail",
        query: {
          code,
        },
      });
    },
    addTrace(code) {
      this.$router.push({
        name: "AddTrace",
        query: {
          code,
        },
      });
    },
  },
  created() {
    this.init();
  },
};
</script>

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

    .buttonContainer {
      padding: 0 20px 10px;

      .button {
        width: 100%;
      }
    }
  }

  .list {
    margin-top: 20px;
    height: calc(100vh - 300px);

    .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 15px;
          border-radius: 25px;
          border: 2px solid #EB4E3F;
          text-align: center;
          font-size: 28px;
          color: #EB4E3F;
        }
      }
    }
  }
}
</style>
