<template>
  <div>
    <MOSTY.PageTree :pageTitle="detailTitle + '列表'" :searchType="'03'" @getDeptId="getdeptId">
      <template #serach>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
        <el-divider />
        <section class="button">
          <el-button type="primary" @click="handleCz(null, 'add')">
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>新增</span>
          </el-button>
          <el-button type="primary" @click="showMb = true">
            <el-icon>
              <Download />
            </el-icon>
            <span>模板下载</span>
          </el-button>
          <el-button type="primary" @click="uploadFile">
            <el-icon>
              <UploadFilled />
            </el-icon>
            <span>{{ btnText }}</span>
          </el-button>
          <!-- 文件上传小东西 -->
          <input type="file" style="display: none;" @change="changeFile" ref="fileBtn">
        </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="handleCz(scope.row, 'show')"><el-icon>
                  <Compass />
                </el-icon>查看</span>
              <span class="operedit" @click="handleCz(scope.row, 'edit')"><el-icon>
                  <Edit />
                </el-icon>修改</span>
              <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                @confirm="handleCz(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>

    <!-- 模板下载页面 -->
    <DownloadMb v-model="showMb" @changeClose="closeMbData" />
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance, nextTick } from "vue";
import { filterYear } from "@/utils/auth.js";
import DownloadMb from "./downloadMb.vue";
import { ElMessage } from "element-plus";
import { uploadfilApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
const btnText = ref('')
const detailTitle = ref('')
const emit = defineEmits("changePage");
const searchArr = reactive([
  {
    showType: "select",
    prop: "year",
    width: '250px',
    defaultVal: new Date().getFullYear().toString(),
    options: filterYear(7),
  },
  {
    showType: "daterange",
    prop: "timeValue",
    width: '350px',
    placeholder: "开始时间",
  }
])
const fileBtn = ref()
// 模板下载页面
const showMb = ref(false)
// 数据
const { D_BZ_DRIVER_VTYPE, D_BZ_SGPD, D_BZ_SGZR2 } = proxy.$dict("D_BZ_DRIVER_VTYPE", "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: "",
  year: new Date().getFullYear(),
  type: props.editObj ? props.editObj.type : '10' // 10:超速行驶 20:疲劳驾驶 30:违章信息 40:群众举报 50:交通事故 60:酒后驾驶
});
const columns = reactive([
  {
    title: "驾驶员姓名",
    prop: "username",
  },
  {
    title: "车牌号",
    prop: "carnumber",
  },
  {
    title: "违规类型",
    prop: "type",
    slot: true
  },
  {
    title: "所属单位",
    prop: "orgname",
  },
  {
    title: "所属部门",
    prop: "deptname",
  },
])
const columnend = reactive([
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const data = reactive({
  // < !--超速行驶 -->
  tableColumn: [
    ...columns,
    {
      title: "起始时间",
      prop: "startTime",
    },
    {
      title: "起始位置",
      prop: "startAddr",
    },
    {
      title: "终止位置",
      prop: "endAddr",
    },
    {
      title: "时长(秒)",
      prop: "duration",
    },
    {
      title: "速度(km/h)",
      prop: "speed",
    },
    {
      title: "限速(km/h)",
      prop: "maxSpeed",
    },
    ...columnend
  ],
  // 疲劳驾驶
  tableColumn2: [
    ...columns,
    {
      title: "发生时间",
      prop: "happenTime",
    },
    {
      title: "违规描述",
      prop: "describes",
    },
    ...columnend
  ],
  //  违章信息、群众举报
  tableColumn3: [
    ...columns,
    {
      title: "发生时间",
      prop: "happenTime",
    },
    {
      title: "违章信息",
      prop: "describes",
    },
    {
      title: "违章扣分",
      prop: "score",
    },
    ...columnend
  ],
  // 交通事故
  tableColumn4: [
    ...columns,
    {
      title: "发生时间",
      prop: "happenTime",
    },
    {
      title: "事故判定",
      prop: "decide",
      slot: true
    },
    {
      title: "事故责任",
      prop: "duty",
      slot: true
    },
    ...columnend
  ],
  tableColumn5: [
    ...columns,
    {
      title: "酒驾时间",
      prop: "happenTime",
    },
    ...columnend
  ],
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  }
})
const tableColumn = ref(data.tableColumn)
// 导入模板数据
const uploadFile = () => {
  nextTick(() => {
    fileBtn.value.click()
  })
}

// 树的展开与折叠
const iconChange = ref(false);
const lfBoxWid = ref("40px");
const rgBoxWid = ref("calc(100% - 40px)");
// 获取表格数据
const tableloading = ref(false);
onMounted(() => {
  listQuery.type = props.editObj ? props.editObj.type : '10';
  tableloading.value = true;
  switch (listQuery.type) {
    case '10':
      btnText.value = '导入超速行驶记录Excel';
      detailTitle.value = '超速行驶记录'
      break;
    case '20':
      btnText.value = '导入疲劳驾驶记录Excel';
      detailTitle.value = '疲劳驾驶记录'
      break;
    case '30':
      btnText.value = '导入违章信息记录Excel';
      detailTitle.value = '违章信息记录'
      break;
    case '40':
      btnText.value = '导入群众举报记录Excel';
      detailTitle.value = '群众举报记录'
      break;
    case '50':
      btnText.value = '导入交通事故记录Excel';
      detailTitle.value = '交通事故记录'
      break;
    case '60':
      btnText.value = '导入酒后驾驶记录Excel';
      detailTitle.value = '酒后驾驶记录'
      break;
    default:
      btnText.value = '导入超速行驶记录Excel';
      detailTitle.value = '超速行驶记录'
      break;
  }


});
//获取部门数据
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.year = obj.year
  listQuery.pageCurrent = 1;
  data.pageConfiger.pageCurrent = 1
  getListData()
}
// 获取文件
const changeFile = () => {
  let file = fileBtn.value.files[0]
  if (!file) { return; }
  let data = new FormData()
  data.append('file', file);
  data.append('type', listQuery.type);
  uploadfilApi(data, `/mosty-jcgl/driverViolation/batchUpload`).then(() => {
    ElMessage.success("批量上传成功");
    listQuery.pageCurrent = 1;
    getListData();
  }).finally(() => {
    fileBtn.value.value = ''
  })
}
// 关闭模板下载页面
const closeMbData = (val) => {
  showMb.value = val
}


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

  postApi(listQuery, `/mosty-jcgl/driverViolation/queryTbDriverViolation`).then(
    (res) => {
      if (res.records) {
        tableloading.value = false;
        tableData.value = res.records;
        data.pageConfiger.total = res.total;
        switch (listQuery.type) {
          case '10':
            btnText.value = '导入超速行驶记录Excel';
            detailTitle.value = '超速行驶记录'
            tableColumn.value = data.tableColumn
            break;
          case '20':
            btnText.value = '导入疲劳驾驶记录Excel';
            detailTitle.value = '疲劳驾驶记录'
            tableColumn.value = data.tableColumn2
            break;
          case '30':
            btnText.value = '导入违章信息记录Excel';
            detailTitle.value = '违章信息记录'
            tableColumn.value = data.tableColumn3
            break;
          case '40':
            btnText.value = '导入群众举报记录Excel';
            detailTitle.value = '群众举报记录'
            tableColumn.value = data.tableColumn3
            break;
          case '50':
            btnText.value = '导入交通事故记录Excel';
            detailTitle.value = '交通事故记录'
            tableColumn.value = data.tableColumn4
            break;
          case '60':
            btnText.value = '导入酒后驾驶记录Excel';
            detailTitle.value = '酒后驾驶记录'
            tableColumn.value = data.tableColumn5
            break;
          default:
            btnText.value = '导入超速行驶记录Excel';
            detailTitle.value = '超速行驶记录'
            tableColumn.value = data.tableColumn
            break;
        }

      } else {
        tableData.value = [];
        tableloading.value = false;
      }
    }
  );
}
//详情
function handleCz(row, type) {
  if (type == 'add') {
    let obj = {
      title: "新增" + detailTitle.value,
      saveBtnShow: true,
      type: listQuery.type
    };
    emit("changePage", "Details", obj);
  } else if (type == 'edit') {
    let obj = {
      title: "修改" + detailTitle.value,
      saveBtnShow: true,
      type: listQuery.type,
      ...row
    };
    emit("changePage", "Details", obj);
  } else if (type == 'show') {
    let obj = {
      title: "查看" + detailTitle.value,
      saveBtnShow: false,
      type: listQuery.type,
      ...row
    };
    emit("changePage", "Details", obj);
  } else if (type == 'del') {
    postApi({}, "/mosty-jcgl/driverViolation/deleteTbDriverViolationOne/" + 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>