<template>
  <div class="manage-container deviceStatus-wrapper" style="height: 600px">
    <div class="wechat-card-container">
      <div class="card">
        <el-row>
          <el-col :span="8">
            <div class="option-item">
              <h3 class="option-item-title">
                {{ $t("table.tabMessageTitle") }}
              </h3>
              <div class="option-title">{{ $t("table.tabWarn") }}</div>
              <div class="option-title-line"></div>
              <div class="check-group" v-if="warnParameter">
                <div
                  class="notify-wrapper"
                  v-for="(val, k) in warnParameter"
                  :key="k"
                >
                  <el-checkbox
                    class="notify-label"
                    v-model="warnParameter[k].dataType"
                    :true-label="k"
                    :disabled="!sendTypeList.length"
                    @change="onMessageTypeClick(warnParameter, k, 'warn')"
                    >{{ $t("table." + warnParameter[k].label) }}</el-checkbox
                  >
                  <div class="notify-type" v-if="sendTypeList.length > 0">
                    <el-select
                      class="send-type-select"
                      v-model="warnParameter[k].sendMethods"
                      :placeholder="$t('pholder.select')"
                      :disabled="!warnParameter[k].dataType"
                      @change="onMessageTypeClick(warnParameter, k, 'warn')"
                    >
                      <el-option
                        v-for="typeItem in sendTypeList"
                        :key="typeItem.value"
                        :label="$t('table.' + typeItem.label)"
                        :value="typeItem.value"
                      ></el-option>
                    </el-select>
                  </div>
                  <div v-else class="notify-type">
                    <el-select
                      class="send-type-select"
                      v-model="value11"
                      :placeholder="$t('pholder.select')"
                      :disabled="true"
                    >
                      <el-option
                        v-for="typeItem in [{ value: '', label: '' }]"
                        :key="typeItem.value"
                        :label="typeItem.label"
                        :value="typeItem.value"
                      ></el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <!-- 数据推送 -->
              <div class="option-title" style="margin-top: 53px">
                {{ $t("table.tabPush") }}
              </div>
              
              <div class="option-title-line"></div>
              <div class="check-group" v-if="pushParameter">
                <div v-for="(val, k) in pushParameter" :key="k">
                  <div v-if="k !== 'face_data'" class="notify-wrapper">
                    <el-checkbox
                      class="notify-label"
                      v-model="pushParameter[k].dataType"
                      :true-label="k"
                      @change="onMessageTypeClick(pushParameter, k, 'push')"
                      >{{ $t("table." + pushParameter[k].label) }}</el-checkbox
                    >

                    <div
                      class="notify-type notify-type1"
                      :style="{ width: '120px' }"
                    >
                      <div v-if="sendTypeList.length > 0">
                        <el-select
                          :class="{ 'cell-select': k === 'face_data' }"
                          v-model="pushParameter[k].sendMethods"
                          :placeholder="$t('pholder.select')"
                          style="margin-right: 0"
                          :disabled="
                            k === 'face_data' || !pushParameter[k].dataType
                          "
                          @change="onMessageTypeClick(pushParameter, k, 'push')"
                        >
                          <el-option
                            v-for="typeItem in sendTypeList"
                            :key="typeItem.value"
                            :label="$t('table.' + typeItem.label)"
                            :value="typeItem.value"
                          ></el-option>
                        </el-select>
                      </div>
                        <!-- <el-select
                          class="send-type-select"
                          v-model="value11"
                          :placeholder="$t('pholder.select')"
                          :disabled="!pushParameter[k].dataType"
                        >
                          <el-option
                            v-for="typeItem in [{ value: '', label: '' }]"
                            :key="typeItem.value"
                            :label="typeItem.label"
                            :value="typeItem.value"
                          ></el-option>
                        </el-select> -->
                      <!-- :disabled="!pushParameter[k].dataType" -->
                      <!-- <el-select
                        v-show="k === 'face_data'"
                        :class="{ 'cell-select': k === 'face_data' }"
                        v-model="pushParameter[k].sendDataOpt"
                        multiple
                        :clearable="false"
                        :placeholder="$t('pholder.select')"
                        style="margin-bottom: 10px"
                        @change="onMessageTypeClick(pushParameter, k, 'push')"
                      >
                        <el-option
                          v-for="dataItem in sendDataList"
                          :key="dataItem.value"
                          :label="dataItem.label"
                          :value="dataItem.value"
                        >
                          <span class="custom-checkbox__input">
                            <span class="custom-checkbox__inner"></span>
                          </span>
                          <span style="padding-left: 5px">{{
                            dataItem.label
                          }}</span>
                        </el-option>
                      </el-select> -->
                    </div>
                  </div>
                  <div v-else-if="k == 'face_data'">
                    <div class="face-label">{{ $t("table." + pushParameter[k].label)}}</div>
                    <div v-for="(item, index) in sendDataList" :key="index" style="display:flex;margin:10px 0 0 40px">
                      <el-checkbox
                        class="notify-label"
                        v-model="sendDataList[index].dataType"
                        :true-label="item.value"
                        @change="onfacedataMessage(item, index, 'push')"
                        >{{ $t("table." + item.value) }}</el-checkbox
                      >
                      <div
                        class="notify-type notify-type2"
                        :style="{ width: '120px' }"
                      >
                        <div >
                          <el-select
                            v-model="sendDataList[index].sendMethods"
                            :placeholder="$t('pholder.select')"
                            style="margin-right: 0"
                            @change="
                              onfacedataMessage(item, index, 'push')
                            "
                             :disabled="!sendDataList[index].dataType"
                          >
                            <el-option
                              key="1"
                              :label="$t('table.tabEamilPush')"
                              value="1"
                            ></el-option>
                          </el-select>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                   <div class="push-timer">
                    <span>环比日期：</span>
                      <el-date-picker
                        v-model="pushHbtiemr"
                        type="date"
                        @change="changePushTimer('HB')"
                        :format="'yyyy-MM-dd'"
                        value-format='yyyy-MM-dd HH:mm:ss'
                        placeholder="选择日期">
                      </el-date-picker>
                  </div>
                  <div class="push-timer">
                      <span>同比日期：</span>
                      <el-date-picker
                        v-model="pushTbtiemr"
                        type="date"
                        @change="changePushTimer('TB')"
                        :format="'yyyy-MM-dd'"
                        value-format='yyyy-MM-dd HH:mm:ss'
                        placeholder="选择日期">
                      </el-date-picker>
                  </div>
                  <div class="push-timer">
                      <span>任务指标：</span>
                      <el-input
                      type="number"
                      v-model="goalnum"
                      class="inline-input"
                      placeholder="请输入任务指标"
                      clearable
                      @input="goalnumFun"
                      @blur="changePushTimer('GOAL')"
                    ></el-input>
                  </div>
              </div>
            </div>
          </el-col>
          <!-- push end -->
          <el-col :span="16">
            <div class="wechat-card-wrapper">
              <div class="wechat-card-wrapper-line"></div>
              <h3 class="souce-item-title">
                {{ $t("table.tabResourceTitle") }}
              </h3>
              <div class="card" :style="{ padding: '5px 10px 16px' }">
                <div style="text-align: center" id="card">
                  <el-transfer
                    style="text-align: left; display: inline-block"
                    v-model="transVal"
                    filterable
                    :titles="[
                      $t('table.resourceUnBind'),
                      $t('table.resourceBind'),
                    ]"
                    :button-texts="[
                      $t('button.unbind'),
                      $t('button.resourceFocus'),
                    ]"
                    :format="{
                      noChecked: '${total}',
                      hasChecked: '${checked}/${total}',
                    }"
                    @change="handleChange"
                    :data="mallData"
                    class="wechat-transfer"
                  ></el-transfer>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-dialog
      class="qrcode-dialog wechat-dialog"
      :show-close="false"
      width="15%"
      top="26vh"
      :visible.sync="qrcodeShow"
    >
      <div class="qrcode-wrapper">
        <span>该功能需要绑定微信, 扫描二维码</span>
        <div id="qrcode" ref="qrcode"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import {
  tabs,
  timeOption,
  sendTypeList,
  sendDataList,
  warnKey,
  pushKey,
  warnLabelLocale,
  pushLabelLocale,
} from "./generate-option";

const apiMessageUrl = window._vionConfig.messageUrl;

export default {
  data() {
    return {
      qrcodeShow: false,
      mallData: [],
      transVal: [],
      nameObj: {},
      userId: null,
      pushTbtiemr:'',
      pushHbtiemr:'',
      goalnum:'',
      activeName: "warn",
      tabs,
      resourceData:[],
      sendTypeList: sendTypeList,
      sendDataList: sendDataList,
      ////// param obj
      warnParameter: null,
      pushParameter: null,
      faceParameter:null,
      cacheParameter: {},
      value11: "",
    };
  },
  computed: {
    tableHeight() {
      const windowInnerHeight = window.innerHeight;
      return (
        windowInnerHeight -
        windowInnerHeight * (windowInnerHeight <= 720 ? 0.25 : 0.24)
      );
    },
    userUnid() {
      return this.$cookie.get("unid");
    },
  },
  async created() {
    this.warnParameter = null;
    this.pushParameter = null;
    this.cacheParameter = {};
    await this.getUserId();
    await this.getInfo();
    await this.getBoundMessageType1();
    await this.initWarnMessageOption();
    await this.initPushMessageOption();
    // this.getBoundMessageType()
    // 获取可下载的数据
  },
  methods: {
    goalnumFun(goal){
      this.goalnum = parseInt(goal);
    },
    initWarnMessageOption() {
      let warnParameter = {
        device_status: null,
        mall: null,
        gate: null,
        other_gate: null,
        gate_data_fluctuate: null,
      };
      warnKey.forEach((item, index) => {
        warnParameter[item] = {
          label: warnLabelLocale[index],
          dataType: "",
          sendMethods:
            this.sendTypeList.length > 0 ? this.sendTypeList[0].value : "",
        };
      });
      this.warnParameter = warnParameter;
      console.log('his.warnParameter', this.warnParameter)
    },
    initPushMessageOption() {
      let pushParameter = {
        mall: null,
        gate: null,
        main_store: null,
        face_data: null,
      };
      pushKey.forEach((item, index) => {
        pushParameter[item] = {
          label: pushLabelLocale[index],
          dataType: "",
          sendMethods:
            this.sendTypeList.length > 0 ? this.sendTypeList[0].value : "",
        };
        if (item === "face_data") {
          pushParameter[item].sendMethods = '1'; //sendTypeList[1].value
          pushParameter[item].sendDataOpt = [
            this.sendDataList[0].value,
            this.sendDataList[1].value,
          ];
          sendDataList[0].sendMethods = '1'
          sendDataList[1].sendMethods = '1'
        }
      });
      this.pushParameter = pushParameter;
    },
    showImgDiv() {
      this.qrcodeShow = false;
    },
    getMall() {
      if (!this.sendTypeList || this.sendTypeList.length <= 0) {
        return;
      }
      this.nameObj = {};
      this.mallData = [];
      this.$api.base
        .mall(
          {
            accountId: this.$cookie.get("accountId"),
            // status: 1,
            status_arr: "1,3",
          },
          null,
          true
        )
        .then((res) => {
          let result = res.data.data;
          result.forEach((item) => {
            let obj = {
              key: item.unid,
              label: item.name,
            };
            this.nameObj[item.unid] = item.name;
            this.mallData.push(obj);
          });
        })
        .catch((err) => {});
    },
    handleChange(value, direction, movedKeys) {
      let resourcesList = [];
      movedKeys.forEach((item) => {
        let obj = {};
        obj.unid = item;
        obj.name = this.nameObj[item];
        obj.typeKey = "123456789";
        resourcesList.push(obj);
      });
      let typeParam = {
        userUnid: this.userUnid,
        comparedate: this.pushHbtiemr,
        similardate: this.pushTbtiemr,

        resources: resourcesList,
        
      };
      if (direction == "right") {
        this.bindType(typeParam);
      } else {
        this.unbindType(typeParam);
      }
    },
    bindType(type_param) {
      this.transVal = [];
      this.$api.management
        .bindType(apiMessageUrl, type_param)
        .then((res) => {
          let result = res.data;
          if (result.code == 200) {
            this.getBoundResource();
            this.$message({
              message: result.msg,
              type: "success",
            });
          } else {
            this.$message.error(result.msg);
          }
        })
        .catch((err) => {});
    },
    unbindType(type_param) {
      this.$api.management
        .deleteType(apiMessageUrl, type_param)
        .then((res) => {
          let result = res.data;
          if (result.code == 200) {
            this.getBoundResource();
            this.$message({
              message: result.msg,
              type: "success",
            });
          } else {
            this.$message.error(result.msg);
          }
        })
        .catch((err) => {});
    },
    getUserId(address) {
      return new Promise((resolve) => {
        this.$api.management
          .userId(apiMessageUrl, {
            unid: this.userUnid,
          })
          .then((res) => {
            let result = res.data;
            this.userId = result.data[0].id;
            // if (address) {
            //   this["getUser" + address](this.activeName);
            // } else {
            //   this.getUserMessage(true);
            // }
            resolve();
          })
          .catch((err) => {});
      });
    },
    async getInfo() {
      this.sendTypeList = [];
      return new Promise((resolve) => {
        this.$api.management
          .singleUser(this.$cookie.get("userId"))
          .then(async (res) => {
            let result = res.data;
            if (result.code === 200) {
              if (!result.data.nickname) {
                this.getWechatUrl();
              }
              if (
                (!result.data.nickname || result.data.nickname === "") &&
                (!result.data.email || result.data.email === "")
              ) {
                this.sendTypeList = [];
              } else {
                if (
                  (!result.data.nickname || result.data.nickname === "") &&
                  result.data.email &&
                  result.data.email !== ""
                ) {
                  this.sendTypeList = [{ label: "tabEamilPush", value: 1 }];
                } else if (
                  result.data.nickname &&
                  result.data.nickname !== "" &&
                  (!result.data.email || result.data.email === "")
                ) {
                  this.sendTypeList = [{ label: "tabWechatPush", value: 0 }];
                } else {
                  this.sendTypeList = [
                    { label: "tabWechatPush", value: 0 },
                    { label: "tabEamilPush", value: 1 },
                  ];
                }
              }
              resolve();
              await this.getMall();
              this.getBoundResource();
            }
          })
          .catch((err) => {
            console.error(err);
          });
      });
    },
    getWechatUrl() {
      let params = {
        userUnid: this.$cookie.get("unid"),
      };
      this.$api.management
        .wechatUrl(apiMessageUrl, params)
        .then((res) => {
          let result = res.data.data;
          let wechatUrl = result.bindUrl;
          this.qrcodeShow = true;
          setTimeout(() => {
            this.qrcode(wechatUrl);
          }, 0);
        })
        .catch((err) => {});
    },
    qrcode(url) {
      document.getElementById("qrcode").innerHTML = "";
      let qrcode = new QRCode("qrcode", {
        width: 250,
        height: 250, // 高度
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f'
        // foreground: '#ff0'
      });
      qrcode.makeCode(url);
    },
    // 获取绑定资源
    getBoundResource() {
      this.transVal = [];
      this.$api.management
        .userResour(apiMessageUrl, { userId: this.userId })
        .then((res) => {
          let result = res.data;
          this.resourceData = result.data
          if(result.data.length > 0) {
           this.pushHbtiemr = new Date(result.data[0].comparedate) || ''
           this.pushTbtiemr = new Date(result.data[0].similardate) || ''
           this.goalnum = result.data[0].goalnum||'';
          }else{
            this.pushHbtiemr = new Date(this.dayReduce(new Date,2));
            this.pushTbtiemr = new Date(this.dayReduce(new Date,8)); 
          }
          result.data.forEach((item) => {
            this.transVal.push(item.resource.unid);
          });
        })
        .catch((err) => {});
    },
    /**
     * @description: 对比时间变化触发重新绑定
     * @param {*}
     * @return {*}
     */    
    changePushTimer(type){
     let { resourceData } = this;
      let params = "";
     if(type == 'TB') {
        params = {
        similardate:this.pushTbtiemr
      }
     }
     
     if(type == 'HB') {
        params = {
          comparedate:this.pushHbtiemr
        }
     }
     if(type == 'GOAL') {
        if(!this.goalnum)return false;
        params = {
          goalnum:this.goalnum
        }
     }
     resourceData.map((ele) => {
       this.$api.management
        .editUserResour(apiMessageUrl,ele.id,params)
        .then((res) => {
            
        })
        .catch((err) => {});
     })
    },
    
    async getBoundMessageType1() {
      const { userId, sendTypeList } = this;
      console.log(sendTypeList);
      this.$api.management
        .userMessage(apiMessageUrl, { userId: userId })
        .then((res) => {
          let result = res.data;
          if (result && result.data && result.data.length > 0) {
            const wechatItems = result.data.filter((x) => x.sendType === 0); // 类型为1（邮箱）
            const emailItems = result.data.filter((x) => x.sendType === 1); // 类型为0（微信）
            let [wechatparams, emailparams] = [[], []];
            if (wechatItems) {
              wechatItems.forEach((item) => {
                wechatparams.push(item.messageType.typeKey);
              });
            }

            if (emailItems) {
              emailItems.forEach((item) => {
                if (item.messageType.typeKey !== "face_analyze") {
                  emailparams.push(item.messageType.typeKey);
                }
              });
            }
            console.info(result,emailparams,'vvv');
            if (sendTypeList.length <= 0) {
              // 邮箱、微信都没绑定，全部解绑
              console.log("我都没有绑定");
              this.onUnbindCallback({
                userUnid: this.$cookie.get("unid"),
                typeKeys: wechatparams.concat(emailparams),
              });
            } else {
              if (
                sendTypeList.length <= 1 &&
                sendTypeList[0].label === "tabEamilPush"
              ) {
                // 绑定了邮箱，没有绑定微信，解绑微信
                console.log("我绑定了邮箱");
                if (wechatparams.length > 0) {
                  this.onUnbindCallback({
                    userUnid: this.$cookie.get("unid"),
                    typeKeys: wechatparams,
                  });
                }
              } else if (
                sendTypeList.length <= 1 &&
                sendTypeList[0].label === "tabWechatPush"
              ) {
                // 绑定了微信，没有绑定邮箱，解绑邮箱
                console.log("我绑定了微信");
                if (emailparams.length > 0) {
                  this.onUnbindCallback({
                    userUnid: this.$cookie.get("unid"),
                    typeKeys: emailparams,
                  });
                }
              }
              // else {
              //   this.getBoundMessageType()
              // }
              this.getBoundMessageType();
            }
          } else {
            this.getBoundMessageType();
          }
        })
        .catch((err) => {});
    },

    // 获取已绑定的类型
    getBoundMessageType() {
      let { warnParameter, pushParameter, userId, activeName } = this;
      this.cacheParameter = {};
      this.$api.management
        .userMessage(apiMessageUrl, { userId: userId })
        .then((res) => {
          let result = res.data;

          result.data.forEach((item) => {
            const { messageType, sendType } = item;
            const { typeKey } = messageType;
            const _typeKey = typeKey.split("_");
            //  debugger
            console.info(messageType,typeKey,'vvvsss')
            // 待优化...
            if (
              typeKey &&
              (!_typeKey[1] ||
                typeKey === "other_gate_minute_warn" ||
                typeKey === "gate_data_fluctuate" || typeKey === "contract_remind"
                 )
            ) {
              if (warnParameter[typeKey]) {
                this.cacheParameter[typeKey] = {};
                this.warnParameter[typeKey].dataType = typeKey;
                this.cacheParameter[typeKey]["dataType"] = typeKey;
                typeof sendType === "number" &&
                  (this.warnParameter[typeKey].sendMethods = sendType);
              }
              if (typeKey === "other_gate_minute_warn") {
                if (warnParameter["other_gate"]) {
                  this.cacheParameter["other_gate"] = {};
                  this.warnParameter["other_gate"].dataType = "other_gate";
                  this.cacheParameter["other_gate"]["dataType"] = "other_gate";
                  typeof sendType === "number" &&
                    (this.warnParameter["other_gate"].sendMethods = sendType);
                }
              }
            } else if (typeKey && (_typeKey.join("_") === "face_count_analyze" || typeKey == "face_analyze")) {
              // 报表数据
                this.sendDataList.map(ele => {
                  if(ele.value === typeKey) {
                    ele.dataType = typeKey;
                    ele.sendMethods = String(sendType);
                  }
                })
                // 目前仅支持邮箱推送
                // typeof sendType === 'number' && (this.pushParameter[faceDataKey].sendMethods = sendType)
            } else if(typeKey && typeKey == 'main_store_day_push'){
                this.cacheParameter["main_store"] = {};
                this.pushParameter["main_store"].dataType = "main_store";
                this.cacheParameter["main_store"]["dataType"] = "main_store";  
            }else{
              if(_typeKey[1] === "status" && warnParameter[typeKey]){
                this.cacheParameter[typeKey] = {};
                this.warnParameter[typeKey].dataType = typeKey;
                this.cacheParameter[typeKey]["dataType"] = typeKey;
                // 方式
                typeof sendType === "number" &&
                  (this.warnParameter[typeKey].sendMethods = sendType);
              }
              if (_typeKey[1] === "minute" && warnParameter[_typeKey[0]]) {
                this.cacheParameter[_typeKey[0]] = {};
                this.warnParameter[_typeKey[0]].dataType = _typeKey[0];
                this.cacheParameter[_typeKey[0]]["dataType"] = typeKey;
                // 方式
                typeof sendType === "number" &&
                  (this.warnParameter[_typeKey[0]].sendMethods = sendType);
              }
              if (_typeKey[1] === "day" && pushParameter[_typeKey[0]]) {
                this.cacheParameter[_typeKey[0]] = {};
                this.pushParameter[_typeKey[0]].dataType = _typeKey[0];
                this.cacheParameter[_typeKey[0]]["dataType"] = typeKey;
                // 方式
                typeof sendType === "number" &&
                  (this.pushParameter[_typeKey[0]].sendMethods = sendType);
              }
            }
          });
        })
        .catch((err) => {});
    },
    //face_data事件绑定
    onfacedataMessage(currParameter, k, type) {
      let {sendDataList} = this;
      let params = {
          userUnid: this.$cookie.get("unid"),
        };
      this.$set(sendDataList,k,currParameter)
      if(currParameter.dataType) {
        params.typeKeyData = [{
          typeKey:currParameter.value,
          sendType:currParameter.sendMethods,
        }]
        this.onBindCallback(params);
      } else {
        params.typeKeys = [currParameter.value];
        this.onUnbindCallback(params);
      }
    },
    /**
     * 绑定/解绑操作回调
     */
    async onMessageTypeClick(currParameter, k, type) {
      const { activeName } = this;
      if (this.sendTypeList.length <= 0) {
        this.warnParameter[k].dataType = null;
        this.$message({
          type: "warning",
          message: `请绑定微信/填写邮箱`,
        });
        return;
      }
      this.activeName = type;
      let params = {
        userUnid: this.$cookie.get("unid"),
      };
      if (currParameter[k].dataType) {
        // 绑定
        params.typeKeyData = [];
        params.typeKeyData.push({
          typeKey:
            k === "face_data"
              ? `${[currParameter[k].sendDataOpt[0]]}`
              : k === "device_status" || k === "gate_data_fluctuate" || k === "contract_remind"
              ? currParameter[k].dataType
              : `${currParameter[k].dataType}_${timeOption[type]}_${type}`,
          sendType: currParameter[k].sendMethods,
        });
        this.onBindCallback(params);
      } else {
        // 解绑
        params.typeKeys =
          k === "face_data"
            ? [currParameter[k].sendDataOpt[0]]
            : [
                k === "device_status" || k === "gate_data_fluctuate" || k === "contract_remind"
                ? k
                : `${k}_${timeOption[type]}_${type}`,
              ];
        // console.log('unbind params----->', params)
        this.onUnbindCallback(params);
      }
    },
    onBindCallback(params) {
      this.$api.management
        .bindMessage(apiMessageUrl, params)
        .then((res) => {
          let result = res.data;
          if (result.code == 200) {
            this.getUserId();
            this.$message({
              message: result.msg,
              type: "success",
            });
          } else {
            this.$message.error(result.msg);
          }
        })
        .catch((err) => {});
    },
    onUnbindCallback(params) {
      this.$api.management
        .deleteMessage(apiMessageUrl, params)
        .then(async (res) => {
          let result = res.data;
          if (result.code == 200) {
            this.$message({
              message: result.msg,
              type: "success",
            });
            this.getBoundMessageType();
          } else {
            this.$message.error(result.msg);
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped>
#card .el-transfer__buttons {
  padding: 0 10px !important;
}

.manage-head-wrapper {
  padding: 15px 12px 10px;
}
img {
  border: none;
}
.title-header {
  text-align: center;
  padding-bottom: 10px;
}
.title {
  line-height: 20px;
  display: inline-block;
  font-size: 20px;
  vertical-align: middle;
  text-align: center;
  color: #555;
}
.enlarge-img {
  text-align: center;
  position: absolute;
  margin: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.img-container {
  display: inline-block;
  position: relative;
}
.close-img__headerbtn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 20px;
}
.close-img__headerbtn .img__close {
  color: #909399;
}
[class*=" el-icon-"],
[class^="el-icon-"] {
  font-family: element-icons !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.el-icon-close:before {
  content: "\E60F";
}

.option-item:before,
.option-item:after {
  content: "";
  display: table;
}

.option-item:after {
  clear: both;
}

.option-item {
  position: relative;
}

.option-btn-wrapper {
  text-align: center;
}

.btn-unbind {
  position: absolute;
  right: 10px;
  top: 11px;
}

.card-title {
  background: #3bb8ff;
  color: #fff;
  padding: 10px 20px;
  font-size: 16px;
}

.card {
  padding: 5px 30px 16px;
}
.push-timer{
  margin:10px 15px 10px 0;
}
.check-group {
  /* float: left; */
  /* padding-left: 16%; */
}
.option-item-title {
  text-align: center;
  font-style: normal;
  font-weight: normal;
  line-height: 30px;
  padding-bottom: 5px;
}

.wechat-card-wrapper {
  text-align: center;
  position: relative;
  /* border-left: 1px solid rgba(0, 0, 0, 0.4); */
  /* box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4); */
}
.wechat-card-wrapper-line {
  position: absolute;
  left: 0;
  top: -2px;
  background-color: rgba(0, 0, 0, 0.4);
  width: 1px;
  height: 600px;
}
.souce-item-title {
  /* padding-left: 30px; */
  line-height: 30px;
  font-style: normal;
  font-weight: normal;
}
.qrcode-wrapper {
  background-color: #fff;
  text-align: center;
}

.notify-wrapper {
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

/* .notify-wrapper::after,
.notify-wrapper::before {
  content: "";
  display: table;
} */

.notify-wrapper::after {
  clear: both;
}

.notify-label {
  /* text-align: right;
  vertical-align: middle;
  float: left; */
  font-size: 14px;
  color: #606266;
  line-height: 30px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  width: 75%;
  display: flex;
  overflow: hidden;
  white-space: normal;
}

.notify-type {
  /* margin-left: 100px; */
  line-height: 30px;
  width: 120px;
  margin-right: 15px;
  position: relative;
}

.notify-type1 {
  display: flex;
  flex-direction: row-reverse;
}
.notify-type2{
  float: right;

}
.face-label{
  margin-left: 20px;
}
.send-type-select {
  width: 120px;
  margin-right: 15px;
}

.send-type-select + .send-type-select {
  padding-left: 10px;
}

.cell-select {
  width: 120px;
  margin-right: 15px;
}

.option-title {
  color: #303133;
  font-size: 14px;
  font-weight: 500;
  margin: 15px 0 5px 0;
  box-sizing: border-box;
}

.option-title-line {
  background-color: #409eff;
  height: 2px;
  width: 85px;
  margin-bottom: 15px;
}
.inline-input{
  width: 220px;
  height: 30px;
}
</style>