<template>
  <div class="sel-ship-confirm-module">
    <!-- 列表 -->
    <time-axis v-if="!$util.isEmpty(orderComData)">
      <!-- 完成 -->
      <timeaxis-item class="axis-list axis-first confirm-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">{{ orderComData[0].actionName }}</div>
            <div class="axis-det">
              <div class="app-color-0 app-bold">{{ orderComData[0].finishTime | formatTime }}</div>
              <template v-if="$util.isEmpty(orderComData[0].classify)">
              <button class="admin-button-com small blue confirm-btn" @click="confirmFn">分类</button>
              </template>
              <template v-else>
              <div>{{ orderComData[0].classify.usage }}  {{ orderComData[0].classify.category }}</div>
              </template>
            </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>状态：{{ orderComData[1].sendInfo.status | constantfilter('SEND_STATUS') }}</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].addTime | formatTime }}</div>
              <card-name
                v-if="!$util.isEmpty(orderComData[2].receive)"
                :info="orderComData[2].receive"
              />
              <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-bold">{{ orderComData[3].addTime | formatTime }}</div>
            </div>
          </div>
        </template>
      </timeaxis-item>
    </time-axis>

		<!-- 选取分类 -->
		<modal-module :show="selModal" :maskClosable="false" @cancel="modalCancel" @click="selModalClick" title="订单归类" padding="30rpx 30rpx">
			<template v-slot:content>
				<div class="upload-confirm-wrap">
					<!-- 选择分类 -->
					<div class="sel-wrap">
						<div class="sel-tit">类型</div>
						<div class="sel-btn">
							<block v-for="(item, index) in categoryData" :key="index">
								<button class="admin-button-com" :class="[form.categoryId == item.id ? '' : 'default']" @click="selCategoryFn(item)">{{ item.categoryName || '暂无' }}</button>
							</block>
						</div>
					</div>
					<!-- 选择用途 -->
					<div class="sel-wrap">
						<div class="sel-tit">用途</div>
						<div class="sel-btn">
							<block v-for="(item, index) in usageData" :key="index">
								<button class="admin-button-com" :class="[form.usageId == item.id ? '' : 'default']" @click="selUsageFn(item)">{{ item.usageName || '暂无' }}</button>
							</block>
						</div>
					</div>
				</div>
			</template>
		</modal-module>

  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import TimeAxis from "@/admin/home/components/plugin/time-axis";
import TimeaxisItem from "@/admin/home/components/plugin/timeaxis-item";
import { getCategory, getUsage } from '@/utils/config'
import { orderClass } from '@/api/order'
import ModalModule from '@/components/plugin/modal'
import CardName from "./card-name";
export default {
  name: "sel-ship-confirm-module",
  components: {
    TimeAxis,
    TimeaxisItem,
    CardName,
    ModalModule
  },
  props: {
    query: {
      type: Object,
      default: () => {}
    },
    orderData: {
      type: Object,
      default: () => {}
    },
    orderComData: {
      type: Array,
      default: () => []
    }
  },
	data() {
		return {
			selModal: false,
			form: {
				categoryId: '',
				usageId: ''
			}
		}
	},
	computed: {
		...mapGetters({ categoryData: 'getCategory' }),
		...mapGetters({ usageData: 'getUsage' })
  },
	mounted() {
		getCategory()
		getUsage()
	},
  methods: {
    printerSetFn() {
      this.$util.pageTo({
        url: "/admin/order/print"
      });
    },
		confirmFn() {
			this.selModal = true
		},
		// modal
		// 操作
		selCategoryFn(item) {
			this.form.categoryId = item.id
		},
		selUsageFn(item) {
			this.form.usageId = item.id
		},
		selModalClick(e) {
			if (e.index === 0) {
				this.modalCancel()
			} else {
				orderClass({
					id: this.orderData.id,
					...this.form
				}).then(res => {
          this.selModal = false;
					this.$msg('订单归类成功！')
					setTimeout(() => {
						this.$emit('nextPageSuccess', {
						id: this.query.id,
						pageStatus: 6
					})
						// this.$util.pageTo({
						// 	url: '/admin/order/ship',
						// 	query: {
						// 		id: this.query.id,
						// 		pageStatus: 6
						// 	}
						// })
					}, 1000)
				})
			}
    },
    modalCancel() {
			this.selModal = false
		},
  }
};
</script>

<style lang="scss" scoped>
// 发货
.confirm-wrap {
  .axis-det {
    margin-top: 20px;
    margin-bottom: 10px;
    color: $fontColor2;
    & > div {
      margin-top: 10px;
      &: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;
      }
    }
  }
}
	// 弹窗
	.upload-confirm-wrap {
		max-height: 600px;
		overflow-y: auto;
		.modal-tit {
			@include disFlex(center, center);
			font-size: 40px;
			margin-top: 30px;
			margin-bottom: 50px;
			.iconfont {
				color: #09bb07;
				margin-right: 20px;
				font-size: 50px;
			}
		}
		//  分类
		.sel-wrap {
			color: $fontColor2;
			font-size: 32px;
			.sel-tit {
				text-align: left;
			}
			.sel-btn {
				@include disFlex(center, flex-start);
				flex-wrap: wrap;
				padding: 10px 0 40px;
				.admin-button-com {
					// width: 170px;
					margin-right: 20px;
					margin-top: 20px;
					padding-top: 16px;
					padding-bottom: 16px;
					border-radius: 4px;
					// &:nth-child(3n + 1) {
					// 	margin-left: 0;
					// }
				}
			}
		}
	}
</style>

