<template>
   <Modal
      v-model="my_show"
      :title="data?'编辑账号':'添加账号'"
      :closable="false"
      :mask-closable="false"
      @on-visible-change="visibleChange">
      <div class="page-edit-wrap uinn-lr20">
         <ui-loading :show="page_loading.show"></ui-loading>

         <ul>
            <li class="ui-list">
               <div class="ui-list-title">
                  <span class="title-require" v-if="!data">*</span>用户名：
               </div>
               <div class="ui-list-content">
                  <p><Input v-model.trim="params.username" :disabled="data?true:false"></Input></p>
                  <ul class="common-tips-wraper umar-t5" v-if="!data">
                     <li class="t-title">提示</li>
                     <li class="t-content">以字母开头，长度在4-32之间，只能包含字母、数字</li>
                  </ul>
               </div>
            </li>

            <li class="ui-list">
               <div class="ui-list-title"><span class="title-require">*</span>权限组：</div>
               <div class="ui-list-content">
                  <Select v-model="params.role_id">
                     <template v-if="roles.length">
                        <Option v-for="(item,index) in roles" :value="item.id" :key="index">{{item.name}}</Option>
                     </template>
                  </Select>
               </div>
            </li>

            <li class="ui-list">
               <div class="ui-list-title"><span class="title-require">*</span>姓名：</div>
               <div class="ui-list-content">
                  <p><Input v-model.trim="params.nickname" :maxlength="32"></Input></p>
                  <ul class="common-tips-wraper umar-t5" >
                     <li class="t-title">提示</li>
                     <li class="t-content">长度在2-32之间</li>
                  </ul>
               </div>
            </li>

            <li class="ui-list">
               <div class="ui-list-title"><span class="title-require" v-show="!data">*</span>密码：</div>
               <div class="ui-list-content">
                  <div><Input type="password" v-model.trim="params.current_password"></Input></div>
                  <ul class="common-tips-wraper umar-t5">
                     <li class="t-title">提示</li>
                     <li class="t-content">长度在6-18之间，只能包含字母、数字和下划线</li>
                  </ul>
               </div>
            </li>

            <li class="ui-list">
               <div class="ui-list-title"><span class="title-require" v-show="!data">*</span>确认密码：</div>
               <div class="ui-list-content">
                  <Input type="password" v-model.trim="params.confirm_password"></Input>
               </div>
            </li>

            <li class="ui-list">
               <div class="ui-list-title">手机号：</div>
               <div class="ui-list-content">
                  <Input v-model.trim="params.mobile"></Input>
               </div>
            </li>

            <li class="ui-list">
               <div class="ui-list-title">头像：</div>
               <div class="ui-list-content">
                  <ui-upload-img :imgs="img_list" @on-change="selectImgChange"></ui-upload-img>
               </div>
            </li>

            <li class="ui-list">
               <div class="ui-list-title">状态：</div>
               <div class="ui-list-content lh-32">
                  <Switch size="large" :true-value="1" :false-value="2" v-model="params.status">
                     <span slot="open">启用</span>
                     <span slot="close">禁用</span>
                  </Switch>
               </div>
            </li>
         </ul>
      </div>
      <footer slot="footer" class="ta-c">
         <Button type="primary" ghost @click="clear" class="w-80">取消</Button>
         <Button type="primary" :loading="loading" @click="ok" class="w-80">提交</Button>
      </footer>
   </Modal>
</template>

<script src="./js/edit.js"></script>
