<template>
  <div id="LEDConfig">
    <div class="formBox">
      <span class="SelectTitle">LED屏分组：</span>
      <el-select
        v-model="Project"
        filterable
        placeholder="请选择分组"
        @change="loadProjectUser(Project)"
      >
        <el-option
          v-for="item in ProjectOptions"
          :key="item.index"
          :label="item.groupName"
          :value="item.id"
        ></el-option>
      </el-select>
      <span class="SelectTitle">选择站点：</span>
      <el-select v-model="Site" filterable placeholder="请选择站点">
        <el-option
          v-for="item in SiteOptions"
          :key="item.index"
          :label="item.field"
          :value="item.siteNo"
        ></el-option>
      </el-select>
      <!-- <label for>请输入设备编号：</label>
      <el-input size="small" v-model="query" placeholder="设备编号"></el-input>-->
      <el-button type="primary" @click="getleddata()" v-has="'Search'"
        >查询</el-button
      >
      <el-button
        type="primary"
        @click="addform('ruleForm')"
        :disabled="NoADD"
        v-has="'m8-b1'"
        >新增</el-button
      >
      <el-button type="primary" @click="FenZu()" v-has="'m8-b2'"
        >分组管理</el-button
      >
    </div>
    <div class="tableBox">
      <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="idsAddress" label="设备地址"></el-table-column>
        <el-table-column
          prop="fontSize"
          label="分区一字体大小"
        ></el-table-column>
        <el-table-column
          prop="display"
          label="分区一字幕"
          width="330"
        ></el-table-column>
        <el-table-column
          prop="tipsFontSize"
          label="分区二字体大小"
        ></el-table-column>
        <el-table-column
          prop="tipsDisplay"
          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="是否在线">
          <template slot-scope="scope">
            <span v-if="scope.row.onlineType == 1">在线</span>
            <span v-else style="color: red">离线</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="sendmsg(scope.$index, scope.row)"
              v-has="'m8-b3'"
              v-if="scope.row.onlineType == 1"
              >推送</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="QingPin(scope.$index, scope.row)"
              v-has="'m8-b4'"
              v-if="scope.row.onlineType == 1"
              >清屏</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="update(scope.$index, scope.row)"
              v-has="'m8-b5'"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="SeeRiZhi(scope.$index, scope.row)"
              v-has="'m8-b7'"
              >离线日志</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="deletesite(scope.$index, scope.row)"
              v-has="'m8-b6'"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- </div> -->

    <!-- 新增/修改 -->
    <el-dialog :title="title" :visible.sync="yzaddflag" width="1000px">
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="110px"
        >
          <el-form-item label="设备名称" prop="idsName" style="width:100%">
            <el-input size="small" v-model="ruleForm.idsName"></el-input>
          </el-form-item>
          <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="siteNo">
            <el-input
              size="small"
              v-model="ruleForm.siteNo"
              :readonly="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="设备地址" prop="idsAddress">
            <el-input size="small" v-model="ruleForm.idsAddress"></el-input>
          </el-form-item>
          <el-form-item label="站点名称" prop="siteName">
            <el-input
              size="small"
              v-model="ruleForm.siteName"
              :readonly="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="屏幕属性(宽)" prop="width">
            <el-input
              size="small"
              v-model="ruleForm.width"
              type="number"
            ></el-input>
          </el-form-item>
          <el-form-item label="屏幕属性(高)" prop="height">
            <el-input
              size="small"
              v-model="ruleForm.height"
              type="number"
            ></el-input>
          </el-form-item>

          <div class="leftFormBox">
            <p class="FormP">分区一</p>
            <div class="FormFenQu">
              <el-form-item label="字幕内容" prop="display">
                <el-input
                  type="textarea"
                  v-model="ruleForm.display"
                  autosize
                  resize="both"
                  style="width:150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="字体大小" prop="fontSize">
                <el-input
                  type="number"
                  size="small"
                  v-model="ruleForm.fontSize"
                ></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="small"
                  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="small"
                  v-model="ruleForm.policeDisplay"
                ></el-input>
              </el-form-item>
              <el-form-item label="分区X坐标" prop="disX">
                <el-input type="number" v-model="ruleForm.disX"></el-input>
              </el-form-item>
              <el-form-item label="分区Y坐标" prop="disY">
                <el-input type="number" v-model="ruleForm.disY"></el-input>
              </el-form-item>
              <el-form-item label="分区宽" prop="disW">
                <el-input type="number" v-model="ruleForm.disW"></el-input>
              </el-form-item>
              <el-form-item label="分区高" prop="disH">
                <el-input type="number" v-model="ruleForm.disH"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="RightFormBox">
            <p class="FormP">分区二</p>
            <div class="FormFenQu">
              <el-form-item label="字幕内容" prop="tipsDisplay">
                <el-input
                  type="small"
                  v-model="ruleForm.tipsDisplay"
                ></el-input>
              </el-form-item>
              <el-form-item label="字体大小" prop="tipsFontSize">
                <el-input
                  type="number"
                  size="small"
                  v-model="ruleForm.tipsFontSize"
                ></el-input>
              </el-form-item>
              <el-form-item label="分区X坐标" prop="tipsX">
                <el-input type="number" v-model="ruleForm.tipsX"></el-input>
              </el-form-item>
              <el-form-item label="分区Y坐标" prop="tipsY">
                <el-input type="number" v-model="ruleForm.tipsY"></el-input>
              </el-form-item>
              <el-form-item label="分区宽" prop="tipsW">
                <el-input type="number" v-model="ruleForm.tipsW"></el-input>
              </el-form-item>
              <el-form-item label="分区高" prop="tipsH">
                <el-input type="number" v-model="ruleForm.tipsH"></el-input>
              </el-form-item>
            </div>
          </div>
        </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>
    <!-- 分组管理 -->
    <el-dialog title="分组管理" :visible.sync="FenZuflag" width="600px">
      <div id="DialogSearch">
        <el-button type="primary" @click="LoadFZData()" size="mini"
          >刷新</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="AddFenZu()"
          size="mini"
          >新增分组</el-button
        >
      </div>
      <div id="DialogCentent">
        <el-table
          :data="FZTableData"
          style="width: 100%;height:calc(100% - 45px)"
        >
          <el-table-column prop="groupName" label="分组名称"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="EditFZ(scope.$index, scope.row)"
                style="margin:0 10px"
                >修改名称</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="DelfZ(scope.$index, scope.row)"
                style="margin:0 10px"
                >删除分组</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="SiteGuanl(scope.$index, scope.row)"
                style="margin:0 10px"
                >站点管理</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 新增 / 修改 分组名称 -->
      <el-dialog
        :visible.sync="FenZuflag2"
        width="400px"
        append-to-body
        top="20%"
        :title="FenzuTitle"
      >
        <el-input
          placeholder="请输入分组名称"
          v-model="AddFZInput"
          clearable
        ></el-input>
        <el-button type="primary" size="small" @click="AddFenZuUpdata()"
          >确定</el-button
        >
      </el-dialog>
      <!-- 分组分配站点 -->
      <el-dialog
        :visible.sync="SiteDialog"
        width="400px"
        append-to-body
        top="10%"
        title="已分配站点"
      >
        <div class="DialogSearch2">
          <el-button type="primary" @click="LoadSiteData()" size="mini"
            >刷新</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="AddSiteu()"
            size="mini"
            >新增站点</el-button
          >
        </div>
        <div class="DialogCentent2">
          <el-table
            :data="SiteTableData"
            style="width: 100%;height:calc(100% - 45px)"
          >
            <el-table-column prop="siteName" label="站点名称"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="Delsite(scope.$index, scope.row)"
                  style="margin:0 10px"
                  >删除站点</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-dialog
          :visible.sync="NoSiteDialog"
          width="700px"
          append-to-body
          top="10%"
          title="新增站点"
        >
          <div class="DialogSearch2">
            <el-input
              placeholder="请输入内容"
              v-model="loadNoFPSiteInput"
              clearable
            ></el-input>
            <el-button type="primary" @click="loadNoFPSite()" size="mini"
              >搜索</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="AddNoSiteupdata()"
              size="mini"
              >分配已勾选的站点</el-button
            >
          </div>
          <div class="DialogCentent2">
            <el-table
              :data="NoSiteData"
              style="width: 100%;height:calc(100% - 45px)"
              @selection-change="handleSelectionChange"
              tooltip-effect="dark"
              show-overflow-tooltip="true"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column
                prop="siteName"
                label="站点名称"
              ></el-table-column>
            </el-table>
            <el-pagination
              @size-change="PRSizeChange"
              @current-change="PRCurrentChange"
              :current-page="PRPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="PRSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="PRDatagridDataLength"
              style="margin-top:10px;"
            ></el-pagination>
          </div>
        </el-dialog>
      </el-dialog>
    </el-dialog>
    <!-- 推送 -->
    <el-dialog title="推送" :visible.sync="TuiSongDialog" width="500px">
      <el-input
        type="number"
        v-model="ShuiWeiValue"
        placeholder="调试值(非必填,测试场景使用)"
      ></el-input>
      <el-input v-model="idsDevValue" v-show="false"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="TuiSongDialog = false">取 消</el-button>
        <el-button type="primary" @click="TuiSong()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 日志 -->
    <el-dialog title="日志" :visible.sync="RiZhiDialog" width="1000px">
      <div class="DialogSearch2" id="RiZhiBOx">
        <span class="SelectTitle">时间选择：</span>
        <el-date-picker
          v-model="TimeValue"
          type="datetimerange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
        <el-button type="primary" @click="loadRizhi()">搜索</el-button>
        <span class="SelectTitle">是否监听日志：</span>
        <el-select
          v-model="RiZhiJianTingvalue"
          placeholder="请选择"
          @change="RiZhiChange"
        >
          <el-option
            v-for="item in RiZhiJianTingOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="DialogCentent2">
        <el-table
          :data="RiZhiData"
          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="createTime" label="离线时间">
            <template slot-scope="scope">
              <span style="color: red">{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="RiZhiPRSizeChange"
          @current-change="RiZhiPRCurrentChange"
          :current-page="RiZhiPRPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="RiZhiPRSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="RiZhiPRDatagridDataLength"
          style="margin-top:10px;"
        ></el-pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { message } from "./../../util/item";
export default {
  name: "LEDConfig",
  data() {
    return {
      query: "",
      list: [],
      ledlist: [],
      // 新增
      title: "",
      selflag: false,
      yzaddflag: false,
      ruleForm: {
        idsDev: "",
        idsName: "",
        siteNo: "",
        siteName: "",
        display: "",
        tipsDisplay: "",
        tipsFontSize: "",
        earlyValue: "",
        earlyDisplay: "",
        fontSize: "",
        policeValue: "",
        policeDisplay: "",
        width: "256",
        height: "128",
        disX: "0",
        disY: "0",
        disW: "256",
        disH: "96",
        tipsX: "0",
        tipsY: "96",
        tipsW: "256",
        tipsH: "32"
      },
      rules: {
        idsDev: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ],
        idsName: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        idsAddress: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        siteNo: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        siteName: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        display: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        tipsDisplay: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        earlyValue: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        earlyDisplay: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        fontSize: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        tipsFontSize: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        policeValue: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        policeDisplay: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],

        width: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        height: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        disX: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        disY: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        disW: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        disH: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        tipsX: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        tipsY: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        tipsW: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ],
        tipsH: [
          {
            required: true,
            message: "此项为必填项",
            trigger: "blur"
          }
        ]
      },
      ProjectOptions: [], //分组的数据源
      Project: "", //分组ID
      Site: "", //站点
      SiteNAME: "", //站点名称
      SiteOptions: [], //站点的数据源
      deleteflag: false,
      FenZuflag: false, //分组管理弹窗
      FZTableData: [], //分组数据
      FenZuflag2: false, //新增 / 修改 分组弹窗
      FenZuflag2type: 1, //1为新增 2为修改
      FenzuTitle: "", //弹窗的title
      AddFZInput: "",
      ClickID: "", //点击修改 以及 删除 的分组ID
      SiteDialog: false, //站点管理弹窗
      SiteDialogID: "", //站点管理弹窗
      SiteTableData: [], //站点表格数据
      NoSiteDialog: false, //未分配的站点弹窗状态
      NoSiteData: [], //未分配的站点数据
      idList2: [], //记录点击的站点的id
      PRPage: 1, //分页默认显示页
      PRDatagridDataLength: 0, //分页上显示的数据总条数
      PRSize: 10, //分页上显示的每页的条数
      multipleSelection: [],
      loadNoFPSiteInput: "", //模糊搜索未分配站点
      NoADD: true, //当没有站点时 不允许新增
      ShuiWeiValue: "", //推送时 的水位
      idsDevValue: "", //推送时 的idsDev
      TuiSongDialog: false, // 推送弹窗
      RiZhiDialog: false, //日志弹窗
      RiZhiID: "", //点击查看日志的数据id
      RiZhiData: [], //日志数据
      RiZhiPRPage: 1, //分页默认显示页
      RiZhiPRDatagridDataLength: 0, //分页上显示的数据总条数
      RiZhiPRSize: 10, //分页上显示的每页的条数
      TimeValue: [
        this.moment()
          .subtract("days", 3)
          .format("YYYY-MM-DD HH:mm:ss"),
        this.moment().format("YYYY-MM-DD HH:mm:ss")
      ], //时间
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }, //时间快捷选项
      RiZhiJianTingOption: [
        { label: "是", value: 1 },
        { label: "否", value: 0 }
      ], //监听
      RiZhiJianTingvalue: "" //监听
    };
  },
  mounted() {
    this.LoadFenZu();
    // this.getleddata();
    this.getLed();
  },
  methods: {
    search() {},
    // 获取分组信息
    LoadFenZu() {
      this.SiteOptions = [];
      this.Site = "";
      this.ProjectOptions = [];
      this.Project = "";
      this.$http
        .post(this.nozzle.subtitlesledQuerySiteGroup)
        .then(response => {
          if (response.data.data.list.length > 0) {
            this.ProjectOptions = response.data.data.list;
            this.Project = this.ProjectOptions[0].id;
            this.loadProjectUser(this.Project);
          } else {
            this.$message({
              showClose: true,
              message: "无分组",
              type: "warning"
            });
            this.NoADD = true;
          }
        })
        .catch(response => {
          // this.$message({
          //   showClose: true,
          //   message: "请求分组失败",
          //   type: "warning"
          // });
        });
    },
    // 点积分组
    loadProjectUser(vId) {
      this.SiteOptions = [];
      this.Site = "";
      this.$http
        .post(this.nozzle.subtitlesledQuerySiteGroup, {
          parentId: vId
        })
        .then(response => {
          if (response.data.data.list.length > 0) {
            this.SiteOptions = response.data.data.list;
            this.Site = this.SiteOptions[0].siteNo;
            console.log();
            this.getleddata();

            this.NoADD = false;
          } else {
            this.$message({
              showClose: true,
              message: "无站点",
              type: "warning"
            });
            this.list = [];
            this.NoADD = true;
          }
        })
        .catch(response => {
          message(response);
        });
    },
    //  获取设备信息
    getleddata() {
      this.list = [];
      let url = this.nozzle.subtitlesLedQuery;
      this.$http
        .post(url, {
          siteNo: this.Site
        })
        .then(res => {
          if (res.data.code == 1) {
            if (res.data.data == null) {
              this.$message({
                message: "暂无数据",
                type: "warning"
              });
            } else {
              this.list = res.data.data;
            }
          } else {
            message(response);
          }
        });
    },
    // 推送
    sendmsg(index, rows) {
      this.TuiSongDialog = true;
      this.idsDevValue = rows.idsDev;
      this.ShuiWeiValue = "";
    },
    // 推送功能
    TuiSong() {
      let fd = new FormData();
      fd.append("idsDev", this.idsDevValue);
      fd.append("value", this.ShuiWeiValue);
      let url = this.nozzle.subtitlesLedSend;
      this.$http.post(url, fd).then(res => {
        if (res.data.code == 1) {
          this.$message({
            message: "推送成功",
            type: "success"
          });
        } else {
          this.$message({
            message: "推送失败",
            type: "error"
          });
        }
        this.TuiSongDialog = false;
      });
    },
    //  查询未绑定站点设备
    getLed() {
      let url = this.nozzle.subtitlesLedQueryLedNo;
      this.$http.post(url).then(res => {
        if (res.data.code == 1) {
          this.ledlist = res.data.data;
        }
      });
    },
    addform(formName) {
      this.yzaddflag = true;
      this.selflag = false;
      this.getLed();
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }

      console.log(this.Site);
      this.title = "新增";
      this.ruleForm.siteNo = this.Site;
      for (var i = 0; i < this.SiteOptions.length; i++) {
        if (this.Site == this.SiteOptions[i].siteNo) {
          this.ruleForm.siteName = this.SiteOptions[i].siteName;
        }
      }
    },
    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 == 1) {
              this.$message({
                message: res.data.msg,
                type: "success"
              });
              this.yzaddflag = false;
              this.getleddata();
            } else {
              this.$message({
                message: res.data.msg,
                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));
      console.log(gets);
      gets[0].width = gets[0].programAttribute.split(",")[0];
      gets[0].height = gets[0].programAttribute.split(",")[1];
      gets[0].disX = gets[0].displayAttribute.split(",")[0];
      gets[0].disY = gets[0].displayAttribute.split(",")[1];
      gets[0].disW = gets[0].displayAttribute.split(",")[2];
      gets[0].disH = gets[0].displayAttribute.split(",")[3];
      gets[0].tipsX = gets[0].tipsAttribute.split(",")[0];
      gets[0].tipsY = gets[0].tipsAttribute.split(",")[1];
      gets[0].tipsW = gets[0].tipsAttribute.split(",")[2];
      gets[0].tipsH = gets[0].tipsAttribute.split(",")[3];
      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 == 1) {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.getleddata();
            } else {
              this.$message({
                message: "删除失败",
                type: "error"
              });
            }
            this.deleteflag = false;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    QingPin(index, rows) {
      this.idsDevdel = rows.idsDev;
      console.log(rows);
      this.$confirm("此操作将清除全部字幕信息, 是否清除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let fd = new FormData();
          fd.append("idsDev", this.idsDevdel);
          let url = this.nozzle.subtitlesLedClean;
          this.$http.post(url, fd).then(res => {
            if (res.data.code == 1) {
              this.$message({
                message: "清除成功",
                type: "success"
              });
              this.getleddata();
            } else {
              this.$message({
                message: "清除失败",
                type: "error"
              });
            }
            this.deleteflag = false;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    SeeRiZhi(index, rows) {
      this.RiZhiDialog = true;
      this.RiZhiID = rows.idsDev;
      this.RiZhiJianTingvalue = rows.logStatus;
      this.loadRizhi();
    },
    // 加载日志
    loadRizhi() {
      var params = {
        startTime: this.TimeValue[0],
        endTime: this.TimeValue[1],
        idsDev: this.RiZhiID,
        page: this.RiZhiPRPage,
        rows: this.RiZhiPRSize
      };
      this.$http
        .post(this.nozzle.subtitlesledQueryQueryLogs, params)
        .then(response => {
          this.RiZhiData = response.data.data.list;
          this.RiZhiPRDatagridDataLength = response.data.data.totalCount;
        })
        .catch(response => {
          message(response);
        });
    },
    // 日志监听 改变
    RiZhiChange() {
      var params = {
        idsDev: this.RiZhiID,
        logStatus: this.RiZhiJianTingvalue
      };
      this.$http
        .post(this.nozzle.subtitlesLedUpdate, params)
        .then(response => {
          this.getleddata();
          message(response);
        })
        .catch(response => {
          message(response);
        });
    },
    // 分组管理
    FenZu() {
      this.FenZuflag = true;
      this.LoadFZData();
    },
    // 加载分组信息
    LoadFZData() {
      this.$http
        .post(this.nozzle.subtitlesledQuerySiteGroup)
        .then(response => {
          this.FZTableData = response.data.data.list;
        })
        .catch(response => {});
    },
    // 分组新增弹窗
    AddFenZu() {
      this.FenZuflag2 = true;
      this.AddFZInput = "";
      this.FenzuTitle = "新增分组";
      this.FenZuflag2type = 1;
    },
    // 分组新增/修改 提交
    AddFenZuUpdata() {
      if (this.AddFZInput.length == "") {
        this.$message({
          showClose: true,
          message: "请输入分组名称后再新增",
          type: "warning"
        });
        return;
      }
      if (this.FenZuflag2type == 1) {
        // 新增
        var params2 = [
          {
            groupName: this.AddFZInput
          }
        ];
        this.$http
          .post(this.nozzle.subtitlesledaddSiteGroup, params2)
          .then(response => {
            message(response);
            this.FenZuflag2 = false;
            this.LoadFZData();
          })
          .catch(response => {});
      } else {
        // 修改
        var params2 = {
          groupName: this.AddFZInput,
          id: this.ClickID
        };
        this.$http
          .post(this.nozzle.subtitlesledUpdateSiteGroup, params2)
          .then(response => {
            message(response);
            this.FenZuflag2 = false;
            this.LoadFZData();
          })
          .catch(response => {});
      }
    },
    // 分组修改
    EditFZ(index, rows) {
      this.FenZuflag2 = true;
      this.FenzuTitle = "修改分组";
      this.FenZuflag2type = 2;
      this.AddFZInput = rows.groupName;
      this.ClickID = rows.id;
    },
    // 删除
    DelfZ(index, rows) {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var DelID = [];
          DelID.push(rows.id);
          this.$http
            .post(this.nozzle.subtitlesleddeleteSiteGroup, DelID)
            .then(response => {
              message(response);
              this.LoadFZData();
            })
            .catch(response => {
              message(response);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 分组站点分配
    SiteGuanl(index, rows) {
      this.SiteDialog = true;
      this.SiteDialogID = rows.id;
      this.LoadSiteData();
    },
    // 分组站点分配数据
    LoadSiteData() {
      this.$http
        .post(this.nozzle.subtitlesledQuerySiteGroup, {
          parentId: this.SiteDialogID
        })
        .then(response => {
          this.SiteTableData = response.data.data.list;
        })
        .catch(response => {
          message(response);
        });
    },
    // 删除站点
    Delsite(index, rows) {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var DelID = [];
          DelID.push(rows.id);
          this.$http
            .post(this.nozzle.subtitlesleddeleteSiteGroup, DelID)
            .then(response => {
              message(response);
              this.LoadSiteData();
            })
            .catch(response => {
              message(response);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 新增站点
    AddSiteu() {
      this.NoSiteDialog = true;
      this.loadNoFPSite();
    },
    // 获取未分配的站点
    loadNoFPSite() {
      var params = {
        siteName: this.loadNoFPSiteInput,
        page: this.PRPage,
        rows: this.PRSize
      };
      this.$http
        .post(this.nozzle.subtitlesledQuerySiteMes, params)
        .then(response => {
          this.NoSiteData = response.data.data.list;
          this.PRDatagridDataLength = response.data.data.totalCount;
        })
        .catch(response => {
          message(response);
        });
    },
    PRSizeChange(val) {
      // 改变每页的条数
      this.PRSize = val;
      this.loadNoFPSite();
    },
    PRCurrentChange(val) {
      console.log(val);
      //改变页数
      this.PRPage = val;
      this.loadNoFPSite();
    },
    RiZhiPRSizeChange(val) {
      console.log(val);
      // 改变每页的条数
      this.RiZhiPRSize = val;
      this.loadRizhi();
    },
    RiZhiPRCurrentChange(val) {
      console.log(val);
      //改变页数
      this.RiZhiPRPage = val;
      this.loadRizhi();
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    AddNoSiteupdata() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          showClose: true,
          message: "请勾选站点后再新增",
          type: "warning"
        });
        return;
      }

      for (var i = 0; i < this.multipleSelection.length; i++) {
        this.multipleSelection[i].parentId = this.SiteDialogID;
      }
      this.$http
        .post(this.nozzle.subtitlesledaddSiteGroup, this.multipleSelection)
        .then(response => {
          message(response);
          this.NoSiteDialog = false;
          this.LoadSiteData();
        })
        .catch(response => {
          message(response);
        });
    }
  }
};
</script>

<style scoped>
#LEDConfig {
  box-sizing: border-box;
  position: relative;
  padding: 10px;
  font-size: 0;
}
.SelectTitle {
  display: inline-block;
  margin-left: 5px;
  text-align: center;
  height: 60px;
  line-height: 60px;
  color: var(--white);
}
.tab {
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: rgba(225, 225, 225, 0.1);
}

.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% - 60px);
  width: 100%;
  overflow: auto;
  /* background: rgba(225, 225, 225, 0.1); */
}

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

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

.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;
}

#RiZhiBOx.el-input,
#RiZhiBOx .el-input__inner {
  width: 400px !important;
}

.tdbtn {
  border: 1px solid #ffffff;
  padding: 2px 10px;
  cursor: pointer;
  margin-right: 10px;
}
.el-form-item {
  margin-bottom: 14px;
  width: 49%;
  display: inline-block;
}

/* 弹窗 */
#DialogSearch {
  width: 100%;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  text-align: left;
}
#DialogSearch .el-input {
  width: 250px;
  margin: 0 10px;
}
#DialogCentent {
  width: 100%;
  height: 600px;
}
/* 弹窗 */
.DialogSearch2 {
  width: 100%;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  text-align: left;
}
.DialogSearch2 .el-input {
  width: 250px;
  margin: 0 10px;
}
.DialogCentent2 {
  width: 100%;
  height: 400px;
}
.el-dialog__body {
  padding-top: 0 !important;
  height: 520px !important;
}
.el-dialog__header {
  text-align: center !important;
}

.leftFormBox,
.RightFormBox {
  width: calc(50% - 10px);
  height: 350px;
  overflow: auto;
  float: left;
  margin-left: 10px;
}
.leftFormBox > .el-form-item {
  margin-bottom: 14px;
  width: 100%;
  display: inline-block;
}
.FormFenQu > .el-form-item {
  margin-bottom: 14px;
  width: 100%;
  display: inline-block;
}
.FormP {
  color: var(--diatitle);
  height: 20px;
  line-height: 20px;
}
.FormFenQu {
  width: 100%;
  height: calc(100% - 20px);
  overflow: auto;
}
</style>