<template>
  <div id="pay-1">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="bode">
          <el-col :span="6">下单时间</el-col>
          <el-col :span="18" class="other">{{ form.buy_time }}</el-col>
        </el-col>
        <el-col :span="24" class="bode">
          <el-col :span="6">支付时间</el-col>
          <el-col :span="18" class="other">{{ form.pay_time }}</el-col>
        </el-col>
        <el-col :span="24" class="bode">
          <el-col :span="6">配送方式</el-col>
          <el-col :span="18" class="other">{{ form.transport_type_name || '' }}</el-col>
        </el-col>
        <el-col :span="24" class="goods_total bode">
          <el-col :span="24" v-for="(item, index) in total_detail" :key="index">
            <el-col :span="8">{{ item.zh }}</el-col>
            <el-col :span="16" class="other">
              <p>￥{{ item.money }}</p>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="goods_total bode">
          <el-col :span="8">优惠后实付金额</el-col>
          <el-col :span="16" class="other">
            <p>￥{{ pay.pay_money }} 元</p>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'pay-1',
  props: {
    form: { type: Object },
    total_detail: { type: Array },
    pay: { type: Object },
    transport: { type: Object },
  },
  components: {},
  data: function () {
    return {};
  },
  created() {},
  methods: {},
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.bode {
  border-bottom: 1px solid rgb(238, 237, 237);
}
.el-col {
  margin: 4px 0;
}
.other {
  text-align: right;
  word-break: break-all;
  p {
    color: red;
    font-size: 20px;
  }
  .spanfour {
    color: blue;
  }
}
</style>
