<template>
  <div id="goodsSet-1">
    <!-- <el-row> -->
    <!-- <el-col :span="24" class="main"> -->
    <el-col :span="24" v-for="item in list" :key="item._id || item.set_id">
      <el-col :span="24" class="goods bode" v-if="item.is_set == '0'">
        <el-col :span="24" style="text-align: center; font-size: 18px">{{ item.name || '套装名称' }}</el-col>
        <el-col :span="24" v-for="i in item.goods" :key="i.spec._id">
          <el-col :span="24" class="bode">
            <el-col :span="6" class="image">
              <el-image v-if="i.spec.file && i.spec.file.length != 0" :src="i.spec.file[0].url" style="width: 120px; height: 100px"></el-image>
              <el-image v-else-if="i.goods.file && i.goods.file.length != 0" :src="i.goods.file[0].url" style="width: 120px; height: 100px"></el-image>
            </el-col>
            <el-col :span="18">
              <el-col :span="12">
                <el-col :span="24"> {{ i.goods_name }} </el-col>
                <el-col :span="24"> 规格：{{ i.spec_name }} </el-col>
              </el-col>
              <el-col :span="12" class="money">
                <el-col :span="24"> X{{ i.set_num }} </el-col>
                <el-col :span="24">
                  <span class="spanfour" style="color: blue; cursor: pointer" @click="toUrl(i.goods.url)"> 查看商品来源:{{ i.goods.source }}</span>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" style="text-align: right; font-size: 18px"> X{{ item.buy_num }} </el-col>
        <el-col :span="24" class="bode">
          <el-col :span="6">订单备注</el-col>
          <el-col :span="18" class="other">{{ item.remarks || '' }}</el-col>
        </el-col>
      </el-col>
    </el-col>
    <!-- </el-col>
    </el-row> -->
  </div>
</template>

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

<style lang="less" scoped>
.goods {
  padding: 10px 0;
  .image {
    padding: 0 10px 0 0;
    margin: 4px 0;
    // height: 100px;
    // width: 150px;
  }
  .money {
    text-align: right;
  }
}
.other {
  text-align: right;
  word-break: break-all;
  p {
    color: red;
    font-size: 20px;
  }
  .spanfour {
    color: blue;
  }
}

.el-col {
  margin: 4px 0;
}
.bode {
  border-bottom: 1px solid rgb(238, 237, 237);
}
</style>
