<template>
  <div v-loading="loading">
    <el-row>
      <el-col :gutter="10" :span="18">
        <!-- 预约单信息 -->
        <section class="dm-form__wrap statement-edit__info">
          <h3 class="dm-title__label">预约单信息</h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <span class="primary-font-color">达摩订单号：</span><span class="regular-font-color">{{ info.orderNumber || '--' }}</span>
            </el-col>
            <el-col :span="12">
              <span class="primary-font-color">卡券核销码：</span><span class="regular-font-color">{{ info.couponNo || '--' }}</span>
            </el-col>
            <el-col :span="12">
              <span class="primary-font-color">预约时间：</span><span class="regular-font-color">{{ formatDateTimeByType(info.preTime) || '--' }}</span>
            </el-col>
            <el-col :span="12">
              <span class="primary-font-color">会员手机号：</span><span class="regular-font-color">{{ info.memberPhone }}</span>
            </el-col>
            <el-col :span="12">
              <span class="primary-font-color">会员姓名：</span><span class="regular-font-color">{{ info.memberName }}</span>
            </el-col>
            <el-col :span="24">
              <span class="primary-font-color">订单备注：</span><span class="regular-font-color">{{ info.remark }}</span>
            </el-col>
            <el-col :span="24">
              <span class="primary-font-color">门店名称：</span><span class="regular-font-color">{{ info.storeName }}</span>
            </el-col>
            <el-col :span="24">
              <span class="primary-font-color">门店地址：</span><span class="regular-font-color">{{ info.storeAddress }}</span>
            </el-col>
          </el-row>
          <el-table :data="ywTable" style="width: 100%" class="mt20">
            <el-table-column prop="categoryName" label="名称" minWidth="180"></el-table-column>
            <el-table-column prop="total" label="数量" minWidth="180"></el-table-column>
            <el-table-column label="单价" minWidth="180">
              <template slot-scope="scope">
                {{ scope.row.amount | amount }}
              </template>
            </el-table-column>
          </el-table>
          <p class="text-right mt10">
            服务总价
            <span class="fz16 ml5">¥ {{ this.ywTableAmount | amount }}</span>
          </p>
          <p class="text-right mt10">
            卡券支付
            <span class="fz22 ml5 warning-color">¥ {{ info.couponAmount | amount }}</span>
          </p>
        </section>
        <!-- e袋洗订单信息 -->
        <section class="dm-form__wrap statement-edit__info">
          <h3 class="dm-title__label">e袋洗订单信息</h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <span class="primary-font-color">e袋洗单号：</span><span class="regular-font-color">{{ info.edaixiOrderNumber || '--' }}</span>
            </el-col>
            <el-col :span="12">
              <span class="primary-font-color">支付流水号：</span><span class="regular-font-color">{{ info.edaixiPayNumber || '--' }}</span>
            </el-col>
            <el-col :span="12">
              <span class="primary-font-color">取件时间：</span><span class="regular-font-color">{{ info.deliverTime || '--' }}</span>
            </el-col>
            <el-col :span="12">
              <span class="primary-font-color">补差价原因：</span><span class="regular-font-color">{{ info.fixedReason || '--' }}</span>
            </el-col>
            <el-col :span="24">
              <span class="primary-font-color">订单备注：</span><span class="regular-font-color">{{ info.remark || '--' }}</span>
            </el-col>
          </el-row>
          <el-table :data="orderTable" style="width: 100%" class="mt20">
            <el-table-column prop="categoryName" label="名称" minWidth="180"></el-table-column>
            <el-table-column prop="total" label="数量" minWidth="180"></el-table-column>
            <el-table-column label="单价" minWidth="180">
              <template slot-scope="scope">
                {{ scope.row.amount | amount }}
              </template>
            </el-table-column>
          </el-table>
          <p class="text-right mt10">
            预估金额
            <span class="fz16 ml5">¥ {{ this.orderTableAmount | amount }}</span>
          </p>
          <template v-if="!(info.status > 5 && info.status !== 10)">
            <p class="text-right mt10">
              补差价
              <span v-if="info.fixedStatus === 1" class="red">(待支付)</span>
              <span class="fz16 ml5">¥ {{ info.fixedPrice | amount }}</span>
            </p>
            <p class="text-right mt10">
              订单总价
              <span class="gray">(含运费{{ info.freightAmount | amount }}元)</span>
              <span class="fz22 ml5 warning-color">¥ {{ info.payAmount | amount }}</span>
            </p>
          </template>
        </section>
        <!-- 分拣信息 status > 5 && status !== 10 -->
        <section class="dm-form__wrap statement-edit__info" v-if="info.status > 5 && info.status !== 10">
          <h3 class="dm-title__label">分拣明细</h3>
          <el-table :data="sortTable" style="width: 100%" class="mt20">
            <el-table-column prop="categoryName" label="名称" minWidth="180"></el-table-column>
            <el-table-column prop="total" label="数量" minWidth="180"></el-table-column>
            <el-table-column label="单价" minWidth="180">
              <template slot-scope="scope">
                {{ scope.row.amount | amount }}
              </template>
            </el-table-column>
          </el-table>
          <p class="text-right mt10">
            补差价
            <span v-if="info.fixedStatus === 1" class="red">(待支付)</span>
            <span class="fz16 ml5">¥ {{ info.fixedPrice | amount }}</span>
          </p>
          <p class="text-right mt10">
            订单总价
            <span class="gray">(含运费{{ info.freightAmount | amount }}元)</span>
            <span class="fz22 ml5 warning-color">¥ {{ info.payAmount | amount }}</span>
          </p>
        </section>
      </el-col>
      <el-col :span="6">
        <section class="dm-form__wrap statement-edit__info ml5">
          <h3 class="dm-title__label"><i class="el-icon-s-order primary-color mr5"></i>订单状态</h3>
          <el-timeline>
            <el-timeline-item v-for="(order, index) in orderStatus" :key="index" :icon="order.icon" :type="order.type" :color="order.color" :size="order.size" :timestamp="order.timestamp">
              {{ order.content }}
            </el-timeline-item>
          </el-timeline>
        </section>
        <section class="dm-form__wrap statement-edit__info ml5">
          <h3 class="dm-title__label"><i class="el-icon-location danger-color mr5"></i>物流跟踪</h3>
          <el-timeline v-if="logistics.length">
            <el-timeline-item v-for="(logistic, index) in logistics" :key="index" :color="index === logistics.length - 1 ? '#f5222d' : ''" :timestamp="logistic.time" :size="logistic.size">
              {{ logistic.text }}
            </el-timeline-item>
          </el-timeline>
          <div v-else class="gray">暂无数据</div>
        </section>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { edxOrderDetail } from '@/service/api/ewashApi';
import { formatDateTimeByType } from '@/utils/index';
/* eslint-disable */
const status1 = [
  { content: '删除', status: 0 }
]
const status2 = [
  { content: '待送洗/待揽收', status: 1 },
  { content: '待下单', status: 2 },
  { content: '待取件/预约成功', status: 3 },
  { content: '取件中', status: 4 },
  { content: '分拣计价', status: 5 },
  { content: '清洗中', status: 6 },
  { content: '待送回/送回中', status: 7 },
  { content: '待取件/已收件', status: 8 },
  { content: '已签收/已完成', status: 9 }
];
const status10 = [
  { content: '已取消', status: 10 }
]
/* eslint-disable */
export default {
  name: 'ewash-statement-detail',
  data() {
    return {
      id: this.$route.params.id,
      loading: false,
      info: {
        templateName: 'templateNametemplateNametemplateNametemplateName',
        orderItems: []
      },
      ywTable: [], // 预约单table
      ywTableAmount: 0, // 预约单服务总价
      orderTable: [], // 订单table
      orderTableAmount: 0, // 订单服务总价
      sortTable: [], // 分拣table
      // 订单状态  0(删除);1(待送洗或待揽收);2(待下单);3(待取件或预约成功);4(取件中);5(分拣计价);6(清洗中);7(待送回或送回中);8(待取件/已收件);9(已签收/已完成);10(已取消)
      orderStatus: [],
      logistics: []
    };
  },
  filters: {
    amount(value) {
      if (!value) return '0.00';
      if (isNaN(value)) return value;
      return value.toFixed(2);
    }
  },
  methods: {
    formatDateTimeByType,
    handleDetail() {
      this.loading = true;
      edxOrderDetail({ orderId: this.id }).then(res => {
        this.loading = false;
        this.info = res.result || {};
        try {
          this.logistics = JSON.parse(res.result.logistics.logisticsInfo).delivery_status_list.reverse() || [];
        } catch (error) {
          this.logistics = [];
        }

        /* eslint-disable */
        this.ywTable = res.result.orderItems
          ? res.result.orderItems.filter(v => {
              return v.itemType === 0;
            })
          : [];
        this.ywTableAmount = this.ywTable.reduce((total, item) => {
          return total + (item.amount * item.total);
        }, 0);
        this.orderTable = res.result.orderItems
          ? res.result.orderItems.filter(v => {
              return v.itemType === 1;
            })
          : [];
        this.orderTableAmount = this.orderTable.reduce((total, item) => {
          return total + (item.amount * item.total);
        }, 0);
        this.sortTable = res.result.orderItems
          ? res.result.orderItems.filter(v => {
              return v.itemType === 3;
            })
          : [];
        /* eslint-disable */
        const { status } = res.result;
        if(status === 0 || status === 10) {
          this.orderStatus = status === 0 ? [ ...status1 ] : [ ...status10 ];
        } else {
          // 找到对应的status
          this.orderStatus = status2.map(v => {
            v.size = v.status === status ? 'large' : '';
            v.type = v.status === status ? 'primary' : '';
            return v;
          })
        }
      });
    }
  },
  mounted() {
    this.handleDetail();
  },
  created() {
    this.$store.commit('mutations_breadcrumb', [{ name: 'e袋洗服务', path: '' }, { name: '服务列表', path: '/ewash/list' }, { name: 'e袋洗账单', path: '/ewash/statements' }, { name: '账单详情', path: '' }]);
  }
};
</script>

<style lang="scss" scoped>
.statement-edit {
  &__info {
    /deep/ .el-col {
      padding: 10px 0;
      line-height: 17px;
    }
    padding: 20px 0;
    // border-bottom:1px solid #DCDFE6;
  }
}
/deep/ {
  .el-table__empty-text:before {
    margin: 0 auto;
    display: none;
  }
  .el-table__empty-text {
    margin: 20px auto;
  }
  .el-table__empty-block {
    min-height: 30px;
  }
  .dm-form__wrap {
    margin: 0 auto;
  }
  .el-timeline-item__content {
    line-height: 18px;
  }
}
</style>
