<template>
  <div class="videobtnbox">
    <!-- <el-button type="primary" @click="handleTakePic" :loading="picLoading"
      >主动录像
    </el-button> -->
    <el-dropdown trigger="click" @command="handleCommandpic">
      <el-button type="primary" :loading="picLoading">
        主动录像<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown" class="picdropStyle">
        <el-dropdown-item
          :command="item.channelid"
          v-for="(item, index) in channelIdList"
          :key="index"
          >{{
            item.alias !== null && item.alias !== ""
              ? item.alias
              : item.channelname
          }}</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
    <el-dialog
      class="videoDialog"
      title="配置参数"
      :visible.sync="videoVisible"
    >
      <el-form :model="videoForm" label-width="94px" ref="videoRef">
        <el-form-item label="码流类型">
          <el-select v-model="videoForm.stream">
            <el-option label="主码流" value="0"></el-option>
            <el-option label="从码流" value="1"></el-option>
            <el-option label="第3码流" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="时间 s(秒)"
          prop="time"
          :rules="[
            { required: true, message: '时间不能为空' },
            { type: 'number', message: '时间必须为数字值' },
          ]"
        >
          <el-input-number
            v-model="videoForm.time"
            :min="1"
            :max="60"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="videoVisible = false">取 消</el-button>
        <el-button type="primary" @click="anVideoFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getTermStatus,
  setTermCamera,
  getTakePicStatusJoggle,
  getTakePicPhotoStatusJoggle,
} from "@/utils/api/index";
export default {
  data() {
    return {
      picLoading: false,
      statusTimer: null,
      statusNum: 0,
      picPimer: null,
      picNum: 0,
      videoVisible: false,
      pzchannelId: "",
      videoForm: {
        stream: "0",
        time: 20,
      },
    };
  },
  watch: {
    // protocol: {
    //   handler(newVal, oldVal) {},
    //   deep: true,
    //   immediate: true,
    // },
    termId: {
      handler(newVal, oldVal) {
        clearInterval(this.statusTimer);
        this.statusTimer = null;
        this.statusNum = 0;
        this.picLoading = false;
      },
      deep: true,
      immediate: true,
    },
    // channelId: {
    //   handler(newVal, oldVal) {},
    //   deep: true,
    //   immediate: true,
    // },
  },
  computed: {
    termId() {
      return this.$store.state.termId;
    },
    channelIdList() {
      return this.$store.state.channelIdList;
    },
    protocol() {
      return this.$store.state.protocol;
    },
  },
  methods: {
    handleCommandpic(command) {
      console.log(command);
      this.pzchannelId = command;
      this.picLoading = true;
      getTermStatus({ termId: this.termId }).then((res) => {
        console.log(res);
        if (res.data.isonline) {
          console.log(this.protocol);
          if (this.protocol == "65281") {
            this.videoVisible = true;
          } else {
            this.picLoading = true;
            let params = [
              {
                name: "act",
                value: "capture",
              },
              {
                name: "channel",
                value: command,
              },
              {
                name: "preset",
                value: 255,
              },
              {
                name: "type",
                value: 1,
              },
            ];
            this.setTermFn(params);
          }
        } else {
          this.picLoading = false;
          this.$message({
            duration: 1500,
            showClose: true,
            message: "装置下线，发送指令失败",
            type: "error",
          });
        }
      });
    },

    anVideoFn() {
      this.$refs.videoRef.validate((valid) => {
        if (valid) {
          this.videoVisible = false;
          this.picLoading = true;
          let params = [
            {
              name: "act",
              value: "capture",
            },
            {
              name: "channel",
              value: this.pzchannelId,
            },
            {
              name: "preset",
              value: 255,
            },
            {
              name: "type",
              value: 1,
            },
            {
              name: "stream",
              value: this.videoForm.stream,
            },
            {
              name: "videoTime",
              value: this.videoForm.time,
            },
          ];
          this.setTermFn(params);
        } else {
          return false;
        }
      });
    },
    //下发命令
    setTermFn(val) {
      setTermCamera({
        termId: this.termId,
        list: val,
      })
        .then((res) => {
          console.log(res);
          this.getTakePicStatus(res.data);
          clearInterval(this.statusTimer);
          this.statusTimer = null;
          this.statusTimer = window.setInterval(() => {
            this.getTakePicStatus(res.data);
            this.statusNum++;
          }, 3000);
        })
        .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);
          //res.data  0 状态未知  1 成功 2失败
          if (res.data.cmaStatus != 1 && this.statusNum >= 5) {
            this.clearFn();
            this.$message({
              duration: 1500,
              showClose: true,
              message: "下发指令超时，请重试！",
              type: "warning",
            });
          } else if (res.data.cmaStatus == 1 || res.data.picStatus == true) {
            this.clearFn();
            this.$message({
              duration: 1500,
              showClose: true,
              message: "下发指令成功！",
              type: "success",
            });
            clearInterval(this.picPimer);
            this.picPimer = null;
            this.picPimer = window.setInterval(() => {
              this.newPicApi(val);
              this.picNum++;
            }, 8000);
          }
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //获取最新的图片
    newPicApi(val) {
      getTakePicPhotoStatusJoggle({
        requestid: val.requestId,
        termId: this.termId,
        photoTime: new Date(val.date).getTime(),
      }).then((res) => {
        console.log(res.data);
        if (res.data == true && this.picNum < 10) {
          //   console.log(this.$parent.$parent);
          this.$parent.$parent.getPhotoList(
            -1,
            new Date(val.date).getTime(),
            this.termId
          ); //获取图片列表是传当前设备的 id 和termid
          this.$message({
            duration: 1500,
            showClose: true,
            message: "已返回最新视频！",
            type: "success",
          });
          clearInterval(this.picPimer);
          this.picPimer = null;
          this.picNum = 0;
          console.log("已返回最新视频！");
        } else if (res.data == false && this.picNum > 10) {
          clearInterval(this.picPimer);
          this.picPimer = null;
          this.picNum = 0;
        }
      });
    },
    clearFn() {
      clearInterval(this.statusTimer);
      this.statusTimer = null;
      this.statusNum = 0;
      this.picLoading = false;
    },
  },
};
</script>
<style lang="less">
.videobtnbox {
  .videoDialog {
    .el-dialog {
      width: 380px;
    }
    .el-input,
    .el-input-number {
      width: 214px;
    }
    .dialog-footer {
      .el-button--default,
      .el-button--primary {
        width: 80px !important;
      }
      .el-button + .el-button {
        margin-left: 10px !important;
      }
    }
  }
}
</style>
