<template>
  <div class="sel-confirm-module">
    <!-- 列表 -->
    <time-axis v-if="!$util.isEmpty(orderComData)">
      <!-- 送达 -->
      <timeaxis-item class="axis-list axis-first com-wrap" bgcolor="none">
        <template v-slot:node>
          <div class="tui-node node-big">
            <div class="node-small"></div>
          </div>
        </template>
        <template v-slot:content>
          <div class="axis-slot-wrap">
            <div class="axis-title">送达</div>
            <div class="axis-det express-wrap">
              <button class="admin-button-com big blue" @click="askConfirmReachFn">确认</button>
            </div>
          </div>
        </template>
      </timeaxis-item>
      <!-- 发货 -->
      <timeaxis-item class="axis-list confirm-wrap" bgcolor="none">
        <template v-slot:content>
          <div class="axis-slot-wrap">
            <div class="axis-title">{{ orderComData[1].actionName }}</div>
            <div class="axis-det">
              <div class="app-color-0 app-bold">{{ orderComData[1].addTime | formatTime }}</div>
              <block v-if="!$util.isEmpty(orderComData[1].sendInfo)">
                <div>配送方：{{ orderComData[1].sendInfo.sideName }}</div>
                <div>距离：{{ orderComData[1].sendInfo.distance }}km</div>
                <div>运费：¥{{ orderComData[1].sendInfo.cost }}</div>
                <div>小费：¥{{ orderComData[1].sendInfo.tip }}</div>
                <div>
                  <span>状态：</span>
                  <span
                    class="app-color-4"
                  >{{ orderComData[1].sendInfo.status | constantfilter('SEND_STATUS') }}</span>
                </div>
              </block>
              <block v-else>
                <div>配送：门店</div>
              </block>
            </div>
          </div>
        </template>
      </timeaxis-item>
      <!-- 制单 -->
      <timeaxis-item class="axis-list com-wrap" bgcolor="none">
        <template v-slot:content>
          <div class="axis-slot-wrap">
            <div class="axis-title">{{ orderComData[2].actionName }}</div>
            <div class="axis-det">
              <div class="app-bold">{{ orderComData[2].finishTime | formatTime }}</div>
              <block v-if="!$util.isEmpty(orderComData[2].receive)">
                <card-name :info="orderComData[2].receive" />
              </block>
              <block v-else>
                <div>无配送信息</div>
              </block>
            </div>
          </div>
        </template>
      </timeaxis-item>
      <!-- 下单 -->
      <timeaxis-item class="axis-list com-wrap" bgcolor="none">
        <template v-slot:content>
          <div class="axis-slot-wrap">
            <div class="axis-title">{{ orderComData[3].actionName }}</div>
            <div class="axis-det">
              <div class="app-color-0 app-bold">{{ orderComData[3].finishTime | formatTime }}</div>
            </div>
          </div>
        </template>
      </timeaxis-item>
    </time-axis>
    <modal-module
      :show="showManualConfirmModal"
      @cancel="cancelConfirmReachFn"
      @click="manualConfirmReachFn"
      content="此订单由快递配送，送到会自动确认，确定要手动确认？"
      color="#333"
      :size="32"
      padding="30rpx 30rpx"
    ></modal-module>
  </div>
</template>

<script>
import TimeAxis from "@/admin/home/components/plugin/time-axis";
import TimeaxisItem from "@/admin/home/components/plugin/timeaxis-item";
import CardName from "./card-name";
import ModalModule from "@/components/plugin/modal";
// api
import { orderReach } from "@/api/order";
export default {
  name: "sel-confirm-module",
  components: {
    TimeAxis,
    TimeaxisItem,
    CardName,
    ModalModule
  },
  props: {
    query: {
      type: Object,
      default: () => {}
    },
    orderData: {
      type: Object,
      default: () => {}
    },
    orderComData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showManualConfirmModal: false
    };
  },
  methods: {
    confirmReachFn() {
      orderReach({
        id: this.orderData.id,
        option: 1
      }).then(res => {
        this.$msg("已确认");
        this.$emit("nextPageSuccess", {
          id: this.query.id,
          pageStatus: 5
        });
        // setTimeout(() => {
        // 	this.$util.pageTo({
        // 		url: '/admin/order/ship',
        // 		query: {
        // 			id: this.query.id,
        // 			pageStatus: 5
        // 		}
        // 	})
        // }, 1000)
      });
    },
    askConfirmReachFn() {
      if (this.orderData.sendType == 3) {
        this.showManualConfirmModal = true;
      } else {
        this.confirmReachFn();
      }
    },
    manualConfirmReachFn(e) {
      if (e.index === 0) {
        this.cancelConfirmReachFn();
      } else {
        this.confirmReachFn();
      }
    },
    cancelConfirmReachFn() {
      this.showManualConfirmModal = false;
    },
    mobilePrintFn() {
      this.$msg("此功能即将开通");
    },
    printerSetFn() {
      this.$util.pageTo({
        url: "/admin/order/print"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// 发货
.confirm-wrap {
  .axis-det {
    margin-top: 20px;
    margin-bottom: 10px;
    color: $fontColor2;
    & > div {
      margin-top: 14px;
      &:first-child {
        margin-top: 0;
      }
    }
    .admin-button-com {
      width: 120px;
      margin-top: 20px;
    }
    .modify-btn {
      color: $mainColor;
      font-size: 24px;
      margin-left: 30px;
    }
  }
}
// 制单
.com-wrap {
  .axis-det {
    margin-top: 14px;
    & > div {
      margin-top: 20px;
      &:first-child {
        margin-top: 0;
      }
    }
  }
  .express-wrap {
    .admin-button-com {
      width: 100%;
    }
    .button-prompt {
      text-align: center;
      color: $fontColor2;
    }
  }
}
</style>
