<template>
  <div id="card-1">
    <el-row>
      <!-- 自营店铺订单详情--商品详情 -->
      <el-col :span="24" class="main">
        <el-col :span="12" class="main_one">
          <el-col :span="24" class="add">
            <el-col :span="2">
              <i class="el-icon-location"></i>
            </el-col>
            <el-col :span="22">
              <el-col :span="24"> {{ address.name }},{{ address.phone }} </el-col>
              <el-col :span="24"> {{ address.province }} , {{ address.city }} , {{ address.area }} , {{ address.address }} </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="shop"> <i class="el-icon-s-shop"></i>{{ shop.name }}</el-col>
          <el-col :span="24" v-for="(item, index) in list" :key="index">
            <el-col :span="24" class="goods bode">
              <el-col :span="6" class="image" v-if="item.file && item.file.length != 0"><el-image :src="item.file[0].url"></el-image></el-col>
              <el-col :span="6" class="image" v-else-if="item.goods.file && item.goods.file"><el-image :src="item.goods.file[0].url"></el-image></el-col>
              <el-col :span="6" class="image" v-if="item.url"><el-image :src="item.url"></el-image></el-col>
              <el-col :span="18">
                <el-col :span="12">
                  <el-col :span="24"> {{ item.goods.name }} </el-col>
                  <el-col :span="24"> 规格：{{ item.name }} </el-col>
                </el-col>
                <el-col :span="12" class="money">
                  <el-col :span="24" style="color: red; font-size: 20px">
                    <p v-if="form.type == '0' && item.price">￥{{ item.price }}</p>
                    <p v-else-if="form.type == '0' && !item.price">￥{{ item.sell_money }}</p>
                    <p v-else-if="form.type == '1'">￥{{ item.group_config.money }}</p>
                  </el-col>
                  <el-col :span="24"> X{{ item.buy_num }} </el-col>
                  <el-col :span="24">
                    <span class="spanfour" style="color: blue" @click="toUrl(item.goods.url)"> 查看商品来源:{{ item.goods.source }}</span>
                  </el-col>
                  <el-col :span="24"> {{ item.is_afterSale == true ? '已申请售后' : '未申请售后' }} </el-col>
                  <el-col :span="24">{{ item.is_rate == true ? '已评价' : '未评价' }}</el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="bode">
              <el-col :span="6">运费</el-col>
              <el-col :span="18" class="other" v-if="!item.goods.freight == '0'">{{ item.goods.freight }}</el-col>
              <el-col :span="18" class="other" v-else>包邮</el-col>
            </el-col>
            <el-col :span="24" class="bode" v-if="item.act">
              <el-col :span="24">平台活动优惠</el-col>
              <el-col :span="24" v-for="(item, index) in item.act" :key="index">
                <el-col :span="8">
                  {{
                    item.platform_act_type == '0'
                      ? '优惠商品合集'
                      : item.platform_act_type == '1'
                      ? '按单返现'
                      : item.platform_act_type == '2'
                      ? '买赠'
                      : item.platform_act_type == '3'
                      ? '特价'
                      : item.platform_act_type == '4'
                      ? ''
                      : item.platform_act_type == '5'
                      ? '满减'
                      : item.platform_act_type == '6'
                      ? '满减折扣'
                      : '套装促销'
                  }}
                </el-col>
                <el-col :span="16" class="other" v-if="item.platform_act_type == '4'">加价购 </el-col>
                <el-col :span="16" class="other" v-if="item.platform_act_type == '3'">
                  <p>{{ item.sp_price }} 元</p>
                </el-col>
                <el-col :span="16" class="other" v-if="item.platform_act_type == '5' || item.platform_act_type == '6'">
                  <p>-{{ item.discount }} 元</p>
                </el-col>
                <el-col :span="24" class="other" v-if="item.platform_act_type == '2'">
                  <el-table :data="item.gift" border style="width: 100%">
                    <el-table-column prop="goods_name" label="商品" width="180"> </el-table-column>
                    <el-table-column prop="spec_name" label="规格" width="180"> </el-table-column>
                    <el-table-column prop="num" label="数量"> </el-table-column>
                    <el-table-column prop="desc" label="备注"> </el-table-column>
                  </el-table>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="12" class="main_one">
          <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.remarks || '' }}</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-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'card-1',
  props: {
    address: { type: Object },
    list: { type: Array },
    pay: { type: Object },
    form: { type: Object },
    total_detail: { type: Array },
    shop: { type: Object },
  },
  components: {},
  data: function () {
    return {};
  },
  created() {},
  methods: {
    toUrl(url) {
      if (url) window.open(url, '_blank');
      else this.$message.error('该商品还未添加来源网址，无法跳转');
    },
    getActLength() {
      return _.get(this.total_detail, 'act.length');
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  // padding: 0 5%;
  .main_one {
    padding: 0 5%;
  }
  .add {
    border-bottom: 2px dashed #ccc;
    margin: 0 0 5px 0;
    padding: 5px 0;
  }
  .shop {
    padding: 4px 0;
    font-size: 18px;
    border-bottom: 1px solid #ccc;
  }
  .goods {
    padding: 10px 0;
    .image {
      padding: 0 10px 0 0;
    }
    .money {
      text-align: right;
    }
  }
  .transport {
    margin: 50px;
    padding: 5px;
    border: 1px solid rgb(254, 195, 195);
  }
  .other {
    text-align: right;
    word-break: break-all;
    p {
      color: red;
      font-size: 20px;
    }
    .spanfour {
      color: blue;
    }
  }
  .el-col {
    margin: 3px 0;
  }
  .bode {
    border-bottom: 1px solid rgb(238, 237, 237);
  }
  .form {
    margin: 20px 0 0 0;
  }
}

/deep/.el-timeline {
  margin: 20px 0 0 0;
  font-size: 16px;
}
/deep/.el-timeline-item__node:nth-child(1) {
  background-color: green;
}
</style>
