<template>
  <div class="drawDialog">
    <el-drawer
      :title="`云台设置${this.areaData.name}`"
      :visible.sync="ptzdrawer"
      direction="rtl"
    >
      <div class="ytDraw">
        <div class="openClass">
          <el-button type="primary" @click="openPowerFun()">开启</el-button>
          <el-button type="warning" @click="closePowerFun()">关闭</el-button>
        </div>
        <div class="ytTop">
          <div class="cirle">
            <div class="ybg1">
              <div class="ybg2" @click="openPower(powerOn)">
                <b v-if="powerOn">关闭</b>
                <b v-else>开启</b>
              </div>
              <div class="arrowtop" @click="handleTop">
                <i class="el-icon-arrow-up"></i>
              </div>
              <div class="arrowright" @click="handleRight">
                <i class="el-icon-arrow-right"></i>
              </div>
              <div class="arrowbottom" @click="handleBottom">
                <i class="el-icon-arrow-down"></i>
              </div>
              <div class="arrowleft" @click="handleLeft">
                <i class="el-icon-arrow-left"></i>
              </div>
            </div>
          </div>
          <div class="controlBox">
            <div class="sf gnbtn">
              <h3><i class="el-icon-full-screen"></i>缩放</h3>
              <div class="grop">
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  @click="sfAdd"
                ></el-button>
                <el-button
                  type="primary"
                  icon="el-icon-minus"
                  @click="sfMin"
                ></el-button>
              </div>
            </div>
            <div class="gq gnbtn">
              <h3><i class="el-icon-orange"></i>光圈</h3>
              <div class="grop">
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  @click="gqAdd"
                ></el-button>
                <el-button
                  type="primary"
                  icon="el-icon-minus"
                  @click="gqMin"
                ></el-button>
              </div>
            </div>
            <div class="jj gnbtn">
              <h3><i class="el-icon-view"></i>焦距</h3>
              <div class="grop">
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  @click="jjAdd"
                ></el-button>
                <el-button
                  type="primary"
                  icon="el-icon-minus"
                  @click="jjMin"
                ></el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="speedBox">
          <span class="label">速度</span>
          <el-slider v-model="speedVal"></el-slider>
          <span class="label">{{ speedVal }}%</span>
        </div>
        <div class="btnfungrop">
          <el-button type="primary" icon="el-icon-camera" @click="handleTakePic"
            >主动拍照</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-c-scale-to-original"
            @click="handleTimeClick"
            >下发时间表</el-button
          >
          <!-- <el-button type="primary" icon="el-icon-c-scale-to-original"
            >开启雨刷</el-button
          > -->
          <el-button type="primary" icon="el-icon-sunny">镜头除雾</el-button>
          <el-button
            type="primary"
            icon="el-icon-mobile-phone"
            @click="savePreset"
            >保存预置位</el-button
          >
        </div>
        <div class="presetList">
          <h3>预置位</h3>
          <div class="presetTable">
            <el-table
              :data="tableData"
              height="calc(100% )"
              border
              style="width: 100%"
            >
              <el-table-column prop="name" label="名称"> </el-table-column>
              <el-table-column prop="presetNo" label="预置位号">
              </el-table-column>
              <el-table-column label="操作" width="140">
                <template slot-scope="scope">
                  <el-button
                    @click.native.stop="handleSet(scope.row)"
                    type="primary"
                    icon="el-icon-setting"
                  ></el-button>
                  <el-button
                    @click.native.stop="handlePlay(scope.row)"
                    type="primary"
                    icon="el-icon-video-play"
                  ></el-button>
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    @click.native.stop="handleDelete(scope.row)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-dialog
      title="设置预置位"
      :visible.sync="prestDialogShow"
      :close-on-click-modal="false"
      width="480px"
    >
      <el-form :model="presetform" :rules="rules" ref="ruleForm">
        <el-form-item label="预置位名称" prop="name">
          <el-input v-model="presetform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预置位号" prop="presetVal">
          <el-input
            v-model.number="presetform.presetVal"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="prestDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="commitPrest">确 定</el-button>
      </div>
    </el-dialog>
    <setTime ref="setTime_ref"></setTime>
    <!-- // 主动拍照选择预置位 -->
    <el-dialog
      title="主动拍照"
      :visible.sync="takePicShow"
      :close-on-click-modal="false"
      width="480px"
    >
      <el-form :model="takepicform" :rules="rules" ref="ruleForm">
        <el-form-item label="选择通道">
          <el-select
            v-model="takepicform.selectChannelValue"
            placeholder="请选择通道"
            ref="multiSelect"
          >
            <el-option
              v-for="item in channelListOption"
              :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>
        </el-form-item>
        <el-form-item label="预置位号">
          <el-select
            v-model="takepicform.presetVal"
            placeholder="请选择"
            class="channelDiv"
            filterable
          >
            <el-option
              v-for="n in 255"
              :key="n"
              :label="n"
              :value="n"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="takePicShow = false">取 消</el-button>
        <el-button type="primary" @click="takePrestPic">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getChannelByTermidJoggle,
  getTermStatus,
  setTermCamera,
  getTermCameraRequest,
  getPresetApi,
  savePresetApi,
  deletePresetApi,
  getTakePicStatusJoggle,
} from "@/utils/api/index";
import setTime from "./components/setTime.vue";
export default {
  components: { setTime },
  data() {
    var checkpreset = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("预置位号不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value <= 0 || value > 254) {
            callback(new Error("预置位号为[1~254]"));
          } else {
            callback();
          }
        }
      }, 500);
    };
    return {
      powerOn: false, //电源默认关闭
      ptzdrawer: false,
      speedVal: 50,
      prestDialogShow: false, //保存预置位弹窗
      presetform: {
        name: "",
        presetVal: 1,
      },
      tableData: [],
      statusTimer: null,
      statusNum: 0,
      termId: null,
      fucType: 0, //点击某个按钮ctrl
      presetNum: 0, //默认预置位 0
      rules: {
        name: [
          { required: true, message: "请输入预置位名称", trigger: "blur" },
        ],
        presetVal: [{ validator: checkpreset, trigger: "blur" }],
      },
      //选择预置位拍照

      channelListOption: [], //通道数组
      takePicShow: false,
      takepicform: {
        selectChannelValue: 1,
        presetVal: 1,
      },
      deviceTimer: null, //装置循环获取
      deviceNum: 1, //循环次数
    };
  },
  computed: {
    areaData() {
      return this.$store.state.currentData;
    },
  },
  methods: {
    display() {
      console.log(this.areaData);
      this.termId = this.areaData.id;
      this.ptzdrawer = true;
      this.getPresetList();
    },
    getPresetList() {
      getPresetApi({
        termId: this.termId,
      })
        .then((res) => {
          console.log(res);
          this.tableData = res.data;
        })
        .catch((err) => {});
    },
    //开启电源
    openPower(val) {
      console.log(val);
      this.powerOn = !this.powerOn;
      if (val) {
        //开启
        this.fucType = 9;
        this.presetNum = 0;
        console.log("点击了关闭");
      } else {
        //关闭
        this.fucType = 0;
        this.presetNum = 0;
        console.log("点击了开启");
      }

      this.termstatusFun();
    },
    //单独开启
    openPowerFun() {
      this.fucType = 0;
      this.presetNum = 0;
      this.termstatusFun();
    },
    //单独关闭
    closePowerFun() {
      this.fucType = 9;
      this.presetNum = 0;
      this.termstatusFun();
    },
    //控制上下左右
    handleTop() {
      console.log("我点击了向上移动一个单位");
      this.fucType = 2;
      this.presetNum = 0;
      this.termstatusFun();
    },
    handleBottom() {
      console.log("我点击了向下移动一个单位");
      this.fucType = 3;
      this.presetNum = 0;
      this.termstatusFun();
    },
    handleLeft() {
      console.log("我点击了向左移动一个单位");
      this.fucType = 4;
      this.presetNum = 0;
      this.termstatusFun();
    },
    handleRight() {
      console.log("我点击了向右移动一个单位");
      this.fucType = 5;
      this.presetNum = 0;
      this.termstatusFun();
    },
    //控制缩放
    sfAdd() {
      console.log("sf增加");
    },
    sfMin() {
      console.log("sf减少");
    },
    //控制光圈
    gqAdd() {
      console.log("gq增加");
    },
    gqMin() {
      console.log("gq减少");
    },
    //控制焦距
    jjAdd() {
      console.log("jj增加");
      this.fucType = 6;
      this.presetNum = 0;
      this.termstatusFun();
    },
    jjMin() {
      console.log("jj减少");
      this.fucType = 7;
      this.presetNum = 0;
      this.termstatusFun();
    },
    //保存预置位
    savePreset() {
      this.prestDialogShow = true;
      console.log("点击保存预置位");
    },
    commitPrest() {
      console.log(this.presetform);
      this.fucType = 8;
      this.presetNum = this.presetform.presetVal;
      this.termstatusFun();
      //一秒后调用保存接口
      setTimeout(() => {
        savePresetApi({
          name: this.presetform.name,
          presetNo: this.presetform.presetVal,
          termId: this.termId,
        })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.prestDialogShow = false;
              this.getPresetList();
            }
          })
          .catch((err) => {});
      }, 1000);
    },
    //点击预置位
    handleSet(val) {
      console.log(val);
      this.prestDialogShow = true;
      this.presetform.name = val.name;
      this.presetform.presetVal = val.presetNo;
    },
    handlePlay(val) {
      console.log(val);
      this.fucType = 1;
      this.presetNum = val.presetNo;
      this.termstatusFun();
    },
    handleDelete(val) {
      console.log(val);
      deletePresetApi({
        presetNo: val.presetNo,
        termId: val.termId,
      })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            // this.prestDialogShow = false;
            this.getPresetList();
          }
        })
        .catch((err) => {});
    },
    //获取设备状态
    termstatusFun() {
      // act=cameractrl --cmdid=XYYFV11-HENA-0003 --channel=1 --preset=0 --ctrl=2
      getTermStatus({ termId: this.termId }).then((res) => {
        console.log(res);
        if (res.data.isonline) {
          let params = [
            {
              name: "act",
              value: "cameractrl",
            },
            {
              name: "udp",
              value: 1,
            },
            {
              name: "channel",
              value: 1,
            },
            {
              name: "preset",
              value: this.presetNum,
            },
            {
              name: "ctrl",
              value: this.fucType,
            },
          ];
          this.setTermFn(params);
        } else {
          this.picLoading = false;
          this.$message({
            duration: 1500,
            showClose: true,
            message: "装置下线，发送指令失败",
            type: "error",
          });
        }
      });
    },
    //下发命令
    setTermFn(val) {
      setTermCamera({
        termId: this.termId,
        list: val,
      })
        .then((res) => {
          console.log(res);
          this.$message({
            duration: 1500,
            showClose: true,
            message: "命令执行成功",
            type: "success",
          });
          // this.getctrlStatus(res.data);
          // clearInterval(this.statusTimer);
          // this.statusTimer = null;
          // this.statusTimer = window.setInterval(() => {
          //   this.getctrlStatus(res.data);
          //   this.statusNum++;
          // }, 5000);
        })
        .catch((err) => {});
    },

    //下发拍照时间表
    handleTimeClick() {
      console.log("下发拍照时间表");
      this.$refs.setTime_ref.display(this.areaData);
    },
    //获取通道的接口
    getChannelList() {
      console.log(this.areaData);
      getChannelByTermidJoggle({ termid: this.areaData.id })
        .then((res) => {
          console.log(res);
          this.channelListOption = res.data.list;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //主动拍照
    handleTakePic() {
      console.log(this.areaData);
      this.takePicShow = true;
      this.getChannelList();
    },
    takePrestPic() {
      console.log("点击了拍照");
      console.log(this.takepicform);
      getTermStatus({ termId: this.termId }).then((res) => {
        console.log(res);
        if (res.data.isonline) {
          let params = [
            {
              name: "act",
              value: "capture",
            },
            {
              name: "udp",
              value: 1,
            },
            {
              name: "channel",
              value: this.takepicform.selectChannelValue,
            },
            {
              name: "preset",
              value: this.takepicform.presetVal,
            },
            {
              name: "type",
              value: 0,
            },
          ];
          this.takepicFun(params);
        } else {
          this.picLoading = false;
          this.$message({
            duration: 1500,
            showClose: true,
            message: "装置下线，发送指令失败",
            type: "error",
          });
        }
      });
    },
    takepicFun(val) {
      this.takePicShow = false;
      setTermCamera({
        termId: this.termId,
        channelId: this.takepicform.selectChannelValue,
        list: val,
      })
        .then((res) => {
          console.log(res);
          this.getTakePicStatus(res.data);
          // 清除可能存在的旧定时器
          if (this.deviceTimer) {
            clearInterval(this.deviceTimer);
          }
          // 设置新的定时器，每秒调用一次 getinfo
          this.deviceTimer = window.setInterval(() => {
            this.getTakePicStatus(res.data);
            this.deviceNum++;
          }, 1000);
        })
        .catch((err) => {});
    },
    //查询命令是否下发成功
    getTakePicStatus(val) {
      console.log(val);
      getTakePicStatusJoggle({
        requestid: val.requestId,
        termId: this.termId,
        photoTime: new Date(val.date).getTime(),
      })
        .then((res) => {
          console.log(res);
          if (
            res.data.cmaStatus != 1 &&
            res.data.picStatus == false &&
            this.statusNum >= 5
          ) {
            window.clearInterval(this.deviceTimer);
            this.deviceTimer = null;
            this.deviceNum = 1;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "下发指令超时，请重试！",
              type: "warning",
            });
          } else if (
            res.data.cmaStatus == 1 &&
            res.data.picStatus == false &&
            this.statusNum < 5
          ) {
            window.clearInterval(this.deviceTimer);
            this.deviceTimer = null;
            this.deviceNum = 1;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "下发指令成功！",
              type: "success",
            });
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
  },
};
</script>
<style lang="less">
.drawDialog {
  .el-drawer.rtl {
    width: 340px !important;
  }
  .el-drawer__header {
    padding-top: 16px;
    margin-bottom: 16px;
  }
  .ytDraw {
    //display: flex;
    padding: 12px;
    height: 100%;
    .openClass {
      display: flex;
      justify-content: space-around;
    }
    .ytTop {
      display: flex;
      height: 200px;
      margin-bottom: 12px;
      .cirle {
        width: 200px;
        height: 200px;
        //background: #fcc;
        display: flex;
        align-items: center;
        justify-content: center;
        .ybg1 {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 90%;
          height: 90%;
          //background: #128071;
          border-radius: 100%;
          overflow: hidden;
          position: relative;
          box-shadow: 0 0 5px rgba(18, 128, 113, 0.5),
            /* 上方阴影 */ 0 0 5px rgba(18, 128, 113, 0.5),
            /* 右侧阴影 */ 0 0 5px rgba(18, 128, 113, 0.5),
            /* 下方阴影 */ 0 0 5px rgba(18, 128, 113, 0.5); /* 左侧阴影 */
          .ybg2 {
            width: 30%;
            height: 30%;
            border-radius: 50%;
            background-color: #16ad99ba;
            border: 2px solid rgba(18, 128, 113, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            &:hover {
              background-color: #0cf1d3ba;
            }
            b {
              font-size: 14px;
              font-weight: normal;
            }
          }
          .arrowtop {
            position: absolute;
            top: 0px;
            cursor: pointer;
            &:hover {
              background: #e7e4e48c;
              i {
                color: #169e8c;
              }
            }
          }
          .arrowright {
            position: absolute;
            right: 0;
            cursor: pointer;
            &:hover {
              background: #e7e4e48c;
              i {
                color: #169e8c;
              }
            }
          }
          .arrowleft {
            position: absolute;
            left: 0;
            cursor: pointer;
            &:hover {
              background: #e7e4e48c;
              i {
                color: #169e8c;
              }
            }
          }
          .arrowbottom {
            position: absolute;
            bottom: 0px;
            cursor: pointer;

            &:hover {
              background: #e7e4e48c;
              i {
                color: #169e8c;
              }
            }
          }
          i {
            font-size: 54px;
            color: #16ad99ba;
          }
        }
      }
      .controlBox {
        margin-left: 24px;
        .gnbtn {
          h3 {
            font-size: 14px;
            color: #169e8c;
            i {
              margin-right: 6px;
            }
          }
          .grop {
            display: flex;
            .el-button {
              width: auto !important;
            }
            .el-button + .el-button {
              margin-left: 8px;
            }
          }
        }
      }
    }
    .speedBox {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      .el-slider {
        width: 214px;
        margin: 0px 12px;
      }
    }
    .btnfungrop {
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
      width: 228px;
      .el-button {
        width: 108px !important;
        &:nth-child(even) {
          margin-left: 12px !important;
        }
      }
    }
    .presetList {
      height: calc(100% - 354px);
      margin-top: 12px;
      h3 {
        font-size: 14px;
        font-weight: bold;
      }
      .presetTable {
        height: calc(100% - 26px);
        .el-table--border {
          border-bottom: 1px solid #ebeef5;
        }
        .el-button {
          width: auto !important;
          margin-bottom: 0px !important;
        }
        .el-button + .el-button {
          margin-left: 8px;
        }
      }
    }
  }
  .dialog-footer {
    .el-button--default,
    .el-button--primary {
      width: 80px !important;
      margin-bottom: 0px !important;
    }
    .el-button + .el-button {
      margin-left: 10px !important;
    }
  }
}
</style>
