<template>
  <div class="app-container">
    <div class="title">
      <div class="line"></div>
      <span>基本信息</span>
    </div>
    <div class="user_msg">
      <div class="line_msg" v-for="(item, index) in user_basic" :key="index">
        <span class="basic_msg">{{ item.name }}</span>
        <span class="value" v-if="item.value">{{
          user_form[item.value] || "暂无"
        }}</span>
        <span class="value" v-else-if="item.type === 'type'">{{
          user_form.type == 5 ? "区级管理员" : "企业级管理员"
        }}</span>
        <span class="value" v-else-if="item.type === 'scenario'">{{
          user_form.placeType == 0
            ? "通用场景"
            : user_form.placeType == 1
            ? "预约场景"
            : "楼宇场景"
        }}</span>
      </div>
    </div>
    <el-form
      :model="user_form"
      ref="user_form"
      label-width="200px"
      label-position="left"
    >
      <div v-if="isOpenWarning">
        <div class="title">
          <div class="line"></div>
          <span>预警时限配置</span>
        </div>
        <div class="flex">
          <el-form-item
            label="晚归预警时限"
            prop="lateReturnTime"
            class="item-margin-bottom"
          >
            <el-time-select
              v-model="user_form.lateReturnTime"
              :picker-options="{
                start: '00:00',
                step: '00:15',
                end: '24:00',
              }"
              placeholder="选择时间"
            >
            </el-time-select>
          </el-form-item>
          <el-form-item
            label="未归预警时限"
            prop="noReturnTime"
            class="item-margin-bottom"
          >
            <el-time-select
              v-model="user_form.noReturnTime"
              :picker-options="{
                start: '00:00',
                step: '00:15',
                end: '24:00',
              }"
              placeholder="选择时间"
            >
            </el-time-select>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item
            label="长时间未出寝预警时限(时)"
            prop="longTimeInBedNum"
            class="item-margin-bottom"
          >
            <el-input-number
              size="mini"
              v-model="user_form.longTimeInBedNum"
              :min="0"
            ></el-input-number>
          </el-form-item>
          <el-form-item
            label="长时间未归寝预警时限(时)"
            prop="longTimeOutBedNum"
            class="item-margin-bottom"
          >
            <el-input-number
              size="mini"
              v-model="user_form.longTimeOutBedNum"
              :min="0"
            ></el-input-number>
          </el-form-item>
        </div>
      </div>
      <div class="title">
        <div class="line"></div>
        <span>场景功能配置</span>
      </div>
      <div class="flex" v-if="user_form.placeType != 1 && user_form.type === 5">
        <el-form-item
          label="身份证认证"
          prop="isPush"
          class="item-margin-bottom"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :manual="false"
            content="若开启现场刷身份证，人员若在员工白名单中存在，且未认证，则状态改为已认证，并抓拍现场照片补全信息"
            placement="bottom"
          >
            <el-radio-group v-model="user_form.isPush">
              <el-radio :label="0">停用</el-radio>
              <el-radio :label="1">开启</el-radio>
            </el-radio-group>
          </el-tooltip>
        </el-form-item>
        <el-form-item
          label="卡号认证"
          prop="cardPhysics"
          class="item-margin-bottom"
        >
          <el-radio-group v-model="user_form.cardPhysics">
            <el-radio :label="2">停用</el-radio>
            <el-radio :label="1">启用</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <div class="flex" v-if="user_form.type === 5">
        <el-form-item
          label="常访客配置"
          prop="isHideImportant"
          v-if="user_form.placeType != 1"
          class="item-margin-bottom"
        >
          <el-checkbox-group v-model="user_form.whiteVisitorType">
            <el-tooltip
              class="item"
              effect="dark"
              :manual="false"
              content="只开启员工功能时,则为学校场景"
              placement="bottom"
            >
              <el-checkbox label="1">启用员工功能</el-checkbox>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :manual="false"
              content="同时开启员工和访客功能时,则为常访客场景"
              placement="bottom"
            >
              <el-checkbox label="2">启用访客功能</el-checkbox>
            </el-tooltip>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          label="设备核酸时间（小时）"
          prop="nucleicExpirationTime"
          class="item-margin-bottom"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :manual="false"
            content="单位:时,0默认不开启"
            placement="bottom"
          >
            <el-input-number
              size="mini"
              v-model="user_form.nucleicExpirationTime"
              :min="0"
            ></el-input-number>
          </el-tooltip>
        </el-form-item>
        <el-form-item
          v-if="user_form.placeType === 1 && user_form.type == 5"
          label="不可预约年龄段"
          class="item-margin-bottom"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :manual="false"
            content="开始区间"
            placement="bottom"
          >
            <el-input-number
              size="mini"
              v-model="user_form.notAllowAgeStart"
              :min="0"
            ></el-input-number>
          </el-tooltip>
          至
          <el-tooltip
            class="item"
            effect="dark"
            :manual="false"
            content="结束区间"
            placement="bottom"
          >
            <el-input-number
              size="mini"
              v-model="user_form.notAllowAgeEnd"
              :min="0"
            ></el-input-number>
          </el-tooltip>
        </el-form-item>
      </div>

      <div class="flex" v-if="user_form.placeType != 1">
        <el-form-item
          label="员工有效期（天）"
          prop="userWhitelistEffectiveTime"
          class="item-margin-bottom"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :manual="false"
            content="单位:天"
            placement="bottom"
          >
            <el-input-number
              size="mini"
              :precision="1"
              v-model="user_form.userWhitelistEffectiveTime"
              :min="0"
            ></el-input-number>
          </el-tooltip>
        </el-form-item>
        <el-form-item
          label="访客有效期（天）"
          prop="userVisiterEffectiveTime"
          class="item-margin-bottom"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :manual="false"
            content="单位:天"
            placement="bottom"
          >
            <el-input-number
              size="mini"
              :precision="1"
              v-model="user_form.userVisiterEffectiveTime"
              :min="0"
            ></el-input-number>
          </el-tooltip>
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item
          label="实名认证年龄区间"
          v-if="user_form.placeType == 0 && user_form.type === 5"
          class="item-margin-bottom"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :manual="false"
            content="开始区间"
            placement="bottom"
          >
            <el-input-number
              size="mini"
              v-model="user_form.realAuthenticationAgeStart"
              :min="0"
            ></el-input-number>
          </el-tooltip>
          至
          <el-tooltip
            class="item"
            effect="dark"
            :manual="false"
            content="结束区间"
            placement="bottom"
          >
            <el-input-number
              size="mini"
              v-model="user_form.realAuthenticationAgeEnd"
              :min="0"
            ></el-input-number>
          </el-tooltip>
        </el-form-item>
        <el-form-item
          label="通行区域设备列表"
          class="form-item-style"
          prop="passDeviceList"
        >
          <el-select
            style="width: 100%"
            collapse-tags
            v-model="user_form.passDeviceList"
            multiple
            placeholder="请选择通行区域设备列表"
          >
            <el-option
              v-for="item in machine_list"
              :key="item.sn"
              :label="item.sn"
              :value="item.sn"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item
          v-if="isOpenExam"
          style="flex: 0.5"
          label="考试设备列表"
          prop="examDeviceList"
        >
          <el-select
            style="width: 100%"
            collapse-tags
            v-model="user_form.examDeviceList"
            multiple
            placeholder="请选择考试设备列表"
          >
            <el-option
              v-for="item in machine_list"
              :key="item.sn"
              :label="item.sn"
              :value="item.sn"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>

      <el-form-item
        label="屏保图片配置"
        prop="screenShowPhotos"
        class="item-margin-bottom"
      >
        <el-upload
          class="upload-demo"
          :multiple="false"
          :action="doUpload"
          :file-list="user_form.screenShowPhotos"
          list-type="picture"
          :http-request="doUploadAvatar"
          :before-upload="beforeAvatarUpload"
          accept="image/png,image/gif,image/jpg,image/jpeg"
        >
          <img
            src="../../assets/default-img.png"
            alt=""
            v-if="user_form.screenShowPhotos.length < 1"
            class="upload-img"
          />

          <div v-else class="upload-img">
            <img :src="user_form.screenShowPhotos[0].url" alt="" />
            <span @click.stop="handleRemove" class="del-img">x</span>
          </div>
        </el-upload>
      </el-form-item>
      <!-- 设备显示配置 -->
      <div v-if="user_form.type === 5">
        <div class="title">
          <div class="line"></div>
          <span>设备显示配置</span>
        </div>
        <div class="flex">
          <el-form-item
            label-width="120px"
            label="顶部标题"
            class="form-item-style"
            prop="topTitle"
          >
            <el-input
              v-model="user_form.topTitle"
              placeholder="请输入顶部标题"
              maxlength="8"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item
            label-width="120px"
            label="二维码码值"
            class="form-item-style el-form-item special"
            prop="qrcodeText"
          >
            <el-input
              v-model="user_form.qrcodeText"
              placeholder="二维码码值"
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item
            label-width="120px"
            label="二维码是否显示"
            class="el-form-item form-item-style"
            prop="showQrcode"
          >
            <el-radio-group v-model="user_form.showQrcode" style="width: 100%">
              <el-radio :label="false">否</el-radio>
              <el-radio :label="true">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label-width="120px"
            label="广告图片"
            class="el-form-item form-item-style special"
            prop="advertise"
          >
            <el-upload
              ref="upload"
              name="file"
              class="avatar-uploader"
              :action="doUpload"
              :show-file-list="false"
              :http-request="doUploadAvatar1"
              :before-upload="beforeAvatarUpload"
              :auto-upload="true"
              accept="image/png,image/gif,image/jpg,image/jpeg"
            >
              <img
                src="../../assets/default-img.png"
                alt=""
                v-if="!user_form.advertise"
                class="upload-img"
              />
              <div
                :class="[
                  'upload-img',
                  user_form.showQrcode ? 'upload-img1' : 'upload-img2',
                ]"
                v-else
              >
                <img :src="user_form.advertise" />
                <span @click.stop="handleRemove('advertise')" class="del-img"
                  >x</span
                >
              </div>
            </el-upload>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="sure">
      <el-button plain type="primary" @click="getInfo(1)" class="reset"
        >重置</el-button
      >
      <el-button type="primary" @click="updateAdmin">更改配置</el-button>
    </div>
  </div>
</template>

<script>
import { checkRole } from "@/utils/checkRole";
import { getInfo } from "@/api/user";
import { doEditSelf, pictureLocal } from "@/api/ordinary_user";
import { getFaceDeviceList } from "@/api/old_api_pengwenbing";

export default {
  name: "",
  components: {},
  data() {
    return {
      isOpenExam: this.$store.getters.isOpenExam,
      isOpenWarning: this.$store.getters.isOpenWarning,
      // placeType: this.$store.getters.placeType,
      // 对话框参数
      user_form: {
        placeType: null, // 场所类型  0通用1预约2楼宇
        userWhitelistEffectiveTime: 3650, //员工有效期
        userVisiterEffectiveTime: 0.3, //访客有效期
        isPush: 0,
        cardPhysics: 2,
        whiteVisitorType: ["1", "2"],
        nucleicExpirationTime: null,
        realAuthenticationAgeStart: null,
        realAuthenticationAgeEnd: null,
        notAllowAgeEnd: 0,
        notAllowAgeStart: 0,
        screenShowPhotos: [],
        topTitle: null,
        examDeviceList: [], //考试设备列表
        qrcodeText: null, //二维码码值
        showQrcode: false, //二维码是否显示
        advertise: null, //广告图片
        lateReturnTime: null,
        noReturnTime: null,
        longTimeInBedNum: null,
        longTimeOutBedNum: null,
        passDeviceList: [],
      },

      // 验证规则
      rules: {},
      user_basic: [
        {
          name: "平台账号名",
          value: "username",
        },
        {
          name: "账号级别",
          value: null,
          type: "type",
        },
        {
          name: "省",
          value: "provinceName",
        },
        {
          name: "管理员姓名",
          value: "name",
        },
        {
          name: "管理员手机号",
          value: "phone",
        },
        {
          name: "市",
          value: "cityName",
        },
        {
          name: "使用场景",
          value: null,
          type: "scenario",
        },

        {
          name: "区",
          value: "areaName",
        },
        {
          name: "街道",
          value: "streetName",
        },
        {
          name: "详细地址",
          value: "address",
        },
      ],
      doUpload: "",
      // 设备列表_搜索
      machine_list: [],

    };
  },

  methods: {
    // 查询权限
    checkRole,
    getInfo(type) {
      getInfo().then((res) => {
        this.user_form = res.data;
        if (type) {
          this.$message.success("重置成功！");
        }
      });
    },
    // 修改
    updateAdmin() {
      this.user_form.password = null;
      doEditSelf(this.user_form).then((res) => {
        this.$message({
          type: "success",
          message: "修改成功!",
        });
        this.getInfo();
      });
    },
    handleRemove(type) {
      if (type === "advertise") {
        this.user_form.advertise = null;
      } else {
        this.user_form.screenShowPhotos = [];
      }
      return false;
    },
    // 图片上传前
    beforeAvatarUpload(file) {
      if (
        !(
          file.type === "image/png" ||
          file.type === "image/gif" ||
          file.type === "image/jpg" ||
          file.type === "image/jpeg"
        )
      ) {
        this.$notify.warning({
          title: "警告",
          message:
            "请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片",
        });
        return;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$notify.warning({
          title: "警告",
          message: "图片大小必须小于2M",
        });
        return;
      }
    },
    doUploadAvatar(obj) {
      this.user_form.screenShowPhotos = [];
      var avatar = new FormData();
      avatar.append("file", obj.file);
      pictureLocal(avatar).then((res) => {
        let data = {
          name: obj.file.name,
          url: res.data,
        };
        this.user_form.screenShowPhotos.push(data);
      });
    },
    doUploadAvatar1(obj) {
      this.listLoading = true;
      var avatar = new FormData();
      avatar.append("file", obj.file);
      pictureLocal(avatar).then((res) => {
        this.value = res.data;
        this.listLoading = false;
        this.user_form.advertise = res.data;
      });
    },
    // 获取设备列表-搜索
    getFaceDeviceList() {
      getFaceDeviceList().then((res) => {
        this.machine_list = res.data;
      });
    },
  },
  computed: {},
  watch: {},
  created() {
    this.getFaceDeviceList();
  },
  mounted() {
    this.getInfo();
  },
};
</script>

<style scoped lang="scss">
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: start;
  width: 1150px;
}
.sure {
  margin-left: 520px;
  margin-top: 37px;
}
.title {
  margin-top: 30px;
  margin-bottom: 20px;
  .line {
    width: 3px;
    height: 13px;
    background: #409eff;
    border-radius: 13px;
    display: inline-block;
    margin-right: 8px;
  }
  span {
    font-weight: 500;
    font-size: 17px;
    color: #333333;
  }
}
.user_msg {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
  .line_msg {
    width: 33.33%;
    margin-bottom: 15px;
    .basic_msg {
      color: #b0b6c5;
      margin-right: 32px;
    }
    .value {
      color: #606266;
    }
  }
}
.reset {
  margin-right: 80px;
}
::v-deep.upload-demo {
  display: flex;
  .el-upload-list {
    display: none !important;
  }
}

.upload-img {
  width: 100px;
  height: 100px;
  position: relative;
  margin-bottom: 20px;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    // border-radius: 12px;
  }
}
.upload-img1 {
  width: 253px;
  height: 91px;
  border: 1px solid #d6eaff;
  box-sizing: border-box;
}
.upload-img2 {
  width: 356px;
  height: 91px;
  border: 1px solid #99d3f5;
  box-sizing: border-box;
}
.del-img {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #83878f;
  color: #fff;
  position: absolute;
  top: -12px;
  right: -10px;
  border-radius: 48%;
  line-height: 18px;
}
.item-margin-bottom {
  flex: 0.5;
  margin-bottom: 0px !important;
}
.custom-css {
  border: 1px solid #d6eaff;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.custom-css-item {
  border-bottom: 2px dashed #e7ebf4;
  padding: 20px 5px 45px 20px;
}
.custom-css-item:last-child {
  border-bottom: none;
}
</style>
<style lang="scss">
//修改element原生样式
::v-deep.el-upload-list {
  max-width: 390px;
}
</style>
