<template>
  <div v-loading="loading" class="sysrUserDetail">
    <div class="account_info">
      <!--      <p class="user_title">{{ $t('ec.user.accountInfo') }}</p>-->

      <!--    <p class="user_title info_title">{{ $t('ec.user.userInfo') }}</p>-->
      <!--    <el-divider></el-divider>-->
      <div style="margin-bottom: 16px; display: flex; width: 90%">
        <img
          :src="sysrUser.avatar ? sysrUser.avatar : require('@/assets/img/avatar.png')"
          class="avatar-img"
        >

        <el-form label-suffix=":" label-width="80px" label-position="left" style="font-size: 28px; float: right;width: 100%">
          <ec-line :title="'用户信息'" style="margin-bottom: 10px;" />
          <el-row style="">
            <el-col :span="12">
              <el-form-item :label="$t('ec.user.realName')">
                {{ sysrUser.realName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('ec.user.sex')">
                <!--                <ec-radio-group-->
                <!--                  v-model="sysrUser.sex"-->
                <!--                  :disabled="!checkPermission(['user:edit'])"-->
                <!--                  dict-type="sex"-->
                <!--                  @change="value => updatePartInfo({ sex: value })"-->
                <!--                />-->
                {{ !sysrUser.sex ?'女':"男" }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('ec.user.position')">
                {{ sysrUser.position }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('ec.sms.phone')">
                {{ sysrUser.phone || '-' }}
                <i
                  :class="sysrUser.phone && sysrUser.phoneValid ? validRes.valid.icon : validRes.invalid.icon "
                  :style="sysrUser.phone && sysrUser.phoneValid ? validRes.valid.style : validRes.invalid.style"
                />
                <span>{{ sysrUser.phone && sysrUser.phoneValid ? $t('ec.user.verified') : $t('ec.user.unverified') }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <!--            <el-form-item :label="$t('ec.user.wxBind')">-->
              <!--              <el-switch-->
              <!--                :value="sysrUser.weixinBind"-->
              <!--                :active-value="true"-->
              <!--                :inactive-value="false"-->
              <!--                disabled-->
              <!--              />-->
              <!--            </el-form-item>-->
              <el-form-item v-if="showWechat">
                <span slot="label"><i class="fa fa-wechat" />:</span>
                <template v-if="wechatEdit">
                  {{ wechatAccount }}
                  <el-button class="bind" size="mini" icon="fa fa-link" @click="unbindWechat">解绑</el-button>
                </template>
                <span v-else>
                  未绑定
                  <el-button class="bind" size="mini" icon="fa fa-link" @click="bindWechat">绑定</el-button>
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('ec.email.address')">
                {{ sysrUser.email || '-' }}
                <i
                  :class="sysrUser.email && sysrUser.mailValid ? validRes.valid.icon : validRes.invalid.icon "
                  :style="sysrUser.email && sysrUser.mailValid ? validRes.valid.style : validRes.invalid.style"
                />
                <span>{{ sysrUser.email && sysrUser.mailValid ? $t('ec.user.verified') : $t('ec.user.unverified') }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <ec-line :title="'租户信息'" style="margin-bottom: 10px;margin-top: 15px;" />
          <el-row style="">
            <el-col v-if="enableTenant===true" :span="12">
              <el-form-item :label="$t('ec.user.tenant')">
                <ec-tenant :value="sysrUser.tenantId" readonly />
              </el-form-item>
            </el-col>
            <el-col v-if="enableTenant===true" :span="12">
              <el-form-item :label="$t('ec.user.org')">
                {{ sysrUser.orgName }}
                <!--              <ec-org-select :value="orgIdList" multiple readonly />-->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('ec.user.userName')">
                {{ sysrUser.username }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('ec.user.insider')">
                <!--                <el-switch-->
                <!--                  v-model="sysrUser.insider"-->
                <!--                  :active-value="true"-->
                <!--                  :disabled="!checkPermission(['user:edit'])"-->
                <!--                  :inactive-value="false"-->
                <!--                  @change="value => updatePartInfo({ insider: value })"-->
                <!--                />-->
                {{ sysrUser.insider ? $t('ec.table.yes'):$t('ec.table.no') }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div>
        <el-form label-suffix=":" label-width="120px">
          <el-form-item :label="$t('ec.user.ustatus')">
            <!--            <ec-radio-group-->
            <!--              v-model="sysrUser.ustatus"-->
            <!--              :disabled="!checkPermission(['user:edit'])"-->
            <!--              :ec-data="[{ value: 0, label: $t('ec.user.ustatusInit') }, { value: 1, label: $t('ec.user.ustatusNormal') }, { value:2, label: $t('ec.user.ustatusFrozen') }]"-->
            <!--              @change="value => updatePartInfo({ ustatus: value })"-->
            <!--            />-->
            <el-button type="text" :class="{'text-red-color':sysrUser.ustatus !=1 }">
              {{ (sysrUser.ustatus ==0 && $t('ec.user.ustatusInit')) || (sysrUser.ustatus==1 && $t('ec.user.ustatusNormal') ) || (sysrUser.ustatus==2 && $t('ec.user.ustatusFrozen')) }}
            </el-button>
          </el-form-item>

          <div style="display: flex">
            <el-form-item :label="$t('ec.user.role')" style="float: left">
              <template v-for="item in roleList">
                <el-tag v-if="sysrUser.roleIds.indexOf(item.id) > -1" :key="item.id" style="margin-right: 4px" type="success">
                  {{ item.roleName }}
                </el-tag>
              </template>

            </el-form-item>
            <!--            <el-button-->
            <!--              v-if="checkPermission(['user:permission'])"-->
            <!--              style="margin-left: 30px; position: relative; top: -10px;"-->
            <!--              type="text"-->
            <!--              @click="$refs.userAllRoleDialog.init(sysrUser)"-->
            <!--            >-->
            <!--              {{ $t('ec.table.edit') }}-->
            <!--            </el-button>-->
          </div>
          <el-form-item :label="$t('ec.user.accessibleApp')">
            <div>
              <template v-for="item in accessibleAppList">
                <el-tag v-if="sysrUser.accessibleAppIds.indexOf(item.appId) > -1" :key="item.appId" style="margin-right: 4px">
                  {{ item.appName }}
                </el-tag>
              </template>
            </div>
            <!--          <el-tag v-for="app in sss">{{ item.app }}</el-tag>-->
          </el-form-item>
        </el-form>
      </div>
    </div>

    <user-all-role ref="userAllRoleDialog" @change="appRoleChange" />
    <wechat-code ref="wechatCode" @close="getData" />
  </div>
</template>
<script>
import UserAllRole from '../components/userAllRole'
import { updatePartInfo, unbindWechat, getById } from 'ecip-web/api/vue/user/sysrUserApi'
import { findTenantAccessApps } from 'ecip-web/api/vue/app/sysrRegisterAppApi'
import { findRolesByAppIds } from 'ecip-web/api/vue/role/sysrRoleApi'
import permissionMixin from 'ecip-web/utils/permission-mixin'
import WechatCode from 'ecip-web/views/modules/personal/components/wechatCode'

const enableTenant = window._CONFIG['enableTenant'] === undefined ? true : window._CONFIG['enableTenant']
const showWechat = window._CONFIG['showWechat']

export default {
  name: 'UserInfo',
  components: { UserAllRole, WechatCode },
  mixins: [permissionMixin],
  data() {
    return {
      enableTenant,
      showWechat: typeof showWechat !== 'undefined' ? showWechat : true,
      userId: '',
      loading: false,
      sysrUser: {},
      superAdmin: false,
      orgIdList: [],
      userAppDeptList: [],
      accessibleAppList: [],
      roleList: [],
      wechatEdit: false,
      wechatAccount: '',
      validRes: {
        valid: {
          icon: 'el-icon-circle-check',
          style: {
            marginLeft: '8px',
            color: '#6cff50'
          }
        },
        invalid: {
          icon: 'el-icon-warning-outline',
          style: {
            marginLeft: '8px',
            color: '#ff621a'
          }
        }
      }
    }
  },
  methods: {
    async init(record) {
      Object.assign(this.$data.sysrUser, this.$options.data().sysrUser)
      const { sysrUser, orgIdList, userAppDeptList, superAdmin } = record
      this.userId = sysrUser.id
      const { data } = await getById(sysrUser.id)
      this.sysrUser = data.sysrUser
      this.superAdmin = superAdmin
      this.orgIdList = orgIdList
      this.userAppDeptList = userAppDeptList
      await this.findTenantAccessApps(sysrUser.tenantId)
      await this.findRolesByAppIds(sysrUser.tenantId, sysrUser.accessibleAppIds)

      this.wechatEdit = this.sysrUser.weixinBind === true
      this.wechatAccount = data.wechatAccount
      // console.log(record)
    },
    async getData() {
      const { data } = await getById(this.sysrUser.id)
      this.sysrUser = data.sysrUser
      this.wechatEdit = this.sysrUser.weixinBind === true
      this.wechatAccount = data.wechatAccount
    },
    unbindWechat() {
      this.$confirm('解绑后没法接收到微信公众号消息，也没法扫码登录，是否继续解绑微信？', this.$t('ec.message.prompt'), {
        confirmButtonText: this.$t('ec.message.confirm'),
        cancelButtonText: this.$t('ec.message.cancel'),
        type: 'warning'
      }).then(async() => {
        try {
          this.loading = true
          await unbindWechat({ userId: this.sysrUser.id })
          await this.getData()
          this.$notify.success('解绑成功')
        } finally {
          this.loading = false
        }
      })
    },
    async bindWechat() {
      try {
        this.loading = true
        this.$refs.wechatCode.init(this.sysrUser.id)
      } finally {
        this.loading = false
      }
    },
    async findTenantAccessApps(tenantId) {
      const { data } = await findTenantAccessApps(tenantId)
      this.accessibleAppList = data
    },
    async findRolesByAppIds(tenantId, appIds) {
      const { data } = await findRolesByAppIds(tenantId, appIds)
      this.roleList = data
    },
    appRoleChange(appIds, roleIds) {
      this.sysrUser.accessibleAppIds = appIds
      this.sysrUser.roleIds = roleIds
    },
    async updatePartInfo(propObj) {
      try {
        this.loading = true
        await updatePartInfo(this.userId, propObj)
        this.$notify.success(this.$t('ec.message.saveSuccess'))
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.user_title {
  //border-bottom: 2px solid #E4E7ED;
  font-size: 17px;
  font-weight: bold;
  //margin:  0 0 24px 0;
  //padding: 0 0 16px 0;
}
.avatar-img{
  width: 100px;
  height: 100px;
  margin-left: 25px;
  margin-right: 50px;
  float: left;
}

//.info_title {
//  border-top: 2px solid #E4E7ED;
//  padding-top: 16px;
//}

</style>
<style lang="scss">
  .sysrUserDetail{
    .el-col{
      height: 35px;
    }
  }

</style>
