<template>
  <div class="logisticsNum">
    <goodsRefund :list="goodsInfo" />
    <div class="logisticsNum_select">
      <cr-field v-model="expressDeliveryNo" label="物流单号" placeholder="请输入物流单号" />
      <cr-cell
        v-if="isLogistics"
        title="物流公司"
        is-link
        to="/logisticsSelect"
        class="logisticsNum_select_cell"
      >
        <template slot="default">
          <span class="logisticsNum_select_name">
            {{ expressData.companyName }}
          </span>
        </template>
      </cr-cell>
    </div>
    <div class="logisticsNum_bottom">
      <button @click="addDeliveryNo">提交</button>
    </div>
  </div>
</template>
<script>
import goodsRefund from '../refund/components/goodsRefund';
import { EventBus } from '@/service/utils.service';
import orderApi from '@/api/order.api';
import historyRecordMixins from '@/mixins/historyRecord.mixins';
const EVENT_EXPRESS_COMPANY = 'get_company';
export default {
  // eslint-disable-next-line vue/name-property-casing
  name: 'logisticsNum',
  components: {
    goodsRefund
  },
  mixins: [historyRecordMixins],
  data() {
    return {
      expressDeliveryNo: '',
      expressData: {},
      orderInfo: {},
      goodsInfo: {},
      isLogistics: false
    };
  },
  created() {
    EventBus.$on(EVENT_EXPRESS_COMPANY, res => {
      this.expressData = res;
    });
  },
  mounted() {
    this.serviceNo = this.$route.query.serviceNo || '';
    this.detailInfo();
  },

  beforeDestroy() {
    EventBus.$off(EVENT_EXPRESS_COMPANY);
  },
  methods: {
    async detailInfo() {
      const orderSkuId = this.$route.query.orderSkuId;
      const [res] = await orderApi.getOrderSkuDetail({
        orderSkuId,
        skuNo: '',
        receiverId: '',
        count: 1
      });
      if (res) {
        this.goodsInfo = res;
      }
    },
    async addNo() {
      const [res] = await orderApi.addDeliveryNo({
        serviceNo: this.serviceNo,
        expressCompanyNo: this.expressData.companyId,
        expressCompanyName: this.expressData.companyName,
        expressDeliveryNo: this.expressDeliveryNo
      });
      if (res.status == 0) {
        setTimeout(() => {
          this.$router.go(-1);
        }, 500);
        this.$toast.success('提交成功');
      } else if (res.status == 1) {
        this.$toast('未查询到物流公司，请选择物流公司！');
        this.isLogistics = true; //选择物流公司
      }
    },
    async addDeliveryNo() {
      if (this.expressDeliveryNo == '') {
        this.$toast('请填写物流单号');
        return;
      }
      if (!this.expressData.companyName && this.isLogistics) {
        this.$toast('请选择物流公司');
        return;
      }
      this.addNo();
    }
  }
};
</script>
<style lang="less" scoped>
.logisticsNum {
  &_select {
    margin-top: @padding-sm+1;
    &_name {
      color: #000;
    }
  }
  @{deep} .cr-cell {
    .text-size(13);
    padding: @padding-md+1 @padding-lg;
  }
  &_bottom {
    margin-top: @padding-x*10;
    text-align: center;
    position: absolute;
    margin: 0 auto;
    bottom: 100px;
    width: 100%;
    button {
      width: 335px;
      height: 40px;
      border-radius: 20px;
      .text-size(14);
      background: @gradient-red;
      color: @white;
    }
  }
}
</style>
