<template>
  <MOSTY.PageTree :pageTitle="'车辆维保记录'" :searchType="'03'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
    </template>
    <template #table>
      <el-divider />
      <section class="eltab3">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
          <template #type="{ row }">
            <dict-tag v-if="row.type" :options="D_BZ_WXSQDLX" :value="row.type" :tag="false" />
            <span v-else>无</span>
          </template>
          <template #status="{ row }">
            <span v-if="row.status == '6'" style="color: green;">完成（已归入车辆技术档案）</span>
            <dict-tag v-if="row.status <= '5'" :options="D_BZ_WXSQD_STATE" :value="row.status" color="red"
              :tag="false" />
          </template>
          <template #actions="{ row }">
            <span class="operesee" @click="seeInfo(row)">
              <el-icon>
                <View />
              </el-icon>查看</span>
            <el-popconfirm v-if="isShowDelBtn && row.status != 6" confirm-button-text="是" cancel-button-text="否"
              icon-color="red" title="确定要删除?" @confirm="handleDel(row)">
              <template #reference>
                <span class="operdel" size="small">
                  <el-icon>
                    <Delete />
                  </el-icon>
                  删除</span>
              </template>
            </el-popconfirm>
          </template>
        </MOSTY.Table>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize"></MOSTY.Pages>
        </div>
      </section>
    </template>
  </MOSTY.PageTree>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { reactive, ref, getCurrentInstance, computed, onMounted } from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_WXSQDLX, D_BZ_WXSQD_STATE } = proxy.$dict("D_BZ_WXSQDLX", "D_BZ_WXSQD_STATE");
import { filterqx } from "@/utils/auth.js";
const emit = defineEmits("changePage");


/** 是否是车管员 */
const isCarManager = ref(false);
/** 是否显示删除按钮 车管员或者 车管员 */
const isShowDelBtn = computed(() => {
  return filterqx("isaqbm") == "1" || isCarManager.value
})


//	查询 是否为车管员
function getIscgy() {
  getApi({}, '/mosty-jcgl/sprole/judgeSprole').then(res => {
    if (res) {
      isCarManager.value = res;
    }
  })
}

const searchArr = reactive([
  {
    showType: "input",
    prop: "carnumber",
    placeholder: "请输入车辆号牌"
  },
  {
    showType: "daterange",
    prop: "timelist",
    placeholder: "请选择时间段"
  },
  {
    showType: "select",
    prop: "type",
    placeholder: "请选择维修类型",
    options: D_BZ_WXSQDLX,
  },
]);
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "车牌号",
      prop: "carnumber"
    },
    {
      title: "类型",
      prop: "type",
      slot: true
    },
    {
      title: "维修时间",
      prop: "addtime"
    },
    {
      title: "驾驶员",
      prop: "username"
    },
    {
      title: "维修单位",
      prop: "xgfname"
    },
    // {
    //   label: "驾驶员",
    //   prop: "username",
    //   showOverflowTooltip: true,
    //   sortable: false
    // },
    {
      title: "当前环节",
      prop: "status",
      slot: true
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],

  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  },
});
const handleDel = (row) => {
  postApi([row.id], `/mosty-jcgl/sqd/delCarWxsqd`).then((res) => {
    ElMessage.success("删除成功");
    getTableData();
  })
}
//分页
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  getTableData();
};
// 查询数据
const onSearch = (obj) => {
  listQuery.carnumber = obj.carnumber
  listQuery.type = obj.type
  listQuery.startTime = obj.timelist ? obj.timelist[0] : ''
  listQuery.endTime = obj.timelist ? obj.timelist[1] : ''
  getTableData();
};
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20
});
//获取部门数据
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  getTableData();
};
//选中的数据


const tableloading = ref(false);
function getTableData() {
  tableloading.value = true;
  getApi(listQuery, `/mosty-jcgl/sqd/getPageList`).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 seeInfo = (row) => {
  let arr = {
    title: "车辆维保记录详情",
    saveBtnShow: false,
    wbjlShow: true,
    jcrzShow: true,
    id: row.id ? row.id : null
  };
  emit("changePage", "Details", arr);
};

onMounted(() => {
  getIscgy()
});
</script>

<style lang="scss" scoped>
.eltab3 {
  height: calc(100vh - 339px)
}
</style>
