<template>
  <div class="disFlex">
    <NavLeft navIf="index" />
    <div class="consumer">
      <div class="indexTit">
        <p
          @click="indexTitIfFun(1)"
          :class="indexTitIf == 1 ? 'indexTitIf' : ''"
        >
          系统管理员
        </p>
        <p
          @click="indexTitIfFun(2)"
          :class="indexTitIf == 2 ? 'indexTitIf' : ''"
        >
          普通管理员
        </p>
        <p
          @click="indexTitIfFun(3)"
          :class="indexTitIf == 3 ? 'indexTitIf' : ''"
        >
          权限说明
        </p>
      </div>
      <div v-if="indexTitIf == 1">
        <div class="consumer-seach">
          <ul class="consumer-seach-item">
            <li>
              <el-input
                v-model="phoneInt"
                placeholder="请输入手机号"
                class="input-with-select"
                style="width: 340px"
              >
              </el-input>
            </li>

            <el-button class="seach-btn" @click="getReportList()"
              ><img src="../assets/search-btn.png" alt="" />查询
            </el-button>

            <el-button class="seach-btn" @click="addIf()">新增 </el-button>
          </ul>
        </div>
        <div class="consumer-list">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column align="center" prop="name" label="账号信息" />
            <el-table-column align="center" prop="phone" label="手机号" />
            <el-table-column align="center" #default="scope" label="是否启用">
              <el-switch
                v-model="scope.row.statusIf"
                @change="addUsername(scope.row)"
              />
            </el-table-column>
            <el-table-column align="center" #default="scope" label="操作">
              <el-button type="text" size="small" @click="queryName(scope)"
                >编辑</el-button
              >
              <el-button type="text" size="small" @click="open(scope)"
                >删除</el-button
              >
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="consumer-pagination">
          <el-pagination
            background
            :page-size="100"
            layout="prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>

      <div v-if="indexTitIf == 3">
        <div class="quanian">
          <p>系统管理员权限：</p>
          <p>1.生成测试</p>
          <p>2.生成测试二维码，配置二维码有效期</p>
          <p>3.配置某人某次考生可以查看测试结果，导出测试报告</p>
        </div>
        <div class="quanian">
          <p>普通成员权限</p>
          <p>1.查看所有数据</p>
          <p>2.编辑题库</p>
        </div>
      </div>
    </div>

    <el-drawer
      v-model="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <div class="elementUl">
        <el-form
          :label-position="labelPosition"
          label-width="100px"
          :model="adduserData"
          style="max-width: 460px"
        >
          <el-form-item label="新增头像">
            <div class="imgFm">
              <input type="file" @change="upLoad($event)" />
              <img :src="imgData" alt="" />
            </div>
          </el-form-item>
          <el-form-item label="登陆账号(手机号)">
            <el-input v-model="adduserData.account"></el-input>
          </el-form-item>
          <el-form-item label="登陆密码">
            <el-input v-model="adduserData.password"></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="region">
            <select
              placeholder="请选择类型"
              v-model="adduserData.roleId"
              class="selectCss"
            >
              <option
                class="option"
                v-for="item in roleData"
                :key="item.roleName"
                :value="item.id"
              >
                {{ item.roleName }}
              </option>
            </select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addUsername()">确定</el-button>
            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import NavLeft from "../components/nav.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import * as qiniu from "qiniu-js";
export default {
  components: {
    NavLeft,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      drawer: false,
      tableData: [],
      roleData: "",
      total: 1,
      imgData: "https://nianhua.test.joymido.com/",
      consumerData: {
        current: 1,
        phone: "",
        size: 10,
      },
      phoneInt: "",
      indexTitIf: 1,
      userData: "",
      adduserData: {
        account: "",
        avatar: "",
        password: "",
        phone: "",
        roleId: "",
      },
    };
  },
  mounted() {
    // 初始化获取数据
    this.userData = JSON.parse(localStorage.userData);
    this.getReportList();
        this.getroleData()
  },
  methods: {
    upLoad(e) {
      let that = this;
      let key = null;
      this.axios

        .get("http://101.200.157.76:12306/ding/file/getQiniuToken", {
          params: { bucketName: "nianhua-test" },
        })
        .then(function (data) {
          var config = {
            useCdnDomain: true,
          };
          //  设置文件的配置
          var putExtra = {
            fname: "",
            params: {},
            mimeType: null,
          };
          console.log(e.target.files[0], data.data.data.token);
          let observable = qiniu.upload(
            e.target.files[0],
            key,
            data.data.data.token,
            putExtra,
            config
          );
          // var observable = qiniu.upload({ file, key, token, putExtra, config })
          //   设置实例的监听对象
          var observer = {
            //   接收上传进度信息
            // 接收上传错误信息
            error(err) {
              console.log(err);
            },
            complete(res) {
              that.imgData += res.key;
            },
          };
          // 上传开始
          observable.subscribe(observer);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    getroleData() {
      let that = this;
      this.axios
        .get("/hysc/system/role/getRoleList")
        .then(function (response) {
          that.roleData = response.data.data;
  
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 时间格式转换
    newDate(data) {
      let yy = new Date(data).getFullYear();
      let mm = new Date(data).getMonth() + 1;
      let dd = new Date(data).getDate();
      return yy + "-" + mm + "-" + dd;
    },
    usernameDatatitIf(ifS) {
      this.usernameDataIf = ifS;
    },
    indexTitIfFun(data) {
      this.indexTitIf = data;
    },
    // 查看测试列表

    handleCurrentChange(data) {
      this.consumerData.current = data;
      this.getConsumer();
    },
    handleClose() {
      this.drawer = false;
    },
    addIf() {
      this.drawer = true;
      this.adduserData = {
        account: "",
        avatar: "",
        password: "",
        phone: "",
        roleId: "",
      };
      this.getroleData();
    },
    queryName(data) {
      this.drawer = true;
      this.adduserData = { ...data.row };
      this.getroleData();
    },
    queryNamea(data) {
      let that = this;
      this.axios
        .post("/hysc/user/delUserById", { id: data.row.id })
        .then(function (response) {
          console.log(response);
          that.getReportList();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    phonetest(data) {
      const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
      if (data == "" || data.length <= 10 || !reg.test(data)) {
        return false;
      } else {
        return true;
      }
    },

    getReportList() {
      let param = new URLSearchParams();
      param.append("current", this.consumerData.current);
      param.append("size", this.consumerData.size);
      param.append("phone", this.phoneInt);
      let that = this;
      this.axios
        .get("/hysc/user/getUserList", {
          params: param,
        })
        .then(function (response) {
          that.tableData = response.data.data.records;
          for (let index = 0; index < that.tableData.length; index++) {
            if (that.tableData[index].status == 1) {
              that.tableData[index].statusIf = false;
            } else {
              that.tableData[index].statusIf = true;
            }

          }
        console.log(that.roleDatam,"123");


       
          that.total = response.data.data.total;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    open(obj) {
      let that = this;
      ElMessageBox.confirm("是否确定删除", {
        confirmButtonText: "取消",
        cancelButtonText: "确定",
        type: "提示",
      })
        .then(() => {
          ElMessage({
            type: "delet",
            message: "已取消",
          });
        })
        .catch(() => {
          that.queryNamea(obj);
          ElMessage({
            type: "tiyong",
            message: "删除成功",
          });
        });
    },
    addUsername(data) {
      this.drawer = false;
      if (data) {
        this.adduserData.id = data.id;
        if (this.adduserData.statusIf) {
          this.adduserData.status = 0;
        } else {
          this.adduserData.status = 1;
        }
      } else {
        this.adduserData.avatar = this.imgData;
        this.adduserData.phone = this.adduserData.account;
      }

      this.axios
        .post("/hysc/user/submit", this.adduserData)
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>
<style scoped>
.disFlex {
  display: flex;
}
.indexTit + div {
  flex: 1;
  background: #f8fafb;
  padding: 0 30px;
}
.indexTitIf {
  background: #fff;
}
.indexTit {
  background: #ddd;
}
.indexTit > p {
  padding: 20px;
  width: 200px;
  font-size: 14px;
}
.usernameDatatit {
  display: flex;
  position: absolute;
  width: 80%;
  top: 0px;
  border-bottom: 1px solid #e4eaee;
  padding-left: 40px;
  padding-top: 23px;
  left: 0px;
}
.quanian {
  padding-top: 100px;
  padding-left: 20px;
}
.quanian > p {
  font-size: 16px;
  color: #000;
  padding-left: 100px;
}
.quanian > :nth-child(1) {
  padding-left: 0px;
  margin-bottom: 30px;
}
.usernameData > .p {
  width: 93%;
  padding: 16px 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #8e8e8e;
  display: flex;
  justify-content: space-between;
  line-height: 20px;
  border-bottom: 1px solid #e4eaee;
  margin-bottom: 18px;
}

.usernameData > .p span {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #515151;
  line-height: 20px;
}
.usernameDatatit > p {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #454d67;
  margin-right: 30px;
  line-height: 22px;
}
.consumer {
  width: calc(100% - 260px);
  padding: 50px 60px;
  display: flex;
}
.reportListCon {
  background: #f8fafb;
  padding: 20px;
}
.reportListCon > p {
  width: 93%;
  padding-bottom: 16px;
  padding-left: 10px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #515151;
  margin-bottom: 20px;

  border-bottom: 1px solid #e4eaee;
  line-height: 22px;
  display: flex;
  justify-content: space-between;
}
.reportListCon > p > :nth-child(1) {
  width: 138px;
  height: 19px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #8e8e8e;
  line-height: 20px;
}
.reportListCon > p > :nth-child(2) {
  width: 138px;
  height: 19px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #8e8e8e;
  text-align: right;
  line-height: 20px;
  width: 206px;
  height: 19px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #515151;
  line-height: 20px;
}
/* 搜索 */
.consumer-seach {
  margin: 60px 0 50px;
}

.consumer-seach-item {
  display: flex;
}

.consumer-seach-item li {
  margin-right: 10px;
}

.consumer-seach-item >>> .el-input__inner {
  height: 40px;
}

.consumer-seach-item .seach-btn,
.consumer-seach-item .seach-btn:hover {
  width: 90px;
  height: 40px;
  background-color: #0544a4;
  color: #ffffff;
  border: 0;
}
.consumer-seach-item .seach-btn img {
  height: 18px;
  margin-right: 8px;
  font-size: 15px;
}
/* 列表 */
.consumer-list >>> .el-table .cell {
  padding: 0;
}

/* 分页 */
.consumer-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 120px;
}

.consumer-pagination >>> .el-pager li {
  color: #666666;
  font-weight: normal;
}

.consumer-pagination >>> .el-input__inner {
  width: 48px;
}

.consumer-pagination >>> .el-pagination__jump {
  margin-left: 0;
}
.wxDd > p {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #8e8e8e;
  padding-bottom: 16px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 16px;
  width: 93%;
  border-bottom: 1px solid #e4eaee;
  line-height: 20px;
}
.wxDdCon {
  display: flex;
  align-items: center;
  padding: 20px 30px;
}
.wxDdCon img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid #c1c1c1;
}
.wxDdCon p {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #515151;
  line-height: 20px;
  margin-left: 20px;
}
.usernameDatatit > .usernameDatatitIf {
  color: #0544a4;
  font-weight: 600;
  padding-bottom: 20px;
  border-bottom: 2px solid #0544a4;
}
</style>
