<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="10" class="one">
          <add-1 :address="address"></add-1>
          <el-col :span="24" v-for="item in list" :key="item._id || item.set_id">
            <el-col :span="24" v-if="!item.is_set">
              <el-col :span="24" class="shop"> <i class="el-icon-s-shop"></i>{{ item.shop_name }}</el-col>
              <el-col :span="24" v-for="(goods, index) in item.goods" :key="index">
                <el-col :span="24" class="goods">
                  <el-col :span="6" v-if="goods.file && goods.file.length != 0">
                    <el-image class="image" :src="goods.file[0].url" style="width: 120px; height: 100px"></el-image>
                  </el-col>
                  <el-col :span="6" v-else>
                    <el-image class="image" :src="goods.goods.file[0].url" style="width: 120px; height: 100px"></el-image>
                  </el-col>
                  <el-col :span="18">
                    <el-col :span="12">
                      <p>{{ goods.goods.name }}</p>
                      <p>规格：{{ goods.name }}</p>
                    </el-col>
                    <el-col :span="12" class="money">
                      <p v-if="info.type == '0'">￥{{ goods.sell_money }}</p>
                      <p v-else-if="info.type == '1'">￥{{ goods.group_config.money }}</p>
                      <p>X{{ goods.buy_num }}</p>
                      <el-col>
                        <span class="spanfour" style="color: blue; cursor: pointer" @click="toUrl(goods.goods.url)">
                          查看商品来源:{{ goods.goods.source }}</span
                        >
                      </el-col>
                      <el-button type="danger" @click="toSales()"> 取消订单 </el-button>
                    </el-col>
                  </el-col>
                </el-col>
                <el-col :span="24" class="bode" v-if="goods.act">
                  <el-col :span="24">平台活动优惠</el-col>
                  <el-col :span="24" v-for="(act, index) in goods.act" :key="index">
                    <el-col :span="8">
                      {{
                        act.platform_act_type == '0'
                          ? '优惠商品合集'
                          : act.platform_act_type == '1'
                          ? '按单返现'
                          : act.platform_act_type == '2'
                          ? '买赠'
                          : act.platform_act_type == '3'
                          ? '特价'
                          : act.platform_act_type == '4'
                          ? ''
                          : act.platform_act_type == '5'
                          ? '满减'
                          : act.platform_act_type == '6'
                          ? '满减折扣'
                          : '套装促销'
                      }}
                    </el-col>
                    <el-col :span="16" class="other" v-if="act.platform_act_type == '4'">加价购 </el-col>
                    <el-col :span="16" class="other" v-if="act.platform_act_type == '3'">
                      <p>{{ act.sp_price }} 元</p>
                    </el-col>
                    <el-col :span="16" class="other" v-if="act.platform_act_type == '5' || act.platform_act_type == '6'">
                      <p>{{ act.discount }} 元</p>
                    </el-col>
                    <el-col :span="24" class="other" v-if="act.platform_act_type == '2'">
                      <el-table :data="act.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 :span="24">
                  <el-col :span="6">运费</el-col>
                  <el-col :span="18" class="other" v-if="!goods.freight == '0'">{{ goods.freight }}</el-col>
                  <el-col :span="18" class="other" v-else>包邮</el-col>
                </el-col>
                <el-col :span="24">
                  <el-col :span="6">订单备注</el-col>
                  <el-col :span="18" class="other" v-if="item.remarks">{{ item.remarks }}</el-col>
                  <el-col :span="18" class="other" v-else>暂无备注</el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="goods bode" v-else-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="6" class="image" v-if="i.spec.file && i.spec.file.length != 0">
                  <el-image :src="i.spec.file[0].url" style="width: 120px; height: 100px"></el-image>
                </el-col>
                <el-col :span="6" class="image" v-else-if="i.goods.file && i.goods.file.length != 0">
                  <el-image :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-button type="danger" @click="toSales()"> 取消订单 </el-button>
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="24" style="text-align: right; font-size: 20px"> X{{ item.buy_num }} </el-col>
              <el-col :span="24" style="text-align: right; font-size: 20px; color: red"> ￥{{ item.sell_money }} </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>
          <pay-1 :info="info" :total_detail="total_detail" :pay="pay"></pay-1>
        </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'),
  },
  data: function () {
    return {
      info: {},
      address: {},
      list: [],
      total_detail: [],
      typeList: [],
      statusList: [],
      pay: {},
      loadings: true,
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...mapActions(['query', 'fetch', 'create', 'cancel', '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('该商品还未添加来源网址，无法跳转');
    },
    async toSales() {
      this.$confirm('是否确认申请售后', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        let info = { order_id: this.id };
        let res = await this.cancel(info);
        if (this.$checkRes(res)) {
          this.$message({ type: `success`, message: `取消订单成功` });
          this.toBack();
        }
      });
    },
    // 返回
    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;
    .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;
      }
    }
    .other {
      text-align: right;
      word-break: break-all;
      p {
        color: red;
      }
      .spanfour {
        color: blue;
      }
    }
    .el-col {
      margin: 4px 0;
    }
  }
}
</style>
