<template>
  <div class="fullHeight">
    <div>
      <div class="searchBox whiteBlock">
        <el-form :inline="true" size="medium" :model="queryInfo" class="demo-form-inline">
          <el-form-item label="车辆/人员名称">
            <el-select v-model="queryInfo.devSn" placeholder="请选择">
              <el-option v-for="(item, index) in nameOptions" :key="index" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备序号">
            <el-select v-model="queryInfo.devSn" placeholder="请选择">
              <el-option v-for="(item, index) in numOptions" :key="index" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间">
            <el-date-picker
              v-model="daterange"
              @change="changeDate"
              type="daterange"
              :range-separator="$t('message.energyManage.to')"
              :start-placeholder="$t('message.energyManage.start')"
              :end-placeholder="$t('message.energyManage.end')"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="getProgressListData">查询</el-button>
            <el-button type="warning" plain @click="refreshBtn">刷新</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table_wrap whiteBlock">
        <vue-scroll>
          <el-table height="650" class="tables" :data="listData" lazy row-key="id">
            <el-table-column align="center" prop="id" label="车辆/人员名称">
              <template slot-scope="scope">
                <div v-if="scope.row.type === 1">
                  {{ scope.row.numberPlate }}
                </div>
                <div v-else>
                  {{ scope.row.personName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="devSn" label="设备序号"> </el-table-column>
            <el-table-column align="center" prop="id" label="当前位置">
              <template slot-scope="scope">
                <div style="white-space: nowrap;">
                  {{ scope.row.longitude + '，' + scope.row.latitude }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="batteryPercentage" label="电量百分比"></el-table-column>
            <el-table-column align="center" prop="cumulativeOperatingFuelConsumptionDay" label="当日累计油耗(L)"></el-table-column>
            <el-table-column align="center" prop="totalSleepTimeDay" label="当日累计休眠时长(H)"></el-table-column>
            <el-table-column align="center" prop="totalFuelConsumptionDay" label="当日累计作业油耗(L)"></el-table-column>
            <el-table-column align="center" prop="totalWorkTimeDay" label="当日累计作业时长(H)"></el-table-column>
            <el-table-column align="center" prop="createTime" label="上传时间"></el-table-column>
            <!-- 
                <el-table-column prop="endWarning" align="center" label="结束预警">
                  <template slot-scope="scope">
                    <div style="color: #fe6565;" v-if="scope.row.endWarning === 3">
                      {{ scope.row.endWarning == 1 ? '提前' : scope.row.endWarning == 2 ? '正常' : '逾期' }}
                    </div>
                    <div v-else>
                      {{ scope.row.endWarning == 1 ? '提前' : scope.row.endWarning == 2 ? '正常' : '逾期' }}
                    </div>
                  </template>
                </el-table-column> -->
          </el-table>
        </vue-scroll>
        <el-pagination
          class="pagerBox"
          style="position: absolute; top: 85%; left: 40%"
          @size-change="SizeChange"
          @current-change="CurrentChange"
          :current-page="pagInfo.pageNo"
          :page-sizes="$store.state.PAGESIZRS"
          :page-size="pagInfo.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="Number(pagInfo.total)"
          background
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getRealtimeRecordInfo, getCarDevOption } from '@/assets/js/api/carManage'
export default {
  components: {},
  mounted() {},
  data() {
    return {
      rowData: {},
      parentTaskName: '', // 用于存储父级taskName
      nameOptions: [
        {
          label: '未开始',
          value: 0
        },
        {
          label: '进行中',
          value: 1
        },
        {
          label: '已完成',
          value: 2
        }
      ],
      numOptions: [
        {
          label: '未开始',
          value: 0
        },
        {
          label: '进行中',
          value: 1
        },
        {
          label: '已完成',
          value: 2
        }
      ],
      pagInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0 //总条数
      },
      radio: 1,
      title: '',
      daterange: [],
      projectSn: '',
      createUserId: '',
      listData: [],
      uploadUrl: '',
      fileUrl: '',
      dialogVisible: false, //新增弹窗
      workerInfo: {
        taskName: '',
        startDate: '',
        finishDate: '',
        actualStartDate: '',
        actualFinishDate: '',
        dutyUserId: '',
        progressRatio: '',
        remark: '',
        parentId: 0,
        status: 0
      },
      principalLsit: [], //负责人
      seedId: '',
      showTime: false, //工期
      queryInfo: {
        taskName: '',
        status: '',
        actualStartDate: '',
        actualFinishDate: '',
        devSn: ''
      },
      dialogImageUrl: '',
      showBigImg: false,
      times: '',
      fileName: ''
    }
  },
  computed: {
    headers() {
      return { Authorization: this.$store.state.userInfo.token }
    },
    dateAfter() {
      // 动态起始时间
      const startTimestamp = Date.now() * 1 - 24 * 60 * 60 * 1000
      const endTimestamp = Date.parse(this.workerInfo.finishDate) * 1 - 24 * 60 * 60 * 1000
      return {
        disabledDate(time) {
          const timestamp = time.getTime()
          if (endTimestamp) {
            if (timestamp >= startTimestamp && timestamp <= endTimestamp) {
              return false
            } else {
              return true
            }
          } else {
            return timestamp <= startTimestamp
          }
        }
      }
    },
    dateBefore() {
      // 动态起始时间
      // const startTimestamp = Date.parse(this.workerInfo.startDate)
      const specifiedDate = new Date(this.workerInfo.startDate) // 指定的日期
      const prevDay = new Date(specifiedDate) // 创建一个新的 Date 对象，使用同样的日期
      prevDay.setDate(specifiedDate.getDate() - 1) // 将日期设置为前一天的日期

      const lastTime = prevDay.getTime() // 获取前一天的时间戳
      // const startTimestamp = new Date(this.workerInfo.startDate)
      return {
        disabledDate(time) {
          const timestamp = time.getTime()
          if (timestamp > lastTime) {
            // console.log("计划结束时间",startTimestamp,timestamp)
            return false
          }
          return true
        }
      }
    },
    actualDateBefore() {
      // 动态起始时间
      // const startTimestamp = Date.parse(this.workerInfo.startDate)
      const specifiedDate = new Date(this.workerInfo.actualStartDate) // 指定的日期
      const prevDay = new Date(specifiedDate) // 创建一个新的 Date 对象，使用同样的日期
      prevDay.setDate(specifiedDate.getDate() - 1) // 将日期设置为前一天的日期

      const lastTime = prevDay.getTime() // 获取前一天的时间戳
      // const startTimestamp = new Date(this.workerInfo.startDate)
      return {
        disabledDate(time) {
          const timestamp = time.getTime()
          if (timestamp > lastTime) {
            // console.log("计划结束时间",startTimestamp,timestamp)
            return false
          }
          return true
        }
      }
    }
  },

  created() {
    this.projectSn = this.$store.state.projectSn
    this.createUserId = this.$store.state.userInfo.userId
    this.uploadUrl = this.$store.state.UPLOADURL
    this.fileUrl = this.$store.state.FILEURL
    this.getProgressListData()
    this.getCrewListData()
  },
  methods: {
    //获取列表数据
    getProgressListData() {
      let data = {
        pageNo: this.pagInfo.pageNo,
        pageSize: this.pagInfo.pageSize,
        devSn: this.queryInfo.devSn,
        createTime_begin: this.queryInfo.actualStartDate,
        createTime_end: this.queryInfo.actualFinishDate
      }
      getRealtimeRecordInfo(data).then(res => {
        if (res.code == 200) {
          this.listData = res.result.records
          this.pagInfo.total = res.result.total
        }
      })
    },
    //获取查询下拉
    getCrewListData() {
      let data = {
        projectSn: this.projectSn
      }
      getCarDevOption(data).then(res => {
        if (res.code == 200) {
          const filterArray = res.result.filter(item => item.numberPlate == "").map(item => ({ devSn: item.devSn, personName: item.personName }));
          let nameOption = filterArray.map(item => {
            return {
              label: item.personName,
              value: item.devSn
            }
          })
          const filteredArray = res.result.filter(item => item.personName == null).map(item => ({ devSn: item.devSn, numberPlate: item.numberPlate }));
          let carOption = filteredArray.map(item => {
            return {
              label: item.numberPlate,
              value: item.devSn
            }
          })
          this.nameOptions = nameOption.concat(carOption)
          console.log('车牌号/名字下拉', nameOption,carOption)
          this.numOptions = res.result.map( (item)=> {
            return {
              label: item.devSn,
              value: item.devSn
            }
          } )
          console.log('设备devSn', this.numOptions)

        } else {
          this.$message.error(res.message)
        }
      })
    },
    //刷新
    refreshBtn() {
      this.daterange = []
      this.pagInfo.pageNo = 1
      this.pagInfo.pageSize = 10
      this.queryInfo = {
        status: '',
        actualStartDate: '',
        actualFinishDate: '',
        taskName: ''
      }
      this.getProgressListData()
    },
    SizeChange(val) {
      this.pagInfo.pageSize = val
      this.getProgressListData()
    },
    CurrentChange(val) {
      this.pagInfo.pageNo = val
      this.getProgressListData()
    },
    //---------------
    //关闭详请组件
    changeDate() {
      if (this.daterange) {
        this.queryInfo.actualStartDate = this.daterange[0]
        this.queryInfo.actualFinishDate = this.daterange[1]
      } else {
        this.queryInfo.actualStartDate = ''
        this.queryInfo.actualFinishDate = ''
      }
    },
    validateInput() {
      let value = parseInt(this.workerInfo.progressRatio, 10)
      if (isNaN(value) || value < 0 || value > 100 || Math.floor(value) !== value) {
        this.workerInfo.progressRatio = ''
      }
    },
    time1(val) {
      console.log('开始时间', val)
      this.times = val
    },
    time2(val) {
      console.log('结束时间', val)
    }
  }
}
</script>
<style lang="less" scoped>
.down {
  text-decoration: none;
  color: #fff;
}
.expintBtn {
  display: inline-block !important;
  margin-right: 10px;
}
.table_wrap {
  margin-top: 15px;
  height: 700px;
  overflow: auto;
}
.delete-btn {
  color: #fe6565;
}
.dialogUplod {
  height: 100px;
  margin-left: 70px;
  margin-top: 40px;
  div {
    margin-bottom: 20px;
  }
}
</style>
