<template>
  <div class="partTitleHM">
    巡查任务
    <div class="head-right" style="">
      <el-form-item label="">
        <el-date-picker
          type="month"
          v-model="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="50" :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.num }}</p>
          <p class="ellipsis reports" @click="checkReport(item)">详情</p>
        </div>
      </Vue3SeamlessScroll>
    </div>
  </div>

  <!-- 弹框 -->
  <el-dialog title="巡查日志详情" v-model="dialogShowXq" width="800px" append-to-body>
    <PatrolDialog></PatrolDialog>
  </el-dialog>
</template>

<script setup>
import PatrolDialog from './PatrolDialog';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';

const { proxy } = getCurrentInstance();
const date = ref(proxy.moment(new Date()).format('YYYY-MM'));

const dialogShowXq = ref(false);
const tableData = ref([
  { start: '海绵项目1', end: '李强', num: '正在巡查', id: 1 },
  { start: '海绵项目2', end: '李强', num: '已结束', id: 1 },
  { start: '海绵项目3', end: '李强', num: '正在巡查', id: 1 },
  { start: '海绵项目4', end: '李强', num: '已结束', id: 1 },
  { start: '海绵项目5', end: '李强', num: '已结束', id: 1 },
  { start: '海绵项目6', end: '李强', num: '已结束', id: 1 },
]);
const AllData = reactive({
  queryParams: {},
});

function checkReport() {
  dialogShowXq.value = true;
}

const { queryParams } = toRefs(AllData);
</script>

<style lang="scss" scoped>
.ConstrucClass {
  width: 100%;
  height: 30%;
  background: #003b6d;
  opacity: 0.8;
  padding: 10px;
  margin: auto;
  .scrollMapHM {
    height: 100%;
    position: relative;
    top: 10px;
    p {
      width: 23%;
    }
    .reports {
      color: #3afff8;
    }
    .scroll {
      width: 100%;
      height: calc(100% - 20%);
      overflow: hidden;
      display: inline-block;
    }
  }
}
.head-right {
  cursor: pointer;
  position: relative;
  left: 240px;
  top: -33px;
  width: 150px;
  height: 32px;
  // background: red;
}
</style>