<template>
  <div class="table-box">
    <LjVxeTable
      ref="VxeTableRef"
      row-key="billcode"
      :columns="columns"
      :request-api="getData"
      :data-callback="dataCallback"
      :dwname="dwname"
      :table-props="tableProps"
      :table-events="tableEvents"
      :tool-button="['export', 'refresh', 'setting', 'search', 'location']"
      :auto-load-layout="false"
      pagination
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button-group>
          <el-button @click="handleUnLock">解锁</el-button>
        </el-button-group>
      </template>
    </LjVxeTable>
  </div>
</template>

<script setup lang="ts" name="lock_table">
import { ref, onMounted, provide } from "vue";
import { getLockBillList } from "@/api/modules/basicinfo";
import { ColumnProps } from "@/components/LjVxeTable/interface";
import { useI18n } from "vue-i18n";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { UnLockBill } from "@/api/modules/common";
import { ElMessage, ElMessageBox } from "element-plus";
import { getCurrentRecords } from "@/utils/index";

const dwname = "web_lock_table";
const tableProps = {
  height: "auto",
  editConfig: { trigger: "click", mode: "cell" }
};

const VxeTableRef = ref();
const { t } = useI18n();
const { CheckPower, CheckOption, buttonNew, buttonDefault } = useAuthButtons(t);
const columns = ref<ColumnProps<any>[]>([
  // { type: "checkbox", width: 40, fixed: "left" },
  {
    field: "pid",
    title: "序",
    align: "center"
  },
  {
    field: "keyword",
    title: "单据",
    enum: [
      {
        label: "床垫报价",
        value: "MattressQuote"
      },
      {
        label: "床网报价",
        value: "BedNetQuote"
      },
      {
        label: "软床报价",
        value: "SoftBedQuote"
      },
      {
        label: "床垫清单",
        value: "MattressInterface"
      }
    ],
    fieldNames: {
      label: "label",
      value: "value"
    },
    render: (scope: any) => {
      let _keys = Object.keys(scope);
      let _data: any = _keys.includes("row") ? scope.row : _keys.includes("searchParam") ? scope.searchParam : scope;
      let _field = scope?.column.field ?? "";
      let _item: any = {};
      scope.enum && (_item = scope.enum.find((item: any) => item.value === _data[_field]));
      return _item?.label ?? "";
    }
  },
  {
    field: "billcode",
    title: "单据编码"
  },
  {
    field: "is_locked",
    title: "上锁",
    datatype: "checkbox",
    align: "center"
  },
  {
    field: "opemp",
    title: "操作人"
  },
  {
    field: "lock_time",
    title: "创建日期",
    datatype: "datetime"
  },
  {
    field: "expire_time",
    title: "过期日期",
    datatype: "datetime"
  }
]);

const getData = (params: any) => {
  return getLockBillList(params);
};

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

const handleUnLock = () => {
  const { curRecords } = getCurrentRecords(VxeTableRef.value);
  if (!curRecords.length) {
    ElMessage.warning(t("business.tips.mattress.records"));
    return;
  }
  ElMessageBox.confirm("是否确定要解锁吗?", "询问", {
    confirmButtonText: "是",
    cancelButtonText: "否",
    type: "warning"
  })
    .then(() => {
      curRecords.forEach(element => {
        UnLockBill(element).then(() => {
          ElMessage.success("解锁成功！");
          VxeTableRef?.value.refresh();
        });
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "操作取消"
      });
    });
};

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