<template>
  <div class="trigger-insert-dialog">
    <el-form :rules="rules" :model="temp" label-width="150px" ref="dataForm" class="trigger-form">
      <el-row>
        <el-col :span="24">
          <el-form-item label="名称：" prop="triggerName">
            <el-input v-model="temp.triggerName" class="input-style"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="是否生成报警：">
            <el-switch
              style="margin-right: 5px;"
              v-model="temp.hasAlarm"
              :active-value="true"
              :inactive-value="false"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="temp.hasAlarm === true">
          <el-form-item label="报警类型：" prop="alarmTypeCode">
            <el-select
              v-model="temp.alarmTypeCode"
              size="small"
              style="width: 100%;"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="dict in alarmTypeList"
                :key="dict.typeCode"
                :label="dict.typeName"
                :value="dict.typeCode"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-else>
          <el-form-item label="报警类型：">
            <el-select
              v-model="temp.alarmTypeCode"
              size="small"
              style="width: 100%;"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="dict in alarmTypeList"
                :key="dict.typeCode"
                :label="dict.typeName"
                :value="dict.typeCode"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="间隔时间：" prop="intervalVal">
            <div style="width: 100%; display: flex;">
              <el-input
                v-model="temp.intervalVal"
                size="small"
                width="calc(100% - 160px);"
                placeholder="请输入间隔时间"
              />
              <el-select
                v-model="temp.intervalUnit"
                size="small"
                style="width: 150px;margin-left: 10px;"
                placeholder="请选择单位"
              >
                <el-option
                  v-for="(keys, value) in intervalValOption"
                  :key="keys"
                  :label="keys"
                  :value="value"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- <el-form-item label="所属型号：" prop="modelName">
        <el-input
          :disabled="tempType === 'update'"
          suffix-icon="el-icon-caret-bottom"
          v-model="temp.modelName"
          placeholder="点击选择型号"
          @focus="openModelTableSelectDialog()"
          :validate-event="false"
        />
      </el-form-item>-->

      <!-- <el-form-item label="选择设备：" v-show="this.temp.modelId && this.temp.modelId !== 0">
        <div style="width: 100%;">
          <el-button size="mini" type="primary" plain @click="openDeviceTableSelectDialog">选择设备</el-button>
          <div class="device-select-tag">
            <el-tag
              style="margin: 5px;"
              :key="item.deviceId"
              v-for="item in selectionDeviceList"
              closable
              :disable-transitions="false"
              @close="handleDeviceClose(item)"
            >{{item.deviceName}}</el-tag>
          </div>
        </div>
      </el-form-item>-->

      <el-form-item label="触发条件：" prop="conditionList">
        <div style="height: auto; width: 100%;" class="property-card">
          <el-button size="mini" type="primary" plain @click="insertItemlist()">添加条件</el-button>
          <condition-temp
            @EventDel="eventDel"
            :tempIndex="index"
            :info="item"
            v-for="(item, index) in temp.conditionList"
            :key="index"
            :propertyList="propertyList"
          />
        </div>
      </el-form-item>

      <el-row>
        <el-col :span="12">
          <el-form-item label="报警方式：">
            <el-checkbox-group v-model="alarmMode" @change="alarm_mode_change">
              <el-checkbox
                v-for="(proVal, proName) in alarmModeOptions"
                :label="proName"
                :key="proName"
              >{{ proVal }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="触发器状态：">
            <el-radio label="0" v-model="temp.status">启用</el-radio>
            <el-radio label="1" v-model="temp.status">禁用</el-radio>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="报警联系人/组：" prop="contactsList">
        <div class="transfer">
          <el-transfer
            :titles="['待选', '已选']"
            filterable
            filter-placeholder="请输入名称"
            v-model="contactsList"
            :data="alarmxContactList"
          ></el-transfer>
        </div>
      </el-form-item>
      <el-form-item label="推送内容：">
        <el-input v-model="temp.templateContent" class="input-style"></el-input>
      </el-form-item>

      <el-form-item label="报警联控：">
        <div class="alarm-execut">
          <el-switch
            style="margin-right: 5px;"
            v-model="temp.hasCtl"
            :active-value="true"
            :inactive-value="false"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
          <el-button size="mini" v-show="temp.hasCtl" type="primary" @click="addDeviceInfo">添加设备</el-button>
          <device-param-wrap
            v-show="temp.hasCtl"
            ref="paramsWrap"
            :disabled="false"
            v-for="(item,index) in relationList"
            :tempIndex="item.guid"
            :deleteButtonD="false"
            :key="item.guid"
            :paramsDevcie="item"
            @delInfo="delInfo"
            @resultEvent="resultEvent"
          ></device-param-wrap>
        </div>
      </el-form-item>
    </el-form>

    <div class="form-submit">
      <el-button
        type="primary"
        size="mini"
        @click="createSubmitClickFu"
        v-if="tempType === 'create' || tempType === 'copperIn'"
      >确定</el-button>
      <el-button
        size="mini"
        type="primary"
        @click="updateSubmitClickFu"
        v-if="tempType === 'update'"
      >确定</el-button>
      <el-button size="mini" title="返回<触发器列表>" @click="recoverFu" class="recover-style">取消</el-button>
    </div>
    <!-- <el-dialog
      title="选择"
      :visible.sync="selectTableShow"
      width="75%"
      top="10vh"
      class="select-table-dialog"
      :close-on-click-modal="false"
      append-to-body
    >
      <select-table-wrap
        v-if="selectTableShow"
        :tableOption="tableSelectOption.tableOpt"
        :queryOption="tableSelectOption.queryOpt"
        :tableList="tableSelectOption.tableList"
        @parentGetList="childGetList($event)"
        :otherOption="tableSelectOption.otherOption"
        @returnEvent="returnEvent($event)"
      />

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="resuleClick">确 定</el-button>
        <el-button size="mini" @click="() =>{selectTableShow = false}">取 消</el-button>
      </div>
    </el-dialog>-->
  </div>
</template>
<script>
import { getDeviceList } from "@/api/app";
import { getDeviceFunList } from "@/api/iot/device";
import { listModel, getModel } from "@/api/iot/model";
import { addTrigger, updateTrigger, getTrigger } from "@/api/iot/trigger";
import { listAlarmType } from "@/api/alarm/alarmType";
import { listContacts } from "@/api/iot/contacts";
import ConditionTemp from "./conditionTemp";
import SelectTableWrap from "@/components/SelectTable/indexbox";
import DeviceParamWrap from "./deviceParam";

const relationOptions = {
  AND: "并且",
  OR: "或者"
};
const trigCondEnumOptions = {
  LTA: "数值低于A",
  GTB: "数值高于B",
  GTA_AND_LTB: "数值介于AB之间",
  LTA_OR_GTB: "数值高于B低于A",
  EQA: "数值等于A"
};
const alarmModeOptions = {
  sms: "短信",
  weixin: "微信"
  // email: "邮件"
};

const intervalValOption = {
  SECONDS: "秒",
  MINUTES: "分钟",
  HOURS: "小时",
  DAYS: "天"
};
export default {
  name: "InsertTrigger",
  components: {
    ConditionTemp,
    SelectTableWrap,
    DeviceParamWrap
  },
  props: {
    type: {
      type: String,
      default: "create"
    },
    triggerId: {
      type: [Number, String],
      default: 0
    },
    deviceInfo: {
      type: Object,
      default: {}
    }
  },
  data() {
    const alarmMode = (rule, value, callback) => {
      if (this.alarmMode.length <= 0) {
        callback(new Error("请选择报警方式！"));
      } else {
        callback();
      }
    };
    const contactsList = (rule, value, callback) => {
      if (this.contactsList.length <= 0) {
        callback(new Error("请选择报警联系人！"));
      } else {
        callback();
      }
    };
    const conditionList = (rule, value, callback) => {
      if (this.temp.conditionList.length <= 0) {
        callback(new Error("触发条件不能为空，至少需要拥有一条触发条件！"));
      } else {
        callback();
      }
    };
    const modelNameValidator = (rule, value, callback) => {
      if (this.temp.modelId === "") {
        callback(new Error("请选择型号！"));
      } else {
        callback();
      }
    };
    return {
      selectTableShow: false,
      tableSelectOption: {},
      selectResult: {},
      /////////////
      tempType: "",
      intervalValOption,
      titleStr: {
        create: "添加触发器",
        update: "修改触发器",
        copperIn: "复制并新增触发器"
      },
      conditionList: [
        {
          relationType: "",
          funKey: "",
          funName: "",
          conditionType: "",
          value1: "",
          value2: "",
          funDataType: "",
          funId: ""
        }
      ],
      dataTempldateList: [],
      pointList: [],
      alarmMode: [],
      alarmxContactList: [],
      contactsList: [],
      propertyList: [],
      triggerMaxInput: [],
      triggerMinInput: [],
      relationOptions,
      trigCondEnumOptions,
      alarmModeOptions,
      alarmTypeList: [],
      temp: {},
      queryAlarmxContctList: {
        name: ""
      },
      rules: {
        conditionList: [
          { required: true, validator: conditionList, trigger: "blur" }
        ],
        triggerName: [
          { required: true, message: "请填写触发器名称", trigger: "blur" }
        ],
        triggerCond: [
          { required: true, message: "请选择触发条件", trigger: "blur" }
        ],
        saveRule: [
          { required: true, message: "选择报警方式", trigger: "blur" }
        ],
        alarmMode: [{ required: true, validator: alarmMode, trigger: "blur" }],
        intervalVal: [
          { required: true, message: "选输入间隔时间数值", trigger: "blur" },
          { pattern: /^[0-9]*$/, message: "请输入正整数值", trigger: "blur" }
        ],
        modelName: [{ required: true, validator: modelNameValidator }],
        alarmTypeCode: [
          { required: true, message: "请选择报警类型", trigger: "blur" }
        ]
      },
      selectionDeviceList: [],
      relationList: []
    };
  },
  methods: {
    /** 查询告警类型列表 */
    getAlaramTypeList() {
      this.loading = true;
      listAlarmType({ pageNum: 1, pageSize: 9999 }).then(response => {
        this.alarmTypeList = response.rows;
      });
    },
    getGuid() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(
        c
      ) {
        var r = (Math.random() * 16) | 0,
          v = c == "x" ? r : (r & 0x3) | 0x8;
        return v.toString(16);
      });
    },
    addDeviceInfo() {
      this.relationList.push({
        cmdKey: "",
        deviceId: "",
        deviceKey: "",
        ctlJson: "",
        guid: this.getGuid()
      });
    },
    delInfo(index) {
      var arr = [];
      this.relationList.forEach(v => {
        if (v.guid !== index) {
          arr.push(v);
        }
      });
      this.relationList = [];
      this.relationList = arr;
      this.$forceUpdate();
    },
    resultEvent(data) {
      for (var i = 0; i < this.relationList.length; i++) {
        if (this.relationList[i].guid === data.index) {
          this.relationList[i] = data.result;
          break;
        }
      }
    },
    // 打开厂商选择窗口 ——表格
    openModelTableSelectDialog() {
      this.selectResult = {};
      this.tableSelectOption = {
        otherOption: {
          tableType: "model"
        },
        queryOpt: {
          disable: false,
          labelWidth: "68px",
          params: {
            modelName: "",
            modelCode: ""
          },
          page: {
            pageSize: 10,
            pageNum: 1,
            total: 0
          },
          inline: true,
          queryChilds: [
            {
              style: "",
              placeholder: "型号名称",
              clearable: true,
              label: "型号名称",
              type: "input",
              key: "modelName",
              size: "small",
              value: ""
            }
          ]
        },
        tableOpt: {
          loading: false,
          rowKey: "deviceId",
          selection: false,
          maxHeight: "45vh",
          childs: [
            {
              style: "",
              label: "厂商名称",
              type: "",
              prop: "vendorName",
              align: "left",
              width: "200",
              "show-overflow-tooltip": false,
              tempType: "span"
            },
            {
              style: "",
              label: "型号名称",
              type: "",
              prop: "modelName",
              align: "left",
              width: "200",
              "show-overflow-tooltip": false,
              tempType: "span"
            },
            {
              style: "",
              label: "设备类型",
              type: "",
              prop: "deviceTypeName",
              align: "left",
              width: "120",
              "show-overflow-tooltip": false,
              tempType: "span"
            },
            {
              style: "",
              label: "产品PK",
              type: "",
              prop: "prodKey",
              align: "left",
              width: "",
              "show-overflow-tooltip": false,
              tempType: "span"
            },
            {
              style: "",
              label: "产品密钥",
              type: "",
              prop: "prodSecret",
              align: "left",
              width: "",
              "show-overflow-tooltip": false,
              tempType: "span"
            }
          ],
          tableList: {
            type: Array
          }
        },
        tableList: []
      };
      this.selectTableShow = true;
    },
    handleDeviceClose(row) {
      this.selectionDeviceList.splice(this.selectionDeviceList.indexOf(row), 1);
      this.$forceUpdate();
    },
    // 打开厂商选择窗口 ——表格
    // openDeviceTableSelectDialog() {
    //   if (!this.temp.modelId && this.temp.modelId !== 0) {
    //     return;
    //   }
    //   this.selectResult = {};
    //   this.tableSelectOption = {
    //     otherOption: {
    //       tableType: "device"
    //     },
    //     queryOpt: {
    //       disable: false,
    //       labelWidth: "68px",
    //       params: {
    //         deviceName: "",
    //         modelId: this.temp.modelId,
    //         modelName: this.temp.modelName
    //       },
    //       page: {
    //         pageSize: 10,
    //         pageNum: 1,
    //         total: 0
    //       },
    //       inline: true,
    //       queryChilds: [
    //         {
    //           style: "",
    //           placeholder: "设备名称",
    //           clearable: true,
    //           label: "设备名称",
    //           type: "input",
    //           key: "deviceName",
    //           size: "small",
    //           value: ""
    //         }
    //       ]
    //     },
    //     tableOpt: {
    //       loading: false,
    //       rowKey: "deviceId",
    //       selection: false,
    //       maxHeight: "45vh",
    //       childs: [
    //         {
    //           style: "",
    //           label: "所属型号",
    //           type: "",
    //           prop: "modelName",
    //           align: "left",
    //           width: "",
    //           "show-overflow-tooltip": false,
    //           tempType: "span"
    //         },
    //         {
    //           style: "",
    //           label: "设备名称",
    //           type: "",
    //           prop: "deviceName",
    //           align: "left",
    //           width: "",
    //           "show-overflow-tooltip": false,
    //           tempType: "span"
    //         },
    //         {
    //           style: "",
    //           label: "设备Key",
    //           type: "",
    //           prop: "deviceKey",
    //           align: "left",
    //           width: "",
    //           "show-overflow-tooltip": false,
    //           tempType: "span"
    //         },
    //         {
    //           style: "",
    //           label: "创建时间",
    //           type: "time",
    //           prop: "createTime",
    //           align: "center",
    //           width: "160",
    //           "show-overflow-tooltip": false,
    //           tempType: "span"
    //         }
    //       ],
    //       tableList: {
    //         type: Array
    //       }
    //     },
    //     tableList: []
    //   };
    //   this.selectTableShow = true;
    // },
    // 查询回调
    childGetList(data) {
      if (data.otherOption.tableType === "device") {
        this.deviceChildList(data);
      } else if (data.otherOption.tableType === "model") {
        this.modelChildList(data);
      }
    },
    modelChildList(data) {
      listModel(Object.assign(data.page, data.param, { selected: 1 })).then(
        response => {
          this.tableSelectOption.tableList = response.rows;
          this.tableSelectOption.queryOpt.page.total = Number(response.total);
          this.selectionDeviceList = [];
        }
      );
    },
    deviceChildList(data) {
      getDeviceList(Object.assign(data.page, data.param)).then(response => {
        this.tableSelectOption.tableList = response.rows;
        this.tableSelectOption.queryOpt.page.total = Number(response.total);
      });
    },
    // 点击或者双击数据回调
    returnEvent(data) {
      if (data.type === "click") {
        this.selectResult.tableType = data.otherOption.tableType;
        if (data.otherOption.tableType === "device") {
          this.selectResult = data.value;
          this.selectResult.tableType = 'device'
        } else if (data.otherOption.tableType === "model") {
          this.selectResult.modelId = data.value.modelId;
          this.selectResult.modelName = data.value.modelName;
          this.selectResult.prodKey = data.value.prodKey;
        }
      } else if (data.type === "dblclick") {
        if (data.otherOption.tableType === "device") {
          this.eventSet(data.value);
        } else if (data.otherOption.tableType === "model") {
          this.temp.modelId = data.value.modelId;
          this.temp.modelName = data.value.modelName;
          this.getcomdlist(data.value.modelId);
          this.selectTableShow = false;
        }
      }
    },
    eventSet(row) {
      if (this.selectionDeviceList.length <= 0) {
        this.selectionDeviceList.push({
          deviceId: row["deviceId"],
          deviceName: row["deviceName"]
        });
      }
      for (var i = 0; i < this.selectionDeviceList.length; i++) {
        if (this.selectionDeviceList[i]["deviceId"] === row["deviceId"]) {
          break;
        }
        if (i === this.selectionDeviceList.length - 1) {
          this.selectionDeviceList.push({
            deviceId: row["deviceId"],
            deviceName: row["deviceName"]
          });
        }
      }
      this.selectTableShow = false;
    },
    resuleClick() {
      if (this.selectResult.tableType === "device") {
        this.eventSet(this.selectResult);
      } else if (this.selectResult.tableType === "model") {
        this.temp.modelId = this.selectResult.modelId;
        this.temp.modelName = this.selectResult.modelName;
        this.getcomdlist(this.selectResult.modelId);
        this.selectTableShow = false;
      }
    },
    // 查询产品参数列表
    getcomdlist(id) {
      if (!id && id !== 0) {
        return;
      }
      this.propertyList = [];
      getDeviceFunList({
        modelId: id
      }).then(res => {
        this.propertyList = res.data;
      });
    },

    eventDel(data) {
      this.temp.conditionList.splice(data, 1);
    },
    delItem(data) {
      this.temp.triggerCtlList.splice(data, 1);
    },
    addExecut() {
      this.temp.triggerCtlList.push({
        ctlJson: "",
        deviceId: "",
        deviceKey: "",
        prodId: "",
        prodKey: "",
        scopeType: "PRODUCT"
      });
    },
    insertItemlist() {
      this.temp.conditionList.push({
        relationType: "",
        funKey: "",
        conditionType: "",
        value1: "",
        value2: "",
        funDataType: "",
        funId: ""
      });
    },
    // 获取报警联系人列表
    getAlarmxContAct() {
      listContacts(this.queryAlarmxContctList).then(response => {
        this.alarmxContactList = [];
        response.rows.forEach(value => {
          this.alarmxContactList.push({
            key: value.id,
            label: value.name,
            disabled: value.status === "0" ? false : true
          });
        });
      });
    },
    changeTriggerCondFu(val, index) {
      this.triggerCondFu(val, index);
    },
    triggerCondFu(val, index) {
      this.triggerMaxInput[index] = false;
      this.triggerMinInput[index] = false;
      if (val === "LTA") {
        this.triggerMinInput[index] = true;
      }
      if (val === "GTB") {
        this.triggerMaxInput[index] = true;
      }
      if (val === "GTA_AND_LTB" || val === "LTA_OR_GTB") {
        this.triggerMaxInput[index] = true;
        this.triggerMinInput[index] = true;
      }
      if (val === "EQA") {
        this.triggerMinInput[index] = true;
      }
    },
    createSubmitClickFu() {
      this.temp.deviceList = [
        {
          deviceName: this.deviceInfo.deviceName,
          deviceId: this.deviceInfo.deviceId
        }
      ];
      this.temp.modelId = this.deviceInfo.modelId;
      this.temp.triggerCtlList = this.relationList;
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.temp.contactsList = [];
          this.contactsList.forEach((v, index) => {
            this.temp.contactsList.push({
              contactsId: v
            });
          });
          if (!this.temp.hasCtl) {
            this.temp.triggerCtlList = [];
          }
          addTrigger(this.temp).then(response => {
            if (response.code === 200) {
              this.msgSuccess("添加成功");
              this.recoverFu();
            }
          });
        }
      });
    },
    updateSubmitClickFu() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.temp.contactsList = [];
          this.contactsList.forEach((v, index) => {
            this.temp.contactsList.push({
              contactsId: v
            });
          });
          updateTrigger(this.temp).then(response => {
            if (response.code === 200) {
              this.msgSuccess("修改成功");
              this.recoverFu();
            }
          });
        }
      });
    },
    newTemp() {
      this.temp = {
        templateContent: "",
        hasSendSms: true,
        hasSendWeixin: false,
        triggerName: "",
        conditionList: [],
        deviceList: [],
        contactsList: [],
        normalContent: "",
        status: "0",
        triggerScope: "PRODUCT",
        triggerCtlList: [],
        hasCtl: true,
        intervalVal: 0,
        intervalUnit: "SECONDS",
        alarmTypeCode: "",
        hasAlarm: true,
        modelId: ""
      };
    },
    getTriggerDetails(id, type) {
      getTrigger(id)
        .then(response => {
          this.temp = Object.assign({}, response.data);
          if (type === "copper") {
            this.temp.triggerName = "";
            this.tempType = "copperIn";
          } else {
            this.tempType = "update";
          }
          if (this.temp.hasSendWeixin === true) this.alarmMode.push("weixin");

          if (this.temp.hasSendSms === true) this.alarmMode.push("sms");

          // if (this.temp.alarmTypeEmail === true) this.alarmMode.push("email");
          this.contactsList = [];
          this.temp.contactsList.forEach((v, index) => {
            this.contactsList.push(v.contactsId);
          });
          this.temp.conditionList.forEach((v, index) => {
            this.triggerCondFu(v.conditionType, index);
          });
          if (this.temp.triggerCtlList) {
            this.temp.triggerCtlList.forEach(v => {
              this.relationList.push(
                Object.assign(v, { guid: this.getGuid() })
              );
            });
          }
          this.temp.status = this.temp.status.toString();
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 列表数据初始化方法
    initialize() {
      this.getcomdlist(this.deviceInfo.modelId);
      if (this.type === "create") {
        this.newTemp();
        this.alarmMode = ["sms"];
        this.tempType = "create";
      } else {
        this.getTriggerDetails(this.triggerId, this.type);
      }
    },
    recoverFu() {
      this.$emit("recover");
    },
    alarm_mode_change() {
      if (this.alarmMode.indexOf("sms") > -1) {
        this.temp.hasSendSms = true;
      } else {
        this.temp.hasSendSms = false;
      }
      if (this.alarmMode.indexOf("weixin") > -1) {
        this.temp.hasSendWeixin = true;
      } else {
        this.temp.hasSendWeixin = false;
      }
      if (this.alarmMode.indexOf("email") > -1) {
        this.temp.alarmTypeEmail = true;
      } else {
        this.temp.alarmTypeEmail = false;
      }
    },
    // 组件初始化方法
    init() {
      this.getAlarmxContAct();
      this.getAlaramTypeList();
      this.initialize();
    }
  },
  created() {
    this.init();
  }
};
</script>
<style lang="scss">
.trigger-insert-dialog {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  .trigger-form {
    width: calc(100%);
    height: calc(75vh);
    overflow: auto;
    padding: 20px;
    padding-right: 20px;
    border-bottom: 1px solid #929191;
  }
  .title {
    box-sizing: inherit;
    background: #fff;
    padding: 20px 40px;
    font-size: 20px;
    font-weight: 700;
    color: #373d41;
    height: 68px;
  }
  .bottom-submit-div {
    height: 70px;
    text-align: center;
    position: fixed;
    width: calc(100% - 350px);
    background: #fff;
    bottom: 0px;
    padding-top: 10px;
    z-index: 2000;
    margin-left: 10px;
  }
  .switch .el-switch__label {
    position: absolute;
    color: #fff !important;
    z-index: 1;
    display: none;
  }
  .switch .is-active {
    display: block;
  }
  .switch .el-switch__label--left span {
    margin-left: 20px;
  }
  .form-submit {
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 20px;
  }
}

.insertTrigger-genert-div {
  padding: 80px 10% 20px 10%;
  border: 0px;
  border-radius: 5px;
  box-shadow: 0px 1px 3px 1px;
  background-color: white;
  font: 14px/16px "Roboto", sans-serif;
  float: left;
  color: #666666;
  width: calc(100% - 300px);
}

.input-style {
  width: 100%;
}
.from-button-style {
  width: 65px;
  height: 35px;
}
/* .from-button-style:hover {
  width: 75px;
  height: 41px;
  font-size: 18px;
} */
.tips-div {
  margin-left: 20px;
  float: left;
  margin-right: 0px;
  margin-top: 0;
}

.recover-style {
  margin-left: 10px;
}
.property-card {
  height: 300px;
  width: 100%;
  .el-card__body {
    padding: 10px;
  }
  .el-card {
    width: 300px;
    height: 306px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .card-select {
    width: 220px !important;
  }
  .card-div {
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
  }
  .delete-buttom {
    font-size: 20px;
    padding: 5px;
    width: 280px;
  }
  .insert-card {
    height: 306px;
    display: flex;
    align-items: center;
    text-align: right;
    text-align: center;
    .el-button--text {
      color: #9e9e9e;
      font-size: 60px;
      margin-left: 120px;
    }
  }
}
.device-select-tag {
  width: calc(100% + 80px);
  min-height: 80px;
  border: 1px solid #cacaca;
  padding: 5px;
  border-radius: 5px;
  max-height: 150px;
  overflow: auto;
  position: relative;
  left: -80px;
  margin-top: 10px;
}
.alarm-execut {
}
</style>
<style lang="scss">
.transfer .el-transfer-panel {
  min-width: 250px;
}
.transfer .el-transfer__buttons {
  width: 70px;
  text-align: center;
  padding: 0;
  .el-button--primary {
    margin-left: 0px;
  }
}
.trigger-insert-dialog .el-form::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 3px;
}
.trigger-insert-dialog .el-form::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px #9e9d9d;
  background: #ffffff;
}
.trigger-insert-dialog .el-form::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px #f6f6f6;
  border-radius: 10px;
  background: #ffffff;
}
</style>
