<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="选择快递"
          @change="changeLogistics">
          <el-option 
            v-for="v in logisticsOptions" 
            :key="v.logisticsCompanyCode" 
            :label="v.logisticsCompanyName" 
            :value="v.logisticsCompanyId">
          </el-option>
        </el-select>
        <div style="margin:0 0 10px 75px" v-show="otherLogistics">
          <el-input class="vertical-middle w300" v-model="params.otherLogisticsCompanyName"  placeholder="请输入快递公司" @input="(value)=>logisticsNameLimit(value)"></el-input>
        </div>
       </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:'',
          otherLogisticsCompanyName:'',
        },
        otherLogistics:false
      }
    },
    created() {
      this.getLogisticsList();
    },
    methods: {
      close() {
        this.$emit('update:show',false);
        this.otherLogistics=false
        this.params.otherLogisticsCompanyName=''//快递公司
        this.params.logisticsCompanyId=''//运单id
        this.params.courierNumber=''//运单bain好
      },
       //限制物流公司的名称
      logisticsNameLimit(value){
        this.$nextTick(() => {
          this.params.otherLogisticsCompanyName = this.getInputVal2(value,8)
        })
      },
      //快递公司下拉
      changeLogistics(value){
        console.log('物流id',value)
        if ( value ) {
          let code = this.logisticsOptions.find( item => {
            return item.logisticsCompanyId ===value
          } ).logisticsCompanyCode
          if(code==='QITA'){
            this.otherLogistics=true
          }else{
            this.otherLogistics=false
            this.params.otherLogisticsCompanyName=''
          }
        } else {
          this.otherLogistics=false
          this.params.otherLogisticsCompanyName=''
        }
      },
      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;
          }
        })
        if ( this.params.logisticsCompanyCode ==='QITA' ) {
          if ( this.params.otherLogisticsCompanyName==='' ) {
            this.$tips({type:'warning',message:'请填写快递公司'});
            return;
          }
        }
        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;
      },
      //输入框的输入限制
      getInputVal2: function(val, max) {
        var returnValue = '';
        var byteValLen = 0;
        for (var i = 0; i < val.length; i++) {
            if (val[i].match(/[^\x00-\xff]/ig) != null)
            byteValLen += 1;
            else
            byteValLen += 0.5;
            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>
