<template>
  <div id="app" class="from_box">
    <div class="formdiv">
      <el-main class="el-table">
        <div class="buttons">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="companyName" placeholder="企业名称" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="deviceName" placeholder="设备名称" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search"
              >查询
              </el-button
              >
              <el-button
                type="warning"
                icon="el-icon-refresh-right"
                @click="Serortest"
              >重置
              </el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="SenortableData" border style="width: 100%">
          <el-table-column label="企业名称" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.companyName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="传感器编号" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.sensorId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属设备编号" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.deviceId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属设备名称" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.deviceName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="传感器名称" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.sensorName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="传感器单位" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.sensorUnit }}</span>
            </template>
          </el-table-column>
          <el-table-column label="阈值设置" align="center">
            <template slot-scope="scope">
              <el-button
                type="info"
                icon="el-icon-setting"
                circle
                @click="handleThreshold(scope.row)"
              />
              <el-button
                type="warning"
                icon="el-icon-lock"
                circle
                v-show="user.roleName!='企业用户'&&scope.row.editable!='1'"
                @click="unlockEdit(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="监控设置" align="center">
            <template slot-scope="scope">
              <el-button
                type="info"
                icon="el-icon-video-camera"
                circle
                @click="handleVideo(scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <span class="demonstration" />
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="pagination.num"
            :limit.sync="pagination.size"
            @pagination="Serortest"
          />
        </div>
        <!--        阈值设置-->
        <el-dialog
          title="设备阈值设置"
          :visible.sync="devicethreshold"
          width="50%"
        >
          <table
            ref="form"
            :model="form"
            label-width="120px"
            align="center"
            style="text-align: center"
            width="60%"
          >
            <tr>
              <td></td>
              <td style="text-align: center">低值</td>
              <td style="text-align: center">高值</td>
            </tr>
            <tr>
              <td style="text-align: center">安全</td>
              <td style="text-align: center">
                <el-input style="width: 120px" v-model="form.prelowValue" />
              </td>
              <td style="text-align: center">
                <el-input style="width: 120px" v-model="form.prehighValue" />
              </td>
            </tr>
            <tr>
              <td style="text-align: center">注意</td>
              <td style="text-align: center">
                <el-input style="width: 120px" v-model="form.intemplowValue" />
              </td>
              <td style="text-align: center">
                <el-input style="width: 120px" v-model="form.intemphighValue" />
              </td>
            </tr>
            <tr>
              <td style="text-align: center">警告</td>
              <td style="text-align: center">
                <el-input style="width: 120px" v-model="form.outtemplowValue" />
              </td>
              <td style="text-align: center">
                <el-input
                  style="width: 120px"
                  v-model="form.outtemphighValue"
                />
              </td>
            </tr>
            <tr>
              <td style="text-align: center">危险</td>
              <td style="text-align: center">
                <el-input style="width: 120px" v-model="form.DifprelowValue" />
              </td>
              <td style="text-align: center">
                <el-input style="width: 120px" v-model="form.DifprehighValue" />
              </td>
            </tr>
            <tr>
              <td style="text-align: center">现实危险</td>
              <td style="text-align: center">
                <el-input
                  style="width: 120px"
                  v-model="form.WindspeedlowValue"
                />
              </td>
              <td style="text-align: center">
                <el-input
                  style="width: 120px"
                  v-model="form.WindspeedhighValue"
                />
              </td>
            </tr>
          </table>
          <div align="center" style="margin-top: 19px" v-if="form.editable!='0'">
            <el-button type="primary" @click="deviceThresholds">提交</el-button>
            <el-button @click="devicethreshold = false">取消</el-button>
          </div>
        </el-dialog>
      </el-main>
      <!--    监控-->
      <el-dialog
        title="视频监控"
        :visible.sync="videoDialogVisible"
        width="70%"
        @close="closedFun"
      >
        <div class="buttons" style="width: 95%; margin: auto">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-add"
                @click="getTransferData"
              >关联监控
              </el-button
              >
            </el-form-item>
          </el-form>
          <el-table :data="videoData" border>
            <el-table-column
              fixed
              prop="detailName"
              label="监控名称"
              align="center"
            >
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                    scope.row.detailName
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed prop="puid" label="监控编号" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.puid }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="placeInfo" label="安装位置" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.placeInfo }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                    scope.row.type === 1 ? '化工' : '粉尘'
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              class-name="small-padding fixed-width"
              style="display: block"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  class="el-icon-view table-operation"
                  style="color: #2db7f5; margin-right: -30px"
                  type="text"
                  size="small"
                  @click="previewVideo(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
          <!-- <div class="block">
            <span class="demonstration" />
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="pagination.num"
              :limit.sync="pagination.size"
              @pagination="Serortest"
            />
          </div> -->
        </div>
      </el-dialog>
      <!--    监控-->
      <el-dialog
        title="视频监控"
        :visible.sync="addVideoDialogVisible"
        width="50%"
        @close="closedFun"
      >
        <div>
          <el-transfer
            v-model="yesData"
            :props="{ key: 'puid', label: 'detailName' }"
            :titles="['未关联', '已关联']"
            @change="handleChange"
            :data="noData"
          ></el-transfer>
        </div>
      </el-dialog>
      <el-dialog
        title="实时监控"
        :visible.sync="previewDialogVisible"
        width="60%"
        @close="stopPreviewVideo"
      >
        <div style="width: 50%;display: flex;justify-content: center;height:600px">
          <div v-if="hkVideoble">
            <hkVideo :key="timer" v-bind:cameraIndexCodeProp="cameraIndexCode" />
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import hkVideo from '../../components/Hikvision/video.vue'

export default {
  components: { Pagination, hkVideo },
  data() {
    return {
      companyName: '',
      deviceName: '',
      form: {},
      params: {},
      cameraIndexCode: null,
      videoData: null,
      deviceThreshold: null,
      SenortableData: null,
      videoDialogVisible: false,
      addVideoDialogVisible: false,
      previewDialogVisible: false,
      hkVideoble: false,
      devicethreshold: false,
      deviceId: null,
      sensorId: null,
      companyId: null,
      timer: null,
      total: 0,
      initCount: 0,
      noData: [],
      yesData: [],
      pagination: {
        size: 10,
        num: 1
      }
    }
  },
  created() {
    this.Serortest()
  },
  computed: {
    user() {
      return this.$store.state.account.user
    }
  },
  methods: {
    handleChange(value, direction, movedKeys) {
      // console.log(value, direction, movedKeys)
      //可以通过direction回调right/left 来进行操作，right：把数字移到右边，left把数据移到左边
      if (direction === 'right') {
        this.$post('/demp/info/sensorVideo', {
          deviceId: this.deviceId,
          sensorId: this.sensorId,
          videoIds: movedKeys
        }).then((r) => {
          this.$get('/demp/info/videoInfo/list', {
            companyId: this.companyId,
            sensorId: this.sensorId,
            pageSize: this.pagination.size,
            pageNum: this.pagination.num
          }).then((r) => {
            this.videoData = r.data.data.rows
            this.total = r.data.data.total
          })
        })
        // console.log(value, direction, movedKeys)
      }
      if (direction === 'left') {
        this.$delete('/demp/info/sensorVideo', {
          deviceId: this.deviceId,
          sensorId: this.sensorId,
          videoIds: movedKeys
        }).then((r) => {
          this.$get('/demp/info/videoInfo/list', {
            companyId: this.companyId,
            sensorId: this.sensorId,
            pageSize: this.pagination.size,
            pageNum: this.pagination.num
          }).then((r) => {
            this.videoData = r.data.data.rows
            this.total = r.data.data.total
          })
        })
      }
    },
    closedFun() {
    },
    handleThreshold(row) {
      this.form = {}
      this.form.deviceId = row.deviceId
      this.form.sensorId = row.sensorId
      this.deviceThreshold = null
      this.$get('/demp/info/deviceThreshold/list', {
        deviceId: row.deviceId,
        sensorId: row.sensorId
      }).then((r) => {
        console.log(r.data.data.rows)
        this.deviceThreshold = r.data.data.rows
        if (Object.keys(this.deviceThreshold).length != 0) {
          this.$set(this.form, 'prelowValue', this.deviceThreshold[0].lowValue)
          this.$set(this.form, 'editable', this.deviceThreshold[0].editable)
          this.$set(
            this.form,
            'prehighValue',
            this.deviceThreshold[0].highValue
          )
          this.$set(
            this.form,
            'intemplowValue',
            this.deviceThreshold[1].lowValue
          )
          this.$set(
            this.form,
            'intemphighValue',
            this.deviceThreshold[1].highValue
          )
          this.$set(
            this.form,
            'outtemplowValue',
            this.deviceThreshold[2].lowValue
          )
          this.$set(
            this.form,
            'outtemphighValue',
            this.deviceThreshold[2].highValue
          )
          this.$set(
            this.form,
            'DifprelowValue',
            this.deviceThreshold[3].lowValue
          )
          this.$set(
            this.form,
            'DifprehighValue',
            this.deviceThreshold[3].highValue
          )
          this.$set(
            this.form,
            'WindspeedlowValue',
            this.deviceThreshold[4].lowValue
          )
          this.$set(
            this.form,
            'WindspeedhighValue',
            this.deviceThreshold[4].highValue
          )
        }
        // this.totals = r.data.data.total;
        this.devicethreshold = true
      })
    },
    handleVideo(row) {
      this.deviceId = row.deviceId
      this.sensorId = row.sensorId
      this.companyId = row.companyId
      this.$get('/demp/info/videoInfo/list', {
        companyId: row.companyId,
        sensorId: row.sensorId
        // pageSize: this.pagination.size,
        // pageNum: this.pagination.num,
      }).then((r) => {
        console.log(r.data.data.rows)
        this.videoData = r.data.data.rows
        // this.total = r.data.data.total
      })
      this.videoDialogVisible = true
    },
    getTransferData() {
      this.$get('/demp/info/videoInfo/getTransferData', {
        deviceId: this.deviceId,
        sensorId: this.sensorId,
        companyId: this.companyId
      }).then((r) => {
        console.log(r.data.data.yes)
        this.yesData = r.data.data.yes
        this.noData = r.data.data.no
      })
      this.addVideoDialogVisible = true
    },
    search() {
      this.$get('/demp/info/sensorInfo/list', {
        companyName: this.companyName,
        deviceName: this.deviceName,
        pageSize: this.pagination.size,
        pageNum: this.pagination.num
      }).then((r) => {
        this.SenortableData = r.data.data.rows
        this.total = r.data.data.total
      })
    },
    deviceThresholds() {
      let newForm = []
      newForm = [
        {
          deviceId: this.form.deviceId,
          sensorId: this.form.sensorId,
          code: 0,
          lowValue: this.form.prelowValue,
          highValue: this.form.prehighValue
        },
        {
          deviceId: this.form.deviceId,
          sensorId: this.form.sensorId,
          code: 1,
          lowValue: this.form.intemplowValue,
          highValue: this.form.intemphighValue
        },
        {
          deviceId: this.form.deviceId,
          sensorId: this.form.sensorId,
          code: 2,
          lowValue: this.form.outtemplowValue,
          highValue: this.form.outtemphighValue
        },
        {
          deviceId: this.form.deviceId,
          sensorId: this.form.sensorId,
          code: 3,
          lowValue: this.form.DifprelowValue,
          highValue: this.form.DifprehighValue
        },
        {
          deviceId: this.form.deviceId,
          sensorId: this.form.sensorId,
          code: 4,
          lowValue: this.form.WindspeedlowValue,
          highValue: this.form.WindspeedhighValue
        }
        // eslint-disable-next-line no-sequences
      ]
      const deviceThresholds = JSON.stringify(newForm)
      this.$post('/demp/info/deviceThreshold', { deviceThresholds })
        .then(() => {
          console.log(newForm.deviceId)
          this.$message({
            message: this.$t('tips.executeSuccess'),
            type: 'success'
          })
          // this.$emit("success");
          this.devicethreshold = false
        })
        .catch((r) => {
        })
    },
    unlockEdit(row) {
      this.$post('/demp/info/deviceThreshold/unlockEdit', { deviceId: row.deviceId, sensorId: row.sensorId })
        .then(() => {
          this.$message({
            message: this.$t('tips.executeSuccess'),
            type: 'success'
          })
          // this.$emit("success");
          this.devicethreshold = false
        })
        .catch((r) => {
        })
    },
    Serortest() {
      this.params.pageSize = this.pagination.size
      this.params.pageNum = this.pagination.num
      this.$get('/demp/info/sensorInfo/list', { ...this.params }).then((r) => {
        console.log(r.data.data.rows)
        this.SenortableData = r.data.data.rows
        this.total = r.data.data.total
        this.companyName = ''
        this.deviceName = ''
      })
    },
    previewVideo(row) {
      this.cameraIndexCode = row.puid
      this.timer = new Date().getTime()
      this.previewDialogVisible = true
      this.hkVideoble = true
    },
    stopPreviewVideo() {
      this.hkVideoble = false
      this.cameraIndexCode = null
    }
  }
}
</script>
<style>
h1 {
  text-align: center;
  font-weight: normal;
}

el.form.item {
  text-align: center;
}
</style>
