<template>
  <el-dialog
      :modal="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      title="下属部门"
      :model-value="dialogVisible"

      :before-close="handleClose"
  >
    <div class="table-part" v-if="tablePartShow">

      <div class="table-add">
        <el-button  type="primary" :icon="Plus" @click="showSingleDetail('add')">新增</el-button>
      </div>
      <my-table border
                :has-operation="true"
                :table-data="tableData"
                :headers="headerConfig">
        <template #operation="{data}">
          <el-button  type="info" @click="showSingleDetail('detail',data)">查看</el-button>
          <el-button  type="info" @click="showSingleDetail('edit',data)">修改</el-button>
          <el-button  type="info" @click="deleteDetail(data)">删除</el-button>
        </template>
      </my-table>
      <ele-pagination  ref="refEl"
                       @sizeOrPageChange="handleSizeChange"
                       class="page"
                       :default-page-size="pageSize"
                       :layout="'slot,sizes,prev,pager,next'"
                       :total-count="totalCount">
        <template #default>
          <div class="m-s">
            显示第 {{pageSize * (pageIndex -1) + 1 }} 到第 {{pageSize * pageIndex}} 条记录，总共 {{totalCount}} 条记录 共显示

          </div>
        </template>
      </ele-pagination>
    </div>
    <div class="form-part" v-else >
      <diy-el-form ref="formRef"  v-model:model-form="forms" :forms="formConfig">
        <template #searchBtn>
          <el-button  type="primary" :icon="Search" @click="initSearch">查询</el-button>
        </template>
      </diy-el-form>
    </div>
    <template v-if="!tablePartShow" #footer>
      <el-button  v-if="dialogFormOperationType != 'detail'" :icon="SuccessFilled" @click="conform">确定</el-button>
      <el-button @click="formClose" :icon="Close">返回</el-button>
    </template>
  </el-dialog>
</template>

<script>
import DiyElForm from "@/components/common/DiyElForm.vue";
import ElePagination from "@/components/common/ElePagination.vue";
import MyTable from "@/components/common/MyTable.vue";
import {Close, Delete, Edit, Plus, Search, SuccessFilled} from "@element-plus/icons-vue";
import {onBeforeMount, ref} from "vue";
import {
  unitManagerDepartmentSettingDialog
} from "@/data/all-form";
import {unitManagerDepartmentSettingDialogHeader} from "@/data/all-table-header";
import {usePagination} from "@/units/use-method/usePagination";
import {
  proDeleteXyxxJgfkDygx,
  proInsertXyxxJgfkDygx,
  proSelectXyxxAlxxZdyj,
  proUpdateXyxxJgfkDygx
} from "@/service/combined-rewards-and-punishments/combined-rewards-and-punishments-case-information/combined-rewards-and-punishments-case-information";
import {handleMes} from "@/units/element-ui/tip";
import {
  proXyxxDeleteDepartment,
  proXyxxInsertDepartment,
  proXyxxSelectDepartment,
  proXyxxUpdateDepartment
} from "@/service/system-manage/unit-manage/unit-manage";

export default {
  name: "UnitManageDepartmentSettingDialog",
  components: {DiyElForm, ElePagination, MyTable},
  computed: {
    Delete() {
      return Delete
    },
    Edit() {
      return Edit
    },
    Plus() {
      return Plus
    },
    SuccessFilled() {
      return SuccessFilled
    },
    Close() {
      return Close
    },
    Search(){
      return Search
    }
  },
  props:{
    dialogVisible:{  //是否可见

    },
    dialogOperationType:{   //操作类型

    },
    currentDialogObj:{   //当前选中信息

    },
  },
  setup(props,{emit}){
    const formRef = ref(null);
    const forms = ref({});
    const formConfig = ref({...unitManagerDepartmentSettingDialog});
    const headerConfig = ref([...unitManagerDepartmentSettingDialogHeader]);
    const {pageIndex,pageSize,tableData,totalCount,initSearch,handleSizeChange,refEl}  = usePagination(getTableData.bind(null));
    const tablePartShow =ref(true);
    const dialogFormOperationType =ref(null);
    function getTableData(){
      debugger
      proXyxxSelectDepartment({
        UNIT_CODE:props.currentDialogObj.UNIT_CODE,
        pageIndex:pageIndex.value,
        pageSize:pageSize.value
      }).then(res =>{
        let msg = res.msg[0];
        if(msg.TotalRowCount  > 0){
          let tempData = msg.Rows;
          tableData.value = tempData;
          totalCount.value = res.msg[0].TotalRowCount;
        }
      })
    }
    function handleClose(){
      emit('update:dialogVisible',false);
    }
    function conform(){
      debugger
      if(forms.value.DEPARTMENTID){  //修改
        proXyxxUpdateDepartment({
          UNIT_CODE: props.currentDialogObj.UNIT_CODE,
          DEPARTMENTNAME: forms.value.DEPARTMENT,
          DEPARTMENTNAMEID:forms.value.DEPARTMENTID
        }).then(res =>{
          handleMes(res,() => {
            formClose();
          })
        })
      }else{  //新增
        proXyxxInsertDepartment({
          UNIT_CODE: props.currentDialogObj.UNIT_CODE,
          DEPARTMENTNAME: forms.value.DEPARTMENT,
        }).then(res =>{
          handleMes(res,() => {
            formClose();
          })
        })
      }
    }
    function deleteDetail(data){
      debugger
      proXyxxDeleteDepartment({
        DEPARTMENTNAMEID: data.DEPARTMENTID
      }).then(res =>{
        handleMes(res,() => {
          getTableData()
        })
      })
    }
    function formClose(){
      tablePartShow.value = true;
      getTableData()
    }
    function showSingleDetail(type,data){
      debugger
      tablePartShow.value = false;
      formConfig.value.formAttrs.disabled=type === 'detail';
      dialogFormOperationType.value = type;
      if(data){
        forms.value = data;
      }else{
        forms.value = {};
      }
    }
    onBeforeMount(()=>{
      getTableData()
    })
    return {
      formRef,
      forms,
      formConfig,
      headerConfig,
      pageIndex,pageSize,tableData,totalCount,handleSizeChange,refEl,initSearch,
      handleClose,
      conform,
      formClose,
      tablePartShow,
      showSingleDetail,
      deleteDetail,
      dialogFormOperationType
    }
  }
}
</script>

<style scoped lang="scss">
.table-add{
  float: right;
  padding-bottom: 20px;
  padding-right: 20px;
}
</style>