<template>
  <el-dialog class="express dialog__body__nopadding" title="查看物流信息" :visible.sync="show" width="40%" :before-close="close">
    <div class="express--info">
      <p>收件人：<span style="color:#606266">{{info.consignee || '--'}}</span></p>
      <p>联系方式：<span style="color:#606266">{{info.consigneePhone || '--'}}</span></p>
      <p>收货地址：<span style="color:#606266">{{info.receivingAddress || '--'}}</span></p>
      <p class="pb10">快递公司：<el-select class="vertical-middle w300" v-model="params.logisticsCompanyId" placeholder="选择快递">
            <el-option v-for="v in logisticsOptions" :key="v.logisticsCompanyCode" :label="v.logisticsCompanyName" :value="v.logisticsCompanyId"></el-option>
          </el-select>
       </p>
      <p>运单号码：<el-input class="vertical-middle w300" v-model="params.courierNumber" placeholder="请输入快递单号"  @input="(value)=>courierNumberLimit(value)"></el-input></p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">关 闭</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>

import {getLogisticsInfo,getLogisticsList,orderOptService} from '@/service/api/mallApi.js';
  export default {
    props:{
      show:{
        type:Boolean,
        default:false
      },
      id:{
        type:String,
        default:''
      }
    },
    watch:{
      show(val) {
        if (val) {
          this.getLogisticsInfo();
        }
      }
    },
    data() {
      return {
        loading:false,
        info:{},
        logisticsOptions:[],
        params:{
          logisticsCompanyId:'',
          logisticsCompanyCode:'',
          courierNumber:'',
        },
      }
    },
    created() {
      this.getLogisticsList();
    },
    methods: {
      close() {
        this.$emit('update:show',false);
      },
      submit() {
        if (!this.params.logisticsCompanyId) {
          this.$tips({type:'warning',message:'请选择快递'});
          return;
        }
        if (!this.params.courierNumber) {
          this.$tips({type:'warning',message:'请填写快递单号'});
          return;
        }
        this.logisticsOptions.map(v => {
          if (v.logisticsCompanyId === this.params.logisticsCompanyId) {
            this.params.logisticsCompanyCode = v.logisticsCompanyCode;
          }
        })
        let params = {
          optType:1,
          integralMallProExchangeId:this.id,
          logisticsCompanyId:this.params.logisticsCompanyId,
          logisticsCompanyCode:this.params.logisticsCompanyCode,
          courierNumber:this.params.courierNumber
        };
        orderOptService(params).then(res => {
          if (res.errorCode === 0) {
            this.$tips({type:'success',message:'发货成功'});
            this.close();
            this.$emit('refresh');
          } else {
            this.$tips({type:'error',message:'发货失败'});
          }
        });
      },
      // 限制运单编号(不管中英文都是32位)
      courierNumberLimit(value){
        this.$nextTick(() => {
          this.params.courierNumber = this.getInputVal(value,32)
        })
      },
      //限制字数
      getInputVal(val, max) {
        var returnValue = '';
        var byteValLen = 0;
        for (var i = 0; i < val.length; i++) {
            byteValLen += 1;
            if (byteValLen > max)
            break;
            returnValue += val[i];
        }
        return returnValue;
      },
      async getLogisticsList() {
        let res = await getLogisticsList();
        if (res.errorCode === 0) {
          this.logisticsOptions = res.result || [];
        }
      },
      async getLogisticsInfo() {
        this.loading = true;
        let res = await getLogisticsInfo({integralMallProExchangeId:this.id});
        if (res.errorCode === 0) {
          this.info = res.result.changeLog || {};
        }
        this.loading = false;
      }
    }
};
</script>

<style lang="scss" scoped>
.express{
  &--info {
    padding-bottom:10px;
    p {
      line-height: 30px;
      word-break: break-all;
    }
  }
}
</style>
