<template>
  <MOSTY.PageTree :pageTitle="'职务管理'" :isShowLeftTree="false">
    <template #serach>
      <el-divider />
      <section class="query-flex" ref="queryHeight">
        <section class="query-section">
          <section class="flex">
            <MOSTY.DictRidioAndSelect :dictData="D_TB_ZWDJ" :placeholder='"请选择职务等级"' v-model="listQuery.dutyLevel"
              selectType="select" style="width: 250px;" />
            <MOSTY.DictRidioAndSelect class="ml12" :placeholder='"请选择职务类型"' :dictData="D_TB_ZWLX"
              v-model="listQuery.dutyType" selectType="select" style="width: 250px;" />
            <el-input class="ml12" placeholder="请输入职务编号" v-model="listQuery.dutyCode" clearable
              style='width:250px'></el-input>
          </section>
          <section v-if="isOpen" class="mt12">
            <el-input placeholder="请输入职务名称" v-model="listQuery.dutyName" style='width:250px' clearable></el-input>
          </section>
        </section>
        <div class="query-btn">
          <div class="toggle" :class="{ active: isOpen }" @click="handleClickOpen">
            <span>{{ isOpen ? "收起" : "展开" }}筛选</span>
            <el-icon>
              <DArrowLeft />
            </el-icon>
          </div>
          <el-button @click="handleFilter" class="ml6">
            <el-icon>
              <Search />
            </el-icon>查询</el-button>
          <el-button @click="reset">
            <el-icon>
              <Refresh />
            </el-icon>重置</el-button>
        </div>
      </section>
      <el-divider />
      <div class="btnBox">
        <el-button type="primary" @click="addUserHander">
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>新增</span>
        </el-button>
      </div>
    </template>
    <template #table>
      <div :style="{ 'height': totalHeight }">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableLoading" :isSelect="false"
          :isSort="false" @SortChange="SortChange" style="width: 100%;" :actionsW='260'>
          <template #dutyLevel="{ row }">
            <dict-tag :options="D_TB_ZWDJ" :value="row.dutyLevel" :tag="false" />
          </template>
          <template #dutyType="{ row }">
            <dict-tag :options="D_TB_ZWLX" :value="row.dutyType" :tag="false" />
          </template>
          <template #actions="{ row }">
            <span class="operedit" @click="clickEdit(row)">
              <el-icon>
                <EditPen />
              </el-icon>编辑
            </span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="deldete(row)">
              <template #reference>
                <span class="operdel" size="small"><el-icon>
                    <Delete />
                  </el-icon>删除</span>
              </template>
            </el-popconfirm>
          </template>
        </MOSTY.Table>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange">
          </MOSTY.Pages>
        </div>
      </div>

    </template>
  </MOSTY.PageTree>

  <el-dialog v-model="dialogVisible" :title="pageData.fromObj.id ? '修改' : '新增'" :before-close="closeDialog"
    width="700px" append-to-body>
    <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="130px" :model="pageData.fromObj" :inline="true"
      :rules="rules" style="flex-wrap: wrap;">
      <el-form-item label="职务等级:" style="width: 100%;" prop="dutyCode">
        <MOSTY.DictRidioAndSelect :dictData="D_TB_ZWDJ" v-model="pageData.fromObj.dutyLevel" />
      </el-form-item>
      <el-form-item label="职务类型:" style="width: 100%;" prop="dutyCode">
        <MOSTY.DictRidioAndSelect :dictData="D_TB_ZWLX" v-model="pageData.fromObj.dutyType" />
      </el-form-item>
      <el-form-item label="职务编号:" style="width: 100%;" prop="dutyCode">
        <el-input v-model="pageData.fromObj.dutyCode" clearable placeholder="请输入职务编号" />
      </el-form-item>
      <el-form-item label="职务名称:" prop="dutyName" style="width: 100%;">
        <el-input v-model="pageData.fromObj.dutyName" clearable placeholder="请输入职务名称" />
      </el-form-item>
      <el-form-item label="职务描述:" style="width: 100%;">
        <el-input v-model="pageData.fromObj.dutyDesc" clearable placeholder="请输入职务描述" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="savefrom(ruleFormRef)" :loading="addLoading"> <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span></el-button>
        <el-button @click="closeDialog"> <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import {
  ref,
  nextTick,
  onMounted,
  getCurrentInstance,
  reactive
} from "vue";
const { proxy } = getCurrentInstance();
const { D_TB_ZWDJ, D_TB_ZWLX } = proxy.$dict("D_TB_ZWDJ", "D_TB_ZWLX")
const queryHeight = ref(null); // 搜索盒子
const tableHeight = ref(); // 表格高度
const dialogVisible = ref(false)
const totalHeight = ref(null)
const tableLoading = ref(false)
const isOpen = ref(false);
const tableColumn = ref([
  {
    title: "职务等级",
    prop: "dutyLevel",
    slot: true
  },
  {
    title: "职务类型",
    prop: "dutyType",
    slot: true
  },
  {
    title: "职务编号",
    prop: "dutyCode",
  },
  {
    title: "职务名称",
    prop: "dutyName",
  },
  {
    title: "职务描述",
    prop: "dutyDesc",
  },
  {
    title: "采集时间",
    prop: "xtCjsj",
    slot: true
  },

  {
    title: "操作",
    prop: "actions",
    fixed: 'right',
    slot: true
  }
])
const addLoading = ref(false)
const rules = ref({
  dutyCode: [{ required: true, message: "请输入职务编号", trigger: "blur" }],
  dutyName: [{ required: true, message: "请输入职务名称", trigger: "blur" }],
  dutyDesc: [{ required: true, message: "请输入职务描述", trigger: "blur" }],
});
const ruleFormRef = ref()
//查询参数
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 10,
  total: 0
});
const pageData = reactive({
  fromObj: {}
})
// 数据相关
const tableData = ref([]);
const handleClickOpen = () => {
  isOpen.value = !isOpen.value
  nextTick(() => {
    if (isOpen.value) {
      totalHeight.value = `calc(100vh - ${338 + queryHeight.value.offsetHeight}px)`
      return
    }
    totalHeight.value = `calc(100vh - 370px)`
  })
}
onMounted(() => {
  nextTick(() => {
    totalHeight.value = `calc(100vh - ${338 + queryHeight.value.offsetHeight}px)`
  })
  getListData()
});
// 获取数据的方法
const getListData = async () => {
  tableLoading.value = true
  listQuery.value.size = listQuery.value.pageSize
  listQuery.value.current = listQuery.value.pageCurrent
  getApi(listQuery.value, "/mosty-base/sysDuty/selectDutyPage").then(res => {
    if (res) {
      listQuery.value.total = res.total
      tableData.value = res?.records;
    }
  }).finally(() => {
    tableLoading.value = false
  })
};
//
const reset = () => {
  listQuery.value = {
    pageCurrent: 1,
    pageSize: 10,
  };
  getListData();
};
const handleFilter = () => {
  listQuery.value.pageCurrent = 1;
  getListData();
};
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};

const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getListData();
};
const addUserHander = (row) => {
  pageData.fromObj = {};
  dialogVisible.value = true;
};

//新增人员
const savefrom = (elform) => {
  addLoading.value = true
  elform.validate((valid) => {
    if (valid) {
      let url = "/mosty-base/sysDuty/addSysDuty"
      if (pageData.fromObj.id) url = "/mosty-base/sysDuty/updateSysDuty"
      postApi(pageData.fromObj, url).then(res => {
        proxy.$message.success("成功")
        getListData()
      }).finally(() => {
        addLoading.value = false
        dialogVisible.value = false;
      })
    } else {
      return false;
    }
  });
};
function closeDialog() {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      dialogVisible.value = false;
    })
    .catch(() => {
      // catch error
    })

}
const clickEdit = (row) => {
  pageData.fromObj = row
  dialogVisible.value = true
}
const deldete = (row) => {
  postApi({}, `/mosty-base/sysDuty/delDutyById/${row.id}`).then(res => {
    proxy.$message.success("成功")
    getListData()
  })
};




</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

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

  .query-section {
    width: 68%;
  }

  .query-btn {
    width: 250px;
    display: flex;
    justify-content: flex-end;

    .toggle {
      height: 32px;
      cursor: pointer;
      display: flex;
      align-items: center;
      color: #0f3916;

      .el-icon {
        transform: rotate(90deg);
        transition: all 0.25s ease;
      }

      &.active {
        .el-icon {
          transform: rotate(-90deg);
        }
      }
    }
  }
}

.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 12px 0;
}

.treeBox {
  overflow: auto;
}

::v-deep .el-form {
  flex-wrap: wrap;
}
</style>
