<template>
  <el-dialog :visible.sync="visible" title="物流发货" width="780px" @closed="$emit('close')">
    <div v-loading="loading">
      <div>收货信息：{{data.consignee}} {{data.consigneePhone}} {{data.consigneeAddress}}</div>
      <div class="mt20">
        <span>
          物流公司:
          <span v-if="!isEditing">{{data.logisticsCompanyName}}</span>
          <el-select class="w160" v-else placeholder="请选择" v-model="logisticsCompanyCode">
            <el-option label="顺丰速递" value="SF"></el-option>
            <el-option label="中通快递" value="STO"></el-option>
          </el-select>
        </span>
        <span class="ml120">
          物流单号：
          <span v-if="!isEditing">{{data.logisticsNo}}</span>
          <dm-input-phone class="w160" v-else v-model="logisticsNo" placeholder="请输入" clearable></dm-input-phone>
        </span>
        <template v-if="logisticsList.length == 0">
          <div v-if="!isEditing" class="fr">
            <el-button type="text" @click="handleEdit">编辑</el-button>
          </div>
          <div v-else class="fr pt10">
            <el-button type="text" @click="handleSave">保存</el-button>
            <el-button type="text" @click="isEditing = false">取消</el-button>
          </div>
        </template>
      </div>
      <div v-if="logisticsList.length>0" class="logistics-step">
        <h3>派送中</h3>
        <el-timeline class="hollow logistics-list">
          <el-timeline-item
            v-for="(activity, index) in logisticsList"
            :key="index"
            :color="index===0?'':'#c0c4cc'">
            <div class="logistics-line-step">
              <span class="time">{{ activity.acceptTime || '--' }}</span>
              <p class="content">{{ activity.acceptStation }}</p>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div v-else>
        <el-divider></el-divider>
        <div class="empty_block"></div>
      </div>
    </div>
    <div slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import fetch from '@/api/performance.js';
const { delivering, getLogisticsInfo } = fetch;

export default {
  props: {
    data: Object,
  },
  data() {
    return {
      visible: false,
      logisticsList: [],
      logisticsCompanyCode: '',
      logisticsNo: '',
      isEditing: false,
      loading: false,
    };
  },
  mounted() {
    this.visible = true;
    this.getLogisticsInfo();
  },
  methods: {
    async handleConfirm() {
      let logisticsCompany = {
        'SF': '顺丰速递',
        'STO': '中通快递'
      };
      this.loading = true;
      await delivering({
        companyName: logisticsCompany[this.logisticsCompanyCode],
        companyCode: this.logisticsCompanyCode,
        logisticsNo: this.logisticsNo,
        deliveryId: this.data.deliveryId,
      }).finally(() => this.loading = false);
      this.visible = false;
      this.$emit('refresh');
    },
    handleEdit() {
      this.isEditing = true;
      this.logisticsCompanyCode = this.data.logisticsCompanyCode;
      this.logisticsNo = this.data.logisticsNo;
    },
    async getLogisticsInfo() {
      this.loading = true;
      let { result } = await getLogisticsInfo({
        companyCode: this.data.logisticsCompanyCode/* 'YD' */,
        logisticsNo: this.data.logisticsNo/* '4312317986451' */,
      }).finally(() => this.loading = false);
      this.logisticsList = result.traces || [];
      this.logisticsList.reverse();
    }
  }
};
</script>

<style lang="scss" scoped>
.logistics-info {
  display: flex;
  &>div {
    flex: 1;
  }
  span {
    display: inline-block;
  }
  span + span {
    margin-left: 10px;
  }
}
.logistics-step {
  margin-top: 24px;
  background: #fafafa;
  padding: 15px 0px;
  h3 {
    color: #303133;
    font-size: 16px;
    border-bottom: 1px solid #dcdfe6;
    padding: 0 20px 15px 20px;
  };
  .logistics-list {
    height: 328px;
    overflow-y: auto;
    padding: 20px
  };
  .logistics-item {
    position: relative;
    padding-bottom: 10px;
  }
  .logistics-line-step {
    display: flex;
    font-size: 12px;
  }
  .logistics-line-step .time {
    margin-right: 20px;
    width: 160px;
    line-height: 22px;
    font-weight: 500;
    color: #303133;
  }
  .logistics-line-step .content {
    color: #303133;
    flex: 1;
    line-height: 22px;
  }
}
</style>
