<template>
  <div class="disFlex">
    <NavLeft navIf="generateTest" />
    <div class="projectManagement">
      <div class="title">编辑题库</div>

      <div class="projectTopicText">
        <p class="tit">项目信息</p>
        <div class="projectTopicCon">
          <div>
            <div class="projectTopicText">
              <p>项目名称：</p>
              <p>{{ projectData.name }}</p>
            </div>
            <div class="projectTopicText">
              <p>发起单位</p>
              <p>{{ projectData.companyName }}</p>
            </div>
            <div class="projectTopicText">
              <p>项目描述：</p>
              <p>{{ projectData.note }}</p>
            </div>
            <div class="projectTopicText">
              <p>创建时间</p>
              <p>{{ projectData.createTime }}</p>
            </div>
          </div>

          <div class="ewm">
            <img :src="projectData.qrCodeUrl" alt="" />
          </div>
        </div>

        <div class="projectTopicA">
          <div class="detailsInt">
            <el-input
              v-model="idCardInput"
              placeholder="请输入身份号"
              class="input-with-select m-2"
              style="width: 340px"
              size="large"
            >
            </el-input>
            <div class="searchInput">
              <el-date-picker
                v-model="inputDate"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </div>

            <button type="button" @click="getProject()" class="queryProject">
              <img src="" alt="" /> 查询
            </button>
          </div>

          <div class="projectTopicTable">
            <el-table :data="tableData" style="width: 100%" max-height="500">
              <el-table-column align="center" prop="id" label="用户ID" />
              <el-table-column align="center" prop="idCard" label="身份证号" />
              <el-table-column
                align="center"
                prop="topicTopicStr"
                label="人格类型"
              />

              <el-table-column align="center" label="允许参测人员查看测试结果">
                <template #default="scope">
                  <el-switch
                    v-model="scope.row.isAllowViewResultIf"
                    @change="testStatus(scope.row)"
                  />
                  <p>{{ scope.row.isAllowViewResultIf }}</p>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="testScope"
                label="答题环境"
              />
              <el-table-column
                align="center"
                prop="createTime"
                label="答题时间"
              />
              <el-table-column align="center" fixed="right" label="操作">
                <template #default="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click.prevent="queryName(scope)"
                  >
                    用户信息
                  </el-button>

                  <el-button
                    type="text"
                    size="small"
                    @click.prevent="editTitle(scope)"
                  >
                    查看报告
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click.prevent="editTitle(scope)"
                  >
                    导出报告
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="disF">
              <div class="yunx">
                <p>允许全部参测人员</p>
                <el-switch
                  v-model="isAllowViewResult"
                  @change="allowAllViewResult()"
                />
              </div>
              <div class="pagination">
                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  layout="prev, pager, next, jumper"
                  :total="total"
                >
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-drawer
      v-model="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <div class="elementUl">
        <div class="usernameDatatit">
          <p
            @click="usernameDatatitIf(true)"
            :class="usernameDataIf ? 'usernameDatatitIf' : ''"
          >
            用户信息
          </p>
        </div>

        <div class="usernameData">
          <p class="p">
            用户ID：<span>{{ usernameData.id }}</span>
          </p>
          <p class="p">
            手机号：<span>{{ usernameData.phone }}</span>
          </p>
          <p class="p">
            身份证号：<span>{{ usernameData.idCard }}</span>
          </p>
          <div class="wxDd">
            <p>微信</p>
            <div class="wxDdCon">
              <img :src="usernameData.wxMiniHeader" alt="" />
              <p>{{ usernameData.wxMiniShowname }}</p>
            </div>
            <p>钉钉</p>
            <div class="wxDdCon">
              <img :src="usernameData.dingdingHeader" alt="" />
              <p>{{ usernameData.dingdingShowname }}</p>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- // 题型1 -->
  </div>
</template>

<script>
import NavLeft from "../components/nav.vue";

export default {
  components: {
    NavLeft,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      total: "",
      drawer: false,
      usernameData: {},
      selectClassData: [],
      selectClassData1: [],
      selectClassData2: [],
      idCardInput: "",
      inputDate: "",
      tableData: [],
      selectClassData3: [],
      isAllowViewResult: false,
      detailsData: {
        current: "1",
        size: "10",
        startTime: "",
        endTime: "",
      },
      projectData: {},
    };
  },
  mounted() {
    this.projectData = JSON.parse(localStorage.detailsData);
    this.addCation();
    this.getProject();
  },
  methods: {
    // 分页
    handleCurrentChange(data) {
      this.detailsData.current = data;
      this.getProject();
    },
    queryName(data) {
      this.drawer = true;

      this.usernameData = data.row;
      console.log( this.usernameData );
    },
    // 搜索
    inputDataFun() {
      this.getProject(this.inputData);
    },
    addCation() {
      let param1 = new URLSearchParams();
      let param2 = new URLSearchParams();
      let param3 = new URLSearchParams();
      let param4 = new URLSearchParams();
      let that = this;
      param1.append("code", "topic_type_1");
      param2.append("code", "topic_type_2");
      param3.append("code", "topic_type_3");
      param4.append("code", "topic_type_4");

      this.axios
        .get("/hysc/system/dict/dictionary", {
          params: param1,
        })
        .then(function (response) {
          console.log(response);
          that.selectClassData = response.data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
      this.axios
        .get("/hysc/system/dict/dictionary", {
          params: param2,
        })
        .then(function (response) {
          that.selectClassData1 = response.data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
      this.axios
        .get("/hysc/system/dict/dictionary", {
          params: param3,
        })
        .then(function (response) {
          that.selectClassData2 = response.data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
      this.axios
        .get("/hysc/system/dict/dictionary", {
          params: param4,
        })
        .then(function (response) {
          that.selectClassData3 = response.data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    testStatus(data) {
      let isAllowViewResult = 1;
      if (data.isAllowViewResultIf) {
        isAllowViewResult = 0;
      } else {
        isAllowViewResult = 1;
      }

      this.axios
        .post("/hysc/test/allowViewResult", {
          id: data.id,
          isAllowViewResult,
        })
        .then(function (response) {
          console.log(response.data.data);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    allowAllViewResult() {
      let isAllowViewResultIf = 0;

      if (this.isAllowViewResult) {
        isAllowViewResultIf = 1;
      } else {
        isAllowViewResultIf = 0;
      }
      let that = this;
      this.axios
        .get("/hysc/test/allowAllViewResult", {
          params: {
            testId: this.projectData.id,
            isAllowViewResult: isAllowViewResultIf,
          },
        })
        .then(function (response) {
          console.log(response.data.data);
          that.getProject();
        })
        .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;
    },
    // 获取列表数据
    getProject() {
      let param = new URLSearchParams();
      let that = this;
 this.detailsData.startTime= ""
              this.detailsData.endTime= ""
      if (this.inputDate) {
              this.detailsData.startTime= this.newDate(this.inputDate[0])
              this.detailsData.endTime= this.newDate(this.inputDate[1])
      }
      param.append("current", this.detailsData.current);
      param.append("size", this.detailsData.size);
      param.append("testId", this.projectData.id);
      param.append("idCard", this.idCardInput);
      param.append("startTime", this.detailsData.startTime);
      param.append("endTime", this.detailsData.endTime);
      this.axios
        .get("/hysc/test/getTestDetailPage", {
          params: param,
        })
        .then(function (response) {
          that.tableData = [];
          if (response.data.data.isAllAllowViewResult == 1) {
            that.isAllowViewResult = true;
          } else {
            that.isAllowViewResult = false;
          }

          for (
            let index = 0;
            index < response.data.data.detailPage.records.length;
            index++
          ) {
            if (
              response.data.data.detailPage.records[index].isAllowViewResult ==
              1
            ) {
              response.data.data.detailPage.records[
                index
              ].isAllowViewResultIf = true;
            } else {
              response.data.data.detailPage.records[
                index
              ].isAllowViewResultIf = false;
            }
          }
          that.tableData = response.data.data.detailPage.records;

          that.total = response.data.data.detailPage.total;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>


<style scoped>
.usernameDatatit {
  display: flex;
  position: absolute;
  width: 80%;
  top: 0px;
  padding-left: 40px;
  padding-top: 23px;
  left: 0px;
}
.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;
}
.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;
}
.disF {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-left: 45%;
}
.projectManagement {
  height: 100vh;
  box-sizing: border-box;
  overflow-x: auto;
}
.detailsInt .m-2 {
  margin-right: 20px;
}
.projectTopicText .projectTopicCon > .ewm {
  padding-top: 0px;
  padding-left: 0px;
  flex: 1;
  padding-right: 30px;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
}
.yunx {
  display: flex;
  align-items: center;
}
.projectTopicText .projectTopicCon > .ewm > img {
  height: 100px;
  width: 100px;
}
.projectTopicTable {
  margin-top: 30px;
}

.projectTopicText .tit {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1b2125;
  margin-top: 50px;
  line-height: 22px;
  padding-left: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #1b2125;
}
.projectTopicCon {
  width: 100%;
  height: 157px;
  padding-top: 30px;
  display: flex;
  background: #f8fafb;
  border-radius: 3px;
  border: 1px solid #dde3e8;

  margin-top: 50px;
}
.projectTopicCon > div {
  display: flex;
}
.projectTopicCon > :nth-child(1) {
  padding-left: 30px;
}
.projectTopicCon > :nth-child(2) {
  padding-left: 30px;
  padding-top: 60px;
}
.projectTopicCon > div > .projectTopicText {
  margin-right: 120px;
}
.projectTopicText > :nth-child(1) {
  width: 80px;
  height: 26px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #8e8e8e;
  line-height: 26px;
}
.projectTopicText > :nth-child(2) {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #8e8e8e;
  line-height: 26px;
}
.projectTopicCon > :nth-child(2) > p {
  margin-right: 60px;
}
.projectTopicCon > :nth-child(2) > :nth-child(1) {
  margin-right: 0px;
}
.projectTopicA {
  width: 100%;
  height: auto;
  margin-top: 30px;
  background: #f8fafb;
  border-radius: 3px;
  border: 1px solid #dde3e8;
}
.projectTopicA {
  box-sizing: border-box;
  padding: 30px;
}
.projectTopicATie {
  display: flex;
}
.projectTopicATie > p {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1b2125;
  margin-right: 60px;
  line-height: 22px;
}
.buttonCss {
  width: 100px;
  height: 32px;
  color: #fff;
  background: #0544a4;
  box-shadow: 0px 2px 7px 0px rgba(120, 137, 149, 0.25);
  border-radius: 3px;
  border: none;
}
.projectTopicAButton > .buttonCss {
  margin-right: 20px;
}
.projectTopicAButton {
  display: flex;

  margin-top: 30px;
}
.projectTopicAButton > .projectTopicAButtonSearch {
  margin-right: 60px;
}
.projectTopicAButtonSearch {
  display: flex;
}
.projectTopicAButtonSearch button {
  margin-left: 20px;
}

.projectTopicATie > .topicType {
  border-bottom: 2px solid #0544a4;
  color: #0544a4;
}
.detailsInt {
  display: flex;
}
</style>
