<template>
  <div class="AreaBox">
    <div class="areaHead">
      <span @dblclick="handleDblClick(areaData.cmdid)">{{
        areaData.cmdid
      }}</span>
      <el-button
        type="text"
        :icon="areaData.isfavor == 1 ? 'el-icon-star-on' : 'el-icon-star-off'"
        @click="addCollectClick"
        >{{ areaData.isfavor == 1 ? "取消收藏" : "添加收藏" }}</el-button
      >
    </div>
    <div class="paramsDate">
      <h3>日历快速查询</h3>
      <el-date-picker
        v-model="dateValue"
        type="date"
        placeholder="选择日期"
        format="yyyy 年 MM 月 dd 日"
        :picker-options="pickerOptions"
        @change="changedate"
        @focus="handleDateFocus"
        :clearable="false"
      >
      </el-date-picker>
    </div>
    <div class="paramsDate">
      <h3>通道监拍点</h3>
      <!-- <el-radio-group v-model="selectChannelValue" @input="changeChannelId">
        <el-radio-button
          v-for="item in channelListOption"
          :key="item.channelid"
          :value="item.channelid"
          :label="item.channelid"
        >
          {{
            item.alias !== null && item.alias !== ""
              ? item.alias
              : item.channelname
          }}</el-radio-button
        >
      </el-radio-group> -->
      <el-select
        v-model="selectChannelValue"
        placeholder="请选择通道"
        @change="changeChannelId"
        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>
    </div>
    <div class="paramsDate setTimebtn">
      <h3>操作项</h3>
      <div class="buttonGroup">
        <takePicButton></takePicButton>

        <takeVideoButton></takeVideoButton>

        <deviceInfoButton></deviceInfoButton>

        <scheduleButton></scheduleButton>
        <alarmButton></alarmButton>
        <cableButton></cableButton>
        <gpsButton></gpsButton>
        <el-button
          type="primary"
          @click="handlehistoryPic"
          v-if="roleUser != 4"
        >
          历史图片</el-button
        >
        <el-button type="primary" @click="handleParams"> 参数配置</el-button>

        <el-button type="primary" @click="handleuploadPic" v-if="roleUser == 0">
          上传图片</el-button
        >
        <takeTimePicButton v-if="roleUser == 0"></takeTimePicButton>
        <!-- <el-button type="primary" @click="handleTakePic" :loading="picLoading"
          >主动拍照
        </el-button> -->
        <!-- <el-button type="primary">主动拍照 </el-button>
        <el-button type="primary">主动拍照 </el-button>
        <el-button type="primary">主动拍照 </el-button>
        <el-button type="primary">主动拍照 </el-button>
        <el-button type="primary">主动拍照 </el-button>
        <el-button type="primary">主动拍照 </el-button>
        <el-button type="primary">主动拍照 </el-button> -->
      </div>
    </div>
    <div class="setfocalLength" v-if="areaData.protocol == '65286'">
      <h3>焦距调节</h3>
      <div class="selectChannel">
        <span class="labelname">选择通道</span>
        <el-select
          v-model="channelarrValue"
          placeholder="请选择通道"
          ref="multiSelect"
        >
          <el-option
            v-for="item in channelfocalOpyion"
            :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="buttonGroup">
        <el-button type="primary" icon="el-icon-zoom-in" @click="amplify()"
          >放大</el-button
        >
        <el-button type="primary" icon="el-icon-zoom-out" @click="reduce()"
          >缩小</el-button
        >
      </div>
    </div>
    <parameterSetDialog ref="parameterSetref"></parameterSetDialog>
    <uploadpic ref="uploadpicref"></uploadpic>
  </div>
</template>
<script>
import EventBus from "@/utils/event-bus";
import takePicButton from "./takePicButton.vue";
import takeTimePicButton from "./takeTimePicButton.vue";
import takeVideoButton from "./takeVideoButton.vue";
import deviceInfoButton from "./deviceInfoButton.vue";
import scheduleButton from "./scheduleButton.vue";
import alarmButton from "./alarmButton.vue";
import cableButton from "./cableButton.vue";
import gpsButton from "./gpsButton.vue";
import uploadpic from "./uploadpic.vue";
import parameterSetDialog from "../../photographicDevice/components/parameterSetDialog.vue";
import {
  getChannelByTermidJoggle,
  updateTermCamera,
  getTermStatus,
  addFavorList,
} from "@/utils/api/index";
export default {
  components: {
    takePicButton,
    takeTimePicButton,
    takeVideoButton,
    deviceInfoButton,
    scheduleButton,
    alarmButton,
    cableButton,
    gpsButton,
    parameterSetDialog,
    uploadpic,
  },
  data() {
    return {
      roleUser: "",
      selectChannelValue: null, //选中的通道
      channelListOption: [], //通道数组
      channelarrValue: null,
      channelfocalOpyion: [], //焦距通道
      dateValue: "", //选择日期
      pickerOptions: {
        disabledDate(date) {
          return date.getTime() > Date.now(); // 禁用大于今天的日期
        },
      },
      picLoading: false, //拍照loading
      selectDyId: "", //获取当前选中的电压线路等信息
      selectLineId: "",
      selectTowerId: "",
      collectFlag: false, //收藏
    };
  },

  watch: {
    areaData: {
      handler(newVal, oldVal) {},
      deep: true,
      immediate: true,
    },
  },
  computed: {
    areaData() {
      return this.$store.state.currentData;
    },
  },
  created() {
    this.roleUser = localStorage.getItem("role");
    console.log("asdsaddddddddddddddddddddddddd", this.roleUser);
  },
  mounted() {
    this.getDateTime();
  },
  methods: {
    //双击选中复制
    handleDblClick(val) {
      // alert(val);
      var input = document.createElement("input"); // 创建input对象
      input.value = val; // 设置复制内容
      document.body.appendChild(input); // 添加临时实例
      input.select(); // 选择实例内容
      document.execCommand("Copy"); // 执行复制
      document.body.removeChild(input); // 删除临时实例
      //this.$message.success("复制成功！");
      this.$message({
        duration: 800,
        showClose: true,
        message: "复制成功！",
        type: "success",
      });
    },
    //获取当前时间
    getDateTime() {
      console.log(new Date());
      this.dateValue = new Date().getTime();
      console.log(this.dateValue);
    },
    //点击收藏和取消收藏
    addCollectClick() {
      if (this.areaData.isfavor !== 1) {
        this.areaData.isfavor = 1;
        addFavorList({ list: [this.areaData.id], type: 1 }).then((res) => {
          EventBus.$emit("treelist");
        });
        this.$message({
          type: "success",
          message: "添加成功!",
        });
        // this.$confirm("此操作将添加至收藏夹, 是否继续?", "提示", {
        //   confirmButtonText: "确定",
        //   cancelButtonText: "取消",
        //   type: "warning",
        // }).then(() => {

        // });
      } else {
        this.$confirm("此操作将取消收藏, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.areaData.isfavor = 0;
          addFavorList({ list: [this.areaData.id], type: 0 }).then((res) => {
            EventBus.$emit("treelist");
          });
          this.$message({
            type: "success",
            message: "取消收藏!",
          });
        });
      }
    },
    //focus时间重新赋值
    handleDateFocus() {
      // 更新pickerOptions的disabledDate函数，禁用大于当前时间的日期
      this.pickerOptions.disabledDate = (date) => {
        //console.log(date);
        const currentDate = new Date();
        return date.getTime() > currentDate.getTime(); // 禁用大于今天的日期
      };
    },
    //选择时间
    changedate() {
      console.log(this.dateValue.getTime());
      this.$parent.getPhotoList(
        this.selectChannelValue,
        this.dateValue,
        this.areaData.id
      );
    },
    //获取通道的接口
    getChannelList() {
      console.log(this.areaData);
      getChannelByTermidJoggle({ termid: this.areaData.id })
        .then((res) => {
          console.log(res);
          this.channelListOption = [
            { channelname: "全部", channelid: -1, alias: null },
          ];
          this.channelListOption = this.channelListOption.concat(res.data.list);
          console.log(this.channelListOption);
          this.channelfocalOpyion = res.data.list; //焦距通道
          this.channelarrValue = this.channelfocalOpyion[0].channelid;
          this.selectChannelValue = this.channelListOption[0].channelid; //默认选中所有通道;
          this.$store.commit("channelId", this.selectChannelValue); //通道保存在vuex中
          this.$store.commit("channelIdList", res.data.list); //将通道保存在vuex中
          this.$parent.getPhotoList(
            this.selectChannelValue,
            this.dateValue,
            this.areaData.id
          );
          this.selectDyId = res.data.dyId;
          this.selectLineId = res.data.lineId;
          //this.selectTowerId = res.data.towerId;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //切换通道
    changeChannelId(val) {
      console.log(val);
      this.$store.commit("channelId", val); //将currentData保存在vuex中
      this.$parent.getPhotoList(val, this.dateValue, this.areaData.id);
    },
    //历史图片跳转
    handlehistoryPic() {
      console.log(this.areaData);
      if (this.areaData.id == "13276") {
        // "id": 13009,
        //     "towerid": 3980,
        this.$set(this.areaData, "id", 13009);
        this.$set(this.areaData, "towerid", 3980);
      }
      console.log(this.selectDyId, this.selectLineId, this.selectTowerId);
      // console.log(this.zzCmdid, this.selectChannelValue);
      if (typeof this.dateValue == "number") {
        this.dateValue = new Date(new Date().toLocaleDateString()).getTime();
      } else {
        this.dateValue = this.dateValue.getTime();
      }
      this.$router.push({
        path: "/realTimeSearch",
        query: {
          dyId: this.selectDyId,
          lineId: this.selectLineId,
          towerId: this.areaData.towerid,
          termId: this.areaData.id,
          cmdId: this.areaData.cmdid,
          channelId: this.selectChannelValue,
          date: this.dateValue,
        },
      });
    },
    //参数配置
    handleParams() {
      console.log(this.areaData);
      this.$refs.parameterSetref.display(this.areaData);
    },
    //焦距放大缩小
    amplify() {
      getTermStatus({ termId: this.areaData.id }).then((res) => {
        console.log(res);
        if (res.data.isonline) {
          updateTermCamera({
            termId: this.areaData.id,
            channelId: this.channelarrValue,
            type: 6,
          })
            .then((res) => {})
            .catch();
          //this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid);
        } else {
          this.$message({
            duration: 1500,
            showClose: true,
            message: "装置下线，发送指令失败",
            type: "error",
          });
        }
      });
      console.log(this.channelarrValue, this.areaData.id);
    },
    //焦距缩小
    reduce() {
      getTermStatus({ termId: this.areaData.id }).then((res) => {
        console.log(res);
        if (res.data.isonline) {
          updateTermCamera({
            termId: this.areaData.id,
            channelId: this.channelarrValue,
            type: 7,
          })
            .then((res) => {})
            .catch();
          //this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid);
        } else {
          this.$message({
            duration: 1500,
            showClose: true,
            message: "装置下线，发送指令失败",
            type: "error",
          });
        }
      });
    },
    handleuploadPic() {
      this.$refs.uploadpicref.display(this.areaData);
    },
  },
};
</script>
<style lang="less">
.AreaBox {
  .areaHead {
    height: 32px;
    line-height: 32px;
    color: #169e8c;
    font-size: 14px;
    font-weight: normal;
    display: flex;
    justify-content: space-between;
    span {
      font-size: 12px;
    }
    .el-button--text {
      color: #f08200;
    }
  }
  .paramsDate {
    margin-bottom: 16px;
    position: relative;
    h3 {
      font-size: 14px;
      font-weight: normal;
      color: #303133;
      margin-bottom: 8px;
    }
    .el-radio-group {
      display: flex;
      flex-wrap: wrap;
      .el-radio-button {
        margin-right: 6px;
        margin-top: 6px;
        .el-radio-button__inner {
          padding: 8px 4px;
          width: 66px;
          border-left: 1px solid #dcdfe6;
          border-radius: 4px;
        }
        .el-radio-button__orig-radio:checked + .el-radio-button__inner {
          box-shadow: none !important;
        }
      }
    }
  }
  .setTimebtn {
    .buttonGroup {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .el-button {
        margin-bottom: 8px;
        width: 104px;
      }
      .el-button + .el-button {
        margin-left: 0px;
      }
    }
  }
  .setfocalLength {
    margin-bottom: 16px;
    position: relative;
    h3 {
      font-size: 14px;
      font-weight: normal;
      color: #303133;
      margin-bottom: 8px;
    }
    .selectChannel {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      .labelname {
        font-size: 14px;
        margin-right: 4px;
        width: 80px;
        color: #666;
      }
    }
    .buttonGroup {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .el-button {
        margin-bottom: 8px;
        width: 104px;
      }
      .el-button + .el-button {
        margin-left: 0px;
      }
    }
  }
}
</style>
