<template>
  <div class="sel-confirm-module">
    <!-- 列表 -->
    <time-axis>
      <!-- 完成 -->
      <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 v-if="orderData.hasDeliver == 1" class="axis-det btn-wrap">
              <button class="admin-button-com big blue confirm-btn" @click="sendSelfFn(1)">确认</button>
            </div>
            <div v-else class="axis-det" style="margin-bottom:16px;">
              <button
                class="admin-button-com big blue confirm-btn"
                @click="sendSelfFn(0)"
                style="margin:auto;"
              >自己送</button>
              <!-- <button class="admin-button-com big blue confirm-btn" @click="sendShipFn" style="margin:auto;">快递送</button> -->
            </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">制单</div>
            <div class="axis-det">
              <div class="app-color-0 app-bold">{{ orderComData[1].addTime | formatTime }}</div>
              <block v-if="!$util.isEmpty(orderComData[1].receive)">
                <card-name :info="orderComData[1].receive" />
                <div class="btn-wrap-com">
                  <!-- <button class="admin-button-com default" @click="mobilePrintFn">重打</button> -->
                  <!--<button class="admin-button-com default" @click="printerSetFn">打印机</button>-->
                </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">下单</div>
            <div class="axis-det">
              <div class="app-color-0 app-bold">{{ orderComData[1].addTime | formatTime }}</div>
            </div>
          </div>
        </template>
      </timeaxis-item>
    </time-axis>
    <!-- ship -->
    <modal-module
      :show="shipModal"
      :maskClosable="false"
      @cancel="modalCancel"
      @click="shipModalClick"
      title="请选择"
      padding="30rpx 30rpx"
    >
      <template v-slot:content>
        <div class="app-modal-input-wrap ship-modal">

          <div class="inp-list-line">
            <div class="line-label">配送方</div>
            <div class="line-input">
              <picker
                mode="selector"
                :range="deliveryList"
                @change="changeDeliveryFn"
                range-key="text"
                class="inp-select"
              >
                <div v-if="form.sendSide">{{ sendSideText }}</div>
                <div class="tui-placeholder" v-else>请选择</div>
              </picker>
            </div>
          </div>

          <div class="inp-list-line">
            <div class="line-label">送花时间</div>
            <div class="line-input">
              <picker
                mode="multiSelector"
                :range="timeList"
                :value="timeValue"
                @change="changeTimeFn"
                class="inp-select"
              >
                <div v-if="form.sendTime">{{ form.sendTime }}</div>
                <div class="tui-placeholder" v-else>请选择</div>
              </picker>
            </div>
          </div>

        </div>
      </template>
    </modal-module>
    <!-- 删除提示 -->
    <modal-module
      :show="selfShipModal"
      @cancel="modalCancel"
      @click="shipModalClick"
      :content="selfShipHint"
      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 { orderSend, printOrder } 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 {
      shipModal: false,
      form: {
        sendType: 0,
        sendTime: "",
        sendSide: 1
      },
      sendSideText: "达达配送",
      timeList: [
        [
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "20",
          "21",
          "22",
          "23",
          "24"
        ],
        ["00", "10", "20", "30", "40", "50"]
      ],
      timeValue: [0, 0],
      deliveryList: [
        {
          text: "达达配送",
          key: 1
        }
      ],
      // 自己送
      selfShipModal: false,
      selfShipHint: ""
    };
  },
  methods: {
    sendShipFn() {
      this.shipModal = true;
      this.sendSideText = "达达配送";
      this.form = {
        sendType: 3,
        sendTime: "",
        sendSide: 1
      };
    },
    sendSelfFn(num) {
      if (num == 0) {
        this.selfShipHint = "确认自己送？";
      } else {
        this.selfShipHint = "确认发货？";
      }
      this.selfShipModal = true;
      this.form = {
        sendType: 2,
        sendTime: "",
        sendSide: ""
      };
    },
    printOrderFn() {
      printOrder({
        id: this.orderData.id,
        option: 1
      }).then(res => {
        this.$emit("nextPageSuccess", {
          id: this.orderData.id,
          pageStatus: 7
        });
      });
    },
    switchChangeFn(e) {
      this.form.sendType = e.detail.value ? 1 : 0;
    },
    changeTimeFn(e) {
      let oneIndex = e.detail.value[0] || 0;
      let twoIndex = e.detail.value[1] || 0;
      this.form.sendTime =
        this.timeList[0][oneIndex] + ":" + this.timeList[1][twoIndex];
    },
    changeDeliveryFn(e) {
      this.form.sendSide = this.deliveryList[e.detail.value].key;
      this.sendSideText = this.deliveryList[e.detail.value].text;
    },
    shipModalClick(e) {
      if (e.index === 0) {
        this.modalCancel();
      } else {
        orderSend({
          id: this.query.id,
          option: 1,
          ...this.form
        }).then(res => {
          this.$emit("nextPageSuccess", {
            id: this.query.id,
            pageStatus: 3
          });
          this.modalCancel();
        });
      }
    },
    modalCancel() {
      this.shipModal = false;
      this.selfShipModal = false;
    },
    mobilePrintFn() {
      this.$msg("即将开通...");
    },
    printerSetFn() {
      this.$util.pageTo({
        url: "/admin/order/print"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// 完成
.axis-first {
  .axis-det {
    margin-top: 40px !important;
  }
  .confirm-btn {
    width: 40%;
  }
}
// 制单
.com-wrap {
  .axis-det {
    margin-top: 14px;
    & > div {
      margin-top: 20px;
      &:first-child {
        margin-top: 0;
      }
    }
  }
}
// modal
.ship-modal {
  .line-label {
    width: 140px;
  }
}
.btn-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
