<template>
  <base-model v-if="config.visible" :config="config">
    <template slot="dialog-body">
      <el-form ref="form" :model="curData" max-height="500px">
        <template v-for="key in curDataArr">
          <el-form-item
            :key="key"
            :label="$t(`system:loginLog:form:${key}`)"
            label-width="120px"
            style="margin-bottom: 0px"
          >
            <span v-if="key !== 'UserRoleList'">{{ curData[key] }}</span>
            <template v-else>
              <div
                v-for="item in curData[key]"
                :key="item.UserTypeEnum"
                style="margin: 0"
              >
                {{ item.UserTypeShortName
                }}{{ $t('system:loginLog:form:symbol')
                }}{{ $fd('IsEnable', !item.IsUserRoleDisabled) }}
              </div>
            </template>
          </el-form-item>
        </template>
      </el-form>
    </template>
    <template slot="dialog-footer">
      <el-button type="primary" @click="config.visible = false">
        {{ $t('common:button:confirm') }}
      </el-button>
    </template>
  </base-model>
</template>
<script>
import BaseModel from '@/components/BaseModel'
export default {
  components: { BaseModel },
  props: {
    JsonObj: {
      type: String,
      default: '',
    },
    config: {
      type: Object,
      default: () => {
        return {
          visible: false,
          title: this.$t('system:loginLog:dialog:title'),
          width: '500px',
          top: '10vh',
        }
      },
    },
  },
  data() {
    return {
      curKeys: [
        'UserName',
        'FirstName',
        'LastName',
        'EMail',
        'Phone',
        'OrganizationName',
        'PositionName',
        'DepartmentName',
        'UserRoleList',
      ],
    }
  },
  computed: {
    curDataArr() {
      if (!this.curData) return []
      return Object.keys(this.curData)
    },
    curData() {
      if (!this.JsonObj) return {}
      let obj = JSON.parse(this.JsonObj)
      let curData = {}
      Object.keys(obj).forEach((key) => {
        if (this.curKeys.includes(key)) {
          curData[key] = obj[key]
        }
      })
      return curData
    },
  },
}
</script>