<template>
  <div>
    <div class="bigBox">
      <!-- 组织机构信息 -->
      <div class="left" :style="{ width: lfBoxWid }">
        <div class="title">
          <div style="display: flex; align-items: center">
            <div class="pt5 mr5">
              <el-icon style="color: var(--el-color-primary) !important">
                <List />
              </el-icon>
            </div>
            <span class="zzjgxx" v-if="iconChange">组织机构信息</span>
          </div>
          <el-icon @click="handleCollapse" v-show="iconChange">
            <DArrowLeft />
          </el-icon>
          <el-icon @click="handleCollapse" v-show="!iconChange">
            <DArrowRight />
          </el-icon>
        </div>
        <div class="treeBox">
          <MOSTY.DepartmentTree width="100%" placeholder="管理部门ID" clearable filterable :searchType="'01'"
            @getdeptId="getdeptId" />
        </div>
      </div>
      <div class="right" :style="{ width: rgBoxWid }">
        <div class="head">
          <div class="title">{{ detailTitle + '列表' }}</div>
        </div>
        <el-divider />
        <section class="query-flex" ref="queryHeight">
          <section class="query-section">
            <el-select v-model="listQuery.year" filterable style='width:250px' @change="changeYear">
              <el-option v-for="item in filterYear(7)" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-date-picker @change="changeTime" class="ml12" v-model="timeValue" type="daterange" range-separator="至"
              style="width: 250px" start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" />
          </section>
          <div class="query-btn">
            <el-button @click="getListData" class="ml6">
              <el-icon>
                <Search />
              </el-icon> <span>查询</span></el-button>
            <el-button @click="handleRest">
              <el-icon>
                <Refresh />
              </el-icon> <span>重置</span></el-button>
          </div>
        </section>
        <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>
        <div class="tabsBox">
          <el-tabs v-model="listQuery.type" type="card" @tab-click="onTabClick">
            <el-tab-pane :label="item.label" :name="item.value" v-for="(item, i) in D_BZ_DRIVER_VTYPE" :key="i" />
          </el-tabs>
        </div>
        <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">
            <Pages :pageConfiger="data.pageConfiger" @changeNo="handleCurrentChange" @changeSize="handleSizeChange">
            </Pages>
          </div>
        </section>

      </div>
    </div>
    <!-- 模板下载页面 -->
    <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";
import Pages from "@/components/aboutTable/Pages/index.vue";
const { proxy } = getCurrentInstance();
const btnText = ref('导入超速行驶记录Excel')
const detailTitle = ref('超速行驶记录')
const emit = defineEmits("changePage");
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'
});
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",
    },
    {
      title: "事故责任",
      prop: "duty",
    },
    ...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 getdeptId = (val) => {
  listQuery.orgid = val;
  listQuery.pageCurrent = 1;
  getListData();
};
// 树的展开与折叠
const iconChange = ref(true);
const lfBoxWid = ref("300px");
const rgBoxWid = ref("calc(100% - 300px)");
// 获取表格数据
const tableloading = ref(false);
onMounted(() => {
  listQuery.type = props.editObj ? props.editObj.type : '10';

  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
}
// 切换年份
const changeYear = () => {
  listQuery.startTime = ''
  listQuery.endTime = ''
  listQuery.pageCurrent = 1;
  getListData();
}
function handleRest() {
  listQuery.startTime = ''
  listQuery.endTime = ''
  listQuery.year = ''
  listQuery.pageCurrent = 1;
  data.pageConfiger.pageCurrent = 1
  getListData();
}
function onTabClick() {
  listQuery.pageCurrent = 1;
  getListData();
}
const changeTime = () => {
  listQuery.pageCurrent = 1;
  if (timeValue.value && timeValue.value.length == 2) {
    listQuery.year = ''
    listQuery.startTime = timeValue.value[0]
    listQuery.endTime = timeValue.value[1]
  } else {
    listQuery.startTime = null
    listQuery.endTime = null
  }
  getListData();
}
// 方法
const handleCollapse = () => {
  iconChange.value = !iconChange.value;
  if (iconChange.value) {
    lfBoxWid.value = "300px";
    rgBoxWid.value = "calc(100% - 300px)";
  } else {
    lfBoxWid.value = "40px";
    rgBoxWid.value = "calc(100% - 40px)";
  }
};
function getListData() {
  tableData.value = [];
  tableloading.value = true;
  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;

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

    .el-icon {
      cursor: pointer;
    }
  }

  .left {
    width: 300px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      overflow: auto;
    }
  }

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

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

.tabBox {
  height: calc(100% - 70px);
  border-left: 0 !important;

  .el-table {
    height: 91%;
  }

  .fenye {
    top: 95%;
  }
}

.tabsBox {
  ::v-deep .el-tabs {
    .el-tabs__header {
      margin-bottom: 0;
      border-bottom: 0;

      .el-tabs__nav {
        border: none;
      }

      .el-tabs__item {
        background: var(--el-table-cell-bmx-backgroundcolor);
        border-top: 2px solid #fff;
        border-bottom: 2px solid #fff;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        line-height: 38px;
        margin: 0 1px;

        &.is-active {
          background: var(--el-color-primary);
          color: #fff;
          border-top: 2px solid var(--el-color-primary);
          border-bottom: 2px solid var(--el-color-primary);
        }
      }
    }
  }

  .toggle {
    position: absolute;
    z-index: 9;
    height: 40px;
    line-height: 40px;
    color: var(--el-color-primary);
    right: 13px;
    top: 10px;
    cursor: pointer;
    z-index: 9;

    .el-icon {
      margin-left: 5px;
      float: right;
      margin-top: 14px;
      transform: rotate(90deg);
      transition: all 0.25s ease;
    }

    &.active {
      .el-icon {
        transform: rotate(-90deg);
      }
    }
  }
}

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