<template>
  <div class="table-box">
    <LjVxeTable
      ref="VxeTableRef"
      row-key="quoteid"
      :columns="columns"
      :request-api="getPriceList"
      :data-callback="dataCallback"
      :dwname="dwname"
      :tool-button="['export', 'refresh', 'setting', 'search', 'location']"
      :table-props="tableProps"
      :table-events="tableEvents"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button-group>
          <el-button>{{ $t("common.add") }}</el-button>
          <el-button>{{ $t("common.delText") }}</el-button>
          <el-button @click="fAudit(0)">{{ $t("common.auditText") }}</el-button>
          <el-button @click="fAudit(1)">{{ $t("common.withdrawAuditText") }}</el-button>
          <el-button @click="fAudit(2)">{{ $t("common.enabled") }}</el-button>
          <el-button @click="fAudit(3)">{{ $t("common.disable") }}</el-button>
        </el-button-group>
      </template>
    </LjVxeTable>
  </div>

  <!-- <LjDrawer ref="LjDrawerRef" size="50%" :withHeader="false"> -->

  <!-- </LjDrawer> -->
  <LjDialog
    ref="LjDrawerRef"
    class="is-selector"
    v-bind="{
      ...drawerDefineProp
    }"
    :style="{ padding: 0 }"
  >
    <template #header>
      <div class="flx-1">
        <span class="text-h5-b">价格表: {{ pricelistname }}</span>
      </div>
    </template>
    <div class="flx-1 h-full">
      <LjHeaderMenu :data="mainData" :action="orderStatus ? orderEditAction : orderDefaultAction" />
      <!-- :closed="autoClosed" :update="dialogVisible" -->
      <PriceListDetail class="flx-1" :data="mainData" :status="orderStatus" />
    </div>
  </LjDialog>
</template>

<script setup lang="ts" name="saleprice_priclist">
import { ref, onMounted } from "vue";
import { getPriceList } from "@/api/modules/saleprice";
import { ColumnProps } from "@/components/LjVxeTable/interface";
import LjDrawer from "@/components/LjDrawer/index.vue";
import PriceListDetail from "./detail.vue";
import { useHooks } from "./hooks/index";
import LjDialog from "@/components/LjDialog/index.vue";
import LjHeaderMenu from "@/components/LjHeaderMenu/index.vue";
import { useI18n } from "vue-i18n";
import { useAuthButtons } from "@/hooks/useAuthButtons";

const dwname = "web_pricelist";
const mainData = ref({});
const tableProps = {
  height: "auto",
  showOverflow: false,
  editConfig: { trigger: "click", mode: "cell" }
  // rowClassName: rowClsNameFunc
  // exportConfig: {
  //   filename: t("menu.saletaskmx") + formatToDate(new Date(), "YYYY-MM-DD HH:mm:ss")
  // }
};

const { t } = useI18n();
const { VxeTableRef, columns, fAudit } = useHooks();
const { CheckPower, CheckOption, buttonNew, buttonDefault } = useAuthButtons(t);

const orderStatus = ref("");
const pricelistname = ref("");

const orderDefaultAction = [
  buttonDefault({
    label: t("common.editText"),
    icon: "iconchevron-left",
    path: "/saletask/sale/saletaskCrm/new"
  }),
  buttonDefault({
    label: t("common.auditText"),
    icon: "iconchevron-left",
    path: "/saletask/sale/saletaskCrm/new"
  })
];

const orderEditAction = [
  buttonDefault({
    label: t("common.cancelText"),
    icon: "iconchevron-left",
    path: "/saletask/sale/saletaskCrm/new"
  }),
  buttonNew({
    label: t("common.saveText"),
    icon: "iconsave-01",
    path: "/saletask/sale/saletaskCrm/new"
  })
];

/*
 * @description 抽屉默认属性
 */
const drawerDefineProp = {
  draggable: true,
  overflow: true,
  width: "40%"
  // modalClass: "lj-file-dialog"
};

onMounted(async () => {
  // let res = await getPriceList();
  // console.log("pricelist res :>> ", res);
});

const dataCallback = (data: any) => {
  console.log("data :>> ", data);
  return {
    list: data.list
    // tableinfo: data.tableinfo,
    // total: data.totalcnt,
    // pageNum: data.pageindex,
    // pageSize: data.pagesize
  };
};

const LjDrawerRef = ref();
const handleDBlClickTable = ({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }: any) => {
  // 弹窗
  mainData.value = row;
  pricelistname.value = row.pricelistname;
  orderStatus.value = "edit";
  LjDrawerRef.value.show();
};

// 返回绑定的事件
const tableEvents = {
  "cell-dblclick": handleDBlClickTable
  // "cell-click": handleClickTable
};
</script>
