<template>
  <div style="width: 410px; height: 608px; padding: 15px 19px">
    <div class="col-12 text-center font-20 font-bold theme-color">
      快递详情
    </div>
    <div style="border-top: 1px solid #000; margin: 15px 0"></div>
    <div class="col-12 row items-center justify-between" style="height: 34px">
      <div class="col-3" style="color: #333639">快递单号</div>
      <div class="col-9 row justify-between items-center">
        <div class="col-8" v-if="state.pageType === 'edit'">
          <n-input
            v-model:value="state.trackingNo"
            placeholder="请输入快递单号"
          />
        </div>
        <div v-else class="col-8">
          {{ state.trackingNo }}
        </div>
        <n-button
          v-if="state.pageType === 'edit'"
          text
          :loading="state.btnLoading"
          @click="handleConfirm"
          ><text class="font-bold theme-color" 
            >确认</text
          ></n-button
        >
        <n-button v-else text :loading="state.btnLoading" @click="handleEdit"
          ><text class="font-bold theme-color" style=" font-size: 16px"
            >修改</text
          ></n-button
        >
      </div>
    </div>
    <div class="col-12 row fl-mt-md">
      <div class="col-3" style="color: #333639">承寄方</div>
      <div class="col-6">{{ state.company || "自动识别" }}</div>
    </div>
    <div
      class="col-12 row overflow-auto"
      style="
        height: 420px;
        margin-top: 17px;
        border-radius: 8px;
        border: solid 1px rgba(112, 112, 112, 0.24);
        padding: 19px 29px;
      "
    >
      <n-timeline size="large">
        <n-timeline-item
          v-for="(item, idx) in state.statuslist"
          :key="idx"
          type="success"
          :content="calcContent(item)"
          :time="item.subTitle"
        />
      </n-timeline>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";
import { processError, processSuccess } from "@/utils/helper/message";
const currentInstance = getCurrentInstance();
const { $request, $hadRule } =
  currentInstance.appContext.config.globalProperties;
const emit = defineEmits(["triggerExpressInfoClick"]);
import { deepCopy, getLabelByOptions } from "@/utils/helper/form";
let props = defineProps({
  fatherData: Object,
});

onBeforeMount(() => {
  state.trackingNo = props.fatherData.trackingNo;
  if (state.trackingNo) {
    state.pageType = "view";
  } else {
    state.pageType = "edit";
  }
  getPageData();
});

let state = reactive({
  btnLoading: false,
  pageType: "view",
  trackingNo: "",
  company: "",
  statuslist: [],
  logisticsStatusOptions: [
    {
      label: "待揽收",
      value: "WAIT_ACCEPT",
    },
    {
      label: "已揽收",
      value: "ACCEPT",
    },
    {
      label: "运输中",
      value: "TRANSPORT",
    },
    {
      label: "派送中",
      value: "DELIVERING",
    },
    {
      label: "已签收",
      value: "AGENT_SIGN",
    },
    {
      label: "已代签收",
      value: "SIGN",
    },
    {
      label: "包裹异常",
      value: "FAILED",
    },
  ],
});
const getPageData = () => {
  if (props.fatherData.courierId === 0) {
    return;
  }
  let url = "api/mailArtwork/courierDetail";
  let params = {
    id: props.fatherData.courierId,
  };
  state.btnLoading = true;
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      state.btnLoading = false;
      if (res.status === 0) {
        state.company = res.data.company;
        let arr = [];
        res.data.history.forEach((item) => {
          arr.push({
            title: getLabelByOptions(
              item.logisticsStatus,
              state.logisticsStatusOptions
            ),
            time: item.courierTimeDesc,
            subTitle: item.desc,
          });
        });
        state.statuslist = arr;
      } else {
        processError(res.msg || "获取失败！");
      }
    },
    () => {
      state.btnLoading = false;
      processError("获取失败！");
    },
    () => {
      processError("获取失败！");
    }
  );
};
const handleConfirm = () => {
  let url = "api/mailArtwork/courierEdit";
  let params = {
    artworkUid: [props.fatherData.artworkUid],
    trackingNo: state.trackingNo,
    courierType: 2,
  };
  state.btnLoading = true;
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      state.btnLoading = false;
      if (res.status === 0) {
        state.company = res.data.company;
        let arr = [];
        res.data.history.forEach((item) => {
          arr.push({
            title: getLabelByOptions(
              item.logisticsStatus,
              state.logisticsStatusOptions
            ),
            time: item.courierTimeDesc,
            subTitle: item.desc,
          });
        });
        state.statuslist = arr;
        state.pageType = "view";
        emit("triggerExpressInfoClick", state.pageType);
      } else {
        processError(res.msg || "操作失败！");
      }
    },
    () => {
      state.btnLoading = false;
      processError("操作失败！");
    }
  );
};
const handleEdit = () => {
  state.pageType = "edit";
  emit("triggerExpressInfoClick", state.pageType);
};
const calcContent = (item) => {
  return item.title + " " + item.time;
};
</script>

<style lang="scss" scoped></style>
