<template>
  <a-spin :spinning="isLoading">
    <!-- 照明区域 -->
    <div>
      <div class="light-area">
        <div class="light-area-tab"></div>
        <span class="light-area-text"> 照明区域 </span>
        <button
          class="plan"
          :class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }"
          @click="togglePlan">
          {{ isPlanEnabled ? '计划启用' : '计划禁用' }}
        </button>
      </div>
      <!-- 照明区域按钮部分 -->
      <div class="area">
        <template v-if="!showAllButtonsArea">
          <button
            v-for="(button, index) in limitedButtons1"
            :key="index"
            :class="{ btn: true, selected: button.selected }"
            @click="changeArea(button)">
            {{ button.name }}
          </button>
          <div style="margin-top: 10px">
            <span @click="showAllButtonsArea = true" class="openzm"><down-outlined /> 展开</span>
          </div>
        </template>
        <template v-else>
          <button
            v-for="(button, index) in props.treeData"
            :key="index"
            :class="{ btn: true, selected: button.selected }"
            @click="changeArea(button)">
            {{ button.name }}
          </button>
          <div style="margin-top: 10px">
            <span @click="showAllButtonsArea = false" class="openzm"><up-outlined /> 回缩</span>
          </div>
        </template>
      </div>
    </div>
    <!-- 照明回路部分 -->
    <div>
      <div class="circuit-area">
        <div class="circuit-tab"></div>
        <span class="circuit-text">照明回路</span>
        <div class="btn2">
          <button
            class="openPlan"
            :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
            @click="togglePlan2">
            {{ isPlanEnabled2 ? '启用面板' : '禁用面板' }}
          </button>
          <a-switch
            v-model:checked="selectAllCheckbox"
            :disabled="singleSelection"
            :class="{
              'blue-background': selectAllCheckbox,
              'grey-background': !selectAllCheckbox,
            }"
            @change="toggleAllSelection" />
          <button class="allBtn">全选</button>
          <button class="both" @click="selectAll">
            {{ singleSelection ? '多选' : '单选' }}
          </button>
        </div>
      </div>
      <div class="btnArea">
        <template v-if="!showAllButtons">
          <button
            v-for="(button, index) in limitedButtons2"
            :key="index"
            :class="{ btn: true, selected: button.selected }"
            class="zmhlbtn"
            @click="changeLine(button)">
            <stop-outlined v-if="button.ctrlStatus" />
            {{ button.name }}
          </button>
          <div style="margin-top: 10px">
            <span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
          </div>
        </template>
        <template v-else>
          <button
            v-for="(button, index) in buttons2"
            :key="index"
            :class="{ btn: true, selected: button.selected }"
            class="zmhlbtn"
            @click="changeLine(button)">
            <stop-outlined v-if="button.ctrlStatus" />
            {{ button.name }}
          </button>
          <div style="margin-top: 10px">
            <span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
          </div>
        </template>
      </div>
    </div>
    <!-- 控制模式部分 -->
    <div>
      <div class="control-area" v-show="thisButton2.code">
        <div class="control-tab"></div>
        <span class="control-text"> 控制模式 </span>
      </div>
      <!-- 控制模式按钮部分 -->
      <div class="control-mode-btn-area" v-show="thisButton2.code">
        <button
          v-for="(button3, index) in controlMode"
          :key="index"
          class="btn"
          :disabled="button3.value != 3"
          :class="{ selected: thisButton2.mode.value == button3.value }"
          @click="selectButton3(button3)">
          {{ button3.label }}
        </button>
      </div>
    </div>
    <!-- 控制场景部分 -->
    <div>
      <div class="control-scene-area" v-show="thisButton2.mode.value == 3">
        <div class="control-scene-tab"></div>
        <span class="control-scene-text"> 控制场景 </span>
        <div v-if="!singleSelection" style="flex: 1; color: red; text-align: right"
          >多选模式下会修改当前选中的所有回路</div
        >
      </div>
      <!-- 控制场景按钮部分 -->
      <div class="control-scene-btn-area" v-show="thisButton2.mode.value == 3">
        <button
          v-for="(button4, index) in controlScene"
          :key="index"
          :class="{ btn: true, selected: thisButton2.scene.value == button4.value }"
          @click="selectButton4(button4)">
          {{ button4.label }}
        </button>
      </div>
    </div>
    <!-- 底部按钮区 -->
    <div class="bottom">
      <a-badge :offset="[-10, 2]" :count="changeList.length">
        <a-popconfirm
          title="刷新将会取消已作出的修改"
          ok-text="确定"
          cancel-text="取消"
          @confirm="refresh"
          @cancel="changeCancel">
          <button class="flushed">刷新</button>
        </a-popconfirm>
      </a-badge>

      <a-spin :spinning="buttonLoading">
        <button class="execute" @click="showModal">执行</button>
      </a-spin>
    </div>

    <!-- 点击执行时的弹出框 -->
    <div class="out-dialog" v-if="executeVisible">
      <div class="content" v-if="executeVisible">
        <div>
          <div class="div-operation"></div>
          <span class="text-operation">变更内容 </span>
        </div>
        <div class="j-box" v-for="(item, index) in diffList" :key="item.id">
          <div class="journal" style="margin-top: 20px">
            <div class="imgText">
              <div class="zjzm">
                <img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
                <span
                  class="title-text"
                  style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
                  >{{ item.regionName + ' > ' + item.deviceGroupName }}</span
                >
              </div>
              <a-popconfirm
                title="此操作将会撤销修改"
                ok-text="确定"
                cancel-text="取消"
                @confirm="delBtn(item)"
                @cancel="changeCancel">
                <button class="cxbtn">撤销</button>
              </a-popconfirm>
            </div>
            <div class="btn-box">
              <div class="btn-item">
                <div class="left">控制模式</div>
                <div class="right">
                  <span>手动</span>
                  <img src="/asset/image/bulbLogo/22406.png" alt="" />
                  <span>自动</span>
                </div>
              </div>
              <div class="btn-item">
                <div class="left"> 亮度 </div>
                <div class="right">
                  <!-- 由于数字0也会被判为false，故只判断undefined 和 null -->
                  <span>{{
                    item?.stateBefore?.brightness != undefined ? item.stateBefore.brightness : '--'
                  }}</span>
                  <img src="/asset/image/bulbLogo/22406.png" alt="" />
                  <span>{{
                    item?.stateAfter?.brightness != undefined ? item.stateAfter.brightness : '--'
                  }}</span>
                </div>
              </div>
              <div class="btn-item">
                <div class="left"> 控制场景 </div>
                <div class="right">
                  <span>{{
                    item?.stateBefore?.scene?.label ? item.stateBefore.scene.label : '--'
                  }}</span>
                  <img src="/asset/image/bulbLogo/22406.png" alt="" />
                  <span>{{
                    item?.stateAfter?.scene?.label ? item.stateAfter.scene.label : '--'
                  }}</span>
                </div>
              </div>
              <div class="btn-item">
                <div class="left"> 色温 </div>
                <div class="right">
                  <span>{{
                    item?.stateBefore?.color != undefined ? item.stateBefore.color : '--'
                  }}</span>
                  <img src="/asset/image/bulbLogo/22406.png" alt="" />
                  <span>
                    {{ item?.stateAfter?.color != undefined ? item.stateAfter.color : '--' }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="width: 100%; height: 60px"></div>
      <div class="button-box">
        <button class="cancel" @click="executeVisible = false">取消</button>
        <button class="execute" @click="submitChangeList">执行</button>
      </div>
    </div>
  </a-spin>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue';
  import { DownOutlined, UpOutlined, StopOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  // 请求
  import { http } from '/nerv-lib/util/http';
  import { lightingManage } from '/@/api/IlluminationInfo';
  import { getAllEnum } from '/@/api/index';

  // 初始化  =========================================================================

  onMounted(() => {
    // 默认选项
    setArea();
    // 获得枚举
    getEnum(['IlluminationMode', 'IlluminationScene']);
  });
  // 获得枚举
  const getEnum = (arr: any) => {
    getAllEnum({ params: arr }).then((res) => {
      const data = res.data;
      // 控制模式
      controlMode.value = data.IlluminationMode;
      // 控制场景
      controlScene.value = data.IlluminationScene;
    });
  };
  // 以 1-1 作为默认回路
  const setArea = () => {
    const data = props.treeData[0];
    buttons2.value = data.childList;
  };

  // 与父组件的交互  ===================================================================

  const props = defineProps({
    // 分区结构（照明区域 > 照明回路）
    treeData: {
      type: Array,
      default: [],
    },
  });
  // 向上传递修改选择样式
  /**
   * @method changeArea 用于控制俯视图的选中状态
   * @method reset 用于重置按钮区
   */
  const emit = defineEmits(['changeArea', 'reset']);

  // 照明区域业务 =======================================================================

  // 计划启用状态
  const isPlanEnabled = ref(false);
  // 计划启用切换事件
  const togglePlan = () => {
    isPlanEnabled.value = !isPlanEnabled.value;
  };

  // 按钮区展开与收起状态
  const showAllButtonsArea = ref(false);
  // 被选中的分区  默认为1 用于选中样式渲染
  const selectedButton = ref<string | undefined>('1');

  // 分区切换
  const changeArea = (button: any) => {
    // 当前选中按钮
    selectedButton.value = button.id;
    // 设置当前选中的回路
    buttons2.value = button.childList;
    // 重置按钮状态
    emit('reset');
    // 设置选中按钮状态
    button.selected = true;
    // 改变俯视图样式
    emit('changeArea', button.id);
    // 当前选中回路 - 置空
    resetMode();
    // 最近交互过的按钮 - 置空
    handleButton.value = '';
  };
  // 默认最多展示8个按钮
  const limitedButtons1 = computed(() => props.treeData.slice(0, 8));

  // 照明回路业务 ======================================================================

  // 最近交互过的按钮id，用于禁用和启用
  const handleButton = ref('');
  // 面板启用/禁用状态
  const isPlanEnabled2 = ref(true);
  // 面板启用/禁用切换事件
  const togglePlan2 = () => {
    // 如果未交互任何按钮
    if (handleButton.value == '') {
      return message.info('请选择照明回路');
    }
    // 获取最近交互过的按钮
    const btn: any = buttons2.value.find((button: any) => button.id === handleButton.value);
    let panel = +!btn.ctrlStatus;
    isLoading.value = true;
    http
      .get(lightingManage.setDisable, { deviceGroup: btn.code, panel })
      .then((res) => {
        if (res.msg === 'success') {
          // 确认成功后 - 按钮文本取反 - 按钮布尔值修改 - 关闭loading
          isPlanEnabled2.value = !isPlanEnabled2.value;
          btn.ctrlStatus = panel;
          isLoading.value = false;
        } else {
          isLoading.value = false;
        }
      })
      .catch(() => {
        isLoading.value = false;
      });
  };

  // 是否单选，状态
  let singleSelection = ref(true);
  // 多选与单选切换事件
  const selectAll = () => {
    selectAllCheckbox.value = false;
    // 切换时清空当前所有选项
    buttons2.value.forEach((button: any) => {
      button.selected = false;
    });
    singleSelection.value = !singleSelection.value;
    // 当前选中回路 - 置空
    resetMode();
    // 改变俯视图样式
    emit('changeArea', [selectedButton.value]);
  };

  // 全选状态
  const selectAllCheckbox = ref(false);
  // 全选切换事件（switch）
  const toggleAllSelection = () => {
    let arr = [selectedButton.value];
    // 全选
    if (selectAllCheckbox.value) {
      buttons2.value.forEach((item: any, index: number) => {
        // 全选时，默认展示第一条回路的模式-场景按钮
        if (index == 0) {
          thisButton2.value = item;
        }
        item.selected = true;
        arr.push(item.id);
      });
      // 全不选
    } else {
      buttons2.value.forEach((item: any) => {
        item.selected = false;
      });
      // 全不选时，隐藏模式-场景按钮
      resetMode();
    }
    emit('changeArea', arr);
  };

  // 储存当前选中的回路
  const thisButton2 = ref({
    code: '',
    name: '',
    pcode: '',
    mode: {
      value: -1,
    },
    scene: {
      value: -1,
    },
  });
  // 照明回路的按钮切换
  const changeLine = (button: any) => {
    // 存储一次按钮ID，用于禁用/启用交互
    handleButton.value = button.id;
    // 根据按钮状态，展示禁用/启用按钮文本
    if (button.ctrlStatus) {
      isPlanEnabled2.value = true;
    } else {
      isPlanEnabled2.value = false;
    }
    // 选择时反控俯视图
    let level1 = selectedButton.value;
    let level2 = button.id;
    // 单选模式，需将所有其他按钮设为false
    if (singleSelection.value) {
      buttons2.value.forEach((item: any) => {
        item.selected = false;
      });
      button.selected = !button.selected;
      emit('changeArea', [level1, level2]);
    } else {
      // 多选模式传值
      button.selected = !button.selected;
      const arr = [level1];
      buttons2.value.forEach((item: any) => {
        if (item.selected) {
          arr.push(item.id);
        }
      });
      emit('changeArea', arr);
    }
    // 用于展示控制模式
    if (button.selected) {
      // 发生了选中事件
      thisButton2.value = button;
    } else {
      // 未发生选中 或 多选的其中一个按钮被取消
      resetMode();
    }
    console.log(thisButton2, 'button');
  };

  // 照明回路所有按钮
  const buttons2 = ref([]);
  // 按钮区展开与收起状态
  const showAllButtons = ref(false);
  // 默认最多展示8个按钮
  const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));

  // 控制模式业务 ====================================================================

  // 控制模式 - 按钮切换
  const selectButton3 = (button3: any) => {
    let checked = thisButton2.value.mode;
    console.log(button3.value, '---', checked.value);
    // 如果点击了相同的按钮，则未作出修改
    if (checked.value === button3.value) {
      return;
    }
    checked.value = button3.value;
  };

  // 控制场景业务 =====================================================================

  // 控制模式枚举
  const controlMode = ref([]);
  // 场景枚举
  const controlScene = ref([]);
  // 控制场景 - 按钮切换
  const selectButton4 = (button4) => {
    // 当前选中的回路数据
    const data = thisButton2.value;
    // 修改前的数据
    let before = data.scene.value;
    // 修改后的数据
    let after = button4.value;
    // 如果没有产生实质性的修改（修改前后相同，则跳出）
    if (before === after) {
      return message.info('未产生实际修改');
      // 产生了修改
    } else {
      thisButton2.value.scene.value = after;
      // 查询之前是否修改过
      const result = changeList.value.find((item: any, index: number) => {
        item.index = index;
        return item.deviceGroup == data.code;
      });
      // 如果已产生过修改
      if (result) {
        // 改回了原有的值，则从数组中移除
        if (after == result.before) {
          changeList.value.splice(result.index, 1);
          // 修改为新值，则只修改after
        } else {
          result.scene = after;
          // 临时flag，用后移除
          delete result.index;
        }
        // 如果未产生过修改
      } else {
        changeList.value.push({
          // 回路
          deviceGroup: data.code,
          deviceGroupName: data.name,
          // 分区
          region: data.pcode,
          regionName: '',
          // 修改前
          before: before,
          // 修改后
          scene: after,
        });
      }
      console.log(changeList.value, 'changeList');
    }
    thisButton2.value.scene.value = after;
  };

  // 底部按钮区 ======================================================================

  const isLoading = ref(false);
  // 执行按钮loading
  const buttonLoading = ref(false);
  // 刷新
  const refresh = () => {
    // 关闭执行弹窗
    executeVisible.value = false;
    // 设置当前选中的序列
    selectedButton.value = '1';
    // 重置选中样式 和 按钮选中状态
    emit('changeArea', ['1']);
    emit('reset');
    // 默认选择第一个楼层
    let data = props.treeData[0];
    // 清空保存的修改
    changeList.value = [];
    // 默认选中
    data.selected = true;
    // 默认选中 1-1 分区 回路
    buttons2.value = data.childList;
    resetMode();
  };
  // 右下角的执行事件
  const showModal = () => {
    if (!changeList.value.length) {
      return message.info('未产生任何修改');
    }
    buttonLoading.value = true;
    http
      .post(lightingManage.getChangeList, { infoList: changeList.value, projectId: 'HLlmTZp8' })
      .then((res) => {
        if (res.msg === 'success') {
          diffList.value = res.data;
          executeVisible.value = true;
        } else {
          message.warning('获取修改内容失败');
        }
        buttonLoading.value = false;
      })
      .catch(() => {
        buttonLoading.value = false;
      });
  };
  // 通用取消
  const changeCancel = () => {};

  // 内侧弹窗 ========================================================================

  // 内侧弹窗显隐
  const executeVisible = ref<boolean>(false);
  // 修改模式 需要向后端提交的内容
  const changeList: any = ref([]);
  // 展示修改前后差异的内容
  const diffList = ref([]);
  //撤销
  const delBtn = (obj: any) => {
    console.log(obj, '当前选择的修改内容');
    // 将treeData对应回路的数据改回，数据以后端为准
    const area = props.treeData.find((item: any) => {
      return item.code == obj.region;
    });
    const line = area.childList.find((item: any) => {
      return item.code == obj.deviceGroup;
    });
    line.scene.value = obj.stateBefore.scene.value;
    // 将 changeList 与 diffList 中记录的修改移除 (排除极端情况)
    changeList.value = changeList.value.filter((item: any) => {
      return item.deviceGroup !== obj.deviceGroup;
    });
    diffList.value = diffList.value.filter((item: any) => {
      return item.deviceGroup !== obj.deviceGroup;
    });
    console.log(changeList, 'changeList');
    console.log(diffList, 'diffList');
    // 如果移除后不再有修改内容，则隐藏弹出框
    if (changeList.value.length == 0) {
      executeVisible.value = false;
    }
  };
  const submitChangeList = () => {};

  // 其他业务 ========================================================================

  // 将当前选择的回路置空
  const resetMode = () => {
    thisButton2.value = {
      code: '',
      name: '',
      pcode: '',
      mode: {
        value: -1,
      },
      scene: {
        value: -1,
      },
    };
  };

  // 向外暴露方法
  defineExpose({
    // 分区切换
    changeArea,
    // 回路切换
    changeLine,
  });
</script>
<style lang="less" scoped>
  @import './dialogStyle.less';
  @import './tabs1.less';
</style>
