<template>
  <span class="i-layout-header-trigger i-layout-header-trigger-min">
    <Dropdown :trigger="isMobile ? 'click' : 'hover'" class="i-layout-header-user" :class="{ 'i-layout-header-user-mobile': isMobile }" @on-click="handleClick">
      <Avatar size="small" :src="info.avatar" v-if="info.avatar" />
      <Icon type="md-person" v-if="!info.avatar" />
      <span class="i-layout-header-user-name" v-if="!isMobile">{{ info.name }}</span>
      <template #list>
        <DropdownMenu>
          <DropdownItem>
            <label @click="resetPwdOpen">
              <Icon type="ios-lock" />
              <span>{{ $t('Front_Label_Change_Password') }}</span>
            </label>
          </DropdownItem>
          <DropdownItem>
            <label @click="$refs.form.open(info)">
              <Icon type="ios-contact" />
              <span>{{ $t('Front_Label_User_Info') }}</span>
            </label>
          </DropdownItem>
          <!-- <i-link to="/setting/user">
                    <DropdownItem>
                        <Icon type="ios-contact-outline" />
                        <span>{{ $t('basicLayout.user.center') }}</span>
                    </DropdownItem>
                </i-link>
                <i-link to="/setting/account">
                    <DropdownItem>
                        <Icon type="ios-settings-outline" />
                        <span>{{ $t('basicLayout.user.setting') }}</span>
                    </DropdownItem>
                </i-link> -->
          <DropdownItem divided name="logout">
            <Icon type="ios-log-out" />
            <span>{{ $t('Front_Label_Logout') }}</span>
          </DropdownItem>
        </DropdownMenu>
      </template>
    </Dropdown>
    <template>
      <Modal v-model="resetPwdOpened" scrollable>
        <template #header>
          <div>
            <span class="title">{{ $t('Front_Label_Change_Password') }}</span>
            <span class="description">{{ $t('Front_Label_Change_Password_Desc') }}</span>
          </div>
        </template>
        <div class="ivu-ml-8 ivu-mr-8">
          <Form ref="resetPwdForm" :model="resetPwdData" :rules="resetPwdRule" label-position="top" label-colon="：" class="ivu-mt" @submit.prevent>
            <Row :gutter="24" type="flex">
              <Col v-bind="grid24">
                <FormItem :label="$t('Front_Label_Old_Password')" key="oldPwd" prop="oldPwd">
                  <Input type="password" v-model="resetPwdData.oldPwd" />
                </FormItem>
              </Col>
              <Col v-bind="grid24">
                <FormItem :label="$t('Front_Label_New_Password')" key="newPwd" prop="newPwd">
                  <Input type="password" v-model="resetPwdData.newPwd" />
                </FormItem>
              </Col>
              <Col v-bind="grid24">
                <FormItem :label="$t('Front_Label_Confirm_Password')" key="checkPwd" prop="checkPwd">
                  <Input type="password" v-model="resetPwdData.checkPwd" />
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
        <template #footer>
          <Button type="primary" custom-icon="fa fa-check" @click="submitChangePwd">{{ $t('Front_Btn_Save') }}</Button>
        </template>
      </Modal>
    </template>
    <modal-form ref="form" view-code="UserInfoEdit">
      <template #footer>
        <Button type="primary" custom-icon="fa fa-save" @click="submitUserInfo">{{ $t('Front_Btn_Save') }}</Button>
      </template>
    </modal-form>
  </span>
</template>
<script>
  import { mapState, mapActions } from 'vuex';
  import userlApi from '../../../api/user';
  import mixinPage from '../../../mixins/page';

  export default {
    components: {},
    mixins: [mixinPage],
    name: 'iHeaderUser',
    data() {
      return {
        resetPwdOpened: false,
        resetPwdData: {},
        resetPwdRule: {
          oldPwd: {
            type: 'string',
            required: true,
            message: this.$t('Front_Msg_Please_Input'),
            trigger: 'blur,change'
          },
          newPwd: {
            type: 'string',
            required: true,
            message: this.$t('Front_Msg_Please_Input'),
            trigger: 'blur,change'
          },
          checkPwd: {
            type: 'string',
            required: true,
            message: this.$t('Front_Msg_Please_Input'),
            trigger: 'blur,change'
          }
        }
      };
    },
    watch: {
      openPassword(newValue, oldValue) {
        if (newValue == true) {
          this.resetPwdOpen();
          this.openPassword = false;
        }
      }
    },
    computed: {
      ...mapState('admin/user', ['info']),
      ...mapState('admin/layout', ['isMobile', 'logoutConfirm']),
      ...mapState('admin/account', ['openPassword'])
    },
    methods: {
      ...mapActions('admin/account', ['logout']),
      ...mapActions('admin/user', ['set']),
      handleClick(name) {
        if (name === 'logout') {
          this.logout({
            confirm: this.logoutConfirm,
            vm: this
          });
        }
      },
      // 打开密码修改对话框
      resetPwdOpen() {
        this.resetPwdData = {
          oldPwd: null,
          newPwd: null,
          checkPwd: null
        };
        this.$refs.resetPwdForm.resetFields();
        this.resetPwdOpened = true;
      },
      // 修改密码提交保存
      async submitChangePwd() {
        let isOK = await this.$refs.resetPwdForm.validate();

        if (!isOK) {
          this.error('Front_Msg_Form_Validate_Fail');
        } else {
          if (this.resetPwdData.newPwd != this.resetPwdData.checkPwd) {
            this.error('Front_Msg_Password_Inconsistent');
          } else {
            await userlApi.updatePassword({
              oldPassword: this.resetPwdData.oldPwd,
              newPassword: this.resetPwdData.newPwd
            });

            this.success('Front_Msg_Success', () => {
              this.resetPwdOpened = false;
            });
          }
        }
      },
      // 保存用户信息
      submitUserInfo() {
        this.confirm('Front_Msg_Sure_To_Save', async () => {
          await userlApi.updateUser(this.$refs.form.data);

          this.success('Front_Msg_Success', () => {
            this.set(this.$refs.form.data);
            this.$refs.form.opened = false;
          });
        });
      }
    }
  };
</script>
