<template>
  <div class="account">
    <div class="addAcount">
      <p style="margin-top:0.5%">
        <span style="font-size:18px;color:#2d8cf0;margin-left:18px;">新增账户</span>
        <span style="margin-left:10px;color:Grey">以下内容均为必填项</span>
      </p>
      <Form :label-width="100" :model="formInline" :rules="ruleInline">
        <FormItem label="登录账号" style="margin-top:1%" prop="emailNumber">
          <Input placeholder="请输入企业邮箱" style="width:300px" v-model="formInline.emailNumber" />
        </FormItem>
        <FormItem label="手机号码" style="margin-top:1%" prop="PhoneNumber">
          <Input placeholder="请输入正确的手机号" style="width:300px" v-model="formInline.PhoneNumber" />
        </FormItem>
        <FormItem label="真实姓名" style="margin-top:1%" prop="PerName">
          <Input placeholder="请输入真实姓名" style="width:300px" v-model="formInline.PerName" :maxlength="5" />
        </FormItem>
      </Form>
      <p>
        <span style="margin-left:25px;fnt-size:14px">初始登录密码</span>
        <span style="margin-left:10px">默认是"123456",新用户首次登录需修改后才能进入系统。</span>
        <span style="margin-left:30px"><Button type="primary" size="small" style="color:#ffffff;margin-left:20px;width:60px" @click="addacount"> 添加</Button></span>
      </p>
    </div>
    <div class="accountMange">
      <div class="accountMange-top">
        <p style="height:40px;line-height:40px">
          <span style="font-size:18px;color:#2d8cf0;margin-left:18px">账户管理</span>
          <span style="margin-left:10px;color:Grey">删除后该用户将无法登录，该账户上传的简历仍然保留。</span>
        </p>
        <p style="border-bottom:1px solid black;line-height:30px;margin-bottom:10px">
          <input type="checkbox" class="input-checkbox" v-model="checked" v-on:click="checkedAll(checkboxList)" style="margin-left:25px;margin-top:15px;cursor:pointer" /><span style="margin-left:10px"
            >全选</span
          >
          <span style="margin-left:40px;color:#2d8cf0;cursor:pointer" @click="delateall">删除</span>
        </p>
      </div>
      <!-- <Table ref="selection" :columns="columns4" :data="data1"></Table> -->
      <div style="overflow-y: auto;height:80%;margin-bottom:40px">
        <!-- <Spin size="large" fix v-if="spinShow" style="font-size:25px">加载中...</Spin> -->
        <div v-for="item in ajaxData" :key="item.id" style="">
          <div class="detailQQ">
            <input type="checkbox" name="checkboxinput" class="input-checkbox" v-model="checkboxList" :value="item.id" style="margin-left:25px;cursor:pointer" @click="delateArr(item.id)" />
            <span style="margin-left:5px">{{ item.userName }}</span>
            <span style="margin-left:35px">{{ item.userCode }}</span>
            <span style="margin-left:35px">{{ item.phone }}</span>
            <span style="margin-left:35px">{{ item.createTime }}</span>
            <span style="margin-left:35px;color:#2d8cf0;cursor:pointer" @click="recoveryModal(item.id)">恢复初始密码</span>
            <span style="margin-left:35px;color:#2d8cf0;cursor:pointer" @click="updateModal(item)">修改</span>
            <span style="margin-left:35px;color:#2d8cf0;cursor:pointer" @click="delateMaodal(item.id)">删除</span>
          </div>
          <div style="height:10px;background:white;width:100%;"></div>
        </div>
      </div>

      <div class="pageBottom">
        <Page
          :total="totalSize"
          show-elevator
          show-total
          @on-change="pageChange"
          @on-page-size-change="pageSizeChange"
          :current="pageIndex"
          :page-size="pageSize"
          style="text-align:center;margin-top:8px"
        ></Page>
      </div>
    </div>
    <!-- 恢复初始密码 -->
    <Modal v-model="modal1" :closable="false" width="250px">
      <h3 style="text-align:center">提示</h3>
      <p style="text-align:center">是否将该账号的密码，恢复至初始状态。</p>
      <div slot="footer" style="text-align:center">
        <Button type="primary" @click="modal1 = false">取消</Button>
        <Button type="primary" @click="recovery()">确定</Button>
      </div>
    </Modal>
    <Modal v-model="modal6" :closable="false" width="450px">
      <h3 style="text-align:center;font-size:14px">修改信息</h3>
      <Form :label-width="100" :model="formInline" :rules="ruleInline" class="updateClassModal">
        <FormItem label="登录账号" style="margin-top:1%" prop="emailNumber">
          <Input placeholder="请输入企业邮箱" style="width:300px;" v-model="formInline.updateemailNumber" disabled />
        </FormItem>
        <FormItem label="手机号码" style="margin-top:1%" prop="updatePhoneNumber">
          <Input placeholder="请输入正确的手机号" style="width:300px;" v-model="formInline.updatePhoneNumber" />
        </FormItem>
        <FormItem label="真实姓名" style="margin-top:1%" prop="updatePerName">
          <Input placeholder="请输入真实姓名" style="width:300px;" v-model="formInline.updatePerName" :maxlength="5" />
        </FormItem>
      </Form>
      <div slot="footer" style="text-align:center">
        <Button type="primary" @click="modal6 = false">取消</Button>
        <Button type="primary" @click="confireUpdate">确定</Button>
      </div>
    </Modal>
    <!-- 删除当前的账户 -->
    <Modal v-model="modal2" :closable="false" width="250px">
      <h3 style="text-align:center">提示</h3>
      <p style="text-align:center">是否确定删除当前账户</p>
      <div slot="footer" style="text-align:center">
        <Button type="primary" @click="modal2 = false">取消</Button>
        <Button type="primary" @click="delateAccount">确定</Button>
      </div>
    </Modal>
    <Modal v-model="modal3" :closable="false" width="250px">
      <h3 style="text-align:center">提示</h3>
      <p style="text-align:center">是否确定删除这些账户</p>
      <div slot="footer" style="text-align:center">
        <Button type="primary" @click="modal3 = false">取消</Button>
        <Button type="primary" @click="delateAll">确定</Button>
      </div>
    </Modal>
    <Modal v-model="modal4" :closable="false" width="250px">
      <h3 style="text-align:center">提示</h3>
      <p style="text-align:center">未选择要上传的远元素</p>
      <div slot="footer" style="text-align:center">
        <Button type="primary" @click="modal4 = false">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { queryaccountList, addAccount, Delateaccount, delateAllAccount, recoveryPassword, updateAccount } from '../../api/stystem.server.js';
export default {
  data() {
    return {
      modal1: false,
      modal2: false,
      modal3: false,
      modal4: false,
      modal6: false,
      checkboxList: [],
      checked: false,
      updateAccountId: '',
      pageT: '',
      userName: '',
      userCode: '',
      Massage: '',
      spinShow: true,
      delateARR: [],
      id: '',
      I: '',
      pageIndex: 1,
      pageSize: 30,
      totalSize: null,
      searchInfo: {
        pageSize: 30,
        pageIndex: 1,
        id: '',
      },
      formInline: {
        PhoneNumber: '',
        PerName: '',
        emailNumber: '',
        updatePhoneNumber: '',
        updatePerName: '',
        updateemailNumber: '',
      },
      ruleInline: {
        PhoneNumber: [
          {
            required: true,
            pattern: /^[1][3,4,5,7,8,6,9][0-9]{9}$/,
            message: '请输入正确的手机号',
            trigger: 'blur',
          },
        ],
        PerName: [
          { required: true, message: '请输入真实的姓名', trigger: 'blur' },
          { type: 'string', message: '', trigger: 'blur' },
        ],
        updateemailNumber: [
          {
            required: true,
            pattern: /^[1][3,4,5,7,8,6,9][0-9]{9}$/,
            message: '请输入正确的手机号',
            trigger: 'blur',
          },
        ],
        updatePerName: [
          { required: true, message: '请输入真实的姓名', trigger: 'blur' },
          { type: 'string', message: '', trigger: 'blur' },
        ],
        emailNumber: [
          {
            required: true,
            pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
            message: '请输入正确的邮箱账号',
            trigger: 'blur',
          },
        ],
      },
      ajaxData: [],
      checkData: [], // 双向数据绑定的数组
    };
  },
  methods: {
    handleSelectAll(status) {
      this.$refs.selection.selectAll(status);
    },
    ok() {
      this.$Message.info('Clicked ok');
    },
    cancel() {
      this.$Message.info('Clicked cancel');
    },
    //
    delateArr(DElateID) {
      this.delateARR.push(DElateID);
    },
    // 全选与反选
    checkedAll: function() {
      if (this.checked) {
        // 实现反选
        this.checkboxList = [];
        this.checkboxList.push(item.id);
        this.delateARR.push(item.id);
      } else {
        // 实现全选
        this.checkboxList = [];
        this.ajaxData.forEach(item => {
          this.checkboxList.push(item.id);
          this.delateARR.push(item.id);
        });
      }
    },
    // 修改
    updateModal(item) {
      this.modal6 = true;
      this.updateAccountId = item.id;
      this.formInline.updateemailNumber = item.userCode;
      this.formInline.updatePhoneNumber = item.phone;
      this.formInline.updatePerName = item.userName;
    },
    // 确认修改
    confireUpdate() {
      const parmars = {
        id: this.updateAccountId,
        userCode: this.formInline.updateemailNumber,
        userName: this.formInline.updatePerName,
        phone: this.formInline.updatePhoneNumber,
      };
      if (this.formInline.updatePhoneNumber == '' || this.formInline.updatePerName == '') {
        this.$Notice.error({
          title: '提示',
          desc: '请您填写正确的手机号码或姓名',
          duration: 2,
        });
        return;
      }
      if (!/^[1][3,4,5,7,8,6,9][0-9]{9}$/.test(this.formInline.updatePhoneNumber)) {
        this.$Notice.error({
          title: '提示',
          desc: '请您填写正确的手机号',
          duration: 2,
        });
        return;
      }
      updateAccount(parmars).then(res => {
        if (res.data.success == true) {
          this.$Notice.success({
            title: '提示',
            desc: '修改成功',
            duration: 2,
          });
          this.modal6 = false;
          this.SearchList();
        }
        if (res.data.success == false) {
          this.$Notice.error({
            title: '提示',
            desc: res.data.body.message,
            duration: 2,
          });
          this.modal6 = false;
        }
      });
    },
    // 添加账户
    addacount() {
      const parmars = {
        userCode: this.formInline.emailNumber,
        userName: this.formInline.PerName,
        phone: this.formInline.PhoneNumber,
      };
      if (this.formInline.PhoneNumber == '' || this.formInline.PerName == '' || this.formInline.emailNumber == '') {
        this.$Notice.error({
          title: '提示',
          desc: '请您填写正确的账号或姓名',
          duration: 2,
        });
        return;
      }

      if (!/^[1][3,4,5,7,8,6,9][0-9]{9}$/.test(this.formInline.PhoneNumber)) {
        this.$Notice.error({
          title: '提示',
          desc: '请您填写正确的手机号',
          duration: 2,
        });
        return;
      }
      if (!/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/.test(this.formInline.emailNumber)) {
        this.$Notice.error({
          title: '提示',
          desc: '请您填写正确邮箱账号',
          duration: 2,
        });
        return;
      }
      addAccount(parmars).then(res => {
        if (res.data.success == true) {
          this.$Notice.success({
            title: '提示',
            desc: '添加成功',
            duration: 2,
          });
          this.SearchList();
          this.formInline.PhoneNumber = '';
          this.formInline.PerName = '';
          this.formInline.emailNumber = '';
        }
        if (res.data.body.code == 0) {
          this.Massage = res.data.body.message;
          this.$Notice.error({
            title: '提示',
            desc: this.Massage,
            duration: 2,
          });
          this.formInline.PhoneNumber = '';
          this.formInline.PerName = '';
          this.formInline.emailNumber = '';
        }
      });
    },
    // 查询账户列表
    SearchList(page) {
      page = typeof page === 'number' ? page : 1;
      this.searchInfo.pageIndex = page;
      this.pageIndex = page;
      const parmars = {
        pageSize: this.searchInfo.pageSize,
        pageIndex: this.searchInfo.pageIndex,
      };
      queryaccountList(parmars).then(res => {
        if (res.data.success == true) {
          this.spinShow = false;
          this.totalSize = res.data.body.totalNumber;
          this.ajaxData = res.data.body.items.map((item, index) => {
            item.id = item.id;
            item.userName = item.userName;
            item.userCode = item.userCode;
            item.createTime = item.createTime;
            return item;
          });
        }
      });
    },
    // 删除单条账户弹框
    delateMaodal(DID) {
      this.I = DID;
      this.modal2 = true;
    },
    // 删除单条账户
    delateAccount() {
      const parmars = {
        id: this.I,
      };
      Delateaccount(parmars).then(res => {
        if (res.data.success == true) {
          this.modal2 = false;
          this.SearchList(this.pageT);
        }
        this.SearchList(this.pageT);
      });
    },
    // 批量删除弹出框
    delateall() {
      if (this.checkboxList.length == 0 || this.delateArr.length == 0) {
        this.$Notice.error({
          title: '提示',
          desc: '选项不能为空',
          duration: '2',
        });
        return;
      }
      this.modal3 = true;
    },
    // 批量删除账户
    delateAll() {
      delateAllAccount(this.delateARR).then(res => {
        if (res.data.success == true) {
          this.$Notice.success({
            title: '提示',
            desc: '删除成功',
            duration: '2',
          });
          this.modal3 = false;
          this.SearchList(this.pageT);
        }
      });
    },
    // 恢复初始密码弹窗
    recoveryModal(ID) {
      this.I = ID;
      this.modal1 = true;
    },
    // 确认恢复初始密码
    recovery() {
      const parmars = {
        id: this.I,
      };
      recoveryPassword(parmars).then(res => {
        if (res.data.success == true) {
          this.$Notice.success({
            title: '提示',
            desc: '恢复密码成功',
            duration: '2',
          });
          this.modal1 = false;
        }
      });
    },
    // 改变页码
    pageChange(page) {
      this.pageT = page;
      this.SearchList(page);
    },
    pageSizeChange(page) {
      this.searchInfo.pageSize = page;
      this.pageSize = page;
      this.SearchList();
    },
  },
  watch: {
    checkboxList: {
      handler: function(val, oldVal) {
        if (this.ajaxData.length == 0) {
          this.checked = false;
          return;
        }
        if (this.checkboxList.length === this.ajaxData.length) {
          this.checked = true;
        } else {
          this.checked = false;
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.SearchList();
  },
};
</script>
<style scoped>
.account {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.addAcount {
  height: 240px;
  width: 100%;
}
.pageBottom {
  height: 40px;
  width: 84.4%;
  background: #ededed;
  position: fixed;
  bottom: 0;
}
.accountMange {
  height: 74%;
}
.accountMange-top {
  width: 100%;
  height: 78px;
}
.detailQQ {
  height: 40px;
  line-height: 40px;
  width: 100%;
  background: rgba(244, 244, 244, 1);
  /* margin-top: 10px */
}
.detailQQ :nth-child(2) {
  width: 80px;
  display: inline-block;
}
.detailQQ :nth-child(3) {
  width: 180px;
  display: inline-block;
}
.detailQQ :nth-child(4) {
  width: 180px;
  display: inline-block;
}
</style>
<style>
.updateClassModal .ivu-input {
  color: grey !important;
}
</style>
