<template>
  <el-dialog
    class="setTimeDialog"
    title="拍照时间表设置"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="1000px"
    @close="handleclose"
  >
    <div class="zzinfo">装置编号：{{ areaData.cmdid }}</div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="拍照时间表查询" name="1">
        <div class="searchTime">
          <div class="channelBox">
            <span>选择通道：</span>
            <el-select
              v-model="selectChannel"
              placeholder="请选择"
              @change="changeChannel"
            >
              <el-option
                v-for="item in channelList"
                :key="item.channelid"
                :label="
                  item.alias !== null && item.alias !== ''
                    ? item.alias
                    : item.channelname
                "
                :value="item.channelid"
              >
                {{
                  item.alias !== null && item.alias !== ""
                    ? item.alias
                    : item.channelname
                }}
              </el-option>
            </el-select>
          </div>
          <div class="timeContain">
            <div class="timeLeft" v-loading="baseTimeLoading">
              <h3>
                时间表({{ baseTimeList.length }})
                <span v-if="baseTimeList.length !== 0 && offsetNumTime !== null"
                  >偏移量（{{ offsetNumTime }}分钟）</span
                >
              </h3>
              <div class="tagsBox" v-if="baseTimeList.length !== 0">
                <el-tag v-for="(item, index) in baseTimeList" :key="index"
                  >{{ $moment(item).format("HH:mm") }}
                </el-tag>
              </div>
              <div class="nodata" v-else>
                <el-empty description="暂无数据"></el-empty>
              </div>
            </div>
            <div class="timeRight" v-loading="deviceTimeLoading">
              <h3>
                装置时间表({{ deviceTimeList.length }})
                <span v-if="deviceTimeList.length !== 0"
                  ><el-button type="text" size="mini" @click="deviceTimeClick"
                    ><i class="el-icon-refresh"></i>刷新装置时间表</el-button
                  ></span
                >
                <el-button v-else type="primary" @click="deviceTimeClick"
                  >装置时间表</el-button
                >
              </h3>
              <div class="tagsBox" v-if="deviceTimeList.length !== 0">
                <el-tag v-for="(item, index) in deviceTimeList" :key="index">{{
                  $moment(item).format("HH:mm")
                }}</el-tag>
              </div>
              <div class="nodata" v-else>
                <el-empty description="暂无数据"> </el-empty>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="拍照时间表下发" name="2">
        <div class="setTimerule">
          <el-table
            ref="multipleTable"
            :data="rulesListNew"
            stripe
            tooltip-effect="dark"
            style="width: 100%"
            height="calc(100% - 40px)"
            v-loading="ruleLoading"
          >
            <!-- <el-table-column type="index" width="55"> </el-table-column>
          <el-table-column type="selection" width="55"> </el-table-column> -->
            <template slot="empty">
              <el-empty :image-size="160" description="暂无数据"></el-empty>
            </template>
            <el-table-column label="名称" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column label="时间表规则">
              <template slot-scope="scope">
                <p
                  class="timeGz"
                  v-for="(val, index) in scope.row.listTime"
                  :key="index"
                >
                  <span>{{ val.startTime }} </span>

                  ~
                  <span>{{ val.endTime }}</span>
                  间隔：<b>{{ val.timeSpan }}分钟</b>
                </p>
              </template>
            </el-table-column>

            <el-table-column
              prop="remark"
              label="备注"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="140">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  @click.native.stop="handleSet(scope.row)"
                  >设置</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="pageNation">
            <el-pagination
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              :current-page="page"
              :page-size="pageSize"
              layout="sizes, prev, pager, next, jumper,total"
              :total="total"
              background
            >
            </el-pagination>
          </div>
        </div>
        <el-dialog
          class="setRoadDialog"
          title="设置"
          :visible.sync="isShowset"
          :close-on-click-modal="false"
          width="660px"
          append-to-body
          @close="closebtn"
        >
          <div class="setTimeTd">
            <div class="ruleinfo">
              <h3>装置信息</h3>
              <!-- <el-descriptions title="" :column="3" border>
                <el-descriptions-item label="装置名称">{{
                  areaData.name
                }}</el-descriptions-item>
                <el-descriptions-item label="装置编号">
                  {{ areaData.cmdid }}</el-descriptions-item
                >
              </el-descriptions> -->
              <p>
                <span>{{ infoData.dyname }}</span> /
                <span>{{ infoData.bsManufacturer }}</span> /
                <span>{{ infoData.xlname }}</span> /
                <span>{{ infoData.zzcmid }}</span>
              </p>
            </div>
            <div class="ruleinfo">
              <h3>时间表规则</h3>
              <div class="ruleBox">
                <span class="nameinfo"
                  >时间表名称：{{ currentTimeRule.name }}</span
                >
                <div class="listGz">
                  <p
                    class="timeGz"
                    v-for="(val, index) in currentTimeRule.listTime"
                    :key="index"
                  >
                    <span>{{ val.startTime }} </span>

                    ~
                    <span>{{ val.endTime }}</span>
                    间隔：<b>{{ val.timeSpan }}分钟</b>
                  </p>
                </div>
              </div>
            </div>
            <div class="ruleinfo">
              <div class="math">
                偏移时间(分)：
                <el-input-number
                  v-model="setNum"
                  :min="0"
                  :max="9"
                ></el-input-number>
              </div>
            </div>
            <div class="ruleinfo">
              <h3>选择通道</h3>
              <div class="checkBox">
                <el-radio-group v-model="timeChannel">
                  <el-radio
                    :label="item.channelid"
                    border
                    v-for="item in timeChannelList"
                    :key="item.channelid"
                    >{{
                      item.alias !== null && item.alias !== ""
                        ? item.alias
                        : item.channelname
                    }}</el-radio
                  >
                </el-radio-group>
              </div>
            </div>
            <p class="fail" v-show="failedFlag">时间表下发失败,请重新下发！</p>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closebtn">取 消</el-button>
            <el-button type="primary" @click="submitForm" :loading="sureloading"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>
<script>
import {
  getChannelListJoggle,
  getSchedulenr,
  getScheduleRulelListJoggle,
  getScheduleRulelAccessList,
  setTermCamera,
  getTermCameraRequest,
  getTermStatus,
  setScheduleRulel,
} from "@/utils/api/index";
export default {
  props: {
    title: String,
  },
  data() {
    return {
      isShow: false,
      activeName: "1", //选项卡
      infoData: {},
      selectChannel: "", //选中的通道
      channelList: [], //通道选项
      baseTimeList: [], //数据库时间表
      deviceTimeList: [], //装置时间表
      baseTimeLoading: false,
      deviceTimeLoading: false,
      deviceTimer: null, //装置循环获取
      deviceNum: 1, //循环次数
      offsetTime: 0, //偏移量
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
      rulesList: [], //规则列表
      rulesListNew: [], //改成自己想要的数据结构
      ruleLoading: false, //时间表规则列表loading
      isShowset: false, //下发时间表弹窗
      currentTimeRule: [],
      setNum: 0, //偏移时间
      timeChannel: "",
      timeChannelList: [], //下发时间表通道
      sureloading: false, //点击确定loading

      offsetNumTime: null,
      failedFlag: false,
    };
  },
  computed: {
    areaData() {
      return this.$store.state.currentData;
    },
  },
  mounted() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.name == 1) {
        this.selectChannel = 1;
        this.getDataBaseTime(this.areaData.id, this.selectChannel);
      }

      //下发的时候执行获取列表
      if (tab.name == 2) {
        this.deviceTimeList = [];
        this.getruleList();
      }
    },
    //获取通道
    getChannelSelect() {
      getChannelListJoggle({ termid: this.areaData.id })
        .then((res) => {
          this.channelList = res.data.list;
          this.timeChannelList = res.data.list;
          this.timeChannel = this.channelList[0].channelid;
          this.selectChannel = this.channelList[0].channelid;
          console.log(this.channelList);
          this.changeChannel();
        })
        .catch((err) => {});
    },
    //修改通道
    changeChannel() {
      console.log(this.selectChannel);
      this.getDataBaseTime(this.areaData.id, this.selectChannel);
      this.baseTimeLoading = true;
      this.deviceTimeList = [];
    },
    //获取数据库时间表数据
    getDataBaseTime(id, channelId) {
      getSchedulenr({
        channelid: channelId,
        terminalid: id,
      })
        .then((res) => {
          console.log(res);
          let val = res.data.list;
          this.offsetNumTime = res.data.offset;
          if (
            this.areaData.protocol == "65283" ||
            this.areaData.protocol == "65285" ||
            this.areaData.protocol == "65290"
          ) {
            //湖南规约
            console.log("湖南");
            console.log(val);
            var hnarr = [];
            for (var i = 0; i < val.length; i++) {
              if (i % 3 == 0) {
                var hnobj = {};
                hnobj.span = val[i].hour * 60 + val[i].minute;
                console.log("时间间隔");
              } else if (i % 3 == 1) {
                console.log("开始时间");
                console.log("a");
                hnobj.startTime = this.$moment(val[i]).format("HH:mm");
              } else if (i % 3 == 2) {
                console.log("结束时间");
                hnobj.endTime = this.$moment(val[i]).format("HH:mm");
                hnarr.push(hnobj);
              }
            }
            console.log("222222222222222222");
            console.log(hnarr);
            console.log("22222222222222222222222");
            let dayArr = [];
            //根据开始时间结束时间生产数组
            for (let k = 0; k < hnarr.length; k++) {
              console.log(hnarr[k].startTime);
              console.log(hnarr[k].endTime);
              console.log(hnarr[k].span);
              let Stime = this.$moment(hnarr[k].startTime, "HH:mm").format(
                "YYYY-MM-DD HH:mm:ss"
              );

              let Etime = this.$moment(hnarr[k].endTime, "HH:mm").format(
                "YYYY-MM-DD HH:mm:ss"
              );
              let spanTime = hnarr[k].span;

              while (
                this.$moment(Stime).isBefore(this.$moment(Etime)) ||
                this.$moment(Stime).isSame(this.$moment(Etime))
              ) {
                dayArr.push(Stime);
                Stime = this.$moment(Stime)
                  .add(spanTime, "minute")
                  .format("YYYY-MM-DD HH:mm:ss");
              }
              // // 将结束日期的天放进数组
              console.log(dayArr);
            }
            this.baseTimeList = [...new Set(dayArr)];
          } else {
            //其他规约
            this.baseTimeList = res.data.list;
          }
          this.baseTimeLoading = false;
        })
        .catch((err) => {});
    },
    //获取装置的时间表
    deviceTimeClick() {
      console.log("点击了获取装置时间表");
      if (this.areaData.onlinestatus === 1) {
        this.deviceTimeLoading = true;
        let params = [
          {
            name: "act",
            value: "schedule",
          },
          {
            name: "flag",
            value: 0,
          },
          {
            name: "channel",
            value: this.selectChannel,
          },
        ];
        this.setTermFn(params);
      } else {
        this.$message({
          duration: 1500,
          showClose: true,
          message: "装置下线，发送指令失败",
          type: "error",
        });
      }
    },
    //装置获取拍照时间表和下发公用接口
    setTermFn(dataParams) {
      console.log("点击了统一的接口", dataParams);
      setTermCamera({
        termId: this.areaData.id,
        list: dataParams,
      })
        .then((res) => {
          console.log(res);
          this.requestid = res.data.requestId;
          clearInterval(this.timer);
          this.deviceTimer = window.setInterval(() => {
            this.getinfo();
            this.deviceNum++;
            console.log(this.deviceNum, this.deviceNum * 1000);
          }, 1000 * this.deviceNum);
        })
        .catch((err) => {});
    },
    getinfo() {
      getTermCameraRequest({ requestid: this.requestid })
        .then((res) => {
          if (res.data.success == 1) {
            this.deviceTimeLoading = false;
            window.clearInterval(this.deviceTimer);
            this.deviceTimer = null;
            this.deviceNum = 1;
            console.log(JSON.parse(res.data.data));
            //this.deviceTimeList = JSON.parse(res.data.data).groupData;
            //this.processingData(JSON.parse(res.data.data).groupData); //执行数据转化
            this.processingData(JSON.parse(res.data.data).groupData); //执行数据转化
            console.log(this.deviceTimeList);
            this.$message({
              duration: 1500,
              showClose: true,
              message: "装置时间表已更新",
              type: "success",
            });
          } else if (this.deviceNum > 9) {
            this.deviceTimeLoading = false;

            window.clearInterval(this.deviceTimer);
            this.deviceTimer = null;
            this.deviceNum = 1;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "查询失败",
              type: "error",
            });
          }
        })
        .catch((err) => {});
    },
    //获取时间表规则列表
    getruleList() {
      this.ruleLoading = true;
      getScheduleRulelListJoggle({
        pageindex: this.page,
        pagesize: this.pageSize,
      })
        .then((res) => {
          console.log(res);
          this.rulesList = res.data.list;
          this.total = res.data.total;
          this.rulesListNew = [];
          this.changeListData(this.rulesList);
          this.ruleLoading = false;
        })
        .catch((err) => {});
    },
    //时间表规则数据转化
    changeListData(data) {
      //循环数据
      for (let i = 0; i < data.length; i++) {
        console.log(data[i]);
        var ruleArr = [];
        //循环规则
        for (let k = 0; k < data[i].list.length; k++) {
          if (k % 3 == 0) {
            //定义一个空对象
            var ruleObj = {};

            ruleObj.timeSpan =
              data[i].list[k].hour * 60 + data[i].list[k].minute;
            console.log("时间间隔", ruleObj.timeSpan);
          } else if (k % 3 == 1) {
            //开始时间
            ruleObj.startTime = this.$moment(data[i].list[k]).format("HH:mm");
            console.log(this.$moment(data[i].list[k]).format("HH:mm"));
          } else if (k % 3 == 2) {
            ruleObj.endTime = this.$moment(data[i].list[k]).format("HH:mm");
            console.log(this.$moment(data[i].list[k]).format("HH:mm"));
            ruleArr.push(ruleObj);
          }
        }
        this.rulesListNew.push({
          id: data[i].id,
          list: data[i].list,
          name: data[i].name,
          remark: data[i].remark,
          listTime: ruleArr,
        });
      }
      console.log(this.rulesListNew);
    },
    //根据规约处理时间表数据
    processingData(val) {
      console.log(this.areaData.protocol);
      if (
        this.areaData.protocol == "65283" ||
        this.areaData.protocol == "65285" ||
        this.areaData.protocol == "65290"
      ) {
        //湖南规约
        console.log("湖南");
        console.log(val);
        var hnarr = [];
        for (var i = 0; i < val.length; i++) {
          if (i % 3 == 0) {
            var hnobj = {};
            hnobj.span = val[i].hour * 60 + val[i].minute;
            console.log("时间间隔");
          } else if (i % 3 == 1) {
            console.log("开始时间");
            console.log("a");
            hnobj.startTime = this.$moment(val[i]).format("HH:mm");
          } else if (i % 3 == 2) {
            console.log("结束时间");
            hnobj.endTime = this.$moment(val[i]).format("HH:mm");
            hnarr.push(hnobj);
          }
        }
        console.log("222222222222222222");
        console.log(hnarr);
        console.log("22222222222222222222222");
        let dayArr = [];
        //根据开始时间结束时间生产数组
        for (let k = 0; k < hnarr.length; k++) {
          console.log(hnarr[k].startTime);
          console.log(hnarr[k].endTime);
          console.log(hnarr[k].span);
          let Stime = this.$moment(hnarr[k].startTime, "HH:mm").format(
            "YYYY-MM-DD HH:mm:ss"
          );

          let Etime = this.$moment(hnarr[k].endTime, "HH:mm").format(
            "YYYY-MM-DD HH:mm:ss"
          );
          let spanTime = hnarr[k].span;
          if (this.$moment(Etime).isBefore(this.$moment(Stime))) {
            let zeroEnd = this.$moment("23:59", "HH:mm").format(
              "YYYY-MM-DD HH:mm:ss"
            );
            let zeroStart = this.$moment("00:00", "HH:mm").format(
              "YYYY-MM-DD HH:mm:ss"
            );
            while (
              this.$moment(Stime).isBefore(this.$moment(zeroEnd)) ||
              this.$moment(Stime).isSame(this.$moment(zeroEnd))
            ) {
              dayArr.push(Stime);
              Stime = this.$moment(Stime)
                .add(spanTime, "minute")
                .format("YYYY-MM-DD HH:mm:ss");
            }
            while (
              this.$moment(zeroStart).isBefore(this.$moment(Etime)) ||
              this.$moment(zeroStart).isSame(this.$moment(Etime))
            ) {
              dayArr.push(zeroStart);
              zeroStart = this.$moment(zeroStart)
                .add(spanTime, "minute")
                .format("YYYY-MM-DD HH:mm:ss");
            }
          } else {
            while (
              this.$moment(Stime).isBefore(this.$moment(Etime)) ||
              this.$moment(Stime).isSame(this.$moment(Etime))
            ) {
              dayArr.push(Stime);
              Stime = this.$moment(Stime)
                .add(spanTime, "minute")
                .format("YYYY-MM-DD HH:mm:ss");
            }
          }

          // // 将结束日期的天放进数组
          console.log(dayArr);
        }
        this.deviceTimeList = [...new Set(dayArr)];
      } else {
        //其他规约
        this.deviceTimeList = val;
      }
    },
    //设置下发时间表规则
    handleSet(val) {
      console.log(val);
      this.isShowset = true;
      this.currentTimeRule = val;
      getScheduleRulelAccessList({ termid: this.areaData.id })
        .then((res) => {
          console.log(res);
          this.infoData = {
            dyname: res.data.list[0].name,

            xlname: res.data.list[0].list[0].name,
            bsManufacturer: res.data.list[0].list[0].bsManufacturer,
            zzname:
              res.data.list[0].list[0].list[0].name == null
                ? res.data.list[0].list[0].list[0].cmdid
                : res.data.list[0].list[0].list[0].name,
            zzcmid: res.data.list[0].list[0].list[0].cmdid,
          };
        })
        .catch((err) => {});
    },
    //确定下发
    //xympadmn --act=schedule [0xCA] --flag=[Request Set Flag, default is set=1, 0: request] --channel=[Channel No] --group=[Group] --hour1=[Hour 1] --min1=[Minute 1] --preset1=[Preset 1]
    submitForm() {
      console.log(this.currentTimeRule);
      this.failedFlag = false;
      let timeArrList = [];
      if (
        this.areaData.protocol == "65285" &&
        this.currentTimeRule.listTime.length > 1
      ) {
        this.$message({
          duration: 1500,
          showClose: true,
          message: "不支持多段时间表，请选择单段时间表",
          type: "warning",
        });
        return;
      }
      this.sureloading = true;
      getTermStatus({ termId: this.areaData.id }).then((res) => {
        console.log(res);
        if (res.data.isonline) {
          console.log(this.timeChannel, this.setNum, this.areaData.protocol);
          let params = [
            {
              name: "act",
              value: "schedule",
            },
            {
              name: "flag",
              value: 1,
            },
            {
              name: "channel",
              value: this.timeChannel,
            },
          ];
          let scheduleTimeList = this.currentTimeRule.listTime;
          console.log(this.currentTimeRule.listTime);
          let timeArr = []; //获取时间列表
          //获取当前时间规则，转化成时间点
          for (let i = 0; i < scheduleTimeList.length; i++) {
            console.log(scheduleTimeList[i]);
            var Stime = this.$moment(scheduleTimeList[i].startTime, "HH:mm")
              .add(this.setNum, "minute")
              .format("YYYY-MM-DD HH:mm:ss");

            var Etime = this.$moment(scheduleTimeList[i].endTime, "HH:mm")
              .add(this.setNum, "minute")
              .format("YYYY-MM-DD HH:mm:ss");
            var spanTime = scheduleTimeList[i].timeSpan;
            console.log(Stime, Etime, spanTime);
            if (
              this.areaData.protocol == "65283" ||
              this.areaData.protocol == "65285" ||
              this.areaData.protocol == "65290"
            ) {
              //湖南
              console.log("湖南", scheduleTimeList.length);

              // 设置时间间隔
              let fistSpan = this.$moment(new Date())
                .startOf("day")
                .minutes(spanTime)
                .format("YYYY-MM-DD HH:mm:ss");
              timeArr.push(fistSpan, Stime, Etime);
              console.log(timeArr);
            } else {
              //其他规约
              // if (this.$moment(Stime).isBefore(this.$moment(Etime))) {
              //   timeArr.push(Stime);
              //   Stime = this.$moment(Stime)
              //     .add(spanTime, "minute")
              //     .format("YYYY-MM-DD HH:mm:ss");
              // } else if (this.$moment(Stime).isSame(this.$moment(Etime))) {
              //   // Stime = "";
              //   timeArr = [];
              //   // Stime = this.$moment(Stime)
              //   //   .add(spanTime, "minute")
              //   //   .format("YYYY-MM-DD HH:mm:ss");
              // }
              while (
                this.$moment(Stime).isBefore(this.$moment(Etime)) ||
                this.$moment(Stime).isSame(this.$moment(Etime))
              ) {
                timeArr.push(Stime);
                Stime = this.$moment(Stime)
                  .add(spanTime, "minute")
                  .format("YYYY-MM-DD HH:mm:ss");
              }
            }
          }
          console.log(timeArr);
          let group = timeArr.length;
          params.push({
            name: "group",
            value: group,
          });
          for (let m = 0; m < timeArr.length; m++) {
            params.push(
              {
                name: "hour" + (m + 1),
                value: this.$moment(timeArr[m]).hour(),
              },
              {
                name: "min" + (m + 1),
                value: this.$moment(timeArr[m]).minute(),
              },
              {
                name: "preset" + (m + 1),
                value: 255,
              }
            );
          }
          console.log(params);
          for (var k = 0; k < timeArr.length; k++) {
            //console.log(moment(dayArr[k]).hour());
            timeArrList.push({
              hour: this.$moment(timeArr[k]).hour(),
              minute: this.$moment(timeArr[k]).minute(),
              preset: 255,
            });
          }
          console.log(timeArrList);
          var parmsobj = {
            termid: this.areaData.id,
            channelid: this.timeChannel,
            offset: this.setNum,
            list: timeArrList,
          };
          console.log(parmsobj);
          this.setTimeRuleJava(parmsobj); //使用java接口调用下发时间表
          //this.setTermFnRule(params);
        } else {
          this.sureloading = false;
          this.$message({
            duration: 1500,
            showClose: true,
            message: "装置下线，发送指令失败",
            type: "error",
          });
        }
      });
    },
    //使用接口下发时间表会写进数据库
    setTimeRuleJava(parmsobj) {
      console.log(parmsobj);
      setScheduleRulel({
        scheduleid: this.currentTimeRule.id,
        list: [parmsobj],
      })
        .then((res) => {
          console.log(res);
          if (res.data.list.length !== 0) {
            this.requestid = res.data.list[0].requestid;
            console.log(this.requestid);
            clearInterval(this.timer);
            this.deviceTimer = window.setInterval(() => {
              this.getinfoRules();
              this.deviceNum++;
              console.log(this.deviceNum, this.deviceNum * 1000);
            }, 1000 * this.deviceNum);
          } else {
            console.log("未获取到requestid");
          }
        })
        .catch((err) => {
          // this.$message({
          //   duration: 1500,
          //   showClose: true,
          //   message: "添加失败",
          //   type: "error",
          // });
        });
    },
    //下发时间表
    setTermFnRule(dataParams) {
      setTermCamera({
        termId: this.areaData.id,
        list: dataParams,
      })
        .then((res) => {
          console.log(res);
          this.requestid = res.data.requestId;
          clearInterval(this.timer);
          this.deviceTimer = window.setInterval(() => {
            this.getinfoRules();
            this.deviceNum++;
            console.log(this.deviceNum, this.deviceNum * 1000);
          }, 1000 * this.deviceNum);
        })
        .catch((err) => {});
    },
    getinfoRules() {
      getTermCameraRequest({ requestid: this.requestid })
        .then((res) => {
          if (res.data.success == 1) {
            this.sureloading = false;
            window.clearInterval(this.deviceTimer);
            this.deviceTimer = null;
            this.deviceNum = 1;
            console.log(JSON.parse(res.data.data));
            this.isShowset = false;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "时间表下发成功",
              type: "success",
            });
          } else if (this.deviceNum > 9) {
            this.sureloading = false;
            window.clearInterval(this.deviceTimer);
            this.deviceTimer = null;
            this.deviceNum = 1;
            this.failedFlag = true;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "时间表下发失败",
              type: "error",
            });
          }
        })
        .catch((err) => {});
    },
    //关闭下发弹窗
    closebtn() {
      this.isShowset = false;
      this.sureloading = false;
      this.setNum = 0;
    },
    display() {
      this.isShow = true;
      this.getChannelSelect();
      console.log(this.areaData);
    },
    handleclose() {
      this.isShow = false;
      this.sureloading = false;
      this.activeName = "1"; //选项卡
      this.selectChannel = ""; //选中的通道
      this.channelList = []; //通道选项
      this.baseTimeList = []; //数据库时间表
      this.deviceTimeList = []; //装置时间表
      window.clearInterval(this.deviceTimer);
      this.deviceTimer = null;
      this.deviceNum = 1;
      this.failedFlag = false;
    },
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      this.getruleList();
    },
    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getruleList();
    },
  },
};
</script>
<style lang="less">
.setTimeDialog {
  .zzinfo {
    position: absolute;
    top: 22px;
    left: 170px;
  }
  .el-dialog__body {
    margin-bottom: 12px;
    .el-tabs__content {
      height: 425px;
      .searchTime {
        .channelBox {
          margin-bottom: 12px;
        }
        .timeContain {
          display: flex;
          justify-content: space-between;
          .timeLeft {
            width: 428px;
            height: 336px;
            border-radius: 4px;
            border: 1px solid #eee;
            padding: 12px;
          }
          .timeRight {
            width: 428px;
            height: 336px;
            border-radius: 4px;
            border: 1px solid #eee;
            padding: 12px;
            h3 {
              .el-button {
                margin-left: 14px;
              }
            }
          }
          .timeLeft,
          .timeRight {
            h3 {
              line-height: 24px;
              height: 24px;
            }
          }
          .tagsBox {
            height: 308px;
            overflow: auto;
            .el-tag--small {
              margin: 4px;
            }
          }
        }
      }
      .el-tab-pane {
        height: 100%;
        .setTimerule {
          height: 100%;
          .timeGz {
            line-height: 24px;
            b {
              font-weight: 400;
              color: #169e8c;
            }
          }
          .el-button {
            width: 80px;
          }
          .pageNation {
            justify-content: flex-start;
          }
        }
      }
    }
  }
}
.setRoadDialog {
  .setTimeTd {
    .ruleinfo {
      margin-bottom: 16px;
      h3 {
        font-size: 14px;
        margin-bottom: 8px;
      }
      .ruleBox {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .nameinfo {
          //margin-bottom: 8px;
          margin-right: 16px;
          height: 24px;
          line-height: 24px;
        }
        .timeGz {
          height: 24px;
          line-height: 24px;
          b {
            font-weight: 400;
            color: #169e8c;
          }
        }
      }
    }
    .fail {
      color: red;
      line-height: 28px;
      font-size: 12px;
    }
  }
}
</style>
