<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2022-10-31 09:43:44
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2022-11-02 15:55:00
 * @FilePath: \yuan-huoling-browser\src\views\system\configure\assetType.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <YaPageContent
      showTree
      showLeft
      treeTitle="菜单信息"
      :treeData="treeData"
      @treeNodeClick="treeNodeClick"
      :formData="serchformData"
      :formColumns="serchColumns"
      :tableData="tableData"
      :tableColumns="column"
      :leftButtons="leftButtons"
      searchLabelWidth="90px"
      :rightButtons="rightButtons"
      @search="initSearch"
      @reset="reset"
      @tableBtnClick="tableBtnClick"
      @selectionChange="handleSelectionChange"
      :currentPage="page"
      :pageSize="pageSize"
      :total="total"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
    >
    </YaPageContent>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, nextTick, Ref, onMounted } from "vue";
import { handleGetIndex } from "../../../utils/tools";
import { ElMessageBox, ElMessage, FormRules } from "element-plus";
import {
  getList,
  deleteMenudata,
  getLeftTreeJson,
} from "../../../api/configure/index";
import { usePermissions } from "../../../composables/usePermissions";
import { flatJsonTree } from "../../../utils/helper/tree";
const { permissionsButtons } = usePermissions();
onMounted(() => {
  permissionsButtons.map((item) => {
    butomData.value.push(item.label);
  });
  getButton();
  search();
  getdata();
});

const column: any[] = [
  {
    type: "selection",
    width: "65px",
  },
  {
    prop: "name",
    label: "资产类型",
    // width: "300px",
    // fixed: "left",
  },
  {
    prop: "reportType",
    label: "资产子类型",
    // width: "180px",
    fixed: "left",
  },

  {
    prop: "timePeriodType",
    label: "备注",
    // width: "120px",
  },
  {
    prop: "createTime",
    label: "添加时间",
    // width: "210px",
  },
  {
    prop: "oparation",
    label: "操作",
    width: "150px",
    // align: "center",
    fixed: "right",
    buttons: [
      {
        title: "编辑",
        hide: true,
        eventName: function (row) {
          handleGoPdf(row.id);
        },
      },
      {
        title: "删除",
        hide: true,
        eventName: function (row) {
          batchDelete(row.id);
        },
      },
    ],
  },
];
let butomData = ref([]);
let leftButtons = ref([]);
let rightButtons = ref([]);
let tableData = ref([]);
let selectData = ref([]);
// 搜索栏start
const serchColumns = reactive([
  {
    key: "time",
    type: "daterange",
    label: "时间范围",
    valueFormat: "YYYY-MM-DD",
    startPlaceholder: "开始时间",
    endPlaceholder: "结束时间",
    col: 8,
  },
  {
    key: "type",
    type: "input",
    label: "报告类型",
    options: [],
    clearable: true,
    col: 8,
  },
  {
    key: "timePeriodType",
    type: "select",
    label: "时间段类型",
    options: [],
    clearable: true,
    col: 8,
  },
]);

const serchformData = ref({});

// 查询事件
const initSearch = () => {
  page.value = 1;
  search();
};
const handleSelectionChange = function (val) {
  selectData.value = val;
};
// 重置
const reset = () => {
  serchformData.value = {};
  search();
};
const tableBtnClick = (btn, row) => {
  btn.eventName(row);
};
// 搜索栏end

// 列表删除
const batchDelete = (id) => {
  if (!id && selectData.value.length == 0) {
    ElMessage.warning("请选择要批量删除的数据");
    return;
  }

  ElMessageBox.confirm("此操作不可逆，是否要确认删除？", "提示", {
    customClass: "message-warning",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  }).then(() => {
    let idValue = (id && [id]) || [];
    if (!id && selectData.value.length) {
      selectData.value.forEach((item) => {
        idValue.push(item.id);
      });
    }
    deleteMenudata(idValue).then((res) => {
      if (res.code == 200) {
        // page.value = 1;
        ElMessage.success("删除成功");
        search();
      }
    });
  });
};
// 获取列表数据
const search = () => {
  let _data = JSON.parse(JSON.stringify(serchformData.value));
  getList(_data).then((res) => {
    nextTick(() => {
      tableData.value = res.data.rows;
      total.value = res.data.total;
    });
  });
};
let getButton = () => {
  let i = handleGetIndex(column, "prop", "oparation");
  console.log(column, "permissionsButtons", butomData);
  if (butomData.value.indexOf("新增") > -1) {
    rightButtons.value.push({
      text: "新增",
      type: "primary",
      eventName: function () {
        resetFormData();
        drawerProps.showDrawer = true;
      },
    });
  }
  if (butomData.value.indexOf("删除") > -1) {
    let j = handleGetIndex(column[i].buttons, "title", "删除");
    column[i].buttons[j].hide = false;
    leftButtons.value.push({
      text: "批量删除",
      plain: true,
      eventName: function () {
        batchDelete();
      },
    });
  }

  if (butomData.value.indexOf("编辑") > -1) {
    let j = handleGetIndex(column[i].buttons, "title", "编辑");
    column[i].buttons[j].hide = false;
  }
};
// 分页
const page = ref(1);
const total = ref(0);
const pageSize = ref(20);
const sizeChange = function (val: Number) {
  pageSize.value = val;
  page.value = 1;
  search();
};

const currentChange = function (val: Number) {
  page.value = val;
  search();
};
const treeData = ref([]) as any; // 树形数据
const flatTreeData = ref([]); // 树形展开数据
let getdata = async () => {
  const res = await getLeftTreeJson();
  treeData.value = res.data;
  flatTreeData.value = flatJsonTree(res.data);
};

const treeNodeClick = function (node, attr, event) {
  serchformData.value.treeMenuId = node.menuId;
  serchformData.value.level = node.level;
  serchformData.value.menuId = "";
  serchformData.value.title = "";
  serchformData.value.perType = "";
  page.value = 1;
  search();
};
</script>

<style lang="scss" scoped></style>
