<template>
  <div class="disFlex">
    <NavLeft navIf="generateTest" />
    <div class="projectManagement zdin">
      <div class="title">项目管理</div>
      <div class="search">
        <div class="searchInput">
          <el-input
            v-model="projectName"
            placeholder="请输入项目名称"
          ></el-input>
        </div>
        <div class="searchInput">
          <el-date-picker
            v-model="projectDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>

        <button type="button" @click="queryProject()" class="queryProject">
          <img src="" alt="" /> 查询
        </button>
      </div>
      <div class="projectTable">
        <div
          class="generateTestList"
          v-for="item in GenerateTestData"
          :key="item.id"
        >
          <div class="generateTestListOne">
            <div>
              <p>{{ item.name }}</p>
              <p>单位名称：{{ item.companyName }}</p>
              <p>创建时间：{{ item.createTime }}</p>
              <p>
                二维码有效期： {{ item.qrCodeUrlStartTime }}至{{
                  item.qrCodeUrlEndTime
                }}
              </p>
            </div>
            <p>
              参与人数：<span>{{ item.personCount }}</span>
            </p>
          </div>
          <div class="buttonFunction">
            <p></p>
            <p></p>
            <p></p>
            <div class="buttonFunctionMake">
              <p @click="detailsData(item)">查看结果</p>
              <p @click="downloadCode(item)">下载二维码</p>
              <p @click="resetCode(item)">重置二维码有效期</p>
              <p @click="addIdCard(item)">配置白名单</p>
              <p> 
               <span v-if="item.status==0" @click="openTing(item)">停用</span>
            <span v-if="item.status==1" @click="resetCodeModify(item)">启用</span>
               </p>
              <p @click="openDelet(item)">删除</p>
            </div>
          </div>
        </div>

        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            layout="prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <el-drawer
      v-model="drawer"
      title="重置二维码"
      :direction="direction"
      :before-close="handleClose"
    >
      <div class="generateTestCode">
        <p>测试名称：{{ codeDate.name }}</p>

        <div>
          <p>
            当前二维码有效期：{{ codeDate.qrCodeUrlStartTime }}至{{
              codeDate.qrCodeUrlEndTime
            }}
          </p>
          <el-date-picker
            v-model="resetCodeModifyData"
            type="datetimerange"
            range-separator="To"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
        </div>
        <el-button type="primary" @click="resetCodeModify()">重置</el-button>
        <el-button @click="resetForm()">取消重置</el-button>
      </div>
    </el-drawer>

    <!-- <div class="makeBer">
       

    </div> -->
    <el-drawer
      v-model="iDcrt"
      title="配置白名单"
      :direction="direction"
      :before-close="handleClosea"
    >
      <div class="generateTestCode">
        <p>测试名称：{{ codeDate.name }}</p>

        <div>
          <p>
            当前二维码有效期：{{ codeDate.qrCodeUrlEndTime }}至{{
              codeDate.qrCodeUrlStartTime
            }}
          </p>
        </div>
        <el-form
          :label-position="labelPosition"
          label-width="100px"
          :model="iDcrtData"
          style="max-width: 460px"
        >
          <el-form-item label="姓名">
            <el-input v-model="iDcrtData.name"></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="iDcrtData.idCard"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="iDcrtData.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addTestWhiteList()"
              >确定</el-button
            >
            <el-button @click="resetForm()">取消</el-button>
          </el-form-item>
        </el-form>
        <div>
          <div class="iDcrtInput">
            <div>
              <el-input
                v-model="codeDateCon.idCard"
                placeholder="请输入身份证号"
              ></el-input>
            </div>

            <el-button type="primary" @click="getTestWhiteList(true)"
              >确定</el-button
            >
          </div>

          <div>
            <el-table :data="tableDataiDcrt" height="350" style="width: 100%">
              <el-table-column prop="name" label="姓名" width="80" />
              <el-table-column prop="idCard" label="身份证" width="180" />
              <el-table-column prop="phone" label="手机号" width="150" />
              <el-table-column align="center" fixed="right" label="状态">
                <template #default="scope">
                  <el-button type="primary" @click="deletiDcrt(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
                 <div class="">
          <el-pagination
            background
            @size-change="handleSizeChangea"
            @current-change="handleCurrentChangea"
            :current-page="currentPage4"
            layout="prev, pager, next, jumper"
            :total="totala"
          >
          </el-pagination>
        </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import NavLeft from "../components/nav.vue";
import { ElMessageBox, ElMessage } from "element-plus";
export default {
  components: {
    NavLeft,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      total: "1",
      codeDate: "",
          codeDateCon: {
        current: 1,
    idCard:"",
        size: 10,
    
      },
      resetCodeModifyData: "",
      drawer: false,
      direction: "rtl",
      iDcrt: false,
      projectName: "",
      projectDate: "",
      tableDataiDcrt: [],
      iDcrtData: {
        idCard: "",
        name: "",
        phone: "",
        testId: 0,
      },
      generateData: {
        current: 1,
        endTime: "",
        name: "",
        size: 10,
        startTime: "",
      },
      GenerateTestData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            },
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  deleteProject() {},
  mounted() {
    // 初始化获取数据
    this.getGenerateTest();
  },
  methods: {
    addIdCard(data) {
      this.codeDate = data;
      this.iDcrt = true;
      this.getTestWhiteList();
    },
    // 提示窗
    openDelet(obj) {
      let that = this;
      ElMessageBox.confirm(
        "删除后将无法继续扫码访问，且正在参与答题的用户将会被终止答题测试",
        "确定要删除该测试吗？",
        {
          confirmButtonText: "取消",
          cancelButtonText: "确定",
          type: "提示",
        }
      )
        .then(() => {
          that.deletgenerateTest(obj);
          ElMessage({
            type: "delet",
            message: "已停用",
          });
        })
        .catch(() => {
          ElMessage({
            type: "delet",
            message: "已取消",
          });
        });
    },
    openTing(obj) {
      let that = this;
      
      ElMessageBox.confirm(
        "停用后将无法继续扫码访问，且正在参与答题的用户将会被终止答题测试",
        "确定要停用该测试吗？",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "提示",
        }
      )
        .then(() => {
          that.resetCodeModify(obj);
          ElMessage({
            type: "delet",
            message: "已停用",
          });
        })
        .catch(() => {
          ElMessage({
            type: "delet",
            message: "已取消",
          });
        });
    },
    addTestWhiteList() {
      this.iDcrtData.testId = this.codeDate.id;

      let that = this;
      this.axios
        .post("/hysc/test/addTestWhiteList", this.iDcrtData)
        .then(function (data) {
          console.log(data);
          that.getTestWhiteList();
         that.iDcrtData= {
        idCard: "",
        name: "",
        phone: "",
        testId: 0,
      }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    downloadCode(data){
      console.log(data);
  this.axios
        .get(data.qrCodeUrl,)
        .then(function () {
        })
        .catch(function (error) {
          console.log(error);
        });
      
    },
    //删除项目
    projectDelete(id) {
      let that = this;
      this.axios
        .post("/hysc/project/delProject", {
          id: id,
        })
        .then(function () {
          that.getProject();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    projectDisable(data) {
      let that = this;
      this.axios
        .post("/hysc/project/updProject", data)
        .then(function () {
          that.getProject();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    handleCurrentChange(data) {
      this.generateData.current = data;
      this.getGenerateTest();
    },
     handleCurrentChangea(data) {
      this.codeDateCon.current = data;
      this.getTestWhiteList();
    },
    handleSizeChangea(data){
      this.codeDateCon.current = data;
      this.getTestWhiteList();
    },
    handleClose() {
      this.drawer = false;
    },
    resetForm() {
      this.drawer = false;
      this.iDcrt = false;
    },
    handleClosea() {
      this.iDcrt = false;
    },
    detailsData(data) {
      localStorage.detailsData = JSON.stringify(data);
      this.$router.push("/details");
    },

    //
    deletiDcrt(data) {
      let that = this;
      this.axios
        .post("/hysc/test/delTestWhiteList", {
          id: data.id,
        })
        .then(function (response) {
          console.log(response.data);
          that.getTestWhiteList();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    deletgenerateTest(data) {
      console.log(data.id, "123123");
      let that = this;
      this.axios
        .post("/hysc/test/delTest", {
          id: data.id,
        })
        .then(function (response) {
          console.log(response.data);
          that.getGenerateTest();
        })
        .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();
      let hh = new Date(data).getHours();
      let mf = new Date(data).getMinutes();
      let ss = new Date(data).getSeconds();
      if (mm < 10) {
        mm = "0" + mm;
      }
      if (dd < 10) {
        dd = "0" + dd;
      }
      if (hh < 10) {
        hh = "0" + hh;
      }
      if (mf < 10) {
        mf = "0" + mf;
      }

      if (ss < 10) {
        ss = "0" + ss;
      }

      return yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
    },
    // 重置二维码
    resetCode(data) {
      this.drawer = true;
      this.codeDate = data;
    },
    resetCodeModify(dataId) {
      let data = [];
      let that = this;

      this.drawer = false;
      if (this.resetCodeModifyData[0]) {
        data.push(this.newDate(this.resetCodeModifyData[0]));
        data.push(this.newDate(this.resetCodeModifyData[1]));
      }
      let obj = {
        id: this.codeDate.id,
        qrCodeUrlStartTime: data[0],
        qrCodeUrlEndTime: data[1],
      };
      if (dataId) {
        if (dataId.status == 1) {
          obj = {
            id: dataId.id,
            status: 0,
          };
        }else{
           obj = {
            id: dataId.id,
            status: 1,
          };
        }
      }
  

      this.axios
        .post("/hysc/test/updTest", obj)
        .then(function (response) {
          console.log(response.data);
          that.getGenerateTest();
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    // 查询
    queryProject() {
      this.generateData.name = this.projectName;
      if (this.projectDate) {
        this.generateData.endTime = this.newDate(this.projectDate[1]);
        this.generateData.startTime = this.newDate(this.projectDate[0]);
      } else {
        this.generateData.endTime = "";
        this.generateData.startTime = "";
      }
      this.getGenerateTest();
    },

    // 获取白名单列表
    getTestWhiteList(idC) {
      let param = new URLSearchParams();
      let that = this;
      if(idC){
param.append("idCard", this.codeDateCon.idCard);
      }
      

      param.append("testId", this.codeDate.id);
 param.append("current", this.codeDateCon.current);
  param.append("size", this.codeDateCon.size);
      this.axios
        .get("/hysc/test/getTestWhiteList", {
          params: param,
        })
        .then(function (response) {
          console.log(response.data, "123123");
          that.totala = response.data.data.total;
          that.tableDataiDcrt = response.data.data.records;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 获取列表数据
    getGenerateTest() {
      let param = new URLSearchParams();
      let that = this;
      console.log(that.generateData);
      param.append("current", that.generateData.current);
      param.append("endTime", that.generateData.endTime);
      param.append("name", that.generateData.name);
      param.append("size", that.generateData.size);
      param.append("startTime", that.generateData.startTime);
      this.axios
        .get("/hysc/test/getTestPage", {
          params: param,
        })
        .then(function (response) {
          console.log(response.data);
          that.total = response.data.data.total;
          that.GenerateTestData = response.data.data.records;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>


<style >
.iDcrtInput {
  display: flex;
  justify-content: space-evenly;
}

.iDcrtInput > div {
  width: 60%;
}
.buttonFunctionMake {
  display: none;
  width: 200px;
  background-color: #fff;
  position: absolute;
  left: -80px;
  box-shadow: 5px 5px 10px rgba(120, 137, 149, 0.25);
  height: 300px;
  z-index: 30;
}
.generateTestCode p {
  font-size: 16px;
}
.zdin > .el-overlay {
  z-index: 5 !important;
}
.zdin > .el-teleport {
  z-index: 8 !important;
}
.generateTestCode > p {
  margin-bottom: 20px;
}
.generateTestCode > div {
  margin-bottom: 20px;
}
.generateTestCode > div > p {
  margin-bottom: 20px;
}
.buttonFunction {
  position: relative;
  cursor: pointer;
}
.buttonFunction:hover .buttonFunctionMake {
  display: block;
}
.buttonFunctionMake > p {
  color: #0544a4;
  text-align: center;
  padding-top: 20px;
  font-size: 14px;
}
.buttonFunction > p {
  width: 30px;
  height: 4px;
  border-radius: 3px;
  margin-bottom: 4px;
  background-color: #0544a4;
}
.generateTestListOne {
  display: flex;
  align-items: flex-end;
}
.generateTestListOne > div {
  margin-right: 100px;
}
.generateTestListOne > div > :nth-child(1) {
  font-size: 30px;
  margin-bottom: 30px;
}
.generateTestListOne p {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #515151;
  margin-bottom: 20px;
  line-height: 20px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 120px;
}
.disFlex {
  display: flex;
}
.projectManagement {
  flex: 1;
  box-sizing: border-box;
  padding: 60px;
}
.generateTestList {
  width: 100%;
  padding: 30px;
  margin-bottom: 30px;
  padding-bottom: 10px;
  background: #f8fafb;
  display: flex;
  padding-right: 100px;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid #dde3e8;
}
.title {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #454d67;
  line-height: 22px;
  padding-left: 23px;
  border-bottom: 1px solid #e4eaee;
  padding-bottom: 7px;
  margin-bottom: 60px;
}
</style>
