<script setup lang="ts">
import { ElForm } from "element-plus";
import { ref, nextTick } from "vue";

import { PageDetail } from "/@/components/PageDetail";
import orderDetailConfig from "../config/orderDetail.config";
import userDetailConfig from "/@/views/mobile/exchangeStock/config/userDetail.config";
import goodDetailConfig from "/@/views/mobile/shopStock/config/goodDetail.config";

const showModel = ref(false);
const orderDetailRef = ref<InstanceType<typeof PageDetail>>(null);
const goodDetailRef = ref<InstanceType<typeof PageDetail>>(null);
const userDetailRef = ref<InstanceType<typeof PageDetail>>(null);

const loading = ref(false);

function show(row) {
  showModel.value = true;
  loading.value = true;
  const { id, account_id, good_id } = row;
  nextTick(() => {
    if (id) {
      orderDetailRef.value.reload({ id: id });
    }
    if (account_id) {
      userDetailRef.value.reload({ id: account_id });
    }
    if (good_id) {
      goodDetailRef.value.reload({ id: good_id });
    }
  });

  loading.value = false;
}
defineExpose({
  show
});
</script>

<template>
  <el-dialog
    v-model="showModel"
    :close-on-press-escape="false"
    center
    append-to-body
    destroy-on-close
    :width="'1040px'"
    :title="'订单详情'"
    v-loading="loading"
  >
    <el-form
      ref="formRef"
      label-width="100px"
      style="margin-top: -10px"
      class="demo-ruleForm"
      status-icon
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="订单信息">
            <PageDetail
              ref="orderDetailRef"
              :contentConfig="orderDetailConfig"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="账号信息">
            <PageDetail ref="userDetailRef" :contentConfig="userDetailConfig" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="商品信息">
            <PageDetail ref="goodDetailRef" :contentConfig="goodDetailConfig" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
