<template>
  <!-- 增改查弹窗 -->
  <el-dialog :title="titles[mode] || '详情'" :visible.sync="formVisible" class="finish-dialog" :class="mode" width="780px" append-to-body :close-on-click-modal="false">
    <el-form v-if="formVisible" ref="detailForm" :model="formData" :rules="rules" label-position="right" inline class="detail-dialog" label-width="140px">
      <el-form-item label="账号：" prop="parkid">
        <span>{{ formData.username || '--' }}</span>
      </el-form-item>
      <el-form-item label="姓名：">
        <span>{{ formData.nickname || '--' }}</span>
      </el-form-item>
      <el-form-item label="手机号：">
        <span>{{ formData.mobile || '--' }}</span>
      </el-form-item>
      <el-form-item label="所属组织：" prop="deptName">
        <span>{{ formData.deptName || '--' }}</span>
      </el-form-item>
      <el-form-item label="分配角色：" prop="rolesName" style="width: 100%">
        <span>{{ formData.roleNames.join('、') || '--' }}</span>
      </el-form-item>
      <el-form-item label="备注：" prop="remark" style="width: 100%">
        <span>{{ formData.remark || '--' }}</span>
      </el-form-item>
      <el-form-item label="创建人：" prop="createName">
        <span>{{ formData.createName || '--' }}</span>
      </el-form-item>
      <el-form-item label="创建时间：" prop="createTime">
        <span>{{ formData.createTime || '--' }}</span>
      </el-form-item>
      <el-form-item label="状态：">
        <span>{{ global.dict.status[formData.status] || '--' }}</span>
      </el-form-item>
      <el-form-item label="最后登录时间：" prop="loginTime">
        <span>{{ formData.loginTime || '--' }}</span>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { deepClone } from '@/utils'

export default {
  name: '',
  inject: ['global', 'refresh'],
  data() {
    return {
      labelWidth: '180px',
      mode: 'see', // 查看see / 编辑edit / 添加add
      titles: { // 弹窗标题(动态)
        see: '查看用户详情',
        add: '查看用户详情',
        edit: '查看用户详情'
      },
      formVisible: false, // 弹窗显示
      formConfig: {}, // 表单配置
      formData: {}, // 表单数据
      rules: { }
    }
  },
  computed: {
    isEditAdd() {
      return this.mode === 'edit' || this.mode === 'add'
    }
  },
  methods: {
    showDialog({ formConfig, formData, formTitle }) {
      this.formConfig = formConfig
      this.mode = formConfig?.mode || (this.formData.id ? 'edit' : 'add')
      this.formData = deepClone(formData)
      this.initFormData()
      this.formVisible = true
    },
    initFormData() { // 表单数据初始化
    },
    close() {
      this.formVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.finish-dialog {
  /deep/ .el-dialog__body {
    padding: 10px 20px 0 20px;
    margin-top: 10px;
  }
  /deep/ .el-form-item {
    &__content  { // 内容宽度100%（默认）
      width: calc(100% - 180px); // 减去label宽
      max-width: none;
      .el-checkbox-group {
        line-height: normal;
      }
    }
    &.fit-width { // 内容宽度自适应
      .el-form-item__content {
        width: fit-content;
      }
    }
    &__label, &__content { // 统一行高
      // line-height: 2;
    }
  }
  .detail-dialog {
    padding-top: 10px;
    .el-row.mb-20 {
      margin-bottom: 10px;
    }
  }
  &.edit, &.add {
    /deep/ .el-form-item {
      margin-bottom: 22px;
    }
  }
  &.add {
    .detail-dialog {
      margin-top: 10px;
    }
  }
  &.see {
    .detail-dialog {
      // background-color: #f8f8f8;
      padding: 20px;
    }
    /deep/ .el-form-item {
      &__label, &__content { // 统一行高
        line-height: 2;
      }
      margin-bottom: 10px;
    }
  }
}
</style>
