<template>
  <MOSTY.PageTree :pageTitle="'私车登记'" :searchType="'03'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch">
        <el-button @click="toAdd"><el-icon size="small">
            <Plus />
          </el-icon>新增</el-button>
        <!-- <el-button type="primary" @click="searchInfo">
          <el-icon>
            <Plus />
          </el-icon>
          <span>精确查询</span>
        </el-button> -->
      </MOSTY.Search>
    </template>
    <template #table>
      <div :style="{ height: totalHeight }">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
          <!-- 操作 -->
          <template #actions="{ row }">
            <span class="operedit" @click="editInfo(row)"><el-icon>
                <EditPen />
              </el-icon>修改</span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="handledelete(row)">
              <template #reference>
                <span class="operdel" size="small"><el-icon>
                    <Delete />
                  </el-icon>删除</span>
              </template>
            </el-popconfirm>
          </template>
        </MOSTY.Table>
      </div>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize"></MOSTY.Pages>
      </div>
    </template>
  </MOSTY.PageTree>
  <el-dialog v-model="dialogVisible" title="私车登记查询" :close-on-click-modal="false" width="500px" :show-close="false">
    <el-form :model="listQuery" :rules="rules" label-width="135px" class="demo-ruleForm.value">
      <div>
        <el-form-item label="车牌号">
          <el-input v-model="listQuery.carbrand" clearable style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="所属公司">
          <el-input v-model="listQuery.orgname" clearable style="width: 300px"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="savexgf"><el-icon>
            <DocumentChecked />
          </el-icon>确定 </el-button>
        <el-button type="primary" @click="resfrom"><el-icon>
            <Refresh />
          </el-icon>重置 </el-button>
        <el-button @click="dialogVisible = false"><el-icon>
            <DocumentDelete />
          </el-icon>关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";

import { ElMessage } from "element-plus";
import { postApi } from "@/api/tobAcco_api.js";
import { reactive, ref, onMounted } from "vue";
const emit = defineEmits("changePage");
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20
})
const tableloading = ref(false)
const searchArr = reactive([
  {
    showType: "input",
    prop: "anyname",
    placeholder: "请输入员工姓名和车牌号"
  }
]);
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "单位",
      prop: "orgname",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      title: "车牌号",
      prop: "carbrand",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      title: "员工姓名",
      prop: "username",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      title: "所属部门",
      prop: "userorgname",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      title: "联系电话",
      prop: "phonenumber",
      showOverflowTooltip: true,
      sortable: false
    },
    // {
    //   title: "驾驶证号",
    //   prop: "licensenumber",
    //   showOverflowTooltip: true,
    //   sortable: false
    // },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  tableConfiger: {
    showIndex: false,
    loading: false,
    height: '71vh'
  },
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  },
});
const totalHeight = ref()
onMounted(() => {
  totalHeight.value = `calc(100vh - 320px)`
});
const dialogVisible = ref(false);
//精确查询
const searchInfo = () => {
  resfrom()
  dialogVisible.value = true;
};
//重置
function resfrom() {
  listQuery.value.carbrand = '';
  listQuery.value.orgname = '';
}
function savexgf() {
  getTableData();
  dialogVisible.value = false;
}
//获取部门数据
const getdeptId = (val) => {
  listQuery.value.orgid = val.id;
  getTableData();
};
// 查询数据
const onSearch = (obj) => {
  listQuery.value.anyname = obj.anyname
  getTableData();
};
//获取列表数据
function getTableData() {
  tableloading.value = true
  postApi(listQuery.value, '/mosty-jcgl/privatecar/queryPrivatecar').then((res) => {
    if (res.records) {
      data.tableData = res.records;
      tableloading.value = false;
      data.pageConfiger.total = res.total;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  })
}
//新增
const toAdd = () => {
  let arr = {
    title: "私车登记新增",
    saveBtnShow: true,
    id: null
  };
  emit("changePage", "Details", arr);

};
//修改
const editInfo = (row) => {
  let arr = {
    title: "私车登记修改",
    saveBtnShow: true,
    id: row.id
  };
  emit("changePage", "Details", arr);
};
//删除
const handledelete = (row) => {
  postApi({}, `/mosty-jcgl/privatecar/deletePrivatecarOne/${row.id}`).then(res => {
    ElMessage.success("删除成功");
    getTableData();
  })
};
const changeNo = (val) => {
  listQuery.value.pageCurrent = val;
  data.pageConfiger.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.value.pageSize = val;
  data.pageConfiger.pageSize = val;
  getTableData();
};
</script>

<style lang="scss" scoped>
.usermanage {
  height: 84vh;
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .right {
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;

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

      .title {
        display: flex;
        margin-top: 10px;
        color: black;
        font-size: 20px;
      }
    }

    .fenye {
      top: 95%;
    }
  }
}
</style>
