<template>
  <base-model v-if="config.visible" :config="config">
    <template slot="dialog-body">
      <el-table :data="curData" border style="width: 100%" size="small">
        <el-table-column prop="key" :label="$t('system:loginLog:table:cfgItem')" show-overflow-tooltip />
        <el-table-column prop="value" :label="$t('system:loginLog:table:cfgVal')" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.prop === 'HospitalGroupList'">{{
              Array.isArray(scope.row.value) ? scope.row.value.map(item => item.Name).join(", ") : ''
            }}</span>
            <span v-else-if="scope.row.prop !== 'UserRoleList'">{{
              scope.row.value
            }}</span>
            <template v-else>
              <div v-for="item in scope.row.value" :key="item.UserTypeEnum" style="margin: 0">
                {{ item.UserTypeShortName
                }}{{ $t('system:loginLog:form:symbol')
                }}{{ $fd('IsEnable', !item.IsUserRoleDisabled) }}
              </div>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </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',
          appendToBody: true,
          bodyStyle: `min-height: 100px; max-height: 650px;overflow-y: auto;padding: 10px;border: 1px solid #e0e0e0;`,
        }
      },
    },
  },
  data() {
    return {
      curKeys: [
        'UserName',
        'FirstName',
        'LastName',
        'EMail',
        'Phone',
        'Status',
        'HospitalGroupList',
        '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)) {
          let o = {
            key: this.$t(`system:loginLog:form:${key}`),
            value: obj[key],
            prop: key,
          }
          if (key === 'Status') {
            o.value = this.$fd('IsEnable', !!obj[key])
          }
          curData.push(o)
        }
      })
      return curData
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  font-weight: bold;
}
</style>