<template>
  <div>
    <p class="edit_page_title">{{adminList_type==='add'?'添加管理员':'编辑管理员'}}</p>
    <Form ref="editAdmin" :model="editAdmin" :rules="admin_rule" :label-width="120" class="add-admin-form">
      <FormItem label="角色类型：" prop="usertype">
        <Select v-model="editAdmin.usertype" class="wid_347 fl zd1" v-if="!is_admin" filterable>
          <Option v-for="(item,index) in roleList" :key='index' :value="item.id.toString()">{{item.name}}</Option>
        </Select>
        <Select v-model="editAdmin.usertype" class="wid_347 fl zd1" v-else disabled>
          <Option value="0">系统管理员</Option>
        </Select>
        <p class="form_tap_text">角色类型不同，管理权限不同，可在角色权限页面进行设置</p>
        <div class="clear"></div>
      </FormItem>
      <FormItem label="管理员账号：" :prop="is_admin?'':'username'">
        <Input v-model="editAdmin.username" :disabled="adminList_type==='edit'" type="text" placeholder="6-30位字母或数字" class="wid_347 fl zd1"></Input>
        <p class="form_tap_text fl" v-if="adminList_type==='add'">用于管理后台登录</p>
        <div class="clear"></div>
      </FormItem>
      <FormItem label="管理员密码：" prop="admin_pwd">
        <Input id='pass1'  v-model="editAdmin.admin_pwd" name='pass' type="password" placeholder="6-30位字母或数字" class="wid_347 zd1 fl"  @on-focus="clearpass('admin_pwd')"></Input>
        <p class="form_tap_text fl" v-if="adminList_type==='edit'">6-30位密码(仅限数字和字母)</p>
        <div class="clear"></div>
      </FormItem>
      <FormItem label="确认密码：" prop="aglin_pwd" v-if="adminList_type==='add'">
        <Input v-model="editAdmin.aglin_pwd" type="password" placeholder="再次输入确认密码" class="wid_347 zd1" ></Input>
      </FormItem>
      <FormItem label="二级密码：" prop="second_pwd">
        <Input v-model="editAdmin.second_pwd" type="password" placeholder="6-30位字母或数字" class="wid_347 fl zd1"  @on-focus="clearpass('second_pwd')"></Input>
        <p class="form_tap_text" v-if="adminList_type==='add'">用于账号验证操作</p>
        <p class="form_tap_text fl" v-if="adminList_type==='edit'">6-30位密码(仅限数字和字母)，用于账号验证操作</p>
        <div class="clear"></div>
      </FormItem>
      <FormItem label="QQ号：" prop="qq">
        <Input v-model="editAdmin.qq" type="text" class="wid_347"></Input>
        <div class="clear"></div>
      </FormItem>
      <FormItem label="职务：" prop="duty">
        <Input v-model="editAdmin.duty" type="text" class="wid_347"></Input>
      </FormItem>
      <FormItem class="wid_440 form_btn">
        <Button type="primary" @click="editAdminList('editAdmin')" :disabled="!is_canclick" :class="is_canclick?'':'disable_btn'">{{adminList_type==='add'?'添加':'保存'}}</Button>
        <Button class="mar_L_15 return_btn" @click="return_last">返回</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>
export default {
  name: "edit_adminList",
  data() {
    const confirmPW = (rule, value, cb) => {
      if(value !== this.editAdmin.admin_pwd) {
        cb(new Error("两次密码输入不一致"));
      } else {
        cb();
      }
    };
    return {
      editAdmin: {
        usertype:null,
        username:'',
        admin_pwd:'',
        aglin_pwd:'',
        second_pwd:'',
        qq:'',
        duty:'',
      },
      is_admin:false,
      roleList:[],
      admin_rule: {
        usertype: [
          { required: true, message: "请选择角色类型", trigger: "change" }
        ],
        username: [
          { required: true, message: "账号为6-30位字母或数字", trigger: "blur" },
          { pattern: /^[0-9a-zA-Z_]{6,30}$/, message: "账号为6-30位字母或数字", trigger: "blur" }
        ],
        admin_pwd: [
          { required: true, message: "密码为6-30位字母或数字", trigger: "blur" },
          { pattern: /^[0-9a-zA-Z_]{6,30}$/, message: "密码为6-30位字母或数字", trigger: "blur" }
        ],
        aglin_pwd: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: confirmPW, trigger: "blur" }
        ],
        second_pwd: [
          { required: true, message: "二级密码为6-30位字母或数字", trigger: "blur" },
          { pattern: /^[0-9a-zA-Z_]{6,30}$/, message: "二级密码为6-30位字母或数字", trigger: "blur" }
        ],
        qq: [
          { required: true, message: "请输入QQ号", trigger: "blur" },
        ],
        duty: [
          { required: true, message: "请输入职务", trigger: "blur" },
        ]
      }
    };
  },
  props: {
    adminList_type: String,
    curInfo:Object,
    pindex:Number
  },
  computed:{
    is_canclick(){
      let can_ck=!!this.editAdmin.username&&!!this.editAdmin.admin_pwd&&!!this.editAdmin.second_pwd&&!!this.editAdmin.usertype&&!!this.editAdmin.qq&&!!this.editAdmin.duty
      if(this.adminList_type=='add'){
        return can_ck&&!!this.editAdmin.aglin_pwd
      }else{
        return can_ck
      }
    }
  },
  methods:{
    // 获取角色权限下拉框的数据 与角色权限列表接口相同  
    getRoleList(){
      this.$api.getRoleList({limit:100,page:1}).then(data=>{
        if(data.code===200){
          this.roleList=data.data
        }
      })
    },
    clearpass(btn){
      if(this.editAdmin[btn]=='m1o5r7e8n'){
        this.editAdmin[btn]=''
      }
    },
    editAdminList(formname){
      this.$refs[formname].validate(valid => {
        if (valid) {
          //添加管理员
          if(this.adminList_type==='add'){
            this.$api.addAdminList({
              role_id:this.editAdmin.usertype,
              name:this.editAdmin.username,
              password:this.editAdmin.admin_pwd,
              repassword:this.editAdmin.aglin_pwd,
              verify_password:this.editAdmin.second_pwd,
              qq:this.editAdmin.qq,
              duty:this.editAdmin.duty,
            }).then( data => {
              if(data.code===200){
                this.$Message.info(data.msg)
                this.$emit('return_last',this.pindex)
              }else{
                this.$Message.info(data.msg)
              }
            })
          }
          //修改管理员
          if(this.adminList_type==='edit'){
            let editInfo={
              id:this.editAdmin.userid,
              role_id:this.editAdmin.usertype,
              password:this.editAdmin.admin_pwd,
              verify_password:this.editAdmin.second_pwd,
              qq:this.editAdmin.qq,
              duty:this.editAdmin.duty,
            }
            if(editInfo.password==='m1o5r7e8n'){delete editInfo.password}
            if(editInfo.verify_password==='m1o5r7e8n'){delete editInfo.verify_password}
            this.$api.editAdminInfo({
              ...editInfo
            }).then( data => {
              if(data.code===200){
                this.$Message.info('修改成功')
                this.$emit('return_last',this.pindex)
              }else{
                this.$Message.info(data.msg)
              }
            })
          }
        }
      });
    },
    // 获取单条数据
    getAdminDetail(id){
      this.$api.getAdminDetail({id}).then(data=>{
        this.editAdmin.userid=data.id
        this.editAdmin.qq=data.qq
        this.editAdmin.duty=data.duty
      })
    },
    // 返回列表
    return_last(){
      this.$emit('return_last',this.pindex)
    }
  },
  created(){
    this.getRoleList()
    if(this.curInfo&&this.adminList_type==='edit'){
      this.getAdminDetail(this.curInfo.id)
      if(this.curInfo.is_admin==1){
        this.is_admin=true
      }else{
        this.is_admin=false
      }
      this.editAdmin.usertype=this.curInfo.role_id.toString()
      this.editAdmin.admin_pwd='m1o5r7e8n'
      this.editAdmin.second_pwd='m1o5r7e8n'
      this.editAdmin.username=this.curInfo.name
      console.log
    }else{
      this.editAdmin={}
    }
  }
};
</script>

