<template>
  <div class="HomeFrameControl">
    <ElPopover trigger="manual" :value="activeIcon === 'FrameControl'" :visibleArrow="false" placement="left"
      popper-class="global-input-search-popover">
      <Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference"
        @click.native="handleClick('FrameControl')">
        <img src="@screen/images/home-FrameControl/FrameControl.svg" />
      </Button>

      <div class="body">
        <div class="title">批量控制</div>
        <span class="close" @click="() => { this.activeIcon = null; }">
          <i class="el-icon-close" />
        </span>
        <Form v-model="data" labelWidth="90px" column="2" class="form" ref="FormConfigRef" :formList="formList" />
        <component ref="ControlComponent" :is="componentMap[DeviceTopics[data.deviceType]]" :isMultiControl="true"
          :selectItems="data.childType" @update:activeIcon="(val) => { this.activeIcon = val }"
          @update:submitting="(val) => { submitting = val }"></component>
        <div v-if="hiddenDevices.indexOf(componentMap[DeviceTopics[data.deviceType]]) == -1" class="footer">
          <Button @click.native="submitClick" :loading="submitting">
            确认
          </Button>
          <Button style="background-color: rgba(0, 179, 204, 0.3)" @click.native="cancelClick"> 取消 </Button>
        </div>
      </div>
    </ElPopover>

  </div>
</template>

<script>
import Button from "@screen/components/Buttons/Button.vue";
import Form from "@screen/components/FormConfig";
import * as PresetFormItems from "@screen/common/PresetFormItems.js";
import { merge, cloneDeep } from "lodash";
import { markerClusterIns } from "@screen/pages/Home/components/RoadAndEvents/utils/map.js"
import { ChildTypes } from "@screen/utils/enum.js"
import { getDeviceList } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
import { delay } from "@screen/utils/common";
import { initSearch } from "@screen/utils/enum/common.js"
import SmartDeviceParams from "@screen/pages/Home/components/Dialogs/SmartDevice/components/DeviceParamsMulti.vue";
import BroadcastParam from "@screen/pages/Home/components/Dialogs/Broadcast/components/BroadcastParamMulti.vue";
import FatigueWakesUpParam from "@screen/pages/Home/components/Dialogs/FatigueWakesUp/components/DeviceParam.vue";
import DrivingGuidanceParam from "@screen/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceParam.vue";


import { DeviceForMap } from "@screen/pages/Home/components/RoadAndEvents/utils/buttonEvent";

const componentMap = {
  "设备箱": "SmartDeviceParams", "语音广播": "BroadcastParam", "疲劳唤醒": "FatigueWakesUpParam",
  "行车诱导": "DrivingGuidanceParam"
} //DeviceTopics[deviceType]
//"情报板": undefined, , , "合流区": undefined,
const hiddenDevices = ["SmartDeviceParams"];
const controlMulti = Object.keys(componentMap);//6种批量控制
const DeviceTopics = {};//6种批量控制 事件专题 {key:label}

Object.keys(DeviceForMap).forEach(DeviceLabel => {
  controlMulti.indexOf(DeviceLabel) !== -1 && (DeviceTopics[DeviceForMap[DeviceLabel].deviceType] = DeviceLabel);
});
const deviceTypeDefault = Object.keys(DeviceTopics)[0];
async function setDeviceOptions(config, filterData, formList) {
  const data = await getDeviceList(config.deviceType, filterData).then(async (data) => {
    await delay(600);
    return data;
  });
  formList[4].options.options = data.map(item => {
    return { label: `${item.deviceName}`, value: JSON.stringify({ id: item.id, iotDeviceId: item.iotDeviceId, deviceType: item.deviceType, otherConfig: item.otherConfig }), disabled: item.deviceState != 1 }
  })
};
function changeHandle(data, formList) {
  const filterData = {};
  data.direction && (filterData.direction = data.direction);
  data.startStakeMark && (filterData.startStakeMark = data.startStakeMark);
  data.endStakeMark && (filterData.endStakeMark = data.endStakeMark);
  setDeviceOptions({ deviceType: data.deviceType }, filterData, formList);
  data.childType = undefined;
}
export default {
  name: "HomeFrameControl",//设备控制
  components: {
    Button,
    Form,
    SmartDeviceParams,
    BroadcastParam,
    FatigueWakesUpParam,
    DrivingGuidanceParam,
  },
  data() {
    return {
      activeIcon: null,
      data: {},
      hiddenDevices,
      submitting: false,
      formList: [
        {
          label: "设备类型:",
          key: "deviceType",
          type: "select",
          default: deviceTypeDefault,
          options: {
            clearable: true,
            options: Object.keys(DeviceTopics).map(key => { return { label: DeviceTopics[key], value: key } }),
          },
          ons: { //on监听 element事件
            change(value, ...args) {
              const { data, formList } = args.slice(-1)[0]; //data 为数据  formList为传入的配置项
              if (data.deviceType) changeHandle(data, formList);
              else data.childType = undefined;
            }
          },
        },
        {
          label: "设备方向:",
          key: "direction",
          type: "select",
          options: {
            options: [
              { key: "1", label: "济南方向" },
              { key: "3", label: "菏泽方向" },
              { key: "2", label: "双向" },
            ],
          },
          ons: { //on监听 element事件
            change(value, ...args) {
              const { data, formList } = args.slice(-1)[0]; //data 为数据  formList为传入的配置项
              data.deviceType && changeHandle(data, formList);
            }
          },
        },
        merge({}, PresetFormItems.startStation,
          {
            options: {
              options: [
                {
                  prefix: {
                    text: "K",
                    style: {
                      color: "#3DE8FF",
                    },
                  },
                  key: "startStakeMark[0]",
                  default: initSearch.startStakeMark[0],
                  rules: [
                    {
                      message: "请补全桩号",
                      callback(value, data) {
                        console.log(value, data.startStakeMark);
                        if (
                          !((value + "")?.trim() && (data.startStakeMark[1] + "")?.trim())
                        )
                          return false;
                        else return true;
                      },
                    },
                  ],
                  ons: { //on监听 element事件
                    change(value, ...args) {
                      const { data, formList } = args.slice(-1)[0]; //data 为数据  formList为传入的配置项
                      data.deviceType && changeHandle(data, formList);
                    }
                  },
                },
                {
                  prefix: {
                    text: "+",
                    style: {
                      color: "#3DE8FF",
                    },
                  },
                  default: initSearch.startStakeMark[1],
                  key: "startStakeMark[1]",
                  ons: { //on监听 element事件
                    change(value, ...args) {
                      const { data, formList } = args.slice(-1)[0]; //data 为数据  formList为传入的配置项
                      data.deviceType && changeHandle(data, formList);
                    }
                  },
                },
              ],
            }
          }),
        merge({}, PresetFormItems.endStation, {
          options: {
            options: [
              {
                prefix: {
                  text: "K",
                  style: {
                    color: "#3DE8FF",
                  },
                },
                key: "endStakeMark[0]",
                default: initSearch.endStakeMark[0],
                rules: [
                  {
                    message: "请补全桩号",
                    callback(value, data) {
                      if (
                        !((value + "")?.trim() && (data.endStakeMark[1] + "")?.trim())
                      )
                        return false;
                      else return true;
                    },
                  },
                ],
                ons: { //on监听 element事件
                  change(value, ...args) {
                    const { data, formList } = args.slice(-1)[0]; //data 为数据  formList为传入的配置项
                    data.deviceType && changeHandle(data, formList);
                  }
                },
              },
              {
                prefix: {
                  text: "+",
                  style: {
                    color: "#3DE8FF",
                  },
                },
                default: initSearch.endStakeMark[1],
                key: "endStakeMark[1]",
                ons: { //on监听 element事件
                  change(value, ...args) {
                    const { data, formList } = args.slice(-1)[0]; //data 为数据  formList为传入的配置项
                    data.deviceType && changeHandle(data, formList);
                  }
                },
              },
            ],
          }
        }),
        {
          label: "设备名称:",
          key: "childType",
          type: "select",
          isAlone: true,
          options: {
            clearable: true,
            options: [],
            multiple: true,
            ["collapse-tags"]: true
          },
          visible: data => {
            return true;
          },
        },
        // {
        //   label: "控制操作:",
        //   key: "controlOp",
        //   type: "select",
        //   default: null,
        //   options: {
        //     clearable: true,
        //     options: [{
        //       label: "在线",
        //       value: "1"
        //     }, {
        //       label: "离线",
        //       value: "0"
        //     }]
        //   },
        // },
      ],
      DeviceTopics,
      componentMap
    }
  },
  // inject: ["activeDeviceTypes"],
  // watch: {
  //   activeDeviceTypes: {
  //     handler(val) {
  //       const activeTopicOptions = []
  //       this.activeDeviceTypes.filter(activeDeviceType => {
  //         const match = activeDeviceType.match(/路测设备_(\d+)/);
  //         if (match) {
  //           const deviceType = match[1];
  //           DeviceTopics[deviceType] && activeTopicOptions.push({ label: DeviceTopics[deviceType], value: deviceType });

  //         }
  //       });
  //       this.formList[0].options.options = activeTopicOptions;

  //     },
  //     immediate: true,
  //     deep: true
  //   }
  // },
  mounted() {
    changeHandle(this.data, this.formList);
  },
  methods: {
    submitClick() {
      this.$refs.ControlComponent?.handleSubmit();
    },
    cancelClick() {
      this.activeIcon = null;
    },
    handleClick(type) {
      this.activeIcon = this.activeIcon === type ? null : type;
    },
    filterEnd(data) {
      this.activeIcon = null;
      // this.filterData = data;
      this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data);
    },
  },
};
</script>

<style lang="scss">
div.el-popper.global-input-search-popover {
  background: rgba(6, 66, 88, 0.8);
  border: 1px solid rgba(42, 217, 253, 0.6);
  position: relative;
  padding-top: 36px;
  transform: translateY(24px);
  // margin-top: 6vh;

  .body {
    .title {
      background: linear-gradient(90deg,
          #237e9b 0%,
          rgba(23, 145, 184, 0) 100%);
      padding: 3px 9px;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }

    .close {
      padding: 3px 9px;
      cursor: pointer;
      position: absolute;
      top: 0;
      right: 0;
      width: fit-content;
    }

  }
}
</style>

<style lang="scss" scoped>
.image {
  width: 50vw;
  height: 65vh;
}

.HomeFrameControl {
  .btn {
    padding: 9px;
    background: linear-gradient(180deg, #152e3c 0%, #163a45 100%);
    border-radius: 4px;
    overflow: hidden;
    height: unset;
    border: 1px solid rgba(40, 144, 167, 1);
  }

  .btn-active {
    background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
  }
}
</style>
