<template>
  <div id="root">
    <div style="margin: 20px 15px 10px 15px;">
      <el-button type="primary" @click="addMonitoring">添加</el-button>
      <el-button type="warning" @click="ediMonitoring">修改</el-button>
      <el-button type="danger" @click="deleteMonitoring">删除</el-button>
    </div>
    <!--<div style="display: flex; justify-content: center; flex-wrap: wrap; ">-->
    <!--<el-form v-for="(item, index) in equipmentList" ref="monitoringForm" label-width="120px" style="margin-top: 20px;">-->
    <!--<div style="padding: 10px 20px 0;border-radius: 8px;margin: 20px 15px 10px 15px;border: 1px solid #eee;box-shadow: 4px 4px 10px #dadada;">-->
    <!--<el-form-item label="编号">-->
    <!--&lt;!&ndash; item.id &ndash;&gt;-->
    <!--<span>{{ index }}</span>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="视频流地址">-->
    <!--<el-input v-model="item.url" :disabled="false" name="name"/>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="地址">-->
    <!--<el-input v-model="item.address" :disabled="false" name="address"/>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="安保人员电话">-->
    <!--<el-input v-model="item.securityGuardTel" :disabled="false" name="phone"/>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="保安室电话">-->
    <!--<el-input v-model="item.securityRoomTel" :disabled="false" name="phone-2"/>-->
    <!--</el-form-item>-->
    <!--</div>-->
    <!--<el-form-item>-->
    <!--<el-button type="info" @click="monitoringRemover(item.id, index)" >删除</el-button>-->
    <!--</el-form-item>-->
    <!--</el-form>-->
    <!--</div>-->
    <el-table
      :data="equipmentList"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"/>
      <el-table-column
        prop="id"
        label="编号"
        align="center"
        width="50"/>
      <el-table-column
        prop="url"
        label="视频流地址"
        align="center"
        width="600"/>
      <el-table-column
        prop="address"
        align="center"
        label="地址"/>
      <el-table-column
        prop="securityGuardTel"
        align="center"
        label="安保人员电话"/>
      <el-table-column
        prop="securityRoomTel"
        align="center"
        label="保安室电话"/>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Monitoring',
  data() {
    return {
      monitoring: { // 监控数据

      },
      ids: [],
      equipmentList: [] // 处理过后的监控数据
    }
  },
  mounted() {
    this.equipmentGetAll()
  },
  methods: {
    handleSelectionChange(val) {
      this.ids = []
      val.map((item, index) => {
        this.ids.push(item.id)
      })
    },
    equipmentGetAll() { // 监控配置
      const eqData = { type: 1 }
      this.$store.dispatch('EquipmentGetAll', eqData).then((res) => {
        this.equipmentList = res.data
      }).catch(() => {
        console.log('EquipmentGetAll error')
      })
    },
    addMonitoring() { // 添加一个公区监控配置
      // this.equipmentList.push({
      //   'address': '',
      //   'addressId': '',
      //   'communityId': '',
      //   'createTime': '',
      //   'createUser': '',
      //   'equipmentTreeId': '',
      //   'equipmentType': '',
      //   'id': '',
      //   'securityGuardTel': '',
      //   'securityGuardTelId': '',
      //   'securityRoomTel': '',
      //   'securityRoomTelId': '',
      //   'updateTime': '',
      //   'updateUser': '',
      //   'url': '',
      //   'urlId': '',
      //   'uuid': '',
      //   'uuidId': ''
      // })
      this.$router.push({ name: 'monitoring-add-index' })
    },
    monitoringSubmit() { // 监控提交
      console.log('monitoringForm : ', this.equipmentList)
      this.$store.dispatch('EquipmentMonitoring', this.equipmentList).then((res) => {
        if (res.code === '0') {
          this.$message.success(res.message)
          // 监控
          this.equipmentGetAll()
        }
      }).catch(() => {
        console.log('EquipmentMonitoring error')
      })
    },
    monitoringRemover(id, equipmentIndex) { // 监控删除
      // console.log('monitoringForm : ', this.equipmentList, '  下坐标：', equipmentIndex)
      const tempEquipmentList = []
      this.equipmentList.map((item, index) => {
        // 排除需要删除的下坐标的数据
        if (index !== equipmentIndex) {
          tempEquipmentList.push(item)
        }
      })
      this.equipmentList = tempEquipmentList

      if (id !== '') {
        this.$store.dispatch('DeleteEquipment', id).then(res => {
          const resCode = res.code
          if (resCode === '1') {
            this.$message.error(res.message)
            return
          }
          this.getMenuList()
        }).catch(() => {
          console.log('DeleteEquipment error!')
        })
      }
    },
    ediMonitoring() {
      if (this.ids.length === 0) {
        this.$message.error('请至少选择一行！')
        return
      }
      if (this.ids.length > 1) {
        this.$message.error('只能操作一行！')
        return
      }
      this.$router.push({ name: 'monitoring-edi-index', query: { id: this.ids[0] }})
    },
    deleteMonitoring() {
      if (this.ids.length === 0) {
        this.$message.error('请至少选择一行！')
        return
      }
      this.$store.dispatch('DeleteMonitoringBachByIds', this.ids).then((res) => {
        const resCode = res.code
        if (resCode === '1') {
          this.$message.error(res.message)
          return
        }
        this.$message.success(res.message)
        this.equipmentGetAll()
      }).catch(() => {
        console.log('DeleteMonitoringBachByIds error!')
      })
    }
  }
}
</script>

<style scoped>
#root {
  margin-top: 20px;
}
</style>
