<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <template v-slot:header>
            <div class="clearfix">
              <span>个人信息</span>
            </div>
          </template>
          <div>
            <div class="text-center">
              <userAvatar :user="state.user" />
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="user" />用户名称
                <div class="pull-right">{{ state.user.userName }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" />手机号码
                <div class="pull-right">{{ state.user.phonenumber }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="email" />用户邮箱
                <div class="pull-right">{{ state.user.email }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="tree" />所属部门
                <div class="pull-right" v-if="state.user.dept">{{ state.user.dept.deptName }} / {{ state.postGroup }}
                </div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="peoples" />所属角色
                <div class="pull-right">{{ state.roleGroup }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" />创建日期
                <div class="pull-right">{{ state.user.createTime }}</div>
              </li>
              <li class="list-group-item">
                <el-upload  ref="fileUploadBtn" :action="webHost + '/common/upload'" :headers="headers" :limit="1" :on-success="handleSuccess"
                  :on-exceed="handleExceed" :before-upload="beforeUpload" :show-file-list="false">
                  <el-button icon="Upload">上传个人章</el-button>
                </el-upload>
              </li>
              <li class="list-group-item">
                <el-image style="width: 120px; height: 120px;margin-right:8px;display: flex;justify-content: center;"
                  :src="imageUrl" :preview-src-list="imageList" :initial-index="1" :preview-teleported="true" />
              </li>

              <!-- <li class="list-group-item" v-if="state.user.userId == 1">
                <el-upload  :action="webHost + '/common/upload'" :headers="headers" :limit="1" :on-success="handleSealSuccess"
                  :on-exceed="handleSealExceed" :before-upload="beforeUpload" :show-file-list="false">
                  <el-button  v-hasPermi="['business:electronicDrawings:publicSeal']" icon="Upload">上传公共章</el-button>
                </el-upload>
              </li> -->
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <template v-slot:header>
            <div class="clearfix">
              <span>基本资料</span>
            </div>
          </template>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="state.user" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Profile">
import userAvatar from './userAvatar'
import userInfo from './userInfo'
import resetPwd from './resetPwd'
import { getUserProfile } from '@/api/system/user'
import { listPersonalSeal } from '@/api/business/personalSeal'
import { addPersonalSeal, addPublicSeal } from "@/api/business/drawing";
import { getToken } from '@/utils/auth'
import { ref } from "vue";
const { proxy } = getCurrentInstance();
const webHost = import.meta.env.VITE_APP_BASE_API
const headers = { Authorization: getToken() }
const formLoading = ref(false)
const imageUrl = ref("")
const pictureList = ref([])
const imageList = ref([])
const activeTab = ref('userinfo')
const sealForm = ref({})
const form = ref({})
const state = reactive({
  user: {},
  roleGroup: {},
  postGroup: {}
})

function getUser() {
  getUserProfile().then((response) => {
    state.user = response.data
    state.roleGroup = response.roleGroup
    state.postGroup = response.postGroup
  })

  listPersonalSeal().then(res => {
    if (res.code == 200) {
      pictureList.value = res.data
      console.log(res.data,454)
      if (pictureList.value) {
     
        imageUrl.value = document.location.origin + webHost + res.data.url
        imageList.value.push(imageUrl.value)
        console.log(imageUrl.value,775)
      }

    }
  })
}
/**上传成功回调 */
function handleSuccess(row) {
  form.value.url = row.fileName
  var fileDrawing = {}
  addPersonalSeal(form.value).then(res => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess("上传成功");
      getUser();
      proxy.$refs.fileUploadBtn.clearFiles(); 
    }
  })

}
/**文件数量超出的回调 */
function handleExceed(files) {
  form.value.url = files[0].url
}




/**公共章上传成功回调 */
function handleSealSuccess(row) {
  sealForm.value.url = row.fileName
  var fileDrawing = {}
  addPublicSeal(sealForm.value).then(res => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess("上传成功");
    }
  })

}
/**文件数量超出的回调 */
function handleSealExceed(files) {
  sealForm.value.url = files[0].url
}
/** 文件上传前的 回调事件 */
function beforeUpload(file) {

  formLoading.value = true;
  const allowedTypes = ['image/jpeg', 'image/png']; // 添加或修改为图片的MIME类型
  const isAllowed = allowedTypes.includes(file.type);
  console.log(isAllowed)
  if (!isAllowed) {
    proxy.$modal.msgError('只能上传图片格式的文件!');
    formLoading.value = false;
    return false;
  }

}
getUser()
</script>
