<template>
  <div class="addtrace">
    <div class="main">
      <div class="cell" v-for="item in detail.goods" :key="item.code">
        <div class="cell-item">
          <p class="label">商品名称</p>
          <p class="value">{{ item.goodsName }}</p>
        </div>
        <div class="cell-item">
          <p class="label">报关单号(海关编号)</p>
          <p class="value">{{ item.customs }}</p>
        </div>
        <div class="cell-item">
          <p class="label">总重量(KG)</p>
          <p class="value">{{ item.weight }}</p>
        </div>
        <div class="cell-item">
          <p class="label">件数</p>
          <p class="value">{{ item.number }}</p>
        </div>
        <div class="cell-item">
          <p class="label">原产地</p>
          <p class="value">{{ item.placeOrigin }}</p>
        </div>
        <div class="cell-item">
          <p class="label">商品流向单位（个人）</p>
          <p class="value">
            <input class="input" type="text" v-model="item.company" />
          </p>
          <van-icon
            v-if="item.company"
            class="icon"
            name="close"
            @click="item.company = ''"
          />
        </div>
        <div class="cell-item">
          <p class="label">商品流向重量(KG)</p>
          <p class="value">
            <input class="input" type="number" v-model="item.goodsWeight" />
          </p>
          <van-icon
            v-if="item.goodsWeight"
            class="icon"
            name="close"
            @click="item.goodsWeight = ''"
          />
        </div>
      </div>
    </div>
    <van-button class="submit" block @click="submit">提交</van-button>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon, Button } from "vant";
import { detail, addTracing } from "@/api/coldfood";

Vue.use(Icon).use(Button);

export default {
  data() {
    return {
      driverCode: null,
      detail: {},
      userInfo: {},
    };
  },
  methods: {
    init() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      let params = {
        appId: 1234,
        driverCode: this.driverCode,
      };
      detail(params).then((res) => {
        this.$toast.clear();
        this.detail = res.data;
        console.log(this.detail);
      });
    },
    submit() {
      let tracing = [];
      this.detail.goods.map((item) => {
        if (item.company && item.goodsWeight) {
          tracing.push({
            company: item.company,
            goodsCode: item.code,
            goodsName: item.goodsName,
            goodsWeight: item.goodsWeight,
            placeOrigin: item.placeOrigin,
          });
        }
      });
      if (tracing.length > 0) {
        let params = {
          appId: 1234,
          driverCode: detail.driverCode,
          tracing,
          userId: this.userInfo.userId,
        };
        addTracing(params).then((res) => {
          console.log(res);
          this.$toast.success("添加商品追溯成功");
          setTimeout(() => {
            this.$router.go(-1);
          }, 1000);
        });
      } else {
        this.$toast("请至少填写一个商品的流向及其重量！");
      }
    },
  },
  created() {
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    this.userInfo = JSON.parse(res);
    this.driverCode = this.$route.query.code;
    if (this.driverCode) {
      this.init();
    }
  },
};
</script>

<style lang="stylus" scoped>
.addtrace {
  .main {
    height: calc(100vh - 90px);
    overflow-y auto

    .cell {
      margin-bottom: 20px;
      background: #fff;

      .cell-item {
        padding: 30px;
        display: flex;
        border-bottom: 1px solid #eee;

        .label {
          width: 200px;
          font-size: 28px;
          font-weight: 400;
          color: #666666;
        }

        .value {
          margin-left: 30px;
          font-size: 28px;
          color: #333333;

          .input {
            width: 430px;
          }
        }

        .icon {
          font-size: 28px;
        }
      }

      .cell-detail:last-child {
        border-bottom: 0;
      }
    }
  }

  .submit {
    width: 100%;
    height: 90px;
    background: #EB4E3F;
    font-size: 36px;
    font-weight: 500;
    color: #FFFFFF;
  }
}
</style>
