<template>
  <div class="main g-p20 g-h">
    <base-search :dateValue="dateValue.arr" @update-dateValue="dateValue.arr = $event" isShowDate :isShowIpt="false"
      dateType="datetimerange" @on-search="onSearch" @reset="onReset">
      <el-button @click="onSelectData" class="select-data">选择数据源 +</el-button>
      <div class="tags">
        <el-tag style="background: #b2bfde; color: #7183ac; border-color: #a0b1dc" v-for="tag in tags.arr" :key="tag.name"
          class="mx-1" @close="tagClose(tag)" closable :type="tag.type">
          {{ tag.name }}
        </el-tag>
      </div>
    </base-search>
    <div class="content g-br-10 g-bg-fff g-p20" v-loading="historyData.loading">
      <el-descriptions :column="5" border v-for="(el, index) in historyData.items" class="list">
        <el-descriptions-item width="150" :label="el.time" label-align="center" align="center" class="list">
          <div class="list__item" v-for="item in el.records" :key="item.variableId">
            <div style="color: #666666">{{ item.variableName }}</div>
            <div style="font-weight: bold">{{ formatValue(item) }}</div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <el-empty description="暂无数据" v-if="historyData.items.length === 0" />
      <pro-pagination :pageObj="pageObj" class="pagination" :total="historyData.data.totalCount"
        v-if="historyData.items.length !== 0" ref="page" @change="pageChange"></pro-pagination>
    </div>
    <el-dialog style="border-radius: 10px" v-model="modal.open" :title="modal.title" width="75%" center destroy-on-close>
      <div class="dialog-content g-p20">
        <div v-for="item in varData.data">
          <div class="g-title">{{ item.groupName }}</div>
          <el-checkbox @change="onSelect(el, el.id)" :key="el.id" v-for="(el, i) in item.variables" v-model="el.check"
            :label="el.name"
            :disabled="!temporaryTags.arr.map((o: any) => o.id).includes(el.id) && temporaryTags.arr.length > 3"
            size="large" />
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="modal.hiddenModal()">取消</el-button>
          <el-button type="primary" @click="onOk"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="历史数据" lang="ts">
import { getDeviceGroupAndVariables, getGroupAndVariables } from '@/api'
import { getVariableRecords } from '@/api/variableRecord'
import { useSidebarStore } from '@/store/sidebar'
import { useModal } from '@/utils/hooks'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { useRequest } from '../../../utils/hooks'

const modal = useModal('选择数据源')
let pageObj = ref({
  SkipCount: 1,
  MaxResultCount: 10
})
let variableIds = reactive([])
const tags: any = reactive({
  arr: []
})
let temporaryTags: any = reactive({
  arr: []
})
const dateValue: any = reactive({
  arr: []
})
const page: any = ref(null)
const sidebar = useSidebarStore()
const historyData = useRequest(
  () =>
    getVariableRecords({
      deviceId: sidebar.equipmentInfo.id,
      variableIds: variableIds,
      startTime: dateValue.arr[0],
      endTime: dateValue.arr[1],
      MaxResultCount: pageObj.value.MaxResultCount,
      SkipCount: (pageObj.value.SkipCount - 1) * pageObj.value.MaxResultCount
    }),
  false
)
const varData = useRequest(() => getDeviceGroupAndVariables({ deviceId: sidebar.equipmentInfo.id }), false)
watchEffect(() => {
  if (sidebar.equipmentInfo.id) {
    varData?.getData()

    if (variableIds.length !== 0) {
      historyData?.getData()
    }
    // modal.title = varData.data[0].groupName
  }
})


onMounted(() => {
  dateValue.arr[0] = dayjs().format('YYYY-MM-DD 00:00:00')
  dateValue.arr[1] = dayjs().format('YYYY-MM-DD HH:mm:ss')
})


const pageChange = () => {
  historyData.getData()
}
const onReset = () => {
  variableIds = []
  temporaryTags.arr = []
  tags.arr = []
  pageObj.value = {
    SkipCount: 1,
    MaxResultCount: 10
  }
  dateValue.arr = [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
  varData.data = []
  varData.getData()
  historyData.items = []
}
  ;[].includes
const tagClose = (v: any) => {
  const index = tags.arr.findIndex((el: { id: number }) => el.id == v.id)
  tags.arr.splice(index, 1)
  temporaryTags.arr = tags.arr
  const ids = tags.arr.map((el: { id: any }) => el.id)
  varData.data.forEach((item: { variables: any[] }) => {
    item.variables.forEach((el) => {
      el.check = false
      if (ids.includes(el.id)) {
        el.check = true
      }
    })
  })
}
const onOk = () => {
  modal.hiddenModal()
  tags.arr = [...temporaryTags.arr]
}
// 搜索
const onSearch = (v: any) => {
  pageObj.value = {
    SkipCount: 1,
    MaxResultCount: 10
  }
  if (tags.arr.length === 0) return ElMessage.warning('请选择数据源')
  variableIds = tags.arr.map((item: { id: any }) => item.id)
  historyData.getData()
}
const onSelect = (v: any, id: number) => {
  if (v.check) {
    temporaryTags.arr.push(v)
  } else {
    const index = temporaryTags.arr.findIndex((el: { id: number }) => el.id == id)
    temporaryTags.arr.splice(index, 1)
  }
}
const onSelectData = () => {
  modal.showModal()
}
const formatValue = (el: any) => {
  if (el.value === 'true' || el.value === 'false') {
    return el.value === 'true' ? '动作' : '恢复'
  }
  return el.value + el.unit
}
</script>

<style lang="less" scoped>
.main {
  background: #c8cfdf;

  .select-data {
    width: 150px;
    height: 50px;
    background: #ffffff;
    border-radius: 10px;
    color: #597fda;
    margin-left: 15px;
  }

  .content {
    min-height: calc(100vh - 200px);
    position: relative;
    padding-bottom: 100px;

    .pagination {
      position: absolute;
      bottom: 20px;
      right: 40px;
    }

    .list {
      border: none;
      border-bottom: 1px solid rgba(239, 239, 239, 1);
    }

    .list__item {
      float: left;
      width: 20%;
      border-right: 1px solid #efefef;
      height: 50px;

      &:last-child {
        border-right: none;
      }
    }
  }

  .tags {
    margin: 0 5px;
    order: 5;
    margin-left: 15px;

    .el-tag {
      margin: 5px;
    }
  }

  ::v-deep(.tags) {
    .el-tag__close {
      color: #7183ac;

      &:hover {
        background-color: #fff;
      }
    }
  }

  .dialog-content {
    border: 2px solid #597fda;
    border-radius: 10px;
  }

  :deep(.content) {
    .el-descriptions {
      --el-descriptions-table-border: none;
      border: 1px solid rgba(239, 239, 239, 1);
    }

    .el-descriptions__table {
      border-bottom: none;
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
