<template>
  <div>
    <MOSTY.PageTree :pageTitle="'预案编制修订计划'" :searchType="'01'" @getDeptId="getDeptId">
      <template #serach>
        <Search :searchArr="searchArr" @submit="onSearch">
          <el-button @click="toAdd"><el-icon size="small">
              <Plus />
            </el-icon>新增</el-button>
          <el-button type="primary">
            <el-icon>
              <Download />
            </el-icon>
            <span>导出</span>
          </el-button>
        </Search>
      </template>
      <template #table>
        <div class="table">
          <MOSTY.Table :table-columns="pageData.tableColumn" :tableData="pageData.tableData"
            :tableloading="tableloading" :isSelect="false" :isSort="false">
            <!-- 操作 -->
            <template #actions="{ row }">
              <el-link type="primary" style="margin-right: 20px" @click="edit(row)" size="small">修改</el-link>
              <el-link type="primary" style="margin-right: 20px" @click="del(row)" size="small">删除</el-link>
            </template>
          </MOSTY.Table>

        </div>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="pageData.pageConfiger" @changeNo="changeNo" @changeSize="changeSize" />
        </div>
      </template>
    </MOSTY.PageTree>
  </div>

</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import Search from "@/components/aboutTable/Search/index.vue";
import { getSysDictByCode } from "@/api/sysDict"; //引入封装数字字典接口
import { ElMessage } from "element-plus";
import { reactive, ref, watch, onMounted } from "vue";
const emit = defineEmits("changePage");
const lfBoxWid = ref("300px");
// 树的展开与折叠
const iconChange = ref(true);
const searchArr = reactive([
  {
    showType: "cascader",
    prop: "yalx",
    options: [],
    lazy: false,
    placeholder: "请选择预案类型",
    label: "预案类型"
  },
  {
    showType: "input",
    prop: "userName",
    placeholder: "请输入预案名称或小组名称"
  }
]);
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      label: "修订预案名称",
      prop: "yaName",
    },
    {
      label: "修订依据",
      prop: "xdyj",
    },
    {
      label: "修订开始时间",
      prop: "xdkssj",
    },
    {
      label: "修订结束时间",
      prop: "xdjssj",
    },
    {
      label: "年份",
      prop: "nf",
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  tableConfiger: {
    showIndex: false,
    loading: false,
    height: 750,
    rowHeight: 61
  },
  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1,
    total: 0
  },
});
const handleCollapse = () => {
  iconChange.value = !iconChange.value;
  if (iconChange.value) {
    lfBoxWid.value = "300px";
    rgBoxWid.value = "calc(100% - 300px)";
  } else {
    lfBoxWid.value = "40px";
    rgBoxWid.value = "calc(100% - 40px)";
  }
};
const changeNo = (val) => {
  data.pageConfiger.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  data.pageConfiger.pageSize = val;
  getTableData();
};
// 查询数据
const onSearch = (obj) => {
  data.searchObj = obj;
  getTableData();
};


const edit = (row) => {
  emit("changePage", "Details", row);
};
const del = (obj) => { };


function getTableData() {
  let list = [
    {
      yaName: "食物中毒事件",//修订预案名称
      xdyj: '食品法',//修订依据
      nf: '2023',//年份
      xdkssj: '2023-07-01',//修订开始时间
      xdjssj: '2023-09-01',//修订结束时间
      fujian: '',//附件
    }
  ];
  data.tableData = list;

  // if(!data.clickTree) return ElMessage.warning("选选择部门更好查找");
  // let attr = {
  //   orgId: data.clickTree.associateId,
  //   pageCurrent: data.pageConfiger.pageCurrent,
  //   pageSize: data.pageConfiger.pageSize
  // };
  // attr = {...attr, ...data.searchObj}
  // fns.selectUserPage(attr).then((res) => {
  //   data.tableData = res.records;
  //   data.pageConfiger.total = res.total;
  // });
}

const toAdd = () => {
  // if (!data.clickTree) return ElMessage.warning("请先选择部门");
  // let obj = {
  //   showPageAdd: true
  // };
  // obj = { ...obj, ...data.clickTree };
  emit("changePage", "Details");
  // data.clickTree = null;
};
let D_TB_YALX = reactive([]);
const treeHeight = ref(""); // 树高度
// 树高度计算
const treeHeightFn = () => {
  treeHeight.value =
    window.innerHeight - 187 + "px";
};
onMounted(() => {
  getSysDictByCode({ dictCode: "D_TB_YALX" }).then((res) => {
    if (res) {
      D_TB_YALX = res.itemList;
      searchArr[0].options = res.itemList.map((item) => {
        const obj = {
          label: item.zdmc,
          value: item.dm
        };

        return reactive(obj);
      });
    }
  });
  getTableData();
  treeHeightFn();
  window.onresize = function () {
    treeHeightFn();
  };
});
</script>

<style lang="scss" scoped>
.usermanage {
  display: flex;



  .right {
    height: calc(100%);
    width: calc(100% - 300px);
    padding: 0 10px;
    box-sizing: border-box;

    .head {
      display: flex;
      justify-content: space-between;

      .title {
        display: flex;
        margin-top: 10px;
        color: black;
        font-size: 20px;
      }
    }

    .fenye {
      top: 95%;
    }
  }
}
</style>