<template>
  <div id="LEDConfig">
    <div class="formBox">
      <label for>请输入设备编号：</label>
      <el-input size="small" v-model="query" placeholder="设备编号"></el-input>
      <span id="search" @click="search">查询</span>
      <span id="search" @click="addform('ruleForm')">新增</span>
    </div>
    <div class="tableBox">
      <!-- <table>
        <tr class="thead">
          <th>设备编号</th>
          <th>设备名称</th>
          <th>站点编号</th>
          <th>站点名称</th>
          <th>显示内容</th>
          <th>预警内容</th>
          <th>报警内容</th>
          <th>是否在线</th>
          <th>操作</th>
        </tr>
        <tr class="tbody" v-for="(item,index) in list" :key="index">
          <td>{{item.idsDev}}</td>
          <td>{{item.idsName}}</td>
          <td>{{item.siteNo}}</td>
          <td>{{item.siteName}}</td>
          <td>{{item.display}}</td>
          <td>{{item.earlyDisplay}}</td>
          <td>{{item.policeDisplay}}</td>
          <td v-if="item.onlineType == 1">在线</td>
          <td v-else>离线</td>
          <td>
            <span class="tdbtn" @click="sendmsg(item.idsDev)">推送</span>
            <span class="tdbtn" @click="update(item.idsDev)">修改</span>
            <span class="tdbtn" @click="deletewarn(item.idsDev)">删除</span>
          </td>
        </tr>
      </table>-->
      <el-table :data="list" style="width: 100%;height:calc(100% - 45px)">
        <el-table-column prop="idsDev" label="设备编号"></el-table-column>
        <el-table-column prop="idsName" label="设备名称"></el-table-column>
        <el-table-column prop="siteNo" label="站点编号"></el-table-column>
        <el-table-column prop="siteName" label="站点名称"></el-table-column>
        <el-table-column prop="display" label="显示内容"></el-table-column>
        <el-table-column prop="earlyDisplay" label="预警内容"></el-table-column>
        <el-table-column prop="policeDisplay" label="报警内容"></el-table-column>
        <el-table-column prop="onlineType" label="是否在线"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="sendmsg(scope.$index, scope.row)">推送</el-button>
            <el-button type="text" size="small" @click="update(scope.$index, scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="deletesite(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增/修改 -->
    <el-dialog :title="title" :visible.sync="yzaddflag" width="40%">
      <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
          <el-form-item label="设备编号" prop="idsDev">
            <el-select :disabled="selflag" size="small" v-model="ruleForm.idsDev" placeholder="请选择">
              <el-option v-for="item in ledlist" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备名称" prop="idsName">
            <el-input size="small" v-model="ruleForm.idsName"></el-input>
          </el-form-item>
          <el-form-item label="站点编号" prop="siteNo">
            <el-input size="small" v-model="ruleForm.siteNo"></el-input>
          </el-form-item>
          <el-form-item label="站点名称" prop="siteName">
            <el-input size="small" v-model="ruleForm.siteName"></el-input>
          </el-form-item>
          <el-form-item label="显示内容" prop="display">
            <el-input type="textarea" v-model="ruleForm.display"></el-input>
          </el-form-item>
          <el-form-item label="预警值" prop="earlyValue">
            <el-input size="small" type="number" v-model="ruleForm.earlyValue"></el-input>
          </el-form-item>
          <el-form-item label="预警内容" prop="earlyDisplay">
            <el-input type="textarea" v-model="ruleForm.earlyDisplay"></el-input>
          </el-form-item>
          <el-form-item label="报警值" prop="policeValue">
            <el-input size="small" type="number" v-model="ruleForm.policeValue"></el-input>
          </el-form-item>
          <el-form-item label="报警内容" prop="policeDisplay">
            <el-input type="textarea" v-model="ruleForm.policeDisplay"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="yzaddflag = false">取 消</el-button>
        <el-button type="primary" @click="confirm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog title="删除" :visible.sync="deleteflag" width="40%">
      <div>确定删除站点信息吗？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteflag = false">取 消</el-button>
        <el-button type="primary" @click="deletesite()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "LEDConfig",
  data() {
    return {
      query: "",
      list: [],
      ledlist: [],
      // 新增
      title: "",
      selflag: false,
      yzaddflag: false,
      ruleForm: {
        idsDev: "",
        idsName: "",
        siteNo: "",
        siteName: "",
        display: "",
        earlyValue: "",
        earlyDisplay: "",
        policeValue: "",
        policeDisplay: ""
      },
      rules: {
        idsDev: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ],
        idsName: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        siteNo: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        siteName: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        display: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        earlyValue: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        earlyDisplay: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        policeValue: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        policeDisplay: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ]
      },
      // 删除
      deleteflag: false
    };
  },
  mounted() {
    this.getleddata();
    this.getLed();
  },
  methods: {
    search() {},
    //  获取设备信息
    getleddata() {
      let url = this.nozzle.subtitlesLedQuery;
      this.$http.post(url).then(res => {
        if (res.data.code == 0) {
          if (res.data.data == null) {
            this.$message({
              message: "暂无数据",
              type: "warning"
            });
          } else {
            this.list = res.data.data;
          }
        } else {
          this.$message({
            message: "获取信息失败",
            type: "error"
          });
        }
      });
    },
    // 推送
    sendmsg(index, rows) {
      var idsdev = rows.idsDev;
      let fd = new FormData();
      fd.append("idsDev", idsdev);
      let url = this.nozzle.subtitlesLedSend;
      this.$http.post(url, fd).then(res => {
        if (res.data.code == 0) {
          this.$message({
            message: "推送成功",
            type: "success"
          });
        } else {
          this.$message({
            message: "推送失败",
            type: "error"
          });
        }
      });
    },
    //  查询未绑定站点设备
    getLed() {
      let url = this.nozzle.subtitlesLedQueryLedNo;
      this.$http.post(url).then(res => {
        if (res.data.code == 0) {
          this.ledlist = res.data.data;
        }
      });
    },
    addform(formName) {
      this.title = "新增";
      this.yzaddflag = true;
      this.selflag = false;
      this.$refs[formName].resetFields();
    },
    confirm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let url;
          if (this.selflag) {
            url = this.nozzle.subtitlesLedUpdate;
          } else {
            url = this.nozzle.subtitlesLedSave;
          }

          this.$http.post(url, this.ruleForm).then(res => {
            if (res.data.code == 0) {
              this.$message({
                message: res.data.data,
                type: "success"
              });
              this.yzaddflag = false;
              this.getleddata();
            } else {
              this.$message({
                message: res.data.data,
                type: "error"
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    update(index, rows) {
      this.title = "修改";
      this.yzaddflag = true;
      this.selflag = true;
      var idsDev = rows.idsDev;
      // 解决深度拷贝的问题
      let vs = this.list.filter(item => item.idsDev == idsDev);
      var gets = JSON.parse(JSON.stringify(vs));
      this.$nextTick(() => {
        this.ruleForm = gets[0];
      });
    },
    deletesite(index, rows) {
      this.idsDevdel = rows.idsDev;
      console.log(rows);
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = {
            idsDev: this.idsDevdel
          };
          let url = this.nozzle.subtitlesLedDelete;
          this.$http.post(url, params).then(res => {
            if (res.data.code == 0) {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.getleddata();
            } else {
              this.$message({
                message: "删除失败",
                type: "error"
              });
            }
            this.deleteflag = false;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>


<style scoped>
#LEDConfig {
  box-sizing: border-box;
  position: relative;
  padding: 10px;
}

.tab {
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: rgba(53, 53, 53, 0.5);
}

.tabbox {
  color: #18ffc9;
  font-size: 16px;
  display: inline-block;
  width: 150px;
  text-align: center;
  font-weight: bold;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  box-sizing: border-box;
}

.tabboxactive {
  border-bottom: 2px solid #1bbe60;
}

.formBox {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  background: rgba(53, 53, 53, 0);
}

.formBox > input {
  height: 30px;
  color: #ffffff;
  padding: 0 10px;
  background: none;
  outline: none;
  border: #17f6c3 1px solid;
}

.formBox > label {
  color: #ffffff;
  margin-left: 20px;
}

#search {
  display: inline-block;
  height: 33px;
  line-height: 33px;
  background: #409eff;
  color: #ffffff;
  padding: 0 20px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  margin-left: 20px;
}

.tableBox {
  height: calc(100% - 80px);
  width: 100%;
  overflow: auto;
  background: rgba(53, 53, 53, 0.5);
}

table {
  width: 100%;
  border-collapse: collapse;
}

.thead {
  color: #fff;
  font-size: 15px;
  height: 45px;
  background: rgba(53, 53, 53, 0.5);
}

.tbody {
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  height: 40px;
  border-bottom: 1px solid #0d2027;
}

.footer {
  position: fixed;
  left: 20;
  right: 20;
  bottom: 0;
  height: 35px;
}

.el-select,
.el-input,
.el-input__inner {
  width: 250px !important;
}

.tdbtn {
  border: 1px solid #ffffff;
  padding: 2px 10px;
  cursor: pointer;
  margin-right: 10px;
}
</style>