<template>
  <div id="form-1">
    <el-row>
      <!-- 待付款订单详情 -->
      <el-col
        :span="24"
        class="main animate__animated animate__backInRight"
        v-loading="loadings"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-col class="top-btn">
          <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
        </el-col>
        <el-col :span="11" class="one">
          <add-1 :address="address"></add-1>
          <el-col :span="24" v-for="item in list" :key="item._id || item.set_id">
            <goods-1 v-if="!item.set_id" :list="list" :info="info" @toUrl="toUrl"></goods-1>
            <goodsSet-1 v-else-if="item.is_set == '0'" :list="list" @toUrl="toUrl"></goodsSet-1>
          </el-col>
          <el-col :span="24">
            <pay-1 :info="info" :total_detail="total_detail" :pay="pay"></pay-1>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
const moment = require('moment');
import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('order');
export default {
  name: 'form-1',
  props: { id: { type: String } },
  components: {
    add1: () => import('@/components/orderParts/parts/add-1.vue'),
    pay1: () => import('@/components/orderParts/parts/order/pay-1.vue'),
    goods1: () => import('@/components/orderParts/parts/order/goods-1.vue'),
    goodsSet1: () => import('@/components/orderParts/parts/goodsSet-1.vue'),
  },
  data: function () {
    return {
      info: {},
      address: {},
      list: [],
      total_detail: [],
      typeList: [],
      statusList: [],
      pay: {},
      loadings: true,
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...mapActions(['query', 'fetch', 'create', 'update']),
    // 查询
    async search() {
      let res = await this.fetch(this.id);
      if (this.$checkRes(res)) {
        this.$set(this, `info`, res.data);
        // 地址
        this.$set(this, `address`, res.data.address);
        // 商品
        this.$set(this, `list`, res.data.goods);
        // 实付金额
        this.$set(this, `total_detail`, res.data.total_detail);
        this.$set(this, `pay`, res.data.pay);
      }
      this.loadings = false;
    },
    toUrl(url) {
      if (url) window.open(url, '_blank');
      else this.$message.error('该商品还未添加来源网址，无法跳转');
    },
    // 返回
    toBack() {
      this.$emit('toBack');
    },
  },
  computed: {},
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    margin: 10px 0 0 20%;
    padding: 5px;
    .el-col {
      margin: 4px 0;
    }
  }
  .bode {
    border-bottom: 1px solid rgb(238, 237, 237);
  }
}
</style>
