<template>
  <div>
    <div class="titleBox">
       <!-- 头部 -->
      <PageTitle title="模型考核">
        <el-button type="primary" @click="addEdit('add', '')">
          <el-icon style="vertical-align: middle"> <CirclePlus /> </el-icon>
          <span style="vertical-align: middle">新增</span>
        </el-button>
        <el-button @click="delDictItem(ids)" :disabled="ids.length == 0" typeof="danger">
          <el-icon style="vertical-align: middle"><Delete /> </el-icon>
          <span style="vertical-align: middle">批量删除</span>
        </el-button>
      </PageTitle>
    </div>
    <!-- 搜索 -->
    <div ref="searchBox" class="searchBox" >
      <el-form :model="searchBox" :inline="true">
        <el-form-item label="所属部门">
          <MOSTY.Department width="100%" clearable v-model="searchBox.ssbmdm" />
        </el-form-item>
        <el-form-item label="所属部门">
          <el-input clearable v-model="searchBox.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>
    <!-- 表格 -->
    <div class="tabBox">
      <MyTable
        :tableData="pageData.tableData"
        :tableColumn="pageData.tableColumn"
        :tableHeight="pageData.tableHeight"
        :key="pageData.keyCount"
        :tableConfiger="pageData.tableConfiger"
        :controlsWidth="pageData.controlsWidth"
        @chooseData="chooseData"
      >
        <!-- 操作 -->
        <template #controls="{ row }">
          <el-button size="small" @click="addEdit('edit', row)">修改</el-button>
          <el-button size="small" @click="addEdit('detail', row)">详情</el-button>
          <el-button size="small" @click="delDictItem([row.id])">删除</el-button>
        </template>
      </MyTable>
      <Pages
        @changeNo="changeNo"
        @changeSize="changeSize"
        :tableHeight="pageData.tableHeight"
        :pageConfiger="{
          ...pageData.pageConfiger,
          total: pageData.total
        }"
      ></Pages>

    </div>
    <!-- 编辑详情 -->
    <EditAddForm ref="addEditDialog" @updateDate="getData"/>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Search from "@/components/aboutTable/Search.vue";
import EditAddForm from './editAddForm.vue'
import { qcckGet, qcckPost ,qcckDelete} from "@/api/qcckApi.js";
import { reactive, ref ,onMounted,getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const addEditDialog = ref();
const ids = ref([]);//多选
const searchBox = ref({}) //搜索框
const queryFrom = ref({})
const pageData = reactive({
  tableData: [], //表格数据
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType:'checkBox',
    loading:false
  },
  total: 0,
  pageConfiger: {
    pageSize: 10,
    pageNum: 1
  }, //分页
  controlsWidth: 210, //操作栏宽度
  tableColumn: [
    { label: "模型名称", prop: "mxmc"},

    { label: "应报备", prop: "ybb"},
    { label: "最少报备", prop: "zsbb"},

    { label: "报备得分", prop: "bbf"},
    { label: "报备扣分", prop: "bbkf"},

    { label: "应查人", prop: "ycr"},
    { label: "最少查人", prop: "zscr"},

    { label: "查人分", prop: "crf"},
    { label: "查人扣分", prop: "crkf"},

    { label: "应查车", prop: "ycc"},
    { label: "最少查车", prop: "zscc"},

    { label: "查车分", prop: "ccf"},
    { label: "查车扣分", prop: "cckf"},

    { label: "应查物品", prop: "ycw"},
    { label: "最少查物", prop: "zscw"},

    { label: "查物品得分", prop: "cwf"},
    { label: "查物扣分", prop: "cwkf"},

    { label: "应巡逻", prop: "yxl"},
    { label: "最少巡逻", prop: "zsxl"},

    { label: "巡逻分", prop: "xlf"},
    { label: "巡逻扣分", prop: "xlkf"},

    { label: "应签收", prop: "yqs"},
    { label: "最少签收", prop: "zsqs"},

    { label: "签收分", prop: "qsf"},
    { label: "签收扣分", prop: "qskf"},

    { label: "应巡逻时长", prop: "yxlsc"},
    { label: "最少巡逻时长", prop: "zsxlsc"},

    { label: "巡逻时长分", prop: "xlscf"},
    { label: "巡逻时长扣分", prop: "xlsckf"},

    { label: "应巡逻里程", prop: "yxllc"},
    { label: "最少巡逻里程", prop: "zsxllc"},

    { label: "巡逻里程分", prop: "xllcf"},
    { label: "巡逻里程扣分", prop: "xllckf"},

    { label: "所属部门代码", prop: "ssbmdm"},
  ]
});
onMounted(() => {
  getData() //获取数据
  tabHeightFn();
  proxy.mittBus.on("mittFn", (data) => {
    pageData.keyCount = data;
  });
});
// 搜索
const handleFilter = (val)=>{
  pageData.pageConfiger.pageNum = 1
  getData() //获取数据
}
// 获取数据
const getData = ()=>{
  let pramas = {
    pageSize:pageData.pageConfiger.pageSize,
    pageCurrent:pageData.pageConfiger.pageNum,
    ...queryFrom.value
  }
  pageData.tableConfiger.loading = true
  qcckGet(pramas,'/mosty-jcgl/tbjcglKhmx/selectPage').then(res=>{
    pageData.tableData = res.records || []
    pageData.tableConfiger.loading = false
    pageData.total = res.total
  }).catch(()=> { pageData.tableConfiger.loading = false })
}
// 新增
const addEdit =  (type,row)=>{
  addEditDialog.value.init(type,row)
}

// 多选
const chooseData = (val)=>{
  if(!val) return false;
  if(Array.isArray(val)) ids.value = val.map(v=>{ return v.id })
}
// 批量删除 
function delDictItem(row) {
  proxy.$confirm("确定要删除", "警告", {type: "warning"}).then(() => {
    qcckPost(row,'/mosty-jcgl/tbJcglXfCyry/bacth').then(() => {
      proxy.$message({type: "success", message: "删除成功" });
      pageData.pageConfiger.pageNum = 1
      getData();
    });
    }).catch(() => {
      proxy.$message.info("已取消");
  });
}

// 表格高度计算
const tabHeightFn = () => {
  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 244;
  window.onresize = function () { tabHeightFn(); };
};
</script>

<style>
.el-loading-mask{
  background: rgba(0,0,0,0.3);
}
</style>
