<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-select
              v-model="value"
              class="m-2"
              placeholder="Select"
              size="large"
            >
              <el-option
                v-for="item in selectClassData"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="value"
              class="m-2"
              placeholder="Select"
              size="large"
            >
              <el-option
                v-for="item in selectClassData1"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="value"
              class="m-2"
              placeholder="Select"
              size="large"
            >
              <el-option
                v-for="item in selectClassData2"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="value"
              class="m-2"
              placeholder="Select"
              size="large"
            >
              <el-option
                v-for="item in selectClassData3"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>


               <el-input
              v-model="phoneInt"
              placeholder="请输入手机号"
              class="input-with-select m-2"
              style="width: 340px"
                 size="large"
            >
            
            </el-input>
            <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="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.age"
                    @change="testStatus(scope.row)"
                  />
                </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="open(scope)"
                  >
                    删除
                  </el-button>

                  <el-button
                    type="text"
                    size="small"
                    @click.prevent="editTitle(scope)"
                  >
                    编辑
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <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>
    <!-- // 题型1 -->
  </div>
</template>

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

export default {
  components: {
    NavLeft,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      total: "",
      selectClassData: [],
      selectClassData1: [],
      selectClassData2: [],
      selectClassData3: [],
      detailsData: {
        current: "1",
        size: "10",
      },
      projectData: {},
    };
  },
  mounted() {
    this.projectData = JSON.parse(localStorage.detailsData);
    this.allowAllViewResult();
    this.addCation();
    this.getProject();
  },
  methods: {
    // 分页
    handleCurrentChange(data) {
      this.detailsData.current = data;
      this.getProject();
    },

    // 搜索
    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");
      console.log(123);
      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.age) {
        isAllowViewResult = 1;
      } else {
        isAllowViewResult = 0;
      }
      console.log({
        id: data.id,
        isAllowViewResult,
      });
      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() {
      this.axios
        .get("/hysc/test/allowAllViewResult", {
          testId: this.projectData.id,
        })
        .then(function (response) {
          console.log(response.data.data);
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    // 获取列表数据
    getProject() {
      let param = new URLSearchParams();
      let that = this;
      param.append("current", this.detailsData.current);
      param.append("size", this.detailsData.size);
      param.append("testId", this.projectData.id);

      this.axios
        .get("/hysc/test/getTestDetailPage", {
          params: param,
        })
        .then(function (response) {
          console.log(response.data,"12aaaaa3");
          that.tableData = response.data.data.detailPage.records;
          that.total = response.data.data.detailPage.total;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>


<style scoped>
.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;
}

.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>
