<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">
            <add-1 :address="address"></add-1>
          </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">
            <goods-1 v-if="!item.set_id" :list="list" :form="form" @toUrl="toUrl"></goods-1>
            <goodsSet-1 v-else-if="item.is_set == '0'" :list="list" @toUrl="toUrl"></goodsSet-1>
            <act-1 v-if="item.act" :list="list"></act-1>
          </el-col>
        </el-col>
        <el-col :span="12" class="main_one">
          <pay-1 :form="form" :total_detail="total_detail" :pay="pay"></pay-1>
        </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: {
    add1: () => import('@/components/orderParts/parts/add-1.vue'),
    pay1: () => import('@/components/orderParts/parts/orderDetail/pay-1.vue'),
    goods1: () => import('@/components/orderParts/parts/orderDetail/goods-1.vue'),
    goodsSet1: () => import('@/components/orderParts/parts/goodsSet-1.vue'),
    act1: () => import('@/components/orderParts/parts/act-1.vue'),
  },
  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 {
  .main_one {
    padding: 0 5%;
  }
  .shop {
    padding: 4px 0;
    font-size: 18px;
    border-bottom: 1px solid #ccc;
  }
}
</style>
