<template>
  <div class="user-wrapper">
    <div class="content-box">
      <a href="https://www.stylefeng.cn" target="_blank">
        <span class="action">
          <a-icon type="question-circle-o"></a-icon>
        </span>
      </a>

      <notice-icon class="action"/>


      <a-dropdown>
        <span class="action ant-dropdown-link user-dropdown-menu">
          <a-avatar class="avatar" size="small" :src="avatar"/>
          <span>{{ nickname }}</span>
        </span>
        <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
          <a-menu-item key="4" v-if="hasPerm('sysMenu:change')">
            <a @click="appToggled()" >
              <a-icon type="swap"/>
              <span>切换应用</span>
            </a>
          </a-menu-item>
          <a-menu-item key="5" v-if="hasPerm('sysUser:updatePwd')" >
            <a  @click="updatePwd()" >
              <a-icon type="tool"/>
              <span>修改密码</span>
            </a>
          </a-menu-item>

          <a-menu-item key="0">
            <router-link :to="{ name: 'center' }">
              <a-icon type="user"/>
              <span>个人中心</span>
            </router-link>
          </a-menu-item>
          <a-menu-item key="1">
            <router-link :to="{ name: 'settings' }">
              <a-icon type="setting"/>
              <span>账户设置</span>
            </router-link>
          </a-menu-item>
          <a-menu-divider/>
          <a-menu-item key="3">
            <a href="javascript:;" @click="handleLogout">
              <a-icon type="logout"/>
              <span>退出登录</span>
            </a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>

    <a-modal
      title="切换应用"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOkApp"
      @cancel="handleCancel"
    >

      <a-form class="permission-form" :form="form1" >
        <a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="目前应用"
            has-feedback
          >
            <a-button type="primary" size="small">{{this.appName}}</a-button>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="切换应用"
            has-feedback
          >
            <a-select style="width: 100%" placeholder="请选择要切换的应用" v-decorator="['application', {rules: [{ required: true, message: '请选择要切换的应用！' }]}]" >
              <a-select-option v-for='(item,index) in userInfo.apps' :key="index" :value="item.code" >{{item.name}}</a-select-option>
            </a-select>
          </a-form-item>

        </a-form-item>
      </a-form>

    </a-modal>


    <a-modal
      title="修改密码"
      :visible="visible_updPwd"
      :confirm-loading="confirmLoading"
      @ok="handleOkUpdPwd"
      @cancel="handleCancel"
    >

        <a-form :form="form2">
          <a-form-item
            label="原密码"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            has-feedback
          >
            <a-input placeholder="请输入原密码"  type="password" v-decorator="['password', {rules: [{required: true,  message: '请输入原密码！'}]}]" />
          </a-form-item>
        </a-form>

        <a-form :form="form2">
            <a-form-item
              label="新密码"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input placeholder="请输入新密码" type="password" v-decorator="['newPassword', {rules: [{required: true,  message: '请输入新密码！'},{
                validator: validateToNextPassword,
              },]}]" />
            </a-form-item>
        </a-form>
        <a-form :form="form2">
          <a-form-item
            label="重复新密码"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            has-feedback
          >
            <a-input placeholder="请再次输入新密码" type="password" v-decorator="['confirm', {rules: [{required: true,  message: '请再次输入新密码！'},
              {
                validator: compareToFirstPassword,
              }]}]" />
          </a-form-item>
        </a-form>

    </a-modal>

  </div>


</template>

<script>
import NoticeIcon from '@/components/NoticeIcon'
import { mapActions, mapGetters } from 'vuex'
import { ALL_APPS_MENU } from '@/store/mutation-types'
import Vue from 'vue'

export default {
  name: 'UserMenu',
  components: {
    NoticeIcon,
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      visible: false,
      visible_updPwd:false,
      confirmLoading: false,
      form1: this.$form.createForm(this),
      form2: this.$form.createForm(this),
      appName:''
    };
  },

  computed: {
    ...mapGetters(['nickname', 'avatar','userInfo'])

  },
  methods: {
    ...mapActions(['Logout','MenuChange','UpdatePwd']),

    handleLogout () {
      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗 ?',
        onOk: () => {
          return this.Logout({}).then(() => {
            setTimeout(() => {
              window.location.reload()
            }, 16)
          }).catch(err => {
            this.$message.error({
              title: '错误',
              description: err.message
            })
          })
        },
        onCancel () {
        }
      })
    },

    /**
     * 打开切换应用框
     */
    appToggled () {
      this.visible = true;
      this.appName=Vue.ls.get(ALL_APPS_MENU)[0].name
    },

    /**
     * 打开修改密码框
     */
    updatePwd () {
      this.visible_updPwd = true;
    },

    compareToFirstPassword(rule, value, callback) {
      const form2 = this.form2;
      if (value && value !== form2.getFieldValue('newPassword')) {
        callback('请确认两次输入密码的一致性！');
      } else {
        callback();
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form2 = this.form2;
      if (value && this.confirmDirty) {
        form2.validateFields(['confirm'], { force: true });
      }
      callback();
    },

    handleOkApp(){
      const { form1: { validateFields } } = this
      validateFields((errors, values) => {
        if(!errors){
          const applicationData = this.userInfo.apps.filter(item => item.code == values.application)
          this.MenuChange(applicationData[0])
          this.handleCancel()
        }
      })
    },

    handleOkUpdPwd(){
      const { form2: { validateFields } } = this
      validateFields((errors, values) => {
        if(!errors){
          values.id = this.userInfo.id
          this.UpdatePwd(values).then((res) =>{
            if(res.success){
              this.$message.success('修改成功')
              this.handleCancel()
            }else{
              this.$message.error('修改失败：'+res.message)
            }
          })

        }
      })
    },

    handleCancel(){
      this.form1.resetFields();
      this.form2.resetFields();
      this.visible = false;
      this.visible_updPwd = false;
    }
  }
}
</script>

<style lang="less" scoped>
    .appRedio {
    border:1px solid #91d5ff;
    padding:10px 20px;
    background: #e6f7ff;
    border-radius:2px;
    margin-bottom:10px;
      color: #91d5ff;
    /*display: inline;
    margin-bottom:10px;*/
    }
</style>
