<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>
      <div class="pb10">
        快递公司：
        <el-select class="vertical-middle w300" v-model="params.logisticsCompanyId" placeholder="选择快递" @change="changeLogistics">
          <el-option v-for="v in logisticsOptions" :key="v.logisticsCompanyId" :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>
          <span style="font-size:12px;color:rgb(144, 147, 153);display:block;margin-top:5px">若设置为其他快递公司，则系统不提供物流信息的查询</span>
        </div>
      </div>
      <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) {
      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 logisticsCompanyName;
      if (this.params.logisticsCompanyCode === 'QITA') {
        logisticsCompanyName = this.params.otherLogisticsCompanyName;
      } else {
        logisticsCompanyName = this.logisticsOptions.find(item => {
          return item.logisticsCompanyId === this.params.logisticsCompanyId;
        }).logisticsCompanyName;
      }

      let params = {
        optType: 1,
        integralMallProExchangeId: this.id,
        logisticsCompanyId: this.params.logisticsCompanyId,
        logisticsCompanyCode: this.params.logisticsCompanyCode,
        courierNumber: this.params.courierNumber,
        logisticsCompanyName: logisticsCompanyName
      };
      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 (let 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 (let i = 0; i < val.length; i++) {
        if (val[i].match(/[^\x00-\xff]/gi) != 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>
