<template>
  <el-dialog
    :title="titleValue"
    width="1400px"
    :model-value="modelValue"
    append-to-body
    @close="closed"
  >
    <div>
      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
        <el-form-item label="所属部门">
          <MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
        </el-form-item>
       <el-form-item label="所属部门">
          <el-input clearable v-model="listQuery.mxmc" placeholder="请输入模型名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="handleFilter">查询</el-button>
          <el-button type="info" @click="reset()"> 重置 </el-button>
        </el-form-item>
      </el-form>
      <div class="tabBox" :class="props.Single ? 'tabBoxRadio' : ''" style="margin-top: 0px" >
        <el-table  ref="multipleUserRef" @selection-change="handleSelectionChange" :data="tableData" border :row-key="keyid" style="width: 100%" height="450">
        <el-table-column type="selection" width="55" :reserve-selection="true" />  
        <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>
      </div>
      <div class="fenye" :style="{ top: tableHeight + 'px' }">
        <el-pagination
          class="pagination"
          @pageSize-change="handleSizeChange"
          @pageCurrent-change="handleCurrentChange"
          :pageCurrent-page="listQuery.pageCurrent"
          :page-sizes="[10, 20, 50, 100]"
          :page-pageSize="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </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>
</template>

<script setup>
import { qcckGet} from "@/api/qcckApi.js";
import * as rule from "@/utils/rules.js";
import * as MOSTY from "@/components/MyComponents/index";
import { defineProps, ref, onMounted } from "vue";
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  titleValue: {
    type: String,
    default: "选择模型考核"
  },
  //是否单选
  Single: {
    type: Boolean,
    default: true
  },
  roleIds: {
    type: Array,
    default: []
  },
});
const total = ref(0);
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20
});
const form = ref({});
const tableData = ref([]);
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
onMounted(() => {
  handleFilter();
});
const closed = () => {
  emits("update:modelValue", false);
};
const reset = () => {
  listQuery.value = {
    pageCurrent: 1,
    pageSize: 20,
    loginName: "",
    phone: ""
  };
  getListData();
};

const keyid = (row) => {
  return row.id;
};
// 为用户分配角色
const onComfirm = () => {
  const userList = multipleSelectionUser.value;
  let list = []
  let listId = []
  userList.forEach(val=>{
    if(listId.indexOf(val.id) == -1) {
      list.push(val);
      listId.push(val.id);
    }
  })
  emits("choosedDate", list);
  let data = { list: userList };
  closed();
};
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getListData();
};
const getListData = () => {
  qcckGet(listQuery.value,'/mosty-jcgl/tbjcglKhmx/selectPage').then(res=>{
    tableData.value = res?.records;
    total.value = Number(res.total);
    multipleUser()
  });
};

//列表回显
function multipleUser() {
  tableData.value.forEach(item=>{
    if(props.roleIds.some(id=>id == item.id)){
      multipleUserRef.value.toggleRowSelection(item, true);
    }
  })
}

const handleFilter = () => {
  listQuery.value.pageCurrent = 1;
  getListData();
};

const multipleUserRef = ref(null);
const multipleSelectionUser = ref([]);
const handleSelectionChange = (val) => {
  if (props.Single) {
    if (val.length > 1) {
      let del_row = val.shift();
      multipleUserRef.value.toggleRowSelection(del_row, false);
    }
    multipleSelectionUser.value = val;
  } else {
    multipleSelectionUser.value = val;
  }

};
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";
</style>
<style>
.tabBoxRadio .el-checkbox__inner {
  border-radius: 50% !important;
}
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
  display: none;
}
.el-dialog{
    background: #050e33;
}
.el-dialog__title{
    color: #fff;
}
</style>
