<template>
  <el-container>
    <div style="height: 95vh; width: 100%">
      <div class="color-lane">
        <div class="avatar-div">
          <el-avatar :size="150" :src="userInfo.avatar" @error="errorHandler">
            <img :src="makeTextPortrait()" />
          </el-avatar>
        </div>
        <div class="name-div">
          {{ userInfo.name }}
          &nbsp;
          {{ userInfo.deptName }}
        </div>
      </div>
      <div style="display: flex">
        <div class="info-div">
          <el-card class="box-card">
            <template #header>
              <div class="clearfix">
                <span>个人信息</span>
                <el-button style="float: right; padding: 3px 0" text @click="quitLogin">退出账号</el-button>
                <el-button style="float: right; padding: 3px 0; margin-right: 10px" text @click="dialogVisible = true">修改密码</el-button>
              </div>
            </template>
            <div class="card-info">
              <div>编号：{{ userInfo.code }}</div>
              <div>工号：{{ userInfo.codeRs }}</div>
              <div>职称：{{ userInfo.title }}</div>
              <div>职务：{{ userInfo.position }}</div>
            </div>
          </el-card>
        </div>
        <div class="info-div" style="margin-left: 50px">
          <el-card class="advice-card">
            <template #header>
              <div class="clearfix">
                <span> 建议留言板 </span>
                <el-button style="float: right; padding: 3px 0" text @click="newAdvice">新建议</el-button>
              </div>
              <div style="margin-top: 8px">
                <el-radio v-model="currentStatus" label="">全部</el-radio>
                <el-radio v-model="currentStatus" label="0">未查看</el-radio>
                <el-radio v-model="currentStatus" label="1">已查看</el-radio>
                <el-radio v-model="currentStatus" label="2">已回复</el-radio>
              </div>
            </template>
            <div :style="adviceBoxStyle">
              <div style="height: 12px"></div>
              <div v-for="(item, index) in cptAdvices" :key="index">
                <div class="advice-line" @click="seeAdviceDetail(item)">
                  <div class="advice-content">{{ index + 1 }}、{{ item.submitContent }}</div>
                  <div class="advice-status">
                    <div v-if="isAdmin">
                      <el-badge value="new" type="danger" :hidden="item.statusFlag !== 0">
                        <el-tag :type="filterStatusType(item.statusFlag)">{{ filterStatusText(item.statusFlag) }}</el-tag>
                      </el-badge>
                    </div>
                    <div v-else>
                      <el-badge value="new" type="danger" :hidden="item.userBadge === 0">
                        <el-tag :type="filterStatusType(item.statusFlag)">{{ filterStatusText(item.statusFlag) }}</el-tag>
                      </el-badge>
                    </div>
                  </div>
                </div>
                <el-divider content-position="left">{{ item.submitDatetime }}</el-divider>
                <div style="height: 8px"></div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <el-dialog title="修改密码" v-model="dialogVisible" width="360px">
      <el-input v-model="changePwdParam.oldPassword" type="password" show-password placeholder="请输入旧密码"></el-input>
      <div style="margin-top: 20px"></div>
      <el-input v-model="changePwdParam.newPassword" type="password" show-password placeholder="请输入新密码"></el-input>
      <div style="margin-top: 20px"></div>
      <el-input v-model="changePwdParam.newPasswordCopy" type="password" show-password placeholder="请重复新密码"></el-input>
      <template #footer>
        <el-button type="info" icon="RefreshLeft" @click="closeDialog">取消</el-button>
        <el-button type="primary" icon="Check" @click="confirmDialog">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog title="建议详情" v-model="showCurrentAdvice" width="380px">
      <div class="advice-detail">
        <div><span>当前状态：</span>{{ filterStatusText(currentAdvice.statusFlag) }}</div>
        <div><span>提交时间：</span>{{ currentAdvice.submitDatetime }}</div>
        <div><span>提交内容：</span>{{ currentAdvice.submitContent }}</div>
        <p><el-divider></el-divider></p>
        <div><span>回复时间：</span>{{ currentAdvice.replyDatetime }}</div>
        <div><span>回复内容：</span>{{ currentAdvice.reply }}</div>
        <div v-if="isAdmin">
          <el-divider></el-divider>
          <el-input type="textarea" v-model="currentAdvice.reply" placeholder="在此输入回复内容" maxlength="150" show-word-limit></el-input>
          <div style="width: 100%; text-align: right; margin-top: 16px">
            <el-button type="primary" icon="Check" @click="replyAdvice">提交回复</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import { computed, onActivated, onDeactivated, reactive, ref } from 'vue'
import { changePassword, checkAdvice, dismissUserBadge, getMyAdvices, getUserInfo, submitNewAdvice, updateReply } from '@/api/settings/user-settings'
import { genTextPortrait } from '@/utils/portrait'
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '@/router'
import Cookies from 'js-cookie'
import store from '@/store'
import { setCallback } from '@/utils/websocket'
export default {
  setup() {
    const windowSize = store.state.app.windowSize
    const adviceBoxStyle = {
      height: windowSize.h / 2 + 'px',
      padding: '0 5px',
      overflowY: 'auto',
    }
    const userInfo = ref({})
    const isAdmin = computed(() => {
      return userInfo.value.roles.indexOf(1) > -1
    })
    const errorHandler = () => {
      return true
    }
    const makeTextPortrait = () => {
      return genTextPortrait(userInfo.value.name)
    }
    const dialogVisible = ref(false)
    const changePwdParam = reactive({
      oldPassword: '',
      newPassword: '',
      newPasswordCopy: '',
    })
    const closeDialog = () => {
      dialogVisible.value = false
      changePwdParam.oldPassword = changePwdParam.newPassword = changePwdParam.newPasswordCopy = ''
    }
    const confirmDialog = () => {
      if (!changePwdParam.oldPassword) {
        ElMessage({
          message: '请输入旧密码！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return
      }
      if (!changePwdParam.newPassword) {
        ElMessage({
          message: '请输入新密码！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return
      }
      if (changePwdParam.newPassword !== changePwdParam.newPasswordCopy) {
        ElMessage({
          message: '两次输入的新密码不一致，请检查！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return
      }
      changePassword(changePwdParam).then(() => {
        ElMessageBox.alert('修改成功，请重新登录。', '提示', {
          type: 'success',
        }).then(() => {
          quitLogin()
        })
      })
    }
    const quitLogin = () => {
      Cookies.remove('token')
      router.push('/login')
    }
    const currentStatus = ref('')
    const myAdvices = ref([])
    const cptAdvices = computed(() => {
      return myAdvices.value.filter((item) => {
        return item.statusFlag.toString().indexOf(currentStatus.value) !== -1
      })
    })
    const currentAdvice = ref({})
    const showCurrentAdvice = ref(false)
    const newAdvice = () => {
      ElMessageBox.prompt('请填写建议内容(不超过300个字)', '新建议', {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        type: 'info',
      }).then(({ value }) => {
        submitNewAdvice({ submitContent: value }).then(() => {
          getMyAdvices().then((res) => {
            myAdvices.value = res
            ElMessage({
              message: '提交成功',
              type: 'success',
              duration: 2000,
              showClose: true,
            })
          })
        })
      })
    }
    const filterStatusType = (val) => {
      switch (val) {
        case 0:
          return 'info'
        case 1:
          return 'primary'
        case 2:
          return 'success'
        default:
          return 'error'
      }
    }
    const filterStatusText = (val) => {
      switch (val) {
        case 0:
          return '未查看'
        case 1:
          return '已查看'
        case 2:
          return '已回复'
        default:
          return '未知状态'
      }
    }
    const seeAdviceDetail = (item) => {
      currentAdvice.value = item
      showCurrentAdvice.value = true
      if (item.statusFlag === 0 && isAdmin.value) {
        checkAdvice(item.id).then(() => {
          item.statusFlag = 1
        })
      }
      if (item.statusFlag === 2 && !isAdmin.value) {
        dismissUserBadge(item.id).then(() => {
          item.userBadge = 0
        })
      }
    }
    const replyAdvice = () => {
      updateReply(currentAdvice.value).then(() => {
        currentAdvice.value.statusFlag = 2
        showCurrentAdvice.value = false
      })
    }

    const callback = () => {
      getMyAdvices().then((res) => {
        myAdvices.value = res
      })
    }

    onActivated(() => {
      getUserInfo().then((res) => {
        userInfo.value = res
        getMyAdvices().then((res2) => {
          myAdvices.value = res2
          setCallback(callback)
          if (isAdmin.value) {
            currentStatus.value = '0'
          }
        })
      })
    })

    onDeactivated(() => {
      setCallback(null)
    })

    return {
      userInfo,
      isAdmin,
      adviceBoxStyle,
      errorHandler,
      makeTextPortrait,
      dialogVisible,
      changePwdParam,
      closeDialog,
      confirmDialog,
      quitLogin,
      myAdvices,
      newAdvice,
      filterStatusType,
      filterStatusText,
      currentAdvice,
      seeAdviceDetail,
      showCurrentAdvice,
      replyAdvice,
      currentStatus,
      cptAdvices,
    }
  },
}
</script>

<style scoped>
.color-lane {
  margin-top: 10px;
  background-color: #409eff;
  height: 100px;
  width: calc(100% - 2px);
  display: flex;
}
.avatar-div {
  height: 150px;
  width: 150px;
  padding-top: 25px;
  margin-left: 15px;
}
.name-div {
  color: white;
  font-size: 26px;
  font-weight: bold;
  margin-top: 50px;
  margin-left: 15px;
}
.info-div {
  color: rgb(90, 90, 90);
  margin-top: 15px;
  margin-left: 180px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 380px;
  font-size: 14px;
}

.card-info > div {
  padding: 5px 0;
}

.advice-card {
  width: 400px;
  font-size: 14px;
}
.advice-line {
  width: 312px;
  height: 30px;
  line-height: 32px;
  display: flex;
  color: #333;
  cursor: pointer;
  background-color: #aed6ff;
  padding: 0 8px;
  border-radius: 4px;
}
.advice-line:hover {
  background-color: #67c23a;
  color: white;
}
.advice-content {
  overflow: hidden;
  width: 260px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: inherit;
  font-weight: bold;
}
.advice-status {
  margin-left: 16px;
}
.advice-detail {
  padding: 16px;
}
.advice-detail > div {
  margin: 10px 0;
}
.advice-detail > div > span {
  font-weight: bold;
}
</style>
