<template>
  <LjVxeTable
    ref="vxeTableRef"
    row-key="key"
    :columns="doc_unread_columns"
    :request-api="getData"
    :data-callback="dataCallback"
    :dwname="DwnameEnum.oaDocUnReadHome"
    pagination
    table-cls=""
    :table-events="tableEvents"
    :table-props="tableProps"
    :header-cell-class-name="headerCellClassName"
    :tool-button="['refresh', 'setting', 'search']"
    :auto-load-layout="false"
    v-if="docTypeValue"
  >
    <template #tableHeader>
      <div class="flx-start">
        <el-select class="mb-15" v-model="docTypeValue" placeholder="请选择" @change="handleWorkPlanTypeChange">
          <el-option v-for="item in docTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-divider class="mb-15" direction="vertical" />
        <el-button :icon="Plus" plain type="success" @click="AddOADoc">发起公文</el-button>
        <el-button plain @click="AddOADoc">公文管理</el-button>
      </div>
    </template>
  </LjVxeTable>
  <LjVxeTable
    ref="vxeTableRef"
    row-key="key"
    :columns="doc_columns"
    :request-api="getData"
    :data-callback="dataCallback"
    :dwname="DwnameEnum.oaDocHome"
    pagination
    table-cls=""
    :table-events="tableEvents"
    :table-props="tableProps"
    :header-cell-class-name="headerCellClassName"
    :tool-button="['refresh', 'setting', 'search']"
    :auto-load-layout="false"
    v-else
  >
    <template #tableHeader>
      <div class="flx-start">
        <el-select class="mb-15" v-model="docTypeValue" placeholder="请选择" @change="handleWorkPlanTypeChange">
          <el-option v-for="item in docTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-divider class="mb-15" direction="vertical" />
        <el-button :icon="Plus" plain type="success" @click="AddOADoc">发起公文</el-button>
        <el-button plain @click="AddOADoc">公文管理</el-button>
      </div>
    </template>
  </LjVxeTable>
</template>

<script setup lang="tsx" name="oa_doc_crm">
import { ref, computed, inject, nextTick, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { Plus } from "@element-plus/icons-vue";
import LjVxeTable from "@/components/LjVxeTable/index.vue";
import { CommonDynamicSelect } from "@/api/modules/common";
import { useI18n } from "vue-i18n";
import { loginApi } from "@/api/modules/login";
import { formatToDateTime, formatToDate } from "@/utils/dateUtil";
import { useGlobalStore } from "@/stores/modules/global";
import { DwnameEnum } from "@/enums/dwnameEnum";
import { useLayoutStore } from "@/stores/modules/layout";
import { useHomeData } from "@/hooks/useHomeData";
import { useUserStore } from "@/stores/modules/user";
import { ColumnProps, SearchProps } from "@/components/LjVxeTable/interface";

const { t } = useI18n();
const router = useRouter();
const globalStore = useGlobalStore();
// 布局暂存数据
const emit = defineEmits(["cellClickSaleTask", "toPinDetail"]);
const { userInfo } = useUserStore();

const docTypeValue = ref(0);
const docTypeOptions = [
  {
    value: 0,
    label: "我的代办"
  },
  {
    value: 1,
    label: "我的发起"
  }
];

const handleWorkPlanTypeChange = (data: any) => {
  console.log("handleWorkPlanTypeChange :>>", data);
  docTypeValue.value = data;
};

const AddOADoc = () => {
  alert("功能维护中!");
};

const { vxeTableRef, doc_columns, doc_unread_columns } = useHomeData(t);

const rowClsNameFunc = (data: any) => {
  const { row, rowIndex, $rowIndex } = data;
  if (row.ifover == 1) {
    return "vxecol-bg-danger";
  }
  return "";
};
const tableProps = {
  height: "auto",
  minHeight: "300px",
  editConfig: { trigger: "click", mode: "cell" },
  rowClassName: rowClsNameFunc,
  exportConfig: {
    // filename: t("menu.saletask") + formatToDate(new Date(), "YYYY-MM-DD HH:mm:ss")
  }
};

// 修改表头样式
const headerCellClassName = ({ column }: any) => {
  if (column?.editRender) {
    return "vxecol-edit";
  }
  return null;
};

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

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getData = (params: any) => {
  console.log("params :>> ", params);
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.dsname = docTypeValue.value ? "L1WEB_GetOADocUnReadList" : "L1WEB_GetOADocList";
  newParams.queryParams = { empid: userInfo.empid };
  newParams.pageNum && (newParams.pageindex = newParams.pageNum);
  newParams.pageSize && (newParams.pagesize = newParams.pageSize);
  return CommonDynamicSelect(newParams, DwnameEnum.oaDocHome);
};

const handleDBlClickTable = ({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }: any) => {
  let routeUrl = null;
  switch (Number(row.powerid)) {
    case 6:
      routeUrl = router.resolve({
        path: `/saletask/sale/saletaskCrm/detail`,
        query: {
          scid: row.scid,
          taskid: row.billid,
          code: row.billcode
        }
      });
      break;
    case 461:
      routeUrl = router.resolve({
        path: `/salesPrice/saleQuoteCrm/detail`,
        query: {
          scid: row.scid,
          billid: row.billid,
          code: row.billcode
        }
      });
      break;
  }
  if (routeUrl != null) {
    window.open(routeUrl.href, "_blank");
  }
};

// 返回绑定的事件
const tableEvents = {
  // "checkbox-change": handleCheckboxChange,
  // "checkbox-all": handleCheckboxChange,
  // "checkbox-range-change": handleCheckboxChange,
  // "current-change": handleCurrentChanged
  "cell-dblclick": handleDBlClickTable
  //   "cell-click": handleClickTable
};

// 布局暂存数据
// const layoutStore = useLayoutStore();
// onMounted(async () => {
//   let layout = await layoutStore.getDwLayout(DwnameEnum.saletask + "__layout-detail");
//   console.log("SaleTaskDetailRef layout :>> ", layout);
// });
</script>
