<template>
  <div class="cockpit-box fieldrigth">
    <div class="cockpit-box-item">
      <div class="box-head">
        <div class="head-title">视频监控</div>
      </div>
      <div class="box-body">
        <!-- <video controls
               preload="none"
               poster="@/assets/images/oneMap/videoPng.png">
          <source src="@/assets/images/oneMap/JK4.mp4"
                  type="video/mp4" />
        </video> -->
        <div class="timeSearch">
          <span>所选泵机</span>
          <el-select filterable
                     clearable
                     @change="bengjichange()"
                     v-model="webplayerdata.cameraIndexCode">
            <el-option v-for="item in allData.cameraList"
                       :key="item"
                       :label="item.cameraName"
                       :value="item.indexCode" />
          </el-select>
        </div>

        <webplayer class="rightvideobox"
                   :data="webplayerdata"
                   :refresh="webplayerdata.refresh"
                   :newindex="newindex">
        </webplayer>
      </div>
    </div>

    <div class="cockpit-box-item">
      <div class="box-head">
        <div class="head-title">前池液位</div>
      </div>
      <div class="box-body">
        <div class="timeSearch">
          <span> 时间范围</span>
          <el-date-picker v-model="allData.dateRange"
                          format="YYYY-MM-DD"
                          type="datetimerange"
                          range-separator="至"
                          @change="GetgetPoolLevel()"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          style="width: 150px"></el-date-picker>
        </div>
        <!-- 前池水位图表 -->
        <div class="qcswChartsBox">
          <qcswCharts :data="allData.chartInfo.data"
                      :refresh="allData.chartInfo.refresh"></qcswCharts>
        </div>
      </div>
    </div>

    <div class="cockpit-box-item">
      <div class="box-head">
        <div class="head-title">处理建议推荐</div>
      </div>
      <div class="box-body">
        <div class="box-right w100">
          <div class="table-head">
            <div class="flex2">前池水位(m)</div>
            <div class="flex6">处理方案</div>
            <div class="flex2">提出人</div>
          </div>

          <div class="box-table"
               style="height:calc(100% - 42px)">
            <div class="table-item"
                 v-for="(item, index) in allData.tableList"
                 :key="index + 1">
              <div class="flex2">{{ item.minValue }}</div>
              <div class="flex6">开启{{ item.openNum }}台泵</div>
              <div class="flex2">
                {{ item.nickName }}
                <!-- <img src="@/assets/images/oneMap/bzcall.png"
                     alt="" /> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
import qcswCharts from "./components/qcswCharts.vue";
const { proxy } = getCurrentInstance();
import moment from "moment";
import useUserStore from "@/store/modules/user";
const appStore = useUserStore();

import {
  facilityCameraInfo,
  pumpWorkConditionsList,
  getPoolLevel
} from "@/api/cockpit";

// import webplayer from "@/../public/static/h5player/webplayer.vue";

const webplayerdata = ref({
  cameraIndexCode: 'a352580066d541e1a70bf7c0ecafe422',
  name: '中原路铁路下穿',
  BTNconter: [true, true, true],
  addNum: true,  //true全屏的意思 不展示下方的控件
  refresh: 1,
})

const newindex = ref('123456') //单独给这个插件加数字 避免和其它插件id冲突

const props = defineProps({
  Getfutre: {
    type: Object,
  },
})

watch(
  () => props.Getfutre,
  (newValue, oldValue) => {
    console.log('props.Getfutre', props.Getfutre);
    Getcameralist()
    getchulijianyi()
    GetgetPoolLevel()
  },
  { immediate: false }
);


const allData = reactive({
  cameraList: [],
  tableList: [
    // {
    //   time: "04-25 19:00",
    //   name: "张三",
    //   value: "开启3台泵，持续30分钟",
    //   level: 1.8,
    // },
    // {
    //   time: "04-25 19:00",
    //   name: "张三",
    //   value: "开启3台泵，持续30分钟",
    //   level: 1.8,
    // },
    // {
    //   time: "04-25 19:00",
    //   name: "张三",
    //   value: "开启3台泵，持续30分钟",
    //   level: 1.8,
    // },
    // {
    //   time: "04-25 19:00",
    //   name: "张三",
    //   value: "开启3台泵，持续30分钟",
    //   level: 1.8,
    // },
  ],
  dateRange: [
    moment().format("YYYY-MM-DD 00:00:00"),
    moment().format("YYYY-MM-DD HH:mm:ss")
  ],
  chartInfo: {
    loading: false,
    data: [
      // { value: '120', name: '医疗', },
      // { value: '150', name: '餐饮', },
      // { value: '50', name: '工业', },
      // { value: '65', name: '建筑', },
      // { value: '115', name: '其他', },
    ],
    refresh: 1
  },
});

// 查询视频监控筛选列表
function Getcameralist () {
  facilityCameraInfo(props.Getfutre.pumpCode).then(res => {
    console.log('Getcameralist', res.data);
    allData.cameraList = res.data

    webplayerdata.value.cameraIndexCode = res.data[0].indexCode
    webplayerdata.value.refresh = Math.random()
  })
}

function bengjichange () {
  console.log('webplayerdata.value.cameraIndexCode', webplayerdata.value.cameraIndexCode);
  webplayerdata.value.refresh = Math.random()
}

// 调度规则(处理方案)
function getchulijianyi () {
  pumpWorkConditionsList(props.Getfutre.pumpCode).then(res => {
    console.log('getchulijianyi', res.data);
    allData.tableList = res.data
  })
}

// 调取前池液位接口
function GetgetPoolLevel () {
  let formdata = new FormData()
  formdata.append('stationCode', props.Getfutre.pumpCode)
  formdata.append('startTime', moment(allData.dateRange[0]).format("YYYY-MM-DD HH:mm:ss"))
  formdata.append('endTime', moment(allData.dateRange[1]).format("YYYY-MM-DD HH:mm:ss"))
  getPoolLevel(formdata).then(res => {
    console.log('getPoolLevel', res.data);
    allData.chartInfo.data = res.data
    allData.chartInfo.refresh = Math.random()
  })
}

onMounted(() => {
  console.log(allData.dateRange, 1111);
  // console.log(appStore.TitleIndex);
});


</script>
<style lang="scss" scoped>
//@import "@/assets/styles/floodControlDrainage.scss";
//@import "@/assets/styles/cockpit.scss";
/* CSS 代码 */
video {
  width: 100%; /* 设置宽度为父元素的宽度 */
  height: 100%; /* 设置高度为固定值 300px */
  object-fit: cover; /* 充满整个元素的大小 */
}

.box-body {
  .rightvideobox {
    display: block;
    width: 96%;
    // height: 96%;
    height: calc(98% - 42px);
    margin: 2%;
    padding: 2%;
    // background: url("@/assets/images/oneMap/shipinkuang.png") no-repeat;
    background-size: 100% 100%;

    video {
      width: 100%;
      height: 100%;
      // margin-bottom: 30px;
      object-fit: cover;
    }
  }
}

.timeSearch {
  display: flex;
  padding: 0 10px;
  width: 100%;
  height: 32px;
  background: rgba(13, 217, 254, 0.05);
  align-items: center;
  margin-top: 10px;
  span {
    margin-right: 20px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #f6f9fe;
  }
}

::v-deep(.el-input__wrapper) {
  background-color: rgba(13, 217, 254, 0.05) !important;
  border: none;
  box-shadow: none;
}
::v-deep .el-range-separator {
  color: #0dd9fe;
}
.qcswChartsBox {
  height: calc(100% - 42px);
  width: 100%;
}
.w100 {
  width: 100% !important;
}
.flex2 {
  flex: 2;
}
.flex6 {
  flex: 6;
}
img {
  vertical-align: bottom;
}
</style>