<template>
  <div id="app">
    <el-container class="container">
      <!--      显示设备信息-->
      <el-header>
        <h1>除尘设备信息管理</h1>
      </el-header>
      <div class="buttons">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input placeholder="设备名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="test">查询</el-button>
            <el-button
              type="success"
              icon="el-icon-circle-plus"
              @click="AddDevicedialogVisible = true"
            >新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-main class="el-table">
        <el-table :data="tableData" style="width: 100%" stripe>
          <el-table-column label="设备编号" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.deviceId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备名称" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.deviceName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属企业" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.companyName }}</span>
            </template>
          </el-table-column>// 设备编号
          <el-table-column label="设备启动日期" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.deviceStartDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备数据单位" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.deviceUnit }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属企业id" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.companyId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属企业名称" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.companyName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备信息" width="180">
            <template>
              <span style="margin-left: 10px">{{ }}</span>
            </template>
          </el-table-column>
          <el-table-column label="功能区" width="180">
            <template>
              <span style="margin-left: 10px">{{ }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="handleEdit(scope.$index, scope.row)"
              />
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="removeDeviceById(scope.row.deviceId)"
              />
            </template>
          </el-table-column>
          <el-table-column label="阈值设定">
            <template slot-scope="scope">
              <el-button
                type="info"
                icon="el-icon-setting"
                circle
                @click="handleThreshold(scope.row.deviceId)"
              />
            </template>
          </el-table-column>
        </el-table>
        <!--        分页-->
        <div class="block">
          <span class="demonstration" />
          <el-pagination
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
    <!--    //编辑信息-->
    <el-dialog title="设备信息编辑" :visible.sync="dialogFormVisible" width="28%">
      <el-form :model="form">
        <el-form-item label="设备编号">
          <el-col :span="11">
            <el-input v-model="form.deviceId" />
          </el-col>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-col :span="11">
            <el-input v-model="form.deviceName" />
          </el-col>
        </el-form-item>
        <el-form-item label="设备启用日期">
          <el-col :span="11">
            <el-input v-model="form.deviceStartDate" />
            <!--          <el-date-picker type="date" placeholder="选择日期" v-model="form.deviceStartDate" style="width: 100%;"></el-date-picker>-->
          </el-col>
        </el-form-item>
        <el-form-item label="设备数据单位">
          <el-col :span="11">
            <el-input v-model="form.deviceUnit" />
          </el-col>
        </el-form-item>
        <el-form-item label="所属企业id">
          <el-col :span="11">
            <el-input v-model="form.companyId" />
          </el-col>
        </el-form-item>
        <el-form-item label="所属企业名称">
          <el-col :span="11">
            <el-input v-model="form.companyName" />
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <!--    // 新增设备信息-->
    <el-dialog title="新增设备信息" :visible.sync="AddDevicedialogVisible" width="35%">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="设备编号">
          <el-input v-model="form.deviceId" />
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="form.deviceName" />
        </el-form-item>
        <el-form-item label="设备启用日期">
          <el-col>
            <el-input v-model="form.deviceStartDate" placeholder="YYYY-MM-DD" />
            <!--          <el-date-picker type="date" placeholder="选择日期" v-model="form.deviceStartDate" style="width: 100%;"></el-date-picker>-->
          </el-col>
        </el-form-item>
        <el-form-item label="设备数据单位">
          <el-input v-model="form.deviceUnit" />
        </el-form-item>
        <el-form-item label="所属企业id">
          <el-input v-model="form.companyId" />
        </el-form-item>
        <el-form-item label="所属企业名称">
          <el-autocomplete
            v-model="form.companyName"
            class="inline-input"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            :trigger-on-focus="false"
            @select="handleSelect"
          />
        </el-form-item>
        <el-form-item label="设置位置">
          <el-input v-model="form.companyName" />
        </el-form-item>
        <el-form-item label="功能区">
          <el-input v-model="form.companyName" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--    阈值设置-->
    <el-dialog title="设备阈值设置" :visible.sync="devicethreshold" width="35%">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item hidden>
          <el-input v-model="form.deviceId" />
        </el-form-item>
        <el-row>
          <el-col :span="4">
            <el-form-item label="安全">
              <!-- <el-col :span="20">
            <el-input v-model="form.code1" />
              </el-col>-->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="低值">
              <el-input v-model="form.prelowValue" />
              <!--          <el-date-picker type="date" placeholder="选择日期" v-model="form.deviceStartDate" style="width: 100%;"></el-date-picker>-->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="高值">
              <el-input v-model="form.prehighValue" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="注意">
              <!-- <el-col :span="20"> -->
              <!-- <el-input v-model="form.code2" /> -->
              <!-- </el-col> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="低值">
              <!-- <el-col :span="20"> -->
              <el-input v-model="form.intemplowValue" />
              <!--          <el-date-picker type="date" placeholder="选择日期" v-model="form.deviceStartDate" style="width: 100%;"></el-date-picker>-->
              <!-- </el-col> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="高值">
              <!-- <el-col :span="20"> -->
              <el-input v-model="form.intemphighValue" />
              <!-- </el-col> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="警告" />
          </el-col>
          <el-col :span="8">
            <el-form-item label="低值">
              <el-input v-model="form.outtemplowValue" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="高值">
              <el-input v-model="form.outtemphighValue" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="危险" />
          </el-col>
          <el-col :span="8">
            <el-form-item label="低值">
              <el-input v-model="form.DifprelowValue" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="高值">
              <el-input v-model="form.DifprehighValue" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="现实危险" />
          </el-col>
          <el-col :span="8">
            <el-form-item label="低值">
              <el-input v-model="form.WindspeedlowValue" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="高值">
              <el-input v-model="form.WindspeedhighValue" />
            </el-form-item>
          </el-col>
        </el-row>
        <!--        // 灰斗温度值-->
        <el-form-item style="text-align: center;">
          <el-button type="primary" @click="deviceThresholds">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      form: {},
      AddDevicedialogVisible: false,
      devicethreshold: false
    }
  },
  created() {
    this.test()
  },
  mounted() {
    this.restaurants = this.loadAll()
  },
  methods: {
    loadAll() {
      axios.get('http://zhzf.sipac.gov.cn/szyqaj/app/common/enterpriseList', {
        params: {
          'token': '8a81e3166b379ce3016b37bab1bc000d',
          'companyName': '1',
          'page': '1',
          'size': '2'
        }
      }).then(function(response) {
        console.log(response)
      }).catch(function(response) {
        console.log(response)
      })
      this.$get('http://zhzf.sipac.gov.cn/szyqaj/app/common/enterpriseList').then((r) => {
        console.log(r.data.data.rows)
        this.tableData = r.data.data.rows
        return
      })
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    handleSelect(item) {
      console.log(item)
    },
    // 阈值设定
    deviceThresholds() {
      let newForm = []
      newForm = [
        {
          deviceId: this.form.deviceId,
          code: 0,
          lowValue: this.form.prelowValue,
          hightValue: this.form.prehighValue
        },
        {
          deviceId: this.form.deviceId,
          code: 1,
          lowValue: this.form.intemplowValue,
          hightValue: this.form.intemphighValue
        },
        {
          deviceId: this.form.deviceId,
          code: 2,
          lowValue: this.form.outtemplowValue,
          hightValue: this.form.outtemphighValue
        },
        {
          deviceId: this.form.deviceId,
          code: 3,
          lowValue: this.form.DifprelowValue,
          hightValue: this.form.DifprehighValue
        },
        {
          deviceId: this.form.deviceId,
          code: 4,
          lowValue: this.form.WindspeedlowValue,
          hightValue: this.form.WindspeedlowValuehighValue
        }
        // 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.createSuccess'),
            type: 'success'
          })
          this.$emit('success')
        })
        .catch((r) => {})
    },
    onSubmit() {
      this.$post('/demp/info/deviceInfo', this.form)
        .then(() => {
          this.$message({
            message: this.$t('tips.createSuccess'),
            type: 'success'
          })
          this.$emit('success')
        })
        .catch((r) => {})
    },
    async removeDeviceById(id) {
      const ids = [id]
      const comfirmResult = await this.$confirm(
        '此操作将永久删除该设备, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => {
        return err
      })
      if (comfirmResult !== 'confirm') {
        return this.$message.info('取消删除设备')
      }
      const { data: res } = this.$delete(`demp/info/deviceInfo/${ids}`)
      if (res.meta.status !== 200) {
        return this.$message.error('删除设备失败')
      }
      this.$message.success('删除设备成功')
    },
    delete(userIds) {
      this.loading = true
      this.$delete(`demp/info/deviceInfo/${userIds}`).then(() => {
        this.$message({
          message: this.$t('tips.deleteSuccess'),
          type: 'success'
        })
        this.search()
      })
    },
    handleView(index, row) {
      console.log(index, row)
    },
    handleEdit(index, row) {
      this.form = row
      this.dialogFormVisible = true
      console.log(index, row)
    },
    handleThreshold(id) {
      this.form.deviceId = id
      this.devicethreshold = true
    },
    // handleDelete(index, row) {
    //   console.log(index, row)
    // },
    test() {
      this.$get('/demp/info/deviceInfo/list').then((r) => {
        console.log(r.data.data.rows)
        this.tableData = r.data.data.rows
      })
    }
  }
}
</script>
<style>
h1 {
  text-align: center;
  font-weight: normal;
}
.buttons {
  margin: auto;
  margin-top: 20px;
}
.el-table {
  width: 1700px;
  margin: auto;
}
</style>
