<template>
  <div>
      <i-page-header title="个人设置"></i-page-header>

    <Card :bordered="false" dis-hover class="ivu-mt listbox">

      <Spin size="large" fix v-if="spinShow"></Spin>

      <Form ref="formValidate"  :model="formValidate" :rules="ruleValidate"  :label-width="120"  label-position="right">
        <FormItem label="管理员账号" prop="">
          <Input type="text" v-model="formValidate.username" :disabled="true" class="input"></Input>
        </FormItem>

        <FormItem label="角色权限" prop="">
          <Input type="text" v-model="formValidate.roleName" :disabled="true" class="input"></Input>
        </FormItem>

        <FormItem label="姓名" prop="name">
          <Input type="text" v-model="formValidate.name" class="input"></Input>
        </FormItem>


        <FormItem>
          <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
        </FormItem>
      </Form>
    </Card>

  </div>

</template>


<script>
    import IPageHeader from "../../../../layouts/system/page-header/index";
    import { mapState, mapActions } from 'vuex';
    import UiUpload from "../../../../ui/upload/index";
    import Setting from "../../../../setting";
    import util from "../../../../libs/util";
    import {AccountInfo,AccountUpdate} from "../../../../api/system/account";
    export default {
        name: "index",
        components: {UiUpload, IPageHeader},
        computed: {
            ...mapState('system/user',[
                'info'
            ]),
        },
        data() {
            return {
                formValidate : {
                    username    :   "",
                    name        :   "",
                    roleName    :   "",

                },
                dialogVisible: false,
                upUrl : "",
                upHeaders:{},
                //加载效果
                spinShow:true,
                ruleValidate: {
                    name: [
                        { required: true, message: '您的姓名不能为空', trigger: 'blur' }
                    ]
                }
            }
        },

        created() {
          var upHeaders = {};
            //上传路径
            this.upUrl = Setting.apiBaseURL + "/systemv1/upload/index";
            console.log(this.upUrl);
            //上传header数据
            const token = util.cookies.get('system_token');
            if (token) {
                upHeaders['SYSTEM-ACC-TOKEN'] = token;
            }
            this.upHeaders = upHeaders;
            //获取数据
            AccountInfo(this.info.id)
                .then(res=>{
                  this.spinShow = false;
                  if(res.code == 200) {
                      this.formValidate = res.data;
                  }
                })
                .catch(err=>{
                    console.log(err);
                });
        },
        methods: {

            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    console.log(valid);
                    if (valid) {
                        AccountUpdate(this.formValidate).then(res=>{
                            this.$Message.success(res.msg);
                        }).catch(res=>{
                            this.$Message.success(res.msg);
                        })
                    }
                })
            },
            /**
             * 上传文件
             * @param res
             */
            onUpload:function (res) {
              if(res.code == -1) {
                  Notice.error({
                     title : "系统提示",
                     content:res.msg
                  });
              } else {
                  this.formValidate.avatar = res.data.img;

              }
            }

        }
    }
</script>
<style scoped>
  .el-upload--picture-card{width: 100px;height: 100px;}
</style>
