<template>
  <div class="myreport">
    <!-- <nav-header title="我的预约" @back="$router.go(-1)" /> -->
    <van-tabs
      color="#EB4E3F"
      title-active-color="#EB4E3F"
      title-inactive-color="#666666"
      @click="handleChange"
    >
      <van-tab v-for="item in list" :title="item.title" :key="item.classifyId">
        <van-pull-refresh v-model="refreshing" class="content" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="item.finished"
            @load="onLoad"
            finished-text="没有更多了"
          >
            <div
              class="card"
              v-for="record in item.content"
              :key="record.driverCode"
              @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.createTime }}</span>
                </p>
                <p>
                  预约入库时间：<span>{{ record.determineTime }}</span>
                </p>
              </div>
              <div
                v-if="
                  record.state === 11 ||
                  record.state === 0 ||
                  record.state === 2 ||
                  record.state === 1
                "
                class="foot"
              >
                <div
                  class="button"
                  @click.stop="update(record)"
                  v-if="record.state === 0 || record.state === 2"
                >
                  重新提交
                </div>
                <div
                  class="button"
                  style="margin-left: 20px"
                  v-if="record.state === 11 || record.state === 0 || record.state === 1"
                  @click.stop="cancle(record)"
                >
                  撤回
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs, PullRefresh, List } from "vant";
// import NavHeader from "@/components/NavHeader";
import { reportList, updateState } from "@/api/coldfood";
import { encryptByDES } from "@/utils/utils";

Vue.use(Tab).use(Tabs).use(PullRefresh).use(List);

export default {
  components: {
    // NavHeader
  },
  data() {
    return {
      userInfo: {},
      refreshing: false,
      loading: false,
      currentPage: 0,
      list: [],
    };
  },
  methods: {
    handleChange(name) {
      this.currentPage = name;
      this.init(name, "refresh");
    },
    onRefresh() {
      this.init(this.currentPage, "refresh");
    },
    onLoad() {
      this.init(this.currentPage, "loading");
    },
    init(index, type) {
      let params = {
        appId: 1234,
        state: this.list[index].state,
        pageNum: type === "refresh" ? 1 : parseInt(this.list[index].pageNum) + 1,
        pageSize: 20,
        userId: encryptByDES(this.userInfo.userId, "MnuYbhGv")
      };
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      reportList(params).then((res) => {
        this.$toast.clear();
        this.refreshing = false;
        this.loading = false;
        const current = res.data.pageNum;
        const totalPage = res.data.pages;
        const records = res.data.list;
        this.list = this.list.map((item, i) => {
          if (i === index) {
            if (current === 1 && records.length === 0) {
              item.content = records;
              item.pageNum = 1;
            } else {
              item.pageNum = current;
              item.finished = current >= totalPage;
              if (type === "refresh") item.content = records;
              else item.content = item.content.concat(records);
            }
          }
          return item;
        });
      });
    },
    jump(code) {
      this.$router.push({
        name: "MyReportDetail",
        query: {
          code,
        },
      });
    },
    cancle(record) {
      this.$dialog
        .confirm({
          message: "确认撤回该预约申报单吗？",
        })
        .then(() => {
          let params = {
            appId: 1234,
            driverCode: record.driverCode,
            name: this.userInfo.realName,
            state: 3,
            // userId: this.userInfo.userId,
            reason: "",
            addressCode: "",
          };
          updateState(params).then((res) => {
            console.log(res);
            this.init(this.currentPage, "refresh");
          });
        })
        .catch(() => {
          console.log("取消");
        });
    },
    update(record) {
      console.log(record);
      this.$router.push({
        name: "Report",
        query: { code: record.driverCode },
      });
    },
  },
  created() {
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    this.userInfo = JSON.parse(res);
    let arr = [
      { title: "预约待审核", state: 0 },
      { title: "预约通过", state: 13 },
      { title: "预约未通过", state: 2 },
      { title: "已撤回", state: 3 },
    ];
    this.list = arr.map((item) => {
      return {
        title: item.title,
        state: item.state,
        pageNum: 1,
        finished: true,
        content: [],
      };
    });
    this.init(0, "refresh");
  },
};
</script>

<style lang="stylus" scoped>
.myreport {
  .content {
    margin-top: 20px;
    height: calc(100vh - 108px);
    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 10px;
          border-radius: 25px;
          border: 2px solid #EB4E3F;
          text-align: center;
          font-size: 28px;
          color: #EB4E3F;
        }
      }
    }
  }
}
</style>
