<template>
  <!-- <el-button type="primary" @click="handleTakePic" :loading="picLoading"
    >主动拍照
  </el-button> -->
  <div>
    <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="timeDialog"
      title="拍照时间"
      :visible.sync="dialogFormVisible"
      width="380px"
    >
      <el-form :model="form">
        <el-form-item label="拍照时间：">
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmClick">确 定</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,
      pzchannelId: "",
      dialogFormVisible: false,
      form: {
        startTime: "",
      },
      timestamp: "",
    };
  },
  watch: {
    termId: {
      handler(newVal, oldVal) {
        console.log("我改变了");
        clearInterval(this.statusTimer);
        this.statusTimer = null;
        this.statusNum = 0;
        clearInterval(this.picPimer);
        this.picPimer = null;
        this.picNum = 0;
        this.picLoading = false;
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    console.log(this.channelIdList);
    console.log("我是主动拍照");
  },
  computed: {
    termId() {
      return this.$store.state.termId;
    },

    channelIdList() {
      return this.$store.state.channelIdList;
    },
  },

  methods: {
    handleCommandpic(command) {
      // --act=capture --cmdid=XY-SIMULATOR-0016 --channel=1 --preset=255 --scheduleTime=1704110700 --clientid=5 --reqid=TS
      console.log(command);
      this.dialogFormVisible = true;
      this.pzchannelId = command;
    },
    confirmClick() {
      console.log(this.pzchannelId);
      console.log(this.form.startTime.getTime() / 1000);
      this.timestamp = this.form.startTime.getTime() / 1000;
      this.dialogFormVisible = false;
      this.picLoading = true;
      getTermStatus({ termId: this.termId }).then((res) => {
        console.log(res);
        if (res.data.isonline) {
          let params = [
            {
              name: "act",
              value: "capture",
            },
            {
              name: "channel",
              value: this.pzchannelId,
            },
            {
              name: "preset",
              value: 255,
            },
            {
              name: "scheduleTime",
              value: this.timestamp,
            },

            {
              name: "type",
              value: 0,
            },
          ];
          this.setTermFn(params);
        } else {
          this.picLoading = false;
          this.$message({
            duration: 1500,
            showClose: true,
            message: "装置下线，发送指令失败",
            type: "error",
          });
        }
      });
    },
    handleTakePic() {},
    //下发命令
    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++;
          }, 5000);
        })
        .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 == 0 &&
          //   res.data.picStatus == false &&
          //   this.statusNum >= 5
          // ) {
          //   //全部没有返回，失败
          //   this.clearFn();
          //   this.$message({
          //     duration: 1500,
          //     showClose: true,
          //     message: "指令图片都没有返回true，并且轮巡大于五次！",
          //     type: "warning",
          //   });
          // } else if (res.data.cmaStatus == 1) {
          //   this.clearFn();
          //   this.$message({
          //     duration: 1500,
          //     showClose: true,
          //     message: "拍照指令cmaStatus下发成功返回1！",
          //     type: "success",
          //   });
          //   clearInterval(this.picPimer);
          //   this.picPimer = null;
          //   this.picPimer = window.setInterval(() => {
          //     this.newPicApi(val);
          //     this.picNum++;
          //   }, 8000);
          //   return;
          // } else if (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++;
          //   }, 2000);
          //   return;
          // }
          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",
            });
            this.newPicApi(val);
            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);
        console.log(this.picNum);
        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;
    },
  },
  destroyed() {
    console.log("离开了");
    clearInterval(this.statusTimer);
    this.statusTimer = null;
    this.statusNum = 0;
  },
  beforeRouteLeave(to, from, next) {
    // 路由跳转前，清除轮询
    next();
    console.log("7777777777777777777777777");
  },
};
</script>
<style lang="less">
.timeDialog {
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 256px;
  }
  .el-dialog__footer {
    .dialog-footer {
      .el-button {
        width: 80px !important;
        margin-bottom: 0px !important;
      }
      .el-button + .el-button {
        margin-left: 10px !important;
      }
    }
  }
}
</style>
