<template>
  <LjDetail
    name="custCrmDetail"
    ref="LjDetailRef"
    v-bind="detailProps"
    v-model:order-status="orderStatus"
    :data="mainData"
    :init-param="mainData[0]"
    :if-fold-layout="false"
    :if-layout-editable="false"
    :search-col="{ xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }"
    :basic-group-col="{ xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }"
  >
    <!-- :action="orderStatus ? orderEditAction : orderDefaultAction" -->
  </LjDetail>
</template>

<script setup lang="tsx" name="priceListDetail">
import { ref, watch, reactive, inject } from "vue";
import { DwnameEnum } from "@/enums/dwnameEnum";
import LjDetail from "@/components/LjDetail/index.vue";
import { DetailProp } from "@/components/LjDetail/interface";
import { useI18n } from "vue-i18n";
import { useHooks } from "./hooks/index";
import { useAuthButtons } from "@/hooks/useAuthButtons";

interface detailProp {
  /**
   * @argument any 页面数据
   */
  data?: any;
  /**
   * @argument string 请求数据的api ==> 非必传
   */
  requestApi?: (params: any) => Promise<any>;
  /**
   * @argument any 基础信息，表格展示数据
   */
  // columns?: any;
  /**
   * @description 是否可编辑
   */
  status: "edit" | "new" | string;
}

const props = withDefaults(defineProps<detailProp>(), {});
const { t } = useI18n();
const { columns } = useHooks();
const { CheckPower, CheckOption, buttonNew, buttonDefault } = useAuthButtons(t);

const mainData = ref([{}]);

/**
 * @description 是否可编辑
 */
const orderStatus = ref("");

const detailProps = reactive<DetailProp>({
  dwname: DwnameEnum.prilcelist,
  columns: columns,
  // detailApi: {
  //   requestApi: getDetailData,
  //   initParam: initParam.value
  // },
  header: {
    fieldNames: {
      code: "cuscode",
      codeLabel: t("table.u_cust.cuscode") + "：",
      name: "name"
    },
    icon: "iconuser-01",
    // icon: Close
    // icon: (params: any) => {
    //   console.log("detailProps params :>> ", params);
    //   return <i class={"iconfont iconclipboard-check"}></i>;
    // }
    tabsProp: {
      scrollspy: false,
      sticky: true
    }
  },
  mould: []
});

watch(
  () => props.data,
  val => {
    console.log("props.data, val :>> ", val);
    mainData.value = [val];
    // initParam.value.cusid = val.cusid;

    // getDetailData(val).then(res => {
    //   detailData.value = res;
    // });
  },
  { immediate: true }
);

watch(
  () => props.status,
  val => {
    console.log("props.status val :>> ", val);
    orderStatus.value = val;
  },
  { immediate: true, deep: true }
);
</script>
