<template>
  <div>
    <MOSTY.PageTree pageTitle="酒驾抽检列表" :searchType="'03'" @getDeptId="getdeptId">
      <template #serach>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
        <el-divider />
        <section class="button">
          <el-button type="primary" @click="onAdd(null, 'add')">
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>新增</span>
          </el-button>
        </section>
      </template>
      <template #table>
        <section class="eltab3">
          <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
            :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
            <template #type="{ row }">
              <dict-tag :options="D_BZ_DRIVER_VTYPE" :value="row.type" :tag="false" />
            </template>
            <template #decide="{ row }">
              <dict-tag :options="D_BZ_SGPD" :value="row.decide" :tag="false" />
            </template>
            <template #duty="{ row }">
              <dict-tag :options="D_BZ_SGZR2" :value="row.duty" :tag="false" />
            </template>
            <template #actions="scope">
              <span class="operesee" @click="onSee(scope.row, 'show')"><el-icon>
                  <Compass />
                </el-icon>查看</span>
              <span class="operedit" @click="onEdit(scope.row, 'edit')"><el-icon>
                  <Edit />
                </el-icon>修改</span>
              <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                @confirm="onDel(scope.row, 'del')">
                <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="handleCurrentChange"
              @changeSize="handleSizeChange">
            </MOSTY.Pages>
          </div>
        </section>
      </template>
    </MOSTY.PageTree>

    <!-- 模板下载页面 -->
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance, nextTick } from "vue";
import { filterYear } from "@/utils/auth.js";
import { ElMessage } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
const detailTitle = ref('')
const emit = defineEmits("changePage");
const searchArr = reactive([
  {
    showType: "input",
    prop: "keywords",
    width: '250px',
    placeholder: "查询人员名称",
  },
  {
    showType: "daterange",
    prop: "timeValue",
    width: '350px',
    placeholder: "开始时间",
  }
])

// 数据
// const {D_BZ_SGPD, D_BZ_SGZR2 } = proxy.$dict( "D_BZ_SGPD", "D_BZ_SGZR2");
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { },
  }
});
// 时间选择器
const timeValue = ref([])
const tableData = ref([]);
// 分页查询条件
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  orgid: "",
  keywords: null,
});


const tableColumn = ref([
  {
    title: "抽检地点",
    prop: "jcdd",
  },
  {
    title: "抽检时间",
    prop: "jcsj",
  },
  {
    title: "驾驶员",
    prop: "jsyName",
  },
  {
    title: "酒驾人员",
    prop: "yjJsyName",
  },
  {
    title: "醉驾人员",
    prop: "zjJsyName",
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])


// 树的展开与折叠
const iconChange = ref(false);
const lfBoxWid = ref("40px");
const rgBoxWid = ref("calc(100% - 40px)");
const data = reactive({
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  }
})
// 获取表格数据
const tableloading = ref(false);
onMounted(() => {
  // listQuery.type = props.editObj ? props.editObj.type : '10';
  // tableloading.value = true;

});
//获取部门数据
const getdeptId = (val) => {
  listQuery.orgid = val.id;
  listQuery.pageCurrent = 1;
  getListData();
};
const onSearch = obj => {
  if (obj.timeValue && obj.timeValue.length) {
    listQuery.startTime = obj.timeValue[0]
    listQuery.endTime = obj.timeValue[1]
  } else {
    listQuery.startTime = null
    listQuery.endTime = null
  }
  listQuery.keywords = obj.keywords
  listQuery.pageCurrent = 1;
  data.pageConfiger.pageCurrent = 1
  getListData()
}

function getListData() {
  tableloading.value = true;
  tableData.value = [];

  postApi(listQuery, `/mosty-jcgl/drunkDriving/getDrunkDrivingPage`).then(
    (res) => {
      if (res.records) {
        tableData.value = res.records;
        data.pageConfiger.total = res.total;

      } else {
        tableData.value = [];
        data.pageConfiger.total = 0;
      }
    }
  ).finally(() => {
    tableloading.value = false;
  });
}
const onAdd = () => {
  let obj = {
    title: "酒后抽检新增",
    saveBtnShow: true,
    // type: listQuery.type
  };
  emit("changePage", "Details", obj);
}
const onSee = (row) => {
  let obj = {
    title: "酒后抽检查看",
    saveBtnShow: false,
    ...row
  };

  emit("changePage", "Details", obj);
}
const onEdit = (row) => {
  let obj = {
    title: "酒后抽检编辑",
    saveBtnShow: true,
    ...row
  };
  emit("changePage", "Details", obj);
}
const onDel = (row) => {
  // /drunkDriving/deleteDrunkDriving/{id}
  getApi({}, "/mosty-jcgl/drunkDriving/deleteDrunkDriving/" + row.id).then(
    () => {
      ElMessage.success("删除成功");
      getListData();
    }
  );
}

//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  data.pageConfiger.currentSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  data.pageConfiger.pageCurrent = currentPage;
  getListData();
};

</script>

<style lang="scss" scoped>
.bigBox {
  display: flex;

}

.button {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 12px;
}

.eltab3 {
  height: calc(100vh - 381px)
}
</style>