<template>
  <div class="fullheight" style="overflow: auto; background-color:#fff;padding:10px">
    <span style="font-size: 16px;vertical-align: middle;"><span class="tip"></span>系统信息</span>
    <el-divider></el-divider>
    <el-form v-form data-vv-scope="sysMsg" class="sysMag-form">
      <el-row>
        <el-col :span="12">
          <ht-form-item label="系统名称">
            <ht-input
              v-model="sysMsg.sysName"
              :validate="{required: true}"
              style="width: 100%"
            />
          </ht-form-item>
        </el-col>
        <el-col :span="12">
          <ht-form-item label="系统版本">
            <ht-input
              style="width: 100%"
              v-model="sysMsg.sysVersion"
              :validate="{required: true}"
            />
          </ht-form-item>
        </el-col>
        <el-col :span="12">
          <ht-form-item label="公司名称">
            <ht-input
              style="width: 100%"
              v-model="sysMsg.sysCompanyName"
              :validate="{required: true}"
            />
          </ht-form-item>
        </el-col>
        <!-- <el-col :span="12">
                    <ht-form-item label="版权信息">
                        <ht-input v-model="sysMsg.sysCopyrihte" />
                    </ht-form-item>
                </el-col> -->
        <!-- <el-col :span="12">
                    <ht-form-item label="公司简称">
                        <ht-input
                            v-pinyin="sysMsg.sysCompanyName"
                            v-model="sysMsg.sysCompanyShortName"
                        />
                    </ht-form-item>
                </el-col> -->
        <!-- <el-col :span="12">
                    <ht-form-item label="公司地址">
                        <ht-input v-model="sysMsg.sysCompanyAddress" />
                    </ht-form-item>
                </el-col> -->
        <el-col :span="12">
          <ht-form-item label="公司法人">
            <ht-input
              style="width: 100%"
              v-model="sysMsg.sysCompanyLegal"
              :validate="{required: true}"
            />
          </ht-form-item>
        </el-col>
        <!-- <el-col :span="12">
                    <ht-form-item label="公司邮箱">
                        <ht-input v-model="sysMsg.sysCompanyEmail" />
                    </ht-form-item>
                </el-col> -->
        <el-col :span="12">
          <ht-form-item label="公司电话">
            <ht-input
              style="width: 100%"
              v-model="sysMsg.sysCompanyPhone"
              :validate="{required: true, mobile: true}"
            />
          </ht-form-item>
        </el-col>
        <!-- <el-col :span="12"
          ><ht-form-item label="到期时间">
            <ht-date
              :disabled="true"
              v-model="sysMsg.expireDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            />
          </ht-form-item>
        </el-col> -->
        <el-col :span="24">
          <ht-form-item label="系统描述" x>
            <ht-input
              style="width: 100%"
              type="textarea"
              :autosize="{minRows: 2, maxRows: 4}"
              v-model="sysMsg.sysMemo"
              class="textArea"
            />
          </ht-form-item>
        </el-col>
      </el-row>
    </el-form>
    
    <span style="font-size: 16px;vertical-align: middle;"><span class="tip"></span>授权信息</span>
    <el-divider></el-divider>
    <el-form v-form data-vv-scope="sysMsg" class="sysMag-form">
      <el-row>
        <el-col :span="12">
          <ht-form-item label="授权类型">
            <ht-input
              style="width: 100%"
              :value="grantData.type === '1'
                ? '临时'
                : grantData.type === '2'
                ? '永久'
                : '-'"
              readonly
            />
            <!-- <span style="fontsize: 14px">
            {{
              grantData.type === '1'
                ? '临时'
                : grantData.type === '2'
                ? '永久'
                : '-'
            }}
          </span> -->
          </ht-form-item>
        </el-col>
        <el-col :span="12">
          <ht-form-item label="到期时间">
            <ht-input
              style="width: 100%"
              v-model="grantData.endDate"
              readonly
            />
            <!-- <span style="fontsize: 14px">
                {{grantData.endDate}}
            </span> -->
          </ht-form-item>
        </el-col>
        <el-col :span="12">
          <ht-form-item label="租户数">
            <ht-input
              style="width: 100%"
              v-model="grantData.tenantNum"
              readonly
            />
            <!-- <span style="fontsize: 14px">
                {{grantData.tenantNum}}
            </span> -->
          </ht-form-item>
        </el-col>
        <!-- <el-col :span="12">
                    <ht-form-item label="版权信息">
                        <ht-input v-model="sysMsg.sysCopyrihte" />
                    </ht-form-item>
                </el-col> -->
        <!-- <el-col :span="12">
                    <ht-form-item label="公司简称">
                        <ht-input
                            v-pinyin="sysMsg.sysCompanyName"
                            v-model="sysMsg.sysCompanyShortName"
                        />
                    </ht-form-item>
                </el-col> -->
        <!-- <el-col :span="12">
                    <ht-form-item label="公司地址">
                        <ht-input v-model="sysMsg.sysCompanyAddress" />
                    </ht-form-item>
                </el-col> -->
        <el-col :span="12">
          <ht-form-item label="机构数">
            <ht-input
              style="width: 100%"
              v-model="grantData.ognNum"
              readonly
            />
            <!-- <span style="fontsize: 14px">
                {{grantData.ognNum}}
            </span> -->
          </ht-form-item>
        </el-col>
        <!-- <el-col :span="12">
                    <ht-form-item label="公司邮箱">
                        <ht-input v-model="sysMsg.sysCompanyEmail" />
                    </ht-form-item>
                </el-col> -->
        <el-col :span="12">
          <ht-form-item label="用户限制">
            <ht-input
              style="width: 100%"
              v-model="grantData.userNum"
              readonly
            />
            <!-- <span style="fontsize: 14px">
                {{grantData.userNum}}
            </span> -->
          </ht-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row justify="end">
      <el-col :span="10" :offset="7">
        <div style="width: 100%; text-align: center">
          <ht-submit-button
            :url="submitUrl"
            :model="sysMsg"
            :request-method="saveMethod"
            scope-name="sysMsg"
            @after-save-data="afterSaveData"
            >{{ $t('eip.common.save') }}</ht-submit-button
          >
          <!-- 查询授权信息 -->
          <!-- <el-tooltip effect="dark" content="查询授权信息" placement="top">
            <el-button
              @click="queryData"
              icon="el-icon-search"
              :loading="downLoading"
            >
              查询授权信息
            </el-button>
          </el-tooltip> -->
          <el-tooltip
            effect="dark"
            content="请将信息文件发送给管理员申请授权码后，将授权文件上传本机以获取访问权限"
            placement="top"
          >
            <el-button
              @click="download"
              icon="el-icon-download"
              :loading="downLoading"
            >
              下载信息文件
            </el-button>
          </el-tooltip>
          <el-upload
            class="upload-button"
            ref="fileUp"
            :multiple="false"
            :headers="headers"
            :show-file-list="false"
            :action="downLoad"
            :accept="accept"
            :file-list="files"
            :limit="1"
            :on-success="success"
            :on-error="error"
            :before-upload="beforeAvatarUpload"
          >
            <el-tooltip placement="top" effect="dark">
              <div slot="content">
                请将信息文件发送给管理员申请授权码后，将授权文件上传本机以获取访问权限
                <!-- 附件格式支持：{{ accept }}
                            <br />附件大小限制：单个文件不超过50MB -->
              </div>
              <el-button size="small" icon="el-icon-upload">
                上传授权文件
              </el-button>
            </el-tooltip>
          </el-upload>
        </div>
      </el-col>
    </el-row>
    <!-- 弹出授权信息 -->
    <!-- <ht-sidebar-dialog
      width="28%"
      title="授权信息"
      :visible="dialogVisible"
      :before-close="handleClose"
    >
      <el-form v-model="grantData">
        <ht-form-item label="系统名称" prop="deptName" label-width="80px">
          <ht-input style="width: 100%" :value="grantData.deptName"></ht-input>
        </ht-form-item>
        <ht-form-item label="系统版本" prop="versionCode" label-width="80px">
          <ht-input
            style="width: 100%"
            :value="grantData.versionCode"
          ></ht-input>
        </ht-form-item>
        <ht-form-item label="授权类型" prop="type" label-width="80px">
          <span style="fontsize: 14px">
            {{
              grantData.type === '1'
                ? '临时'
                : grantData.type === '2'
                ? '永久'
                : '-'
            }}
          </span>
        </ht-form-item>
        <ht-form-item label="到期时间" prop="endDate" label-width="80px">
          <ht-input style="width: 100%" :value="grantData.endDate"></ht-input>
        </ht-form-item>
        <ht-form-item label="租户数" prop="tenantNum" label-width="80px">
          <ht-input style="width: 100%" :value="grantData.tenantNum"></ht-input>
        </ht-form-item>
        <ht-form-item label="机构数" prop="ognNum" label-width="80px">
          <ht-input style="width: 100%" :value="grantData.ognNum"></ht-input>
        </ht-form-item>
        <ht-form-item label="用户限制" prop="userNum" label-width="80px">
          <ht-input style="width: 100%" :value="grantData.userNum"></ht-input>
        </ht-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="danger"
          @click="dialogVisible = false"
          style="float: right; margin-right: 20px"
          >关闭</el-button
        >
      </div>
    </ht-sidebar-dialog> -->
  </div>
</template>
<script>
import {mapState} from 'vuex'
import portal from '@/api/portal'
import ImgFileUpload from '@/components/common/ImgFileUpload.vue'
export default {
  name: 'SystemAuthorization',
  // components: {ImgFileUpload},
  computed: mapState({
    submitUrl: function () {
      return `${window.context.portal}/portal/commonBasic/v1/`
    },
    downLoad: function () {
      return `${window.context.portal}/uc/AuthorizationModel/v1/uploadAuthorizationFile`
    },
    headers: (state) => {
      return {Authorization: `Bearer ${state.login.currentUser.token}`}
    },
  }),
  data() {
    return {
      sysMsg: {
        id: '',
        sysName: '',
        sysVersion: '',
        sysCompanyName: '',
        // sysCopyrihte: '',
        //sysCompanyShortName: '',
        //sysCompanyAddress: '',
        sysCompanyLegal: '',
        //sysCompanyEmail: '',
        sysCompanyPhone: '',
        expireDate: '',
        sysMemo: '',
      },
      accept: '.lic',
      files: [],
      uploadingFiles: {},
      saveMethod: 'PUT',
      downLoading: false,
      dialogVisible: false,
      grantData: {},
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      portal.loadSysMsg({}).then(
        (res) => {
          this.sysMsg = res.rows[0]
        },
        (error) => {
          reject(error)
        }
      )
      portal.querySystemAuthorization({}).then(
        (res) => {
          //   console.log(res, 'res授权')
          this.grantData = res
        },
        (error) => {
          reject(error)
        }
      )
    },
    afterSaveData() {
      this.loadData()
    },
    download() {
      this.downLoading = true
      portal.downloadFileLic().then((res) => {
        this.downLoading = false

        // const content = res
        // const blob = new Blob([content])
        // const fileName = 'license.lic'
        // const elink = document.createElement('a')
        // elink.download = fileName
        // elink.style.display = 'none'
        // elink.href = URL.createObjectURL(blob)
        // document.body.appendChild(elink)
        // elink.click()
        // URL.revokeObjectURL(elink.href) // 释放URL 对象
        // document.body.removeChild(elink)
        // this.downLoading = false
      })
    },
    error(response, file, fileList) {
      this.$message.error('文件上传失败')
      delete this.uploadingFiles[Base64.encode(file.name)]
    },
    success(response, file, fileList) {
      this.$message.success(response)
      console.log(response, file, fileList)
    },
    beforeAvatarUpload(file) {
      // 文件类型限制
      const name = file.name ? file.name : ''
      const ext = name
        ? name.substr(name.lastIndexOf('.') + 1, name.length)
        : true
      const isExt = this.accept.indexOf(ext) < 0
      this.isChecking = !isExt
      if (isExt) {
        if (this.accept == 'false') {
          this.$message.error('请配置可上传文件的格式!')
        } else {
          this.$message.error('上传的附件只能是 ' + this.accept + '格式!')
        }
        return !isExt
      }
      this.uploadingFiles[Base64.encode(name)] = 'eror'
    },
    // queryData() {
    //   this.dialogVisible = true
    //   portal.querySystemAuthorization({}).then(
    //     (res) => {
    //       //   console.log(res, 'res授权')
    //       this.grantData = res
    //     },
    //     (error) => {
    //       reject(error)
    //     }
    //   )
    // },
    handleClose() {
      this.dialogVisible = false
    },
  },
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/element-variables.scss";
.tip{
  display: inline-block;
  width: 6px;
  height: 16px;
  vertical-align: middle;
  margin-right: 6px;
  margin-top: -2px;
  background-color: $--color-primary;
}
.sp-manager__dialog /deep/ > .el-dialog > .el-dialog__body {
  height: calc(100% - 170px);
}
.upload-button {
  display: inline-block;
  margin-left: 10px;
}
.sysMag-form {
  width: 80%;
  margin: 30px auto;
  margin-bottom: 10px;
}

>>> .el-form-item--small.el-form-item {
  margin-bottom: 24px;
}
/deep/.el-divider--horizontal {
  margin: 10px 0;
}
/deep/.fullheight{
    overflow: auto !important;
}
</style>
