<template>
  <div class="p20" v-loading="loading">
    <div class="delivery-todo" v-if="deliveryInfo.deliveryType === 2 && deliveryInfo.deliveryFlag === 0">
      <div class="status">
        <i>1</i>
        <span>创建发货单</span>
        <div class="line"></div>
        <i>2</i>
        <span>门店核销</span>
        <div class="time">{{ deliveryInfo.deliveryTime | formatDate('dateTime') }}</div>
      </div>
      <div class="status-text">等待核销</div>
      <div class="status-description">发货单创建成功</div>
      <div>
        <el-button class="specter" type="primary" @click="openDialog('WriteOff')">发货核销</el-button>
        <el-button @click="openDialog('CancelOrder')">关闭发货单</el-button>
      </div>
    </div>
    <div class="delivery-todo" v-if="deliveryInfo.deliveryType === 1 && deliveryInfo.deliveryFlag === 0">
      <div class="status">
        <i>1</i>
        <span>创建发货单</span>
        <div class="line"></div>
        <i>2</i>
        <span>仓库发货</span>
        <div class="time">{{ deliveryInfo.deliveryTime | formatDate('dateTime') }}</div>
      </div>
      <div class="status-text">等待仓库发货</div>
      <div class="status-description">发货单创建成功</div>
      <div>
        <el-button class="specter" type="primary" @click="openDialog('LogisticsDelivery')">发货核销</el-button>
        <el-button @click="openDialog('CancelOrder')">关闭发货单</el-button>
      </div>
    </div>
    <div v-else-if="deliveryInfo.deliveryType === 2 && deliveryInfo.deliveryFlag === 1" class="delivery-complete">
      <i class="el-icon-success"></i>
      <p>核销成功</p>
      <p>仓库已核销，发货单完成</p>
    </div>
    <div v-else-if="deliveryInfo.deliveryType === 1 && deliveryInfo.deliveryFlag === 1" class="delivery-complete">
      <i class="el-icon-success"></i>
      <p>发货成功</p>
      <p>仓库已发货，发货单完成</p>
    </div>
    <div v-else-if="deliveryInfo.deliveryFlag === 2" class="delivery-complete">
      <i class="el-icon-error"></i>
      <p>发货单关闭</p>
      <p>仓库关闭发货单</p>
      <p>{{deliveryInfo.cancelReason}}</p>
    </div>
    <el-divider></el-divider>
    <p>
      发货单信息
    </p>
    <ul v-if="deliveryInfo.deliveryFlag==1" class="order-info">
      <li>发货单号：{{deliveryInfo.deliveryId}}</li>
      <li>履约单号：{{deliveryInfo.orderId}}</li>
      <li>会员姓名：{{deliveryInfo.memberName}}</li>
      <li>会员卡号：{{deliveryInfo.memberCardNo}}</li>
      <li>配货方式：物流发货</li>
      <li>收货信息：{{deliveryInfo.consignee}} {{deliveryInfo.consigneePhone}} {{deliveryInfo.consigneeAddress}}</li>
    </ul>
    <ul v-else class="order-info">
      <li>发货单号：{{deliveryInfo.deliveryId}}</li>
      <li>履约单号：{{deliveryInfo.orderId}}</li>
      <li>会员姓名：{{deliveryInfo.memberName}}</li>
      <li>会员卡号：{{deliveryInfo.memberCardNo}}</li>
      <li>配货方式：上门自提</li>
      <li>提货信息：{{deliveryInfo.consignee}} {{deliveryInfo.consigneePhone}}</li>
      <li>自提点：{{deliveryInfo.pickUpPointAddress}}</li>
      <li>提货地址：{{deliveryInfo.pickUpPointName}}</li>
      <li>提货时间：{{deliveryInfo.pickUpStartTime | formatDate}} - {{deliveryInfo.pickUpStopTime | formatDate}}</li>
    </ul>
    <el-table :data="giftList">
      <el-table-column label="礼品" width="300">
        <template slot-scope="{ row }">
          <div class="goods-info">
            <img class="imgs-style" :src="row.giftImgUrl" alt="" />
            <div class="goods-text">
              <div class="goods-text-name">
                {{row.giftName}}
              </div>
              <div class="goods-text-info">
                <div v-if="row.giftSkuStrand">
                  <span v-for="(item, i) in JSON.parse(row.giftSkuStrand || '[]')" :key="i">{{ item.specStandardName }}：{{ item.specStandardValueName }} &nbsp;&nbsp;</span>
                </div>
                <span v-else>- -</span>
                <div>SKU编码：{{ row.giftSkuCode }}</div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="礼品编码" prop="giftId"></el-table-column>
      <el-table-column label="成本（元）" prop="costPrice"></el-table-column>
      <el-table-column label="数量" prop="exchangeQuantity"></el-table-column>
      <el-table-column label="物流公司 | 运单号">
        <template slot-scope="{ row }">
          <div v-if="row.logisticsNo">
            <p>{{ row.logisticsCompanyName || '--' }}<el-divider direction="vertical"></el-divider>{{ row.logisticsNo || '--' }}</p>
            <p><el-button type="text" @click="openDialog('LogisticsDetail')">查看物流</el-button></p>
          </div>
          <span v-else>- -</span>
        </template>
      </el-table-column>
    </el-table>
    <component :is="activeDialog" :data="deliveryInfo" @close="activeDialog=''" @refresh="getDeliveryDetail"></component>
  </div>
</template>

<script>
import CancelOrder from './components/cancel-order-dialog';
import LogisticsDelivery from './components/logistics-delivery-dialog';
import WriteOff from './components/writeoff-dialog';
import LogisticsDetail from './components/logistics-detail-dialog';

import fetch from '@/api/performance.js';
const { getDeliveryDetail } = fetch;
export default {
  name: 'DeliveryDetail',
  components: { CancelOrder, LogisticsDelivery, WriteOff, LogisticsDetail },
  data() {
    return {
      giftList: [],
      deliveryInfo: {},
      loading: false,
      activeDialog: ''
    };
  },
  created() {
    this.$emit('updateBread', [
      {
        breadName: '福利中心'
      },
      {
        breadName: '履约管理'
      },
      {
        breadName: '发货单',
        breadPath: '/gift-performance/delivery',
      },
      {
        breadName: '发货单详情'
      }
    ]);
    this.getDeliveryDetail();
  },
  methods: {
    async getDeliveryDetail() {
      this.loading = true;
      let { result } = await getDeliveryDetail({ deliveryId: this.$route.query.deliveryId }).finally(()=> this.loading = false);
      this.deliveryInfo = result.orderDelivery,
      this.giftList = [ result.orderDelivery ];
    },
    openDialog(dialogName) {
      this.activeDialog = dialogName;
    },
  },
  filters: {
    formatDate(ms, type = 'date') {
      if (!ms) return '--';
      const date = [];
      const time = [];
      ms = new Date(ms);
      date.push(ms.getFullYear());
      date.push((ms.getMonth() + 1).toString().padStart(2, '0'));
      date.push(ms.getDate().toString().padStart(2, '0'));

      time.push(ms.getHours().toString().padStart(2, '0'));
      time.push(ms.getMinutes().toString().padStart(2, '0'));
      time.push(ms.getSeconds().toString().padStart(2, '0'));

      return {
        date: date.join('-'),
        time: time.join(':'),
        dateTime: date.join('-') + ' ' + time.join(':')
      }[type];
    }
  },
};
</script>

<style lang="scss" scoped>
.order-info {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 33%;
    margin: 10px 0
  }
}
.delivery-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  .el-icon-success {
    color: #33AF4A;
    font-size: 63px;
  };
  .el-icon-error {
    color: #F5222D;
    font-size: 63px;
  }
  p {
    margin-top: 16px;
    color: #606266;
  }
  p:first-of-type {
    margin-top: 28px;
    font-size: 24px;
    color: #303133;
  }
}
.delivery-todo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .status-text {
    margin-top: 50px;
    color: #303133;
    font-size: 24px;
    font-weight: bold;
  }
  .status-description{
    margin-top: 16px;
    margin-bottom: 40px;
    color: #606266;
  }
  .status {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    .time {
      position: absolute;
      top: 30px;
      left: 30px;
      color: #909399;
    }
    .line {
      height: 1px;
      background-color: #2F54EB;
      flex:1;
      margin: 0 20px;
    }
    i {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 24px;
      width: 24px;
      background-color: #2F54EB;
      color: #fff;
      border-radius: 50%;
      flex-shrink: 0;
    }
    i:last-of-type {
      border: 1px solid #C0C4CC;
      color: #C0C4CC;
      background-color: #fff;
    }
    span {
      display: inline-block;
      margin-left: 10px;
      font-size: 16px;
      color: #303133;
      font-weight: bold;
    }
    span:last-of-type {
      color: #909399;
      font-weight: bold;
    }
  }
}
</style>
