<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" v-loading="loading">
      <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" :title="item.taskName">{{ item.taskName }}</p>
          <div class="ellipsis">
            <span v-for="item2 in item.taskUserList">{{ item2.userName }}&nbsp;</span>
          </div>
          <p class="ellipsis">
            {{
              item.status == 'to_start'
                ? '未开始'
                : item.status == 'proceed'
                ? '进行中'
                : item.status == 'done'
                ? '已完成'
                : item.status == 'expired'
                ? '超时'
                : ''
            }}
          </p>
          <p class="ellipsis reports" @click="checkReport(item)">详情</p>
        </div>
      </Vue3SeamlessScroll>
    </div>
  </div>

  <!-- 弹框 -->
  <el-dialog
    title="巡查日志详情"
    v-model="dialogShowXq"
    width="1200px"
    append-to-body
    :close-on-click-modal="false"
    class="dialog-detail-box"
  >
    <popupbox :DataList="DataList" :pathData="pathData" :pathGeometry="pathGeometry"></popupbox>
  </el-dialog>
</template>

<script setup>
import { patrolTaskpage, PatrolTaskID } from '@/api/longoPeration/inspectiontasks';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import popupbox from '@/views/longoPeration/Patrolmanagement/pop-upbox'; //详情弹框
const { proxy } = getCurrentInstance();
const date = ref(proxy.moment(new Date()).format('YYYY-MM'));
const dialogShowXq = ref(false);
const tableData = ref([]);
const loading = ref(true);
const DataList = ref([]);
const pathData = ref([]);
const pathGeometry = ref([]);
const AllData = reactive({
  queryParams: { pageNum: 1, pageSize: 20 },
});

const { queryParams } = toRefs(AllData);

/** 主任务搜索列表 */
const getList = async () => {
  loading.value = true;
  let res = await patrolTaskpage(queryParams.value);
  tableData.value = res.data || [];
  loading.value = false;
};
async function checkReport(row) {
  dialogShowXq.value = true;
  DataList.value = { ...row };

  let res = await PatrolTaskID(row.id);
  if (res && res.code == 200) {
    // console.log('res.data--', res.data);
    pathData.value = res.data.patrolPathLngLat;
    pathGeometry.value = res.data.patrolPath;
  }
}
getList();
</script>

<style lang="scss" scoped>
.ConstrucClass {
  width: 460px;
  height: 30%;
  background: #004565;
  opacity: 0.8;
  padding: 0px 10px;
  margin-top: -3px;
  .scrollMapHM {
    height: 100%;
    position: relative;
    top: 10px;
    p {
      width: 23%;
    }
    .reports {
      color: #3afff8;
    }
    .scroll {
      width: 100%;
      height: 72%;
      overflow: hidden;
      display: inline-block;
    }
  }
  .scrollCont {
    .ellipsis {
      width: 25%;
      text-align: center;
    }
  }
}
.head-right {
  cursor: pointer;
  position: relative;
  left: 240px;
  top: -33px;
  width: 150px;
  height: 32px;
  // background: red;
}
</style>