<template>
  <div class="partTitleHM">
    巡查任务
    <div class="head-right" style="">
      <el-form-item label="" prop="date">
        <el-date-picker
          type="month"
          v-model="queryParams.date"
          value-format="YYYY-MM"
          placeholder="请选择年月"
          size="small"
          style="width: 100%"
        ></el-date-picker>
      </el-form-item>
    </div>
  </div>
  <div class="ConstrucClass">
    <div class="scrollMapHM">
      <div class="scrollTitle flex">
        <p>巡查任务名称</p>
        <p>巡查人员</p>
        <p>巡查状态</p>
        <p>操作</p>
      </div>
      <Vue3SeamlessScroll :list="tableData" :singleHeight="53" :singleWaitTime="1500" :hover="true" class="scroll">
        <div class="scrollCont flex" v-for="item in tableData" :key="item.id">
          <p class="ellipsis">{{ item.start }}</p>
          <p class="ellipsis">{{ item.end }}</p>
          <p class="ellipsis">{{ item.yq }}</p>
          <p class="ellipsis">{{ item.num }}mm</p>
          <p class="ellipsis reports" @click="checkReport(item)">详情</p>
        </div>
      </Vue3SeamlessScroll>
    </div>
  </div>
</template>

<script setup>
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
const tableData = ref([
  { start: '海绵项目1', end: '李强', yq: '小雨', num: '正在巡查', id: 1 },
  { start: '海绵项目2', end: '李强', yq: '大雨', num: '结束巡查', id: 1 },
]);
const AllData = reactive({
  queryParams: {},
});
const { queryParams } = toRefs(AllData);
</script>

<style lang="scss" scoped>
.ConstrucClass {
  width: 100%;
  height: 30%;
  background: #07347f;
}
.head-right {
  cursor: pointer;
  position: relative;
  left: 240px;
  top: -33px;
  width: 150px;
  height: 32px;

  // background: red;
}
</style>