<template>
  <div class="max-box">
    <!-- 左边 -->
    <div class="select-box">
      <div class="depar_hear">
        <el-input
          v-model="filterText"
          clearable
          :debounce="500"
          @input="filterTextChange"
          placeholder="请输入筛选条件"
        />
      </div>
      <el-tree
        ref="treeRef"
        :data="allPermission"
        :props="defaultProps"
        node-key="id"
        show-checkbox
        default-expand-all
        :default-checked-keys="defaultssbmidList"
        :check-strictly="true"
        @check="checkeTree"
      >
      </el-tree>
    </div>
    <!-- 中间 -->
    <div class="btn-box">
      <p @click="addBmEvent">添加部门</p>
      <p @click="clearBmEvent">移除部门</p>
    </div>
    <!-- 右边 -->
    <div class="tabBox">
      <el-table
        @selection-change="handleSelectionChange"
        :data="tableData"
        border
        :row-key="keyCount"
        style="width: 100%"
        :height="tableHeight"
      >
        <el-table-column
          type="selection"
          width="45"
          :reserve-selection="true"
        />
        <el-table-column
          label="序号"
          type="index"
          align="center"
          sortable
          width="45"
        />
        <el-table-column
          sortable
          prop="ssbm"
          align="center"
          label="部门"
          show-overflow-tooltip
        />
        <el-table-column
          prop="tjrxm"
          align="center"
          label="添加人"
          show-overflow-tooltip
        />
        <el-table-column
          prop="tjsj"
          label="添加时间"
          show-overflow-tooltip
          width="120"
        />
        <el-table-column
          prop="mxmc"
          align="center"
          label="模型名称"
          width="120"
        />
        <el-table-column
          prop="ybb"
          align="center"
          label="应报备"
        />
        <el-table-column
          prop="zsbb"
          align="center"
          label="最少报备"
        />
        <el-table-column
          prop="bbf"
          align="center"
          label="报备得分"
          width="120"
        />
        <el-table-column
          prop="bbkf"
          align="center"
          label="报备扣分"
          width="120"
        />
        <el-table-column
          prop="ycr"
          align="center"
          label="应查人"
        />
        <el-table-column
          prop="zscr"
          align="center"
          label="最少查人"
        />
        <el-table-column
          prop="crf"
          align="center"
          label="查人分"
        />
        <el-table-column
          prop="crkf"
          align="center"
          label="查人扣分"
        />
        <el-table-column
          prop="ycc"
          align="center"
          label="应查车"
        />
        <el-table-column
          prop="zscc"
          align="center"
          label="最少查车"
        />
        <el-table-column
          prop="ccf"
          align="center"
          label="查车分"
        />
        <el-table-column
          prop="cckf"
          align="center"
          label="查车扣分"
        />
        <el-table-column
          prop="ycw"
          align="center"
          label="应查物品"
          width="120"
        />
        <el-table-column
          prop="zscw"
          align="center"
          label="最少查物"
          width="120"
        />
        <el-table-column
          prop="cwf"
          align="center"
          label="查物品得分"
        />
        <el-table-column
          prop="cwkf"
          align="center"
          label="查物扣分"
        />
        <el-table-column
          prop="yxl"
          align="center"
          label="应巡逻"
        />
        <el-table-column
          prop="zsxl"
          align="center"
          label="最少巡逻"
        />
        <el-table-column
          prop="xlf"
          align="center"
          label="巡逻分"
        />
        <el-table-column
          prop="xlkf"
          align="center"
          label="巡逻扣分"
        />
        <el-table-column
          prop="yqs"
          align="center"
          label="应签收"
        />
        <el-table-column
          prop="zsqs"
          align="center"
          label="最少签收"
        />
        <el-table-column
          prop="qsf"
          align="center"
          label="签收分"
        />
        <el-table-column
          prop="qskf"
          align="center"
          label="签收扣分"
        />
        <el-table-column
          prop="yxlsc"
          align="center"
          label="应巡逻时长"
        />
        <el-table-column
          prop="zsxlsc"
          align="center"
          label="最少巡逻时长"
        />
        <el-table-column
          prop="xlscf"
          align="center"
          label="巡逻时长分"
        />
        <el-table-column
          prop="xlsckf"
          align="center"
          label="巡逻时长扣分"
        />
        <el-table-column
          prop="yxllc"
          align="center"
          label="应巡逻里程"
        />
        <el-table-column
          prop="zsxllc"
          align="center"
          label="最少巡逻里程"
        />
        <el-table-column
          prop="xllcf"
          align="center"
          label="巡逻里程分"
        />
        <el-table-column
          prop="xllckf"
          align="center"
          label="巡逻里程扣分"
        />
        <el-table-column
          align="center"
          label="操作"
          fixed="right"
          width="100"
        >
          <template #default="{ row }">
            <el-button
              @click="updateDict(row)"
              size="small"
            >修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div
        class="fenye"
        :style="{ top: tableHeight + 'px' }"
      >
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="openValue.pageCurrent"
          :page-sizes="[10,16,20, 50, 100]"
          :page-size="openValue.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      title="编辑部门"
      width="1600px"
      :model-value="modelValue"
      @close="closed"
      :destroy-on-close="true"
    >
      <div class="ccBox">
        <el-form
          :model="listQuery"
          :inline="true"
          label-width="110px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属部门">
                <el-input
                  disabled
                  v-model="listQuery.ssbm"
                  clearable
                  placeholder="请输入所属部门"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名">
                <el-input
                  disabled
                  v-model="listQuery.tjrxm"
                  clearable
                  placeholder="请输入姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="考核模型">
                <el-button @click="isShowMx = true">考核模型</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="numBox">
            <dle class="numBox-left">勤务报备</dle>
            <dlv class="numBox-right">
              <div class="right-item">
                <div class="child childone">
                  <span class="name">应报备</span>
                  <el-input-number v-model="listQuery.ybb"></el-input-number>个
                </div>
                <div class="child ">
                  <span class="name">最少报备</span>
                  <el-input-number v-model="listQuery.zsbb"></el-input-number>个
                </div>
                <div class="child childone">
                  <span class="name">报备总分</span>
                  <el-input-number v-model="listQuery.bbf"></el-input-number>分
                </div>
                <div class="child">
                  <span class="name">报备扣分</span>
                  <el-input-number v-model="listQuery.bbkf"></el-input-number>分
                </div>
              </div>
            </dlv>
          </div>

          <div class="numBox">
            <dle class="numBox-left">指令签收及巡逻情况</dle>
            <dlv class="numBox-right numBox-right-flex">
              <div class="right-item">
                <div class="child">
                  <span class="name">应签收</span>
                  <el-input-number v-model="listQuery.yqs"></el-input-number>个
                </div>
                <div class="child">
                  <span class="name">最少签收</span>
                  <el-input-number v-model="listQuery.zsqs"></el-input-number>个
                </div>
                <div class="child">
                  <span class="name">签收分</span>
                  <el-input-number v-model="listQuery.qsf"></el-input-number>分
                </div>
                <div class="child">
                  <span class="name">签收扣分</span>
                  <el-input-number v-model="listQuery.qskf"></el-input-number>分
                </div>
              </div>
              <div class="right-item">
                <div class="child">
                  <span class="name">应巡逻</span>
                  <el-input-number v-model="listQuery.yxl"></el-input-number>里程
                </div>
                <div class="child">
                  <span class="name">最少巡逻</span>
                  <el-input-number v-model="listQuery.zsxl"></el-input-number>里程
                </div>
                <div class="child">
                  <span class="name">巡逻分</span>
                  <el-input-number v-model="listQuery.xlf"></el-input-number>分
                </div>
                <div class="child">
                  <span class="name">巡逻扣分</span>
                  <el-input-number v-model="listQuery.xlkf"></el-input-number>分
                </div>

              </div>
            </dlv>
          </div>

          <div class="numBox">
            <dle class="numBox-left">巡逻时长及巡逻里程</dle>
            <dlv class="numBox-right numBox-right-flex">
              <div class="right-item">
                <div class="child">
                  <span class="name">应巡逻里程</span>
                  <el-input-number v-model="listQuery.yxllc"></el-input-number>公里
                </div>
                <div class="child">
                  <span class="name">最少巡逻里程</span>
                  <el-input-number v-model="listQuery.zsxllc"></el-input-number>公里
                </div>
                <div class="child">
                  <span class="name">巡逻里程总分</span>
                  <el-input-number v-model="listQuery.xllcf"></el-input-number>分
                </div>
                <div class="child">
                  <span class="name">巡逻里程扣分</span>
                  <el-input-number v-model="listQuery.xllckf"></el-input-number>分
                </div>
              </div>
              <div class="right-item">
                <div class="child">
                  <span class="name">应巡逻时长</span>
                  <el-input-number v-model="listQuery.yxlsc"></el-input-number>小时
                </div>
                <div class="child">
                  <span class="name">最少巡逻时长</span>
                  <el-input-number v-model="listQuery.zsxlsc"></el-input-number>小时
                </div>
                <div class="child">
                  <span class="name">巡逻时长总分</span>
                  <el-input-number v-model="listQuery.xlscf"></el-input-number>分
                </div>
                <div class="child">
                  <span class="name">巡逻时长扣分</span>
                  <el-input-number v-model="listQuery.xlsckf"></el-input-number>分
                </div>
              </div>
            </dlv>
          </div>

          <div class="numBox">
            <dle class="numBox-left">人员 、车辆 、物品盘查</dle>
            <dlv class="numBox-right numBox-right-flex">
              <div class="right-item">
                <div class="child">
                  <span class="name">应查人</span>
                  <el-input-number v-model="listQuery.ycr"></el-input-number>人
                </div>
                <div class="child">
                  <span class="name">最少查人</span>
                  <el-input-number v-model="listQuery.zscr"></el-input-number>人
                </div>
                <div class="child">
                  <span class="name">查人总分</span>
                  <el-input-number v-model="listQuery.crf"></el-input-number>分
                </div>
                <div class="child">
                  <span class="name">查人扣分</span>
                  <el-input-number v-model="listQuery.crkf"></el-input-number>分
                </div>
              </div>
              <div class="right-item">
                <div class="child">
                  <span class="name">应查车</span>
                  <el-input-number v-model="listQuery.ycc"></el-input-number>辆
                </div>
                <div class="child">
                  <span class="name">最少查车</span>
                  <el-input-number v-model="listQuery.zscc"></el-input-number>辆
                </div>
                <div class="child">
                  <span class="name">查车总分</span>
                  <el-input-number v-model="listQuery.ccf"></el-input-number>分
                </div>
                <div class="child">
                  <span class="name">查车扣分</span>
                  <el-input-number v-model="listQuery.cckf"></el-input-number>分
                </div>
              </div>
              <div class="right-item">
                <div class="child">
                  <span class="name">应查物</span>
                  <el-input-number v-model="listQuery.ycw"></el-input-number>个
                </div>
                <div class="child">
                  <span class="name">最少查物</span>
                  <el-input-number v-model="listQuery.zscw"></el-input-number>个
                </div>
                <div class="child">
                  <span class="name">查物总分</span>
                  <el-input-number v-model="listQuery.cwf"></el-input-number>分
                </div>
                <div class="child">
                  <span class="name">查物扣分</span>
                  <el-input-number v-model="listQuery.cwkf"></el-input-number>分
                </div>
              </div>
            </dlv>
          </div>

          <div class="numBox">
            <dle class="numBox-left">警情处置及巡防战果</dle>
            <dlv class="numBox-right numBox-right-flex">
              <div class="right-item">
                <div class="child">
                  <span class="name">警情处置</span>
                  <el-input-number v-model="listQuery.jqcz"></el-input-number>条
                </div>
                <div class="child">
                  <span class="name">最少处置</span>
                  <el-input-number v-model="listQuery.zscz"></el-input-number>条
                </div>
                <div class="child">
                  <span class="name">处置分</span>
                  <el-input-number v-model="listQuery.czf"></el-input-number>分
                </div>
                <div class="child">
                  <span class="name">处置扣分</span>
                  <el-input-number v-model="listQuery.czkf"></el-input-number>分
                </div>
              </div>
              <div class="right-item">
                <div class="child">
                  <span class="name">巡防战果</span>
                  <el-input-number v-model="listQuery.xfzg"></el-input-number>个
                </div>
                <div class="child">
                  <span class="name">标签人员和车辆</span>
                  <el-input-number v-model="listQuery.xfzg"></el-input-number>个
                </div>

                <div class="child">
                  <span class="name">巡防战果总分</span>
                  <el-input-number v-model="listQuery.xfzgf"></el-input-number>分
                </div>
                <div class="child">
                  <span class="name">巡防战果扣分</span>
                  <el-input-number v-model="listQuery.xfzgkf"></el-input-number>分
                </div>
              </div>
            </dlv>
          </div>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closed">取消</el-button>
          <el-button
            type="primary"
            @click="onComfirm"
          >确认</el-button>
        </div>
      </template>
    </el-dialog>
    <MxDialog
      v-model="isShowMx"
      :roleIds="mxIds"
      @choosedDate="choosedDate"
    />
  </div>
</template>

<script setup>
import MxDialog from "./mxDialog.vue";
import { ElMessage } from "element-plus";
import { debounce } from "lodash";
import { defineProps, watch, ref, onMounted, nextTick } from "vue";
import {
  addKhbm,
  getPageList,
  delKhbm,
  editKhbm,
  getAllKhbm
} from "@/api/performance";
import {
  saveRoleMenuInfo,
  getRoleMenuIds,
  getMenuTree,
  selectDeptPageKh
} from "@/api/user-manage";
const listQueryDefault = ref({});
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20
});

const isShowMx = ref(false);
const mxIds = ref([]);

onMounted(() => {
  listQueryDefault.value = JSON.parse(JSON.stringify(listQuery.value));
  getPermissionList();
});
// 数据相关
const tableData = ref([]);
const total = ref(0);
const keyCount = (row) => {
  return row.id;
};
const form = ref({});
const modelValue = ref(false);
const ssbmidList = ref([]); //左边树形选中的数组
const DelssbmidList = ref([]); //右边树形选中的数组
const defaultssbmidList = ref([]); //左边树形选中的数组
const filterText = ref("");
const closed = () => {
  modelValue.value = false;
  listQuery.value = JSON.parse(JSON.stringify(listQueryDefault.value));
  mxIds.value = [];
};
const openValue = ref({
  pageCurrent: 1,
  pageSize: 16,
  deptName: ""
});

// 选择模型
const choosedDate = (val) => {
  delete val[0].ssbm;
  delete val[0].ssbmdm;
  delete val[0].id;
  let litm = JSON.parse(JSON.stringify(val[0]));
  listQuery.value = { ...listQuery.value, ...litm };
  mxIds.value = val.map((item) => {
    return item.id;
  });
};

const onComfirm = () => {
  let params = { ...listQuery.value };
  editKhbm(params).then((res) => {
    ElMessage.success("操作成功");
    closed();
    getTableList();
  });
};
// 默认左边选中的数据
const _getAllKhbm = () => {
  getAllKhbm().then((res) => {
    defaultssbmidList.value = res;
  });
};
_getAllKhbm();
//所有权限
const allPermission = ref([]);
const getPermissionList = async () => {
  openValue.value.deptName = filterText.value || null;
  const res = await selectDeptPageKh(openValue.value);
  allPermission.value = res.records;
};

const getTableList = () => {
  getPageList(openValue.value).then((res) => {
    tableData.value = [];
    tableData.value = res.records;
    total.value = res.total;
  });
};
getTableList();
const treeRef = ref(null);
//属性结构配置
const defaultProps = {
  children: "childDeptList",
  label: "orgName",
  disabled: function (data, node) {
    if (defaultssbmidList.value) {
      for (let j = 0; j < defaultssbmidList.value.length; j++) {
        const element = defaultssbmidList.value[j];
        if (data.id == element) {
          return true;
        }
      }
    }
  }
};
//当前角色权限
const getRolePermission = async () => {
  const checkedKeys = await getRoleMenuIds(props.roleId);
  treeRef.value.setCheckedKeys(checkedKeys);
};

// 选中子节点，默认选中父节点
const checkeTree = (data) => {
  let thisNode = treeRef.value.getNode(data.id); // 获取当前节点
  const keys = treeRef.value.getCheckedKeys(); // 获取已勾选节点的key值
  ssbmidList.value = keys;
  if (thisNode.checked) {
    // 当前节点若被选中
    for (let i = thisNode.level; i > 1; i--) {
      // 判断是否有父级节点
      if (!thisNode.parent.checked) {
        // 父级节点未被选中，则将父节点替换成当前节点，往上继续查询，并将此节点key存入keys数组
        thisNode = thisNode.parent;
        // keys.push(thisNode.data.id);
      }
    }
  }
  treeRef.value.setCheckedKeys(keys); // 将所有keys数组的节点全选中
};
const handleSizeChange = (currentSize) => {
  openValue.value.pageSize = currentSize;
  getTableList();
};

const handleCurrentChange = (currentPage) => {
  openValue.value.pageCurrent = currentPage;
  getTableList();
};
const handleClick = (e) => {};
const commandValue = (type, command) => {
  return {
    type: type,
    command: command
  };
};
// 表格选中事件
const handleSelectionChange = (val) => {
  val.forEach((item) => {
    DelssbmidList.value.push(item.ssbmid);
  });
};

// 添加部门按钮
const addBmEvent = () => {
  addKhbm(ssbmidList.value).then((res) => {
    getTableList();
    _getAllKhbm();
  });
};
// 移除部门
const clearBmEvent = () => {
  for (let n = 0; n < DelssbmidList.value.length; n++) {
    const node = DelssbmidList.value[n];
    treeRef.value.setChecked(node, false); // 获取当前节点
  }
  delKhbm(DelssbmidList.value).then((res) => {
    getTableList();
    _getAllKhbm();
  });
};

// 修改table
const updateDict = (item) => {
  modelValue.value = true;
  listQuery.value = JSON.parse(JSON.stringify(item));
};
//防抖处理
const filterTextChange = debounce(inputChange, 500);
function inputChange(e) {
  openValue.deptName = e;
  getPermissionList();
}
</script>

<style lang="scss" scoped>
.max-box {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  box-sizing: border-box;
  .select-box {
    height: 89vh;
    width: 500px;
    overflow: auto;
  }
  .btn-box {
    // width: 9vw;
    width: 100px;
    height: 89vh;
    text-align: center;
    margin: 0 10px;
    padding-top: 150px;
    box-sizing: border-box;
    > p {
      cursor: pointer;
      background: #fff;
      border: 1px solid #dcdfe6;
      color: #606266;
      -webkit-appearance: none;
      text-align: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      outline: 0;
      margin: 0;
      transition: 0.1s;
      padding: 12px 20px;
      font-size: 14px;
      border-radius: 4px;
      color: #909399;
      background: #f4f4f5;
      border-color: #d3d4d6;
      margin: 10px 0;
    }
  }
  .tabBox {
    flex: 1;
  }
  .fenye {
    position: absolute;
    bottom: 30px;
    left: 0;
  }
}
::v-deep .el-table {
  border: 1px solid #0a467e;
}
::v-deep .el-form--inline .el-form-item {
  width: 100%;
}
.numBox {
  display: flex;
  margin: 2rem 12rem 0rem 12rem;
  border: 1px solid #006193;
  align-items: center;
  color: #fff;
  .numBox-left {
    width: 200px;
    text-align: center;
  }
  .numBox-right-flex {
    display: flex;
  }
  .numBox-right {
    flex: 1;
    margin-bottom: 2px;
    .right-item {
      flex: 1;
      border: 1px solid #006193;
      border-bottom: none;
      border-top: none;
      border-right: none;
      .child {
        border-bottom: 1px solid #006193;
        padding: 10px;
        box-sizing: border-box;
        .name {
          display: inline-block;
          width: 100px;
        }
      }
      ::v-deep .el-input-number__decrease {
        display: none;
      }
      ::v-deep .el-input-number__increase {
        display: none;
      }
      ::v-deep .el-input-number {
        width: 90px;
        margin-left: 30px;
        margin-right: 10px;
      }
      ::v-deep .el-input-number .el-input__inner {
        padding: 0;
      }
    }
    .child:nth-last-child(1) {
      border-bottom: none;
    }
    .childone {
      border-bottom: 1px solid #006193 !important;
    }
  }
}
.ccBox {
  .el-form {
    max-height: 70vh;
    overflow: hidden;
    overflow-y: auto;
  }
}
</style>
