<template>
  <div class="check">
    <!-- <nav-header :title="title" @back="$router.go(-1)" /> -->
    <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-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>
    <div class="main">
      <van-pull-refresh
        v-model="refreshing"
        class="content"
        @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>{{ getStateName(item.state) }}</span>
              </p>
              <p>
                预约时间：<span>{{ item.createTime }}</span>
              </p>
              <p>
                预约入库时间：<span>{{ item.determineTime }}</span>
              </p>
            </div>
            <div class="foot">
              <div
                v-if="type === 7"
                class="button"
                @click.stop="disinfect(item)"
              >
                确认消杀
              </div>
              <div v-if="type === 4" class="button" @click.stop="pass(item)">
                通过检测
              </div>
              <div
                v-if="type === 4"
                class="button right"
                @click.stop="deny(item)"
              >
                拒绝
              </div>
              <div v-if="type === 8" class="button" @click.stop="destroy(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
          v-model="swDisinfectCompany"
          placeholder="请输入消杀单位名称"
          :rules="[{ required: true, message: '请输入消杀单位名称' }]"
        />
        <van-field label="上传报告证明" required>
          <template #input>
            <van-uploader
              :after-read="afterRead"
              v-model="sterilizePicture"
              max-count="1"
            />
          </template>
        </van-field>
      </van-dialog>
      <van-dialog
        v-model="show1"
        show-cancel-button
        @confirm="putout1"
        @cancel="cancel"
      >
        <van-field
          label="检测单位名称"
          required
          v-model="swCheckCompany"
          placeholder="请输入检测单位名称"
          :rules="[{ required: true, message: '请输入检测单位名称' }]"
        />
        <van-field
          label="检测报告编号"
          required
          v-model="swCheckNo"
          placeholder="请输入检测报告编号"
          :rules="[{ required: true, message: '请输入检测报告编号' }]"
        />
        <van-field label="核酸检测报告" required>
          <template #input>
            <van-uploader
              :after-read="afterRead1"
              v-model="swCheckImg"
              max-count="1"
            />
          </template>
        </van-field>
      </van-dialog>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Tab,
  Tabs,
  PullRefresh,
  List,
  Popup,
  Picker,
  Button,
  Search,
  Uploader,
  Field,
} from "vant";
// import NavHeader from "@/components/NavHeader";
import {
  reportList,
  updateState,
  getAddress,
  uploadFile,
  coldThirdPartyupload,
} from "@/api/coldfood";
import { coldfoodEnume } from "@/utils/utils";

Vue.use(Tab)
  .use(Tabs)
  .use(Search)
  .use(PullRefresh)
  .use(List)
  .use(Popup)
  .use(Picker)
  .use(Button)
  .use(Uploader)
  .use(Field);

export default {
  components: {
    // NavHeader,
  },
  data() {
    return {
      title: "管理",
      type: null,
      userInfo: {},
      refreshing: false,
      loading: false,
      pageNum: 1,
      finished: false,
      list: [],
      showPicker: false,
      addressList: [],
      address: "",
      addressCode: "",
      show: false,
      show1: false,
      swDisinfectCompany: "",
      swCheckCompany: "",
      swCheckNo: "",
      sterilizePicture: [],
      swCheckImg: [],
      record: {},
    };
  },
  methods: {
    onRefresh() {
      this.init(1, "refresh");
    },
    onLoad() {
      this.init(this.pageNum, "loading");
    },
    init(pageNum, type) {
      let params = {
        appId: 1234,
        pageNum: type === "refresh" ? pageNum : parseInt(pageNum) + 1,
        pageSize: 20,
        state: this.type,
        addressCode: this.addressCode,
      };
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      reportList(params).then((res) => {
        this.$toast.clear();
        console.log(res);
        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;
        }
      });
    },
    // 通过消杀
    disinfect(item) {
      this.show = true;
      this.record = item;
    },
    cancel() {
      this.record = {};
      this.swDisinfectCompany = "";
      this.swCheckCompany = "";
      this.swCheckNo = "";
      this.swCheckImg = [];
      this.sterilizePicture = [];
      this.show = false;
      this.show1 = false;
    },
    putout1() {
      const { record, swCheckCompany, swCheckNo, swCheckImg } = this;
      coldThirdPartyupload({ file: swCheckImg[0].url }).then((res) => {
        if (this.swCheckCompany && this.swCheckNo && res) {
          let params = {
            appId: 1234,
            driverCode: record.driverCode,
            name: this.userInfo.realName,
            state: 7,
            // userId: this.userInfo.userId,
            swCheckCompany: swCheckCompany,
            swCheckNo: swCheckNo,
            swCheckImg: res,
            reason: "",
            addressCode: "",
          };
          updateState(params).then((res) => {
            console.log(res);
            this.cancel();
            this.onRefresh();
          });
        } else {
          this.$toast("请填写完整");
        }
      });
    },
    putout() {
      const { record, swDisinfectCompany, sterilizePicture } = this;
      coldThirdPartyupload({ file: sterilizePicture[0].url }).then((res) => {
        if (this.swDisinfectCompany && res) {
          let params = {
            appId: 1234,
            driverCode: record.driverCode,
            name: this.userInfo.realName,
            state: 5,
            // userId: this.userInfo.userId,
            swDisinfectCompany: swDisinfectCompany,
            sterilizePicture: res,
            reason: "",
            addressCode: "",
          };
          updateState(params).then((res) => {
            console.log(res);
            this.cancel();
            this.onRefresh();
          });
        } else {
          this.$toast("请填写完整");
        }
      });
    },
    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 = "上传失败";
        });
    },
    afterRead1(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 = "上传失败";
        });
    },
    // 通过核酸
    pass(item) {
      this.show1 = true;
      this.record = item;
    },
    // 不通过核酸
    deny(item) {
      this.$dialog
        .confirm({
          message:
            "确认不通过此批货物的核酸检测的核酸检测吗？此操作后需要货物灭活确认！",
        })
        .then(() => {
          let params = {
            appId: 1234,
            driverCode: item.driverCode,
            name: this.userInfo.realName,
            state: 8,
            userId: this.userInfo.userId,
            reason: "",
            addressCode: "",
          };
          updateState(params).then((res) => {
            console.log(res);
            this.onRefresh();
          });
        })
        .catch(() => {
          console.log("取消");
        });
    },
    // 灭活
    destroy(item) {
      this.$dialog
        .confirm({
          message: "确认灭活该货物吗？",
        })
        .then(() => {
          let params = {
            appId: 1234,
            driverCode: item.driverCode,
            name: this.userInfo.realName,
            state: 10,
            userId: this.userInfo.userId,
            reason: "",
            addressCode: "",
          };
          updateState(params).then((res) => {
            console.log(res);
            this.onRefresh();
          });
        })
        .catch(() => {
          console.log("取消");
        });
    },
    initAddressList() {
      getAddress({ appId: 1234 }).then((res) => {
        this.addressList = res.data;
      });
    },
    reset() {
      this.address = "";
      this.addressCode = "";
      this.onRefresh();
    },
    onConfirm(value, index) {
      this.address = value;
      this.addressCode = this.addressList[index].code;
      this.showPicker = false;
    },
    getStateName(state) {
      return coldfoodEnume(state);
    },
  },
  created() {
    this.type = parseInt(this.$route.query.type);
    if (this.type === 4) this.title = "消杀管理";
    else if (this.type === 5) this.title = "核酸检测管理";
    else if (this.type === 8) this.title = "灭活管理";
    window.document.title = this.title;
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    this.userInfo = JSON.parse(res);
    this.init(1, "refresh");
    this.initAddressList();
  },
};
</script>

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

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

      .button {
        width: 40%;
      }
    }
  }

  .main {
    margin-top: 20px;
    height: calc(100vh - 212px);
    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;
        }

        .right {
          margin-left: 20px;
        }
      }
    }
  }
}
</style>
