<template>
  <div class="main_root">
    <div class="menu_list">
      <div
        :class="['menu_item', menuInfo.selected === 1 ? 'selected' : '']"
        @click="toChangeMenu(1)"
      >
        设置管理密码
      </div>
      <div
        :class="['menu_item', menuInfo.selected === 2 ? 'selected' : '']"
        @click="toChangeMenu(2)"
      >
        设备设置管理
      </div>
    </div>
    <div class="tip_bg" v-if="menuInfo.selected === 1">
      <div class="require">
        &nbsp;选择动态密码后，需要去设备列表中计算设备密码。
      </div>
      <div class="require">
        校级管理员可设置设备管理密码为空，校级密码为空时，该校设备管理密码继承超管设置的设备管理密码。
      </div>
    </div>
    <div class="tip_bg" v-else-if="menuInfo.selected === 2">
      <div class="require">
        学校强制绑定设备开关打开后，每个学生只能绑定一台设备，一旦和设备绑定将不能在其他设备上登录，需要更换设备时，需要管理员对该学生进行解绑操作。
      </div>
      <!-- <div class="require">
        SD卡功能设置开启后，该学校的所有设备SD功能均可使用，如果需要单独控制可以在设备管理中对单个设备进行开启或关闭操作。
      </div> -->
      <div class="require">
        隐藏图库，相机开启后，该学校的所有设备桌面不再显示图库，相机。
      </div>
      <div class="require">
        禁用注销开启后，该单位的所有设备一旦登录成功，必须输入管理员密码才能退出登录。
      </div>
      <div class="require">
        锁定时长后，客户端使用时间到了设备提醒休息，默认允许使用30分钟，这里你可以自行设置(可设置范围20~120分钟)。
      </div>
      <!-- <div class="require">
        限制安装来源功能开启后，只允许安装<span style="color: #339dff"
          >云鸽</span
        >商店内的应用(该功能仅对华为设备生效)。
      </div> -->
    </div>
    <div class="form_box" v-if="menuInfo.selected === 1">
      <Form :label-width="80">
        <FormItem label="动态密码">
          <RadioGroup v-model="menuInfo.pswDetail.trend">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="管理密码" v-if="menuInfo.pswDetail.trend !== 1">
          <Input
            v-model="menuInfo.pswDetail.password"
            placeholder="请输入管理密码"
          ></Input>
          <div style="color: #f0153f">管理密码必须是8位数字或空</div>
        </FormItem>
      </Form>
    </div>
    <div class="form_box" v-else-if="menuInfo.selected === 2">
      <Form :label-width="200">
        <FormItem label="是否强制绑定">
          <RadioGroup v-model="menuInfo.setDetail.forceBind">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
        <!-- <FormItem label="启动SD卡功能">
          <RadioGroup v-model="menuInfo.setDetail.sdcard">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem> -->
        <FormItem label="启用电话短信">
          <RadioGroup v-model="menuInfo.setDetail.simcard">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
        <!-- <FormItem label="启用数据流量">
          <RadioGroup v-model="menuInfo.setDetail.dataFlow">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem> -->
        <FormItem label="是否禁用注销">
          <RadioGroup v-model="menuInfo.setDetail.logout">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="隐藏一键清理">
          <RadioGroup v-model="menuInfo.setDetail.cleanup">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="隐藏一键加速">
          <RadioGroup v-model="menuInfo.setDetail.accelerate">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
        <!-- <FormItem label="开启手势密码">
          <RadioGroup v-model="menuInfo.setDetail.gesturePwd">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem> -->
        <!-- <FormItem label="启用wifi高级选项">
          <RadioGroup v-model="menuInfo.setDetail.wifiAdvanced">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem> -->
        <!-- <FormItem label="启用截屏">
          <RadioGroup v-model="menuInfo.setDetail.screenshots">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem> -->
        <!-- <FormItem label="启用客户端管理员">
          <RadioGroup v-model="menuInfo.setDetail.clientAdmin">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem> -->
        <FormItem label="隐藏自动旋转">
          <RadioGroup v-model="menuInfo.setDetail.rotateSetting">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="开启使用时长提醒">
          <RadioGroup v-model="menuInfo.setDetail.remindDuration">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem
          label="提醒时长（分钟）"
          v-if="menuInfo.setDetail.remindDuration === 1"
        >
          <InputNumber
            :min="1"
            v-model="menuInfo.setDetail.duration"
          ></InputNumber>
        </FormItem>
        <!-- <FormItem label="启用OTG功能">
          <RadioGroup v-model="menuInfo.setDetail.otg">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem> -->
      </Form>
      <Form :label-width="200">
        <FormItem label="隐藏图库">
          <RadioGroup v-model="menuInfo.setDetail.gallery">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="隐藏相机">
          <RadioGroup v-model="menuInfo.setDetail.camera">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="隐藏时钟">
          <RadioGroup v-model="menuInfo.setDetail.alarmClock">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="隐藏日历">
          <RadioGroup v-model="menuInfo.setDetail.calendar">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="开启护眼模式">
          <RadioGroup v-model="menuInfo.setDetail.protectedEyes">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
        <!-- <FormItem label="限制安装来源">
          <RadioGroup v-model="menuInfo.setDetail.installStore">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem> -->
        <FormItem label="允许用户改密码">
          <RadioGroup v-model="menuInfo.setDetail.changePwd">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="学校班级展示">
          <RadioGroup v-model="menuInfo.setDetail.schoolClass">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
        <!-- <FormItem label="启用GPS">
          <RadioGroup v-model="menuInfo.setDetail.gps">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem> -->
        <!-- <FormItem label="显示隐私声明">
          <RadioGroup v-model="menuInfo.setDetail.privacyStatement">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem> -->
      </Form>
    </div>
    <div class="bottom_btns">
      <Button
        :disabled="
          (menuInfo.selected === 1 && !menuInfo.pswDetail.pwid) ||
          (menuInfo.selected === 2 && !menuInfo.setDetail.ssid)
        "
        style="margin-right: 20px"
        @click="resetDetail()"
        >重置</Button
      >
      <Button type="primary" class="primary_btn" @click="saveDetail()"
        >保存</Button
      >
    </div>
  </div>
</template>

<script>
import {
  password_detail,
  password_edit,
  password_delete,
  schoolSet_detail,
  schoolSet_edit,
  schoolSet_delete
} from "@/api/setting";
export default {
  data() {
    return {
      menuInfo: {
        selected: 1,
        pswDetail: {
          pwid: null,
          rversion: null,
          trend: 1,
          password: null
        },
        setDetail: {
          ssid: null,
          rversion: null,
          forceBind: 0,
          // sdcard: 0,
          simcard: 0,
          // dataFlow: 0,
          logout: 0,
          cleanup: 0,
          accelerate: 0,
          // gesturePwd: 0,
          // wifiAdvanced: 0,
          // screenshots: 0,
          // clientAdmin: 0,
          rotateSetting: 0,
          gallery: 0,
          camera: 0,
          alarmClock: 0,
          calendar: 0,
          protectedEyes: 0,
          // installStore: 0,
          changePwd: 0,
          schoolClass: 0,
          // gps: 0,
          // privacyStatement: 0,
          remindDuration: 1,
          duration: 30
          // otg: 0
        }
      }
    };
  },
  created() {
    this.getPswDetail();
  },
  computed: {
    powerParams() {
      return this.$store.getters.powerParams;
    }
  },
  methods: {
    toChangeMenu(type) {
      this.menuInfo.selected = type;
      if (this.menuInfo.selected === 1) {
        this.getPswDetail();
      } else if (this.menuInfo.selected === 2) {
        this.getSetDetail();
      }
    },
    resetDetail() {
      if (this.menuInfo.selected === 1) {
        if (!this.menuInfo.pswDetail.pwid) {
          return;
        }
        password_delete({
          rtype: this.powerParams.rtype,
          objectid: this.powerParams.objectid,
          pwid: this.menuInfo.pswDetail.pwid,
          rversion: this.menuInfo.pswDetail.rversion
        }).then((data) => {
          if (data.code === 0) {
            this.getPswDetail();
            this.$Message.success(data.msg);
          } else {
            this.$Message.error(data.msg);
          }
        });
      } else if (this.menuInfo.selected === 2) {
        if (!this.menuInfo.setDetail.ssid) {
          return;
        }
        schoolSet_delete({
          rtype: this.powerParams.rtype,
          objectid: this.powerParams.objectid,
          ssid: this.menuInfo.setDetail.ssid,
          rversion: this.menuInfo.setDetail.rversion
        }).then((data) => {
          if (data.code === 0) {
            this.getSetDetail();
            this.$Message.success(data.msg);
          } else {
            this.$Message.error(data.msg);
          }
        });
      }
    },
    getPswDetail() {
      password_detail({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        schoolid: this.powerParams.objectid
      }).then((data) => {
        if (data.code === 0) {
          if (data.obj) {
            this.menuInfo.pswDetail = data.obj;
          } else {
            this.menuInfo.pswDetail = {
              pwid: null,
              rversion: null,
              trend: 1,
              password: null
            };
          }
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    getSetDetail() {
      schoolSet_detail({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        schoolid: this.powerParams.objectid
      }).then((data) => {
        if (data.code === 0) {
          if (data.obj) {
            this.menuInfo.setDetail = data.obj;
          } else {
            this.menuInfo.setDetail = {
              ssid: null,
              rversion: null,
              forceBind: 0,
              // sdcard: 0,
              simcard: 0,
              // dataFlow: 0,
              logout: 0,
              cleanup: 0,
              accelerate: 0,
              // gesturePwd: 0,
              // wifiAdvanced: 0,
              // screenshots: 0,
              // clientAdmin: 0,
              rotateSetting: 0,
              gallery: 0,
              camera: 0,
              alarmClock: 0,
              calendar: 0,
              protectedEyes: 0,
              // installStore: 0,
              changePwd: 0,
              schoolClass: 0,
              // gps: 0,
              // privacyStatement: 0,
              remindDuration: 1,
              duration: 30
              // otg: 0
            };
          }
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    saveDetail() {
      if (this.menuInfo.selected === 1) {
        this.savePswDetail();
      } else if (this.menuInfo.selected === 2) {
        this.saveSetDetail();
      }
    },
    savePswDetail() {
      if (
        this.menuInfo.pswDetail.trend !== 1 &&
        this.menuInfo.pswDetail.password &&
        !/^\d{8}$/.test(this.menuInfo.pswDetail.password)
      ) {
        this.$Message.error("密码格式不正确");
        return;
      }
      password_edit({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        schoolid: this.powerParams.objectid,
        trend: this.menuInfo.pswDetail.trend,
        password:
          this.menuInfo.pswDetail.trend !== 1
            ? this.menuInfo.pswDetail.password
            : null,
        pwid: this.menuInfo.pswDetail.pwid,
        rversion: this.menuInfo.pswDetail.rversion
      }).then((data) => {
        if (data.code === 0) {
          this.$Message.success(data.msg);
          this.getPswDetail();
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    saveSetDetail() {
      if (this.menuInfo.setDetail.remindDuration === 1) {
        if (
          this.menuInfo.setDetail.duration < 20 ||
          this.menuInfo.setDetail.duration > 120
        ) {
          this.$Message.error("提醒时长可设置范围为20~120分钟");
          return;
        }
      }
      schoolSet_edit({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        schoolid: this.powerParams.objectid,
        ssid: this.menuInfo.setDetail.ssid,
        rversion: this.menuInfo.setDetail.rversion,
        forceBind: this.menuInfo.setDetail.forceBind,
        // sdcard: this.menuInfo.setDetail.sdcard,
        simcard: this.menuInfo.setDetail.simcard,
        // dataFlow: this.menuInfo.setDetail.dataFlow,
        logout: this.menuInfo.setDetail.logout,
        cleanup: this.menuInfo.setDetail.cleanup,
        accelerate: this.menuInfo.setDetail.accelerate,
        // gesturePwd: this.menuInfo.setDetail.gesturePwd,
        // wifiAdvanced: this.menuInfo.setDetail.wifiAdvanced,
        // screenshots: this.menuInfo.setDetail.screenshots,
        // clientAdmin: this.menuInfo.setDetail.clientAdmin,
        rotateSetting: this.menuInfo.setDetail.rotateSetting,
        gallery: this.menuInfo.setDetail.gallery,
        camera: this.menuInfo.setDetail.camera,
        alarmClock: this.menuInfo.setDetail.alarmClock,
        calendar: this.menuInfo.setDetail.calendar,
        protectedEyes: this.menuInfo.setDetail.protectedEyes,
        // installStore: this.menuInfo.setDetail.installStore,
        changePwd: this.menuInfo.setDetail.changePwd,
        schoolClass: this.menuInfo.setDetail.schoolClass,
        // gps: this.menuInfo.setDetail.gps,
        // privacyStatement: this.menuInfo.setDetail.privacyStatement,
        remindDuration: this.menuInfo.setDetail.remindDuration,
        duration: this.menuInfo.setDetail.duration
        // otg: this.menuInfo.setDetail.otg
      }).then((data) => {
        if (data.code === 0) {
          this.$Message.success(data.msg);
          this.getSetDetail();
        } else {
          this.$Message.error(data.msg);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.menu_list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 20px 100px;
  color: #7c8db5;
  .menu_item {
    margin-right: 20px;
    padding: 0 4px;
    font-size: 16px;
    line-height: 1.6;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    &.selected {
      color: #339cff;
      border-color: #339cff;
    }
  }
}
.tip_bg {
  margin: 0 100px;
  border-radius: 8px;
  border: 1px dashed #ced9f2;
  background: #f1f6fc;
  .require {
    margin: 10px 20px;
    font-size: 16px;
    line-height: 1.6;
    &::before {
      content: "*" !important;
      display: inline-block;
      margin-right: 4px;
      line-height: 1;
      font-family: SimSun;
      font-size: 14px;
      color: #ed4014;
    }
  }
}
.form_box {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 20px 100px;
  /deep/.ivu-form {
    width: 35%;
    .ivu-form-item {
      margin-bottom: 10px;
    }
  }
}
.bottom_btns {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}
</style>
