<template>
  <div>
    <p class="edit_page_title">{{pageTitle}}</p>
    <Form ref="changeStaff" :model="changeStaff" :rules="staff_rule" :label-width="100">
      <FormItem label="员工账号" prop="name">
        <Input type="text" v-model="changeStaff.name" placeholder="6-30位字符" class="wid_275" :readonly="this.staff_list_type=='edit'? true: false" />
      </FormItem>
      <FormItem label="选择角色" prop="role_id" >
        <Select v-model="changeStaff.role_id" class="wid_275" @on-change="handlerRoleChange">
          <Option :value="item.id" v-for="item in roleList" :key="item.id">{{item.name}}</Option>
        </Select>
      </FormItem>
       <FormItem label="选择部门" prop="department_id">
        <Select v-model="changeStaff.department_id" class="wid_275" @on-change="handlerDepartChange">
          <Option :value="item.id" v-for="item in teamlist" :key="item.id">{{item.name}}</Option>
        </Select>
      </FormItem>
       <FormItem label="所属上级" prop="">
        <Select v-model="changeStaff.pid" class="wid_275" @on-change="handleeStaffChange">
          <Option :value="item.id" v-for="item in staffData" :key="item.id">{{item.name}}</Option>
        </Select>
      </FormItem>
      <!-- <FormItem label="公会" prop="studio" v-show="changeStaff.role==3">
        <Select v-model="changeStaff.studio" class="wid_275 fl zd1">
          <Option v-for="(item,index) in studiolist" :key="index" :value="item.id.toString()">{{item.name}}</Option>
        </Select>
        <p class="form_tap_text" v-if="teamlist.length<1"><router-link to="/admin_guild" class="jump">去创建公会</router-link></p>
        <div class="clear"></div>
      </FormItem> -->
      <!-- <FormItem label="所属部门" prop="department" >
        <Select v-model="changeStaff.department" class="wid_275 fl zd1">
          <Option v-for="(item,index) in teamlist" :key="index" :value="item.id.toString()">{{item.name}}</Option>
        </Select>
        <p class="form_tap_text" v-if="teamlist.length<1"><router-link to="/team_list" class="jump">去创建部门</router-link></p>
        <div class="clear"></div>
      </FormItem> -->
      <div v-if="cancelPsdVerify">
        <FormItem label="密码" prop="password">
          <Input type="password" v-model="changeStaff.password" placeholder="6-30位字母或数字" class="wid_275" @on-focus="clearpass('password')"/>
        </FormItem>
        <FormItem label="二级密码：" prop="verify_password">
          <Input v-model="changeStaff.verify_password" type="password" placeholder="6-30位字母或数字" class="wid_275 fl zd1"  @on-focus="clearpass('second_pwd')" />
          <p class="form_tap_text" v-if="staff_list_type==='add'">用于账号验证操作</p>
          <p class="form_tap_text fl" v-if="staff_list_type==='edit'">6-30位密码(仅限数字和字母)，用于账号验证操作</p>
          <div class="clear"></div>
        </FormItem>
      </div>
      <div v-else>
        <FormItem label="密码" prop="" class="editFormChange">
          <Input type="password" v-model="changeStaff.password" placeholder="6-30位字母或数字" class="wid_275" @on-focus="clearpass('password')"/>
        </FormItem>
        <FormItem label="二级密码：" prop="" class="editFormChange">
          <Input v-model="changeStaff.verify_password" type="password" placeholder="6-30位字母或数字" class="wid_275 fl zd1"  @on-focus="clearpass('second_pwd')" />
          <p class="form_tap_text" v-if="staff_list_type==='add'">用于账号验证操作</p>
          <p class="form_tap_text fl" v-if="staff_list_type==='edit'">6-30位密码(仅限数字和字母)，用于账号验证操作</p>
          <div class="clear"></div>
        </FormItem>
      </div>
      <FormItem label="姓名" prop="realname">
        <Input type="text" v-model="changeStaff.realname" placeholder='请输入姓名' class="wid_275"/>
      </FormItem>
      <FormItem label="手机号" prop="mobile">
        <Input type="text" v-model="changeStaff.mobile" placeholder='请输入手机号' class="wid_275"/>
      </FormItem>
      <FormItem label="入职日期" prop="entry_date">
        <DatePicker type="date" :options="options" :value='changeStaff.entry_date' placeholder="入职日期" class="wid_275" @on-change="entryDatecahnge" ></DatePicker>
      </FormItem>
      <FormItem label="职务" prop="duty">
        <Input type="text" v-model="changeStaff.duty" placeholder='请输入职务' class="wid_275"/>
      </FormItem>
      <FormItem label="QQ" prop="qq">
        <Input type="text" v-model="changeStaff.qq" placeholder='请输入QQ' class="wid_275"/>
      </FormItem>
      <FormItem label="状态" prop="status">
        <RadioGroup v-model="changeStaff.status">
          <Radio label="1">正常</Radio>
          <Radio label="0">关闭</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem class="form_btn">
        <Button type="primary" @click="confirmChange('changeStaff')">确认</Button>
        <Button class="return_btn mar_L_15" @click="returnBase">返回</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>
import uploadImg from "@@/base/upload_img";
import { getStore,timeFormatter } from "@/utils/utils";
export default {
  name: "change_staff",
  components: { uploadImg },
  props: {
    staff_list_type: String,
    staff_id: Number,
    studio_id: Number,
    pindex: Number,
  },
  data() {
    const confirmName = (rule, value, cb) => {
      if (this.changeStaff.username) {
        let reg = /^[\u2E80-\u9FFF]+$/;
        if (!reg.test(value)) {
          cb(new Error("姓名格式错误"));
        } else if (value.length > 25 || value.length < 2) {
          cb(new Error("姓名长度需要在2-25个字符之间"));
        } else {
          cb();
        }
      } else {
        cb();
      }
    };
    const confirmPassword = (rule, value, cb) => {
      let reg = /^[0-9a-zA-Z_]{6,30}$/;
      if (!reg.test(value)) {
        cb(new Error("密码为6-30位字母或数字组合"));
      } else {
        cb();
      }
    };
    // const confirmId_card = (rule, value, cb) => {
    //   if (this.changeStaff.id_card) {
    //     let reg = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/;
    //     if (!reg.test(value)) {
    //       cb(new Error("证件号码错误"));
    //     } else {
    //       cb();
    //     }
    //   } else {
    //     cb();
    //   }
    // };
    const confirmMobile = (rule, value, cb) => {
      let reg = /^1(3|4|5|7|8)\d{9}$/;
      if (!reg.test(value)) {
        cb(new Error("请输入正确的手机号"));
      } else {
        cb();
      }
    };
    const confirmBankName = (rule, value, cb) => {
      if (this.changeStaff.bank_num) {
        let reg = /^([1-9]{1})(\d{15}|\d{18})$/;
        if (!reg.test(value)) {
          cb(new Error("卡号格式错误"));
        } else {
          cb();
        }
      } else {
        cb();
      }
    };
    const confirmAccount = (rule, value, cb) => {
      let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+$/;
      if (!reg.test(value)) {
        cb(new Error("账号为6-30位字母、数字或汉字组合"));
      } else if (value !== 'admin' && (value.length > 30 || value.length < 6)) {
        cb(new Error("账号为6-30位字母、数字或汉字组合"));
      } else {
        cb();
      }
    };
    return {
      optionsdis: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      changeStaff: {
        name:'',
        status: "1",
        mobile:'',
        role_id:'',
        pid:'',
        department_id:'',
        password:'',
        verify_password: '',
        mobile:'',
        realname:'',
        entry_date:'',
        qq:'',
        duty:'',
      },
      teamlist:[],
      studiolist: [],
      staffData:[],
      staff_rule: {
        name: [
          { required: true, message: "账号不能为空", trigger: "blur" },
          { required: true, validator: confirmAccount, trigger: "blur" }
        ],
        department_id: [
          { type: 'number',required: true, message: "请选择部门", trigger: "change" }
        ],
        role_id: [
          { type: 'number',required: true, message: "请选择角色", trigger: "change" }
        ],
        realname: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { validator: confirmName, trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { required: true, validator: confirmPassword, trigger: "blur" }
        ],
        verify_password: [
          { required: true, message: "请输入二级密码", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { required: true, validator: confirmMobile, trigger: "blur" }
        ],
        entry_date: [
          { required: true, message: "请选择入职日期", trigger: "change" },
        ]
      },
      roleList: [],
      roleListShow: true,
      cancelPsdVerify:true,
      options:{
        disabledDate(date) {
          return (new Date(date)).getTime() > (new Date()).getTime()
        }
      }
    };
  },
  computed: {
    pageTitle() {
      if (this.staff_list_type==='add') {
        return "添加新员工";
      } else {
        return "编辑员工信息";
      }
    }
  },
  methods: {
    entryDatecahnge(date){
      this.changeStaff.entry_date=date
     
    },
    handlerRoleChange (e) {
      this.changeStaff.role_id = e
    },
    handlerDepartChange(e){
       this.changeStaff.department_id = e 
    },
    handleeStaffChange(e){
       this.changeStaff.pid = e 
    },
    confirmChange(formname) {
      this.$refs[formname].validate(valid => {
        if (valid) {
          let api
          if(this.staff_list_type=='edit'){
            this.changeStaff.id=this.staff_id
            api='editAdminInfo'
          }else{
            api='addAdminList'
          }
          this.$api[api](this.changeStaff).then(data => {
            if(data.code==200){
              this.$Message.info(data.msg)
              this.$emit("returnList",this.pindex);
            }else{
              this.$Message.info(data.msg)
            }
          })
        }
      });
    },
    // 部门数据
    getDepartMentList(){
       this.$api.getDepartMentList().then(data=>{
        if(data.code==200){
          this.teamlist=data.data
        }else {
          this.$Message.error(data.msg);
          return
        }
      })
    },
    // 角色数据
     getRoleList() {
      this.$api.getRoleList({page:1,limit:999}).then(data => {
        if (data.code === 200) {
          this.roleList = data.data
        } else {
          this.$Message.error(data.msg);
          return
        }
      });
    },
    //所属上级员工数据
     getStaffList(){
      this.$api.getAdminList({page:1,limit:999}).then(data =>{
        if(data.code===200){       
          if(this.staff_list_type === 'edit') {
            this.staffData=data.data
            this.staffData =  this.staffData.filter(item => ![this.changeStaff.id].includes(item.id))
          }else {
             this.staffData=data.data
          }
        }else{
          this.$Message.info(data.msg)
          return
        }
      })
    },
    clearpass(btn){
      if(this.changeStaff[btn]=='m1o5r7e8n'){
        this.changeStaff[btn]=''
      }
    },
    // 获取员工详情
    getStaffDetail(id){
      this.$api.getAdminDetail({id:id}).then(data =>{
        if(data){
          this.cancelPsdVerify = false
         this.changeStaff = data
         this.changeStaff.status = this.changeStaff.status.toString()
           
        }else{
          this.$Message.info(data.msg)
          return
        }
      })
    },
    returnBase() {
      this.$emit("returnList",this.pindex);
    }
  },
  created(){
    this.getDepartMentList()
    this.getRoleList()
    this.getStaffList()
    if(this.staff_list_type&&this.staff_list_type==='edit'&&this.staff_id){
        this.getStaffDetail(this.staff_id)
    }
  }
};
</script>

