<template>
  <div>
    <Row>
      <Tabs>
        <Tab-pane label="自己联系物流">
          <layout-filter ref="filter">
            <Row>
              <filter-item label="快递公司">
                <Select v-model.trim="orderInfo.expressId" clearable>
                  <Option v-for="option in logisticsList" :key="option.id" :value="option.id">
                    {{ option.companyName }}
                  </Option>
                </Select>
              </filter-item>
            </Row>
            <Row>
              <filter-item label="快递单号">
                <Input v-model.trim="orderInfo.expressNumber" />
              </filter-item>
            </Row>
            <filter-item>
              <Button
                type="success"
                :loading="showExpressLoading"
                :disabled="orderInfo.orderStatus >= 600 ? true : false"
                @click="confirmExpress"
              >
                确认快递单
              </Button>
              <Button
                type="primary"
                :loading="showDeliverLoading"
                :disabled="orderInfo.orderStatus >= 600 ? true : false"
                @click="confirmDeliver"
              >
                确认发货
              </Button>
              <Button type="default" @click="cancel">取消</Button>
            </filter-item>
          </layout-filter>
        </Tab-pane>
        <Tab-pane label="无需物流">
          <div>虚拟商品可直接确认发货</div>
          <Button
            type="primary"
            :loading="showNoExpressLoading"
            :disabled="orderInfo.orderStatus >= 600 ? true : false"
            @click="confirmDeliverNoExpress"
          >
            确认发货
          </Button>
        </Tab-pane>
        <Tab-pane label="自助打单发货" disabled></Tab-pane>
      </Tabs>
    </Row>
  </div>
</template>

<script>
import LogisticsService from 'services/logistics/logistics-service';
import OrderService from 'services/order/order-service';
import _ from 'lodash';
export default {
  props: ['current', 'orderCode', 'orderInfo'],
  data() {
    return {
      logisticsList: [],
      showExpressLoading: false,
      showDeliverLoading: false,
      showNoExpressLoading: false,
    };
  },
  created() {
    this.LogisticsService = new LogisticsService();
    this.OrderService = new OrderService();
    this.$emit('nextStep', 2);
    this.getLogisticsList();
  },

  methods: {
    //获取物流公司列表
    getLogisticsList() {
      this.LogisticsService.logisticsList().then(ret => {
        this.logisticsList = _.get(ret, 'data', []);
      });
    },
    //确认快递
    confirmExpress() {
      this.showExpressLoading = true;
      this.OrderService.confirmExpress({
        orderCode: +this.orderCode,
        expressId: +this.orderInfo.expressId,
        expressNumber: this.orderInfo.expressNumber,
      }).then(ret => {
        this.showExpressLoading = false;
        if (ret.code === 200) {
          this.$Message.info(ret.message);
          this.$router.go(0);
        } else {
          this.$Message.error(ret.message);
        }
      });
    },
    //确认发货
    confirmDeliver() {
      this.showDeliverLoading = true;
      this.LogisticsService.proxyOutStorage({
        orderCode: +this.orderCode,
        expressId: +this.orderInfo.expressId,
        expressNumber: this.orderInfo.expressNumber,
      }).then(ret => {
        if (ret.code === 200) {
          this.$Message.info(ret.message);
          this.$router.go(0);
        } else {
          this.$Message.error(ret.message);
        }
      });
    },
    //确认发货无需物流
    confirmDeliverNoExpress() {
      this.LogisticsService.proxyOutStorage({}).then(ret => {
        if (ret.code === 200) {
          this.$Message.info(ret.message);
        } else {
          this.$Message.error(ret.message);
        }
      });
    },
    //取消操作
    cancel() {
      this.$router.push({
        name: 'order.detail',
        params: {},
        query: {
          orderCode: this.orderCode,
        },
      });
    },
  },
};
</script>