<template>
  <div class="app-container">
    <el-form
      ref="userForm"
      size="small"
      :model="user"
      :rules="userFormRules"
      label-width="150px"
      style="width:800px;"
    >
      <el-card class="Basic" shadow="never" size="small">
        <div slot="header" class="clearfix">
          <span>Basic Information</span>
        </div>
        <el-form-item v-if="user.Code" label="ID: " prop="Code">
          <el-input v-model="user.Code" disabled />
        </el-form-item>

        <el-form-item label="User Name: " prop="UserName">
          <el-input v-model="user.UserName" disabled />
        </el-form-item>

        <!-- <el-form-item label="Real Name: " prop="RealName">
          <el-input v-model="user.RealName" />
        </el-form-item> -->
        <el-form-item v-if="user.UserTypeEnum !== 8" label="Surname: " prop="LastName">
          <el-input v-model="user.LastName" />
        </el-form-item>
        <el-form-item v-if="user.UserTypeEnum !== 8" label="Given Name: " prop="FirstName">
          <el-input v-model="user.FirstName" />
        </el-form-item>
        <el-form-item label="Gender: " prop="Sex" style="margin-right:40px;">
          <el-radio-group v-model="user.Sex">
            <el-radio :label="1">Male</el-radio>
            <el-radio :label="0">Female</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="Email: " prop="EMail">
          <el-input v-model="user.EMail" />
        </el-form-item>
        <el-form-item label="Phone: ">
          <el-input v-model="user.Phone" />
        </el-form-item>
        <el-form-item v-if="user.UserTypeEnum !== 8" label="Disable">
          <el-switch v-model="user.Status" :active-value="0" :inactive-value="1" disabled />
        </el-form-item>
        <!-- <el-form-item label="User Type: " prop="UserTypeId">
          <el-select v-model="user.UserTypeId" size="small" placeholder="Please select" disabled>
            <el-option
              v-for="(value,key) of dictionaryList.UserType"
              :key="key"
              :label="value"
              :value="key"
            />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="User Type: " prop="UserTypeId">
          <el-select ref="userType" v-model="user.UserTypeId" size="small" placeholder="Please select" style="width:100%;">
            <el-option
              v-for="(userType,key) of userTypeOptions"
              :key="key"
              :label="userType.UserType"
              :value="userType.Id"
            />
          </el-select>
        </el-form-item> -->

        <el-form-item label="User Type: " prop="UserType">
          <el-input v-model="user.UserType" disabled />
        </el-form-item>
      </el-card>

      <el-card v-if="user.UserTypeEnum !== 8" class="Affiliation" shadow="never" style="margin-top:10px;" size="small">
        <div slot="header" class="clearfix">
          <span>Affiliation</span>
        </div>
        <el-form-item prop="IsZhiZhun">
          <el-radio-group v-model="user.IsZhiZhun">
            <el-radio :label="true">Internal</el-radio>
            <el-radio :label="false">External</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="user.IsZhiZhun === false" label="Organization Name: " prop="OrganizationName">
          <el-input v-model="user.OrganizationName" />
        </el-form-item>
        <!-- <el-form-item label="Orgnization Type: " prop="OrganizationTypeId">
          <el-select
            v-model="user.OrganizationTypeId"
            placeholder="Please select"
            @change="handelOrgnizationTypeChange"
          >
            <el-option
              v-for="(value,key) of dictionaryList.InstitutionalType"
              :key="key"
              :label="value"
              :value="key"
            />
          </el-select>
        </el-form-item>

        <el-form-item v-show="user.OrganizationTypeId" label="Orgnization: " prop="OrganizationId">
          <el-select v-model="user.OrganizationId" placeholder="Please select">
            <el-option
              v-for="(item) of OrganizationOptions"
              :key="item.Id"
              :label="item.InstitutionName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item> -->

        <el-form-item label="Department: " prop="DepartmentName">
          <el-input v-model="user.DepartmentName" />
        </el-form-item>
        <el-form-item label="Position: " prop="PositionName">
          <el-input v-model="user.PositionName" />
        </el-form-item>
      </el-card>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          :disabled="isDisabled"
          style="margin:10px 15px"
          @click="handleSave"
        >Save</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
import { getUserTypeList, getInstitutionList, getUser, addUser, updateUser } from '@/api/admin.js'
import store from '@/store'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      user: {},
      userFormRules: {
        UserName: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        UserTypeId: [{ required: true, message: 'Please Select', trigger: ['blur', 'change'] }],
        // OrganizationId: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        // OrganizationTypeId: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        // RealName: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        IsZhiZhun: [{ required: true, message: 'Please Select', trigger: ['blur', 'change'] }],
        OrganizationName: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        LastName: [{ required: true, message: 'Please specify', trigger: 'blur' }, { max: 50, message: 'The maximum length is 50' }],
        FirstName: [{ required: true, message: 'Please specify', trigger: 'blur' }, { max: 50, message: 'The maximum length is 50' }],

        // Phone: [
        //   { max: 20, min: 7, message: 'The length is 7 to 20' }
        // ],
        EMail: [
          {
            required: true,
            message: 'Please input the email address',
            trigger: 'blur'
          },
          {
            type: 'email',
            message: 'Please input the correct email address',
            trigger: ['blur', 'change']
          },
          { max: 50, message: 'The maximum length is 50' }
        ],
        Sex: [{ required: true, message: 'Please specify', trigger: 'blur' }],
        Status: [{ required: true, message: 'Please specify', trigger: 'blur' }]
      },
      // OrganizationOptions: [],
      userTypeOptions: [],
      isDisabled: false
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  mounted() {
    // this.getUserTypeList()
    this.initPage()
  },
  methods: {
    handleSave() {
      this.$refs.userForm.validate(valid => {
        if (valid) {
          this.isDisabled = true
          const selectedUserType = this.userTypeOptions.filter((item) => {
            return item.Id === this.user.UserTypeId
          })
          if (selectedUserType.length > 0) {
            this.user.userTypeEnum = selectedUserType[0].UserTypeEnum
          }
          if (this.user.IsZhiZhun === true) {
            this.user.OrganizationName = 'ZhiZhun'
          }
          if (this.user.Id) {
            updateUser(this.user).then(res => {
              this.isDisabled = false
              this.$message.success('Updated successfully')
            }).catch(() => { this.isDisabled = false })
          } else {
            addUser(this.user).then(res => {
              this.isDisabled = false
              this.$emit('getUserId', res.Result.Id)
              this.$message.success('Added successfully')
            }).catch(() => { this.isDisabled = false })
          }
        }
      })
    },
    getUserInfo() {
      getUser(this.userId).then(res => {
        this.user = res.Result
        // res.Result.OrganizationTypeId !== '00000000-0000-0000-0000-000000000000' ? this.getOrgnizationList(res.Result.OrganizationTypeId) : this.user.OrganizationTypeId = ''
      })
    },
    getUserTypeList() {
      getUserTypeList().then(res => {
        if (res.IsSuccess) {
          this.userTypeOptions = res.Result
        }
      })
    },
    handelOrgnizationTypeChange(val) {
      if (val) {
        this.user.OrganizationId = ''
        this.getOrgnizationList(val)
      }
    },
    getOrgnizationList(OrganizationTypeId) {
      getInstitutionList(OrganizationTypeId).then(res => {
        if (res.IsSuccess) {
          this.OrganizationOptions = res.Result
        }
      })
    },
    async initPage() {
      this.userId === '' ? await store.dispatch('user/getInfo') : ''

      if (this.userId === '') {
        await store.dispatch('user/getInfo')
      }
      this.getUserInfo()
    }
  }
}
</script>
