<template>
  <div class="disFlex">
    <NavLeft />
    <div class="consumer">
      <div class="pull-title">
        <ul class="title-item">
          <li class="cur">用户管理</li>
        </ul>
      </div>
      <div class="consumer-seach">
        <ul class="consumer-seach-item">
          <li>
            <el-input
              v-model="consumerData.keywordt"
              placeholder="请输入手机号"
              class="input-with-select"
              style="width: 340px"
            >
              <template #prepend>
                <el-select
                  v-model="consumerData.type"
                  placeholder="手机号"
                  style="width: 88px"
                >
                  <el-option label="手机号" value="手机号"></el-option>
                  <el-option label="微信号" value="微信号"></el-option>
                  <el-option label="钉钉号" value="钉钉号"></el-option>
                </el-select>
              </template>
            </el-input>
          </li>
          <li>
            <el-date-picker
              v-model="consumerData.Time"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </li>
          <el-button class="seach-btn" @click="queryConsumer()"
            ><img src="../assets/search-btn.png" alt="" />查询
          </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" prop="wxMiniShowname" label="微信" />
          <el-table-column
            align="center"
            prop="dingdingShowname"
            label="钉钉"
          />
          <el-table-column align="center" prop="createTime" label="注册时间" />
          <el-table-column align="center" #default="scope" label="操作">
            <el-button type="text" size="small" @click="queryName(scope)"
              >用户详情</el-button
            >
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="consumer-pagination">
        <el-pagination
          background
          v-model:currentPage="currentPage3"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>

    <el-drawer
      v-model="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <div class="elementUl">
        <div class="usernameDatatit">
          <p>用户信息</p>
          <p>测评报告</p>
        </div>

        <div v-if="usernameDataIf" 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="" alt="" />
              <p>{{ usernameData.wxMiniShowname }}</p>
            </div>
            <div class="wxDdCon">
              <img src="" alt="" />
              <p></p>
            </div>
          </div>
        </div>

        <div v-else class="reportList">
          <div class="reportListCon">
            <p>MBTI人格类型测试</p>
            <p><span> 测试时间</span> <span> 2021.02.23 12:32:34</span></p>
            <p><span> 创建部门</span> <span> 人事部</span></p>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import NavLeft from "../components/nav.vue";
export default {
  components: {
    NavLeft,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      input: "",
      select: "",
      drawer: false,
      value: "",
      Time: "",
      usernameData: {},
      tableData: [],
      ReportListData: [],
      total: 1,
      usernameDataIf: false,
      consumerData: {
        current: 1,
        keyword: "",
        type: "",
        size: 10,
        endTime: "",
        startTime: "",
      },
    };
  },
  mounted() {
    // 初始化获取数据
    this.getConsumer();
  },
  methods: {
    // 时间格式转换
    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;
    },
    // 查看用户信息
    queryName(data) {
      this.drawer = true;
      console.log(data);
      this.getReportList(data.row);
      this.usernameData = data.row;
    },
    handleCurrentChange(data) {
      this.consumerData.current = data;
      this.getConsumer();
    },
    // 获取列表数据
    getConsumer() {
      let param = new URLSearchParams();
      param.append("current", this.consumerData.current);
      param.append("keyword", this.consumerData.keyword);
      param.append("size", this.consumerData.size);
      param.append("type", this.consumerData.type);
      param.append("endTime", this.consumerData.endTime);
      param.append("startTime", this.consumerData.startTime);
      let that = this;
      this.axios
        .get("/hysc/member/getMemberPage", {
          params: param,
        })
        .then(function (response) {
          console.log(response.data);
          that.tableData = response.data.data.records;
          that.total = response.data.data.total;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    getReportList(id) {
      let param = new URLSearchParams();
      param.append("memberId", id);

      let that = this;
      this.axios
        .get("/hysc/member/getMemberTestList", {
          params: param,
        })
        .then(function (response) {
          console.log(response.data);
          that.ReportListData = response.data.data.records;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    queryConsumer() {
      // 	   consumerData: {
      //     current: 1,
      //     keyword: "",
      //     type: "",
      //     size: 10,
      //     endTime: "",
      //     startTime: "",
      //   },
      console.log(this.consumerData.Time);
      if (this.consumerData.Time) {
        this.consumerData.startTime = this.newDate(this.consumerData.Time[0]);
        this.consumerData.endTime = this.newDate(this.consumerData.Time[1]);
      }
      this.getConsumer();
    },
  },
};
</script>
<style scoped>
.disFlex {
  display: flex;
}
.usernameDatatit {
  display: flex;
  position: absolute;
  width: 100%;
  padding-bottom: 20px;
  top: 0px;
  border-bottom: 1px solid #e4eaee;
  padding-left: 40px;
  padding-top: 23px;
  left: 0px;
}
.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;
  width: 100px;
  line-height: 22px;
}
.consumer {
  width: calc(100% - 260px);
  padding: 50px 60px;
}
.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;
}
</style>
