<template>
  <div id="form-1">
    <!-- 团购订单详情 -->
    <el-row>
      <el-col :span="24" class="top-btn">
        <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
      </el-col>
      <el-col
        :span="24"
        class="main animate__animated animate__backInRight"
        v-loading="loadings"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-tabs type="border-card">
          <el-tab-pane label="订单详情">
            <card-1 :address="address" :shop="shop" :goods="goods" :spec="spec" :form="form" :pay="pay" :total_detail="total_detail"></card-1>
          </el-tab-pane>
          <el-tab-pane label="发货信息">
            <card-2
              :address="address"
              :form="form"
              :activities="activities"
              :shop_transport_typeList="shop_transport_typeList"
              :transport_typeList="transport_typeList"
              @querySearch="querySearch"
              @search="search"
            ></card-2>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('groupOrder');
const { mapActions: dictData } = createNamespacedHelpers('dictData');
const { mapActions: groupTransport } = createNamespacedHelpers('groupTransport');

export default {
  name: 'form-1',
  props: { id: { type: String } },
  components: {
    card1: () => import('./parts/card-3.vue'),
    card2: () => import('./parts/card-4.vue'),
  },
  data: function () {
    return {
      loadings: true,
      form: {},
      // 地址
      address: {},
      // 商铺
      shop: {},
      goods: {}, //商品信息
      spec: {}, //规格信息
      pay: {}, //支付信息
      total_detail: [],
      // 快递公司
      shop_transport_typeList: [],
      // 快递类型
      transport_typeList: [],
      activities: [], //物流信息
    };
  },
  async created() {
    await this.searchOther();
    await this.search();
  },
  methods: {
    ...dictData({ dictQuery: 'query' }),
    ...groupTransport({ sotCreate: 'create' }),
    ...mapActions(['query', 'fetch', 'create', 'update']),
    // 查询
    async search() {
      let res;
      res = await this.fetch(this.id);
      if (this.$checkRes(res)) {
        this.$set(this, `address`, res.data.address);
        this.$set(this, `shop`, res.data.shop);
        this.$set(this, `goods`, res.data.goods);
        this.$set(this, `spec`, res.data.goodsSpec);
        this.$set(this, `pay`, res.data.pay);
        this.$set(this, `total_detail`, res.data.total_detail);
        if (res.data.transport_type) {
          let name = this.transport_typeList.find((i) => i.value == res.data.transport_type);
          if (name) res.data.transport_type_name = name.label;
        }
        if (res.data.transport && res.data.transport.length > 0) {
          for (const p1 of res.data.transport) {
            let arr = await this.dictQuery({ code: 'transport_company', value: p1.shop_transport_type });
            if (this.$checkRes(arr)) {
              let type = arr.data.find((i) => i.value == p1.shop_transport_type);
              if (type) {
                p1.shop_transport_name = type.label;
                this.querySearch(type.label);
              }
            }
          }
          let info = { order: this.id };
          let aee = await this.sotCreate(info);
          if (this.$checkRes(aee)) if (aee.errcode == '0') this.$set(this, `activities`, aee.data);
        }
        this.$set(this, `form`, res.data);
      }
      this.loadings = false;
    },
    async querySearch(value) {
      let res = await this.dictQuery({ code: 'transport_company', label: value });
      if (this.$checkRes(res)) this.$set(this, 'shop_transport_typeList', res.data);
    },
    // 返回
    toBack() {
      this.$emit('toBack');
    },
    // 查询其他信息
    async searchOther() {
      let res;
      // 快递类型
      res = await this.dictQuery({ code: 'transport_type' });
      if (this.$checkRes(res)) this.$set(this, `transport_typeList`, res.data);
    },
  },
  computed: {},
  metaform() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.top-btn {
  margin: 20px 0;
}
</style>
