<template>
  <div class="app-container">
    <!--logo照片-->
    <div class="logo-top">
      <el-image
        v-if="push_form.url"
        style="width: 200px; height: 200px;"
        :src="push_form.url"
        fit="contain"
        :preview-src-list="[push_form.url]">
      </el-image>
      <div v-else style="width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; border: 1px solid #909399; color: #909399">
        还未上传logo哦~
      </div>
    </div>
    <!--操作-->
    <div class="logo-bottom">
      <el-button type="primary" icon="el-icon-thumb" class="margin-left" @click="handlePushLogo" >下发 logo</el-button>
    </div>
    <!--对话框-->
    <el-dialog :title="dialogTitle[dialogType]" :visible.sync="dialogVisible" width="800px">
      <!--下发logo-->
      <el-form :model="push_form" :rules="push_rules" ref="user_form" label-width="120px" label-position="left" v-show="dialogType === 'push'">
        <el-form-item label="设备logo" prop="url" label-width="120px">
          <div class="upload">
            <el-image
              v-if="push_form.url"
              class="img"
              style="width: 100px; height: 100px"
              :src="push_form.url"
              fit="contain">
            </el-image>
            <div class="deleteLogo" v-if="push_form.url" @click="deleteImage">
              <i class="el-icon-close"></i>
            </div>
            <a href="javascript:;" class="file" v-if="!push_form.url">
              <i class="el-icon-upload2"></i>
              <input type="file" name="file" ref="file" @change="upload($event)">
            </a>
          </div>
        </el-form-item>
        <el-form-item label="下发类型" prop="type">
          <el-radio-group v-model="push_form.type" @change="changeType">
            <el-radio :label="1">全量下发</el-radio>
            <el-radio :label="2">账号下发</el-radio>
            <el-radio :label="3">单台下发</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="下发账号" prop="sn" label-width="120px" v-show="push_form.type === 2">
          <el-form-item prop="adminId">
            <el-select filterable clearable v-model="push_form.adminId" placeholder="请选择账号">
              <el-option
                v-for="item in user_list"
                :key="item.adminId"
                :label="item.username"
                :value="item.adminId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item label="设备" prop="sn" label-width="120px" v-show="push_form.type === 3">
          <el-select filterable clearable v-model="push_form.sn" placeholder="请选择设备编号" class="margin-left input">
            <el-option
              v-for="item in machine_list"
              :key="item.sn"
              :label="item.sn"
              :value="item.sn">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogType === 'upload'?uploadLogo():pushLogo()">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {getFaceDeviceList, getLogo, uploadImage, issuedAll} from "@/api/old_api_pengwenbing";
    import {getUserListSearch} from "@/api/user_manage";

    export default {
      name: "logoManage",
      data() {
        return {
          baseUrl: process.env.VUE_APP_BASE_API,
          // 是否显示对话框
          dialogVisible: false,
          // 对话框标题
          dialogTitle: {
            upload: '上传 logo',
            push: '下发 logo'
          },
          dialogType: '',
          // 下发表单
          push_form: {
            url: '',
            type: 1,
            adminId: '',
            sn: ''
          },
          // 下发验证规则
          push_rules: {
            type: [
              { required: true, message: '请选择下发方式', trigger: 'blur' },
            ],
            sn: [
              { required: true, message: '请选择设备', trigger: 'blur' },
            ],
          },
          // 设备列表
          machine_list: [],
          // 账号列表
          user_list: [],
        }
      },
      created() {
        this.fetchData();
        this.getFaceDeviceList();
        this.getUserListSearch();
      },
      methods: {
        // 获取logoUrl
        fetchData() {
          getLogo().then(res => {
            this.push_form.url = res.data
          })
        },
        // 获取设备列表-搜索
        getFaceDeviceList() {
          getFaceDeviceList().then(res => {
            this.machine_list = res.data
          })
        },
        // 获取账号列表数据_搜索
        getUserListSearch() {
          getUserListSearch().then(res => {
            this.user_list = res.data
          })
        },
        // 改变下发类型
        changeType(e) {
          switch (e) {
            case 1:
              this.push_form.adminId = "";
              this.push_form.sn = "";
              break;
            case 2:
              this.push_form.sn = "";
              break;
            case 3:
              this.push_form.adminId = "";
              break;
            default:
              break;
          }
        },
        // 上传logo
        upload(e) {
          var files = e.currentTarget.files;
          if (!files.length) {
            return
          };
          const loading = this.$loading({
            lock: true,
            text: '上传logo中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          var formData = new FormData(); // 必需声明一个FormData对象
          formData.append('file', files[0])
          uploadImage(formData).then(res => {
            loading.close();
            this.fetchData();
          }).catch(err => {
            loading.close();
            this.fetchData();
          })
        },
        // 删除照片
        deleteImage() {
          this.push_form.url = ''
        },
        // 打开添加下发logo对话框
        handlePushLogo() {
          this.dialogVisible = true;
          this.dialogType = 'push'
        },
        // 下发logo
        pushLogo() {
          this.dialogVisible = false;
          const loading = this.$loading({
            lock: true,
            text: '全力下发中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          issuedAll(this.push_form).then(res => {
            loading.close();
            this.fetchData();
            this.$message({
              type: 'success',
              message: '下发成功,设备重启后生效!'
            });
          }).catch(err => {
            loading.close();
            this.fetchData();
          })
        },
      }
    }
</script>

<style scoped>
  .app-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 500px;
  }
  .logo-bottom {
    /*width: 200px;*/
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
  }
  /*上传文件按钮*/
  .upload {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .file {
    /*margin: 10px 0 0 10px;*/
    position: absolute;
    /*background: #D0EEFF;*/
    border: 1px solid #909399;
    /*border-radius: 4px;*/
    /*padding: 10px 20px;*/
    box-sizing: border-box;
    overflow: hidden;
    color: #909399;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    /*text-decoration: none;*/
    /*text-indent: 0;*/
  }
  .file input {
    position: absolute;
    font-size: 14px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
  }
  .file:hover {
    background: rgba(0,0,0,0.1);
    color: white;
    text-decoration: none;
    border: none;
  }
  .deleteLogo {
    position: absolute;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0;
    top: 0;
    background-color: rgba(0,0,0,0.3);
    /*border: 1px solid red;*/
    color: white;
  }
  .deleteLogo:hover {
    cursor: pointer;
  }
</style>
