<template>
  <el-dialog class="express dialog__body__nopadding" title="查看物流信息" :visible.sync="show" width="60%" :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>
    <div class="express--order">
      <div class="clearfix express--order__info" v-if="!editShow">
        <div class="fl pr20"><span style="color:#303133">快递公司</span>：{{info.logisticsCompanyName || '--'}}</div>
        <div class="fl"><span style="color:#303133">运单号码</span>：{{info.courierNumber || '--'}}</div>
        <el-button class="fr express--order__info--btn" type="text" v-if="!isInfo" @click="editExpress">修改运单信息</el-button>
      </div>
      <div class="express--order__info" v-else>
        <span class="pr10">快递公司：
          <el-select class="vertical-middle w100" 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>
        </span>
        <span>运单号码：
          <el-input class="vertical-middle w150" v-model="params.courierNumber" placeholder="请输入快递单号"></el-input>
        </span>
        <el-button class="vertical-middle" type="primary" size="small" @click="submitExpress">确 认</el-button>
        <el-button class="vertical-middle" size="small" @click="editShow = false">取 消</el-button>
      </div>

    </div>
    <div class="express--list">
      <div v-for="(v,i) in list" :key="i" class="express--list--item">
        <span class="express--list--item__dot"></span>
        <p class="express--list--item__date">{{v.date}}</p>
        <p class="express--list--item__day">{{v.day}}</p>
        <p class="express--list--item__time">{{v.time}}</p>
        <p class="express--list--item__info">{{v.acceptStation}}</p>
      </div>
      <div class="no-data" v-if="list.length === 0">暂无快递数据</div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">关 闭</el-button>
    </span>
  </el-dialog>
</template>
<script>

import {getLogisticsInfo,getLogisticsList,orderOptService} from '@/service/api/mallApi.js';
import {formateDateTimeByType,numberToWeekChinese} from '@/utils/index.js';
  export default {
    props:{
      show:{
        type:Boolean,
        default:false
      },
      id:{
        type:String,
        default:''
      },
      isInfo:{
        type:Boolean,
        default:false
      }
    },
    watch:{
      show(val) {
        if (val) {
          this.getLogisticsInfo();
        }
      }
    },
    data() {
      return {
        loading:false,
        info:{},
        list:[],
        logisticsOptions:[],
        params:{
          logisticsCompanyId:'',
          logisticsCompanyCode:'',
          courierNumber:'',
        },
        editShow:false
      }
    },
    created() {
      this.getLogisticsList();
    },
    methods: {
      close() {
        this.editShow = false;
        this.$emit('update:show',false);
      },
      // 编辑快递
      editExpress() {
        this.editShow = true;
        this.params = {
          logisticsCompanyId:this.info.logisticsCompanyId,
          logisticsCompanyCode:this.info.logisticsCompanyCode,
          courierNumber:this.info.courierNumber
        };
      },
      // 提交按钮
      submitExpress() {
        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:3,
          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.editShow = false;
            this.getLogisticsInfo();
          }
        });
      },
      // 获取快递列表
      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.list = res.result.traces || [];
          this.list.map(v => {
            const dateTime = new Date(v.acceptTime);
            v.date = formateDateTimeByType(dateTime,'yyyy-MM-dd');
            v.time = formateDateTimeByType(dateTime,'HH-mm-ss');
            v.day = '周'+numberToWeekChinese(dateTime.getDay());
          })
        }
        this.loading = false;
      },
    }
};
</script>

<style lang="scss" scoped>
.express{
  &--info {
    padding-bottom:10px;
    border-bottom:1px solid #DCDFE6;
    // border-top:1px solid #DCDFE6;
    p {
      line-height: 30px;
      word-break: break-all;
    }
  }
  &--order {
    padding:15px 0;
    border-bottom:1px solid #DCDFE6;
    &__info {
      &--btn {
        padding:0;
      }
    }
  }
  &--list {
    background:#f0f2f5;
    max-height: 250px;
    overflow-y: auto;
    padding:10px 0;
    font-size: 13px;
    &--item {
      position: relative;
      &::before {
        content: ' ';
        position: absolute;
        left: 18px;
        top: 0px;
        height: 100%;
        width: 1px;
        background: #bfbfbf;
      }
      padding-left:15px;
      display: table;
      line-height: 25px;
      p {
        display: table-cell;
      }
      &__dot {
        display:inline-block;
        width: 7px;
        height: 7px;
        background: #bfbfbf;
        border-radius: 50%;
        margin-right: 10px;
      }
      &__date {
        width: 80px;
      }
      &__day {
        width: 40px;

      }
      &__time {
        width: 80px;
      }
      &__info {
        min-width: 100px;
      }
    }
  }
}
</style>
