<template>
  <div class="roolcallDetail">
    <div class="header">
      <div class="top">
        <span class="title">学生档案</span> <span class="updateTime">更新时间：{{ formData.createTime }}</span>
      </div>
      <div class="topContent">
        <el-row>
          <el-col :span="4" :offset="2">
            <div class="left">
              <el-image
                class="avatar"
                style="width: 80px; height: 80px"
                :src="formData.faces?.[0]?.faceUrl"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[formData.faces?.[0]?.faceUrl]"
                :initial-index="4"
                fit="cover"
              />
              <span class="name"
                >{{ formData.name }}
                <Male class="gender GENDER_MALE" v-if="formData.gender == 'GENDER_MALE'"></Male>
                <Female class="gender GENDER_FEMALE" v-if="formData.gender == 'GENDER_FEMALE'"></Female>
              </span>

              <span class="personId" :title="formData.personId">编号：{{ formData.personId }}</span>
              <!-- <el-tag type="primary">学霸型</el-tag> -->
            </div></el-col
          >
          <el-col :span="16">
            <div class="right">
              <el-row>
                <el-col :span="6">
                  <span v-if="formData.name"
                    >姓名拼音：{{ pinyin(formData.name, { toneType: "none", type: "array" }).flat().join(" ") }}</span
                  ></el-col
                >
                <el-col :span="6"
                  ><span>姓名：{{ formData.name }}</span></el-col
                >

                <el-col :span="6">
                  <span
                    :title="formData.personId"
                    style="display: block; text-overflow: ellipsis; max-width: 100%; overflow: hidden; white-space: nowrap"
                    >编号：{{ formData.personId }}</span
                  ></el-col
                >

                <el-col :span="6"
                  ><span>性别：{{ genderOptions[formData.gender] }}</span></el-col
                >
                <el-col :span="6"
                  ><span>年龄：{{ formData.age }}</span></el-col
                >

                <el-col :span="6"
                  ><span>联系方式：{{ formData.phone }}</span>
                </el-col>

                <el-col :span="6"
                  ><span>所属院系：{{ formData.depName }}</span>
                </el-col>
                <el-col :span="6"
                  ><span>所属专业：{{ formData.majorName }}</span>
                </el-col>
                <el-col :span="6"
                  ><span>所属班级：{{ formData.personSetName }}</span>
                </el-col>
                <el-col :span="6"
                  ><span>寝室名称：{{ formData.dormitoryName }}</span>
                </el-col>
              </el-row>
            </div></el-col
          >
        </el-row>
      </div>
    </div>
    <div class="content">
      <el-row>
        <el-col :span="10" :offset="2">
          <div class="labelAtteribute">
            <!-- <p class="labelAtteribute-item">
              <span class="laberAttrName">
                <span class="icon"><svg-icon icon="ant-design:like-outlined" class="like-outlined" /></span>总评分</span
              >
              <span class="laberAttrValue">95分</span>
            </p>
            <p class="labelAtteribute-item">
              <span class="laberAttrName">
                <span class="icon"><svg-icon icon="ant-design:like-outlined" class="like-outlined" /></span>总学分</span
              ><span class="laberAttrValue">93分</span>
            </p> -->
            <p class="labelAtteribute-item" v-for="(item, index) in state.laberAttrName" :key="index">
              <span class="laberAttrName">{{ item }}：</span><span class="laberAttrValue">{{ state.laberAttrValue[index] }}</span
              >次
            </p>
          </div>
        </el-col>
        <el-col :span="10">
          <div ref="chartEl" style="width: 100%; height: 500px"></div>
        </el-col>
      </el-row>
    </div>
    <div class="content modeContent2">
      <div class="titleParent">学习过程情况分析</div>
      <el-row :gutter="40">
        <el-col :span="9" :offset="2">
          <div class="situation attendanceStatus">
            <div class="top">
              <span class="title">出勤情况分析</span>
              <s-select
                v-model="state.attendanceTime"
                :clearable="false"
                :options="state.options"
                style="width: 100px"
                @change="getStuAttendance"
              ></s-select>
            </div>
            <div class="contentBox">
              <div class="tip">
                <span>{{ state.attendance.msg }}</span>
              </div>
              <div class="box">
                <div ref="chartEl2" style="width: 100%; height: 100%"></div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="11">
          <div class="situation schoolStatus">
            <div class="top">
              <span class="title">出校访学情况</span>
              <s-select
                v-model="state.leavesSchTime"
                :clearable="false"
                :options="state.options"
                style="width: 100px"
                @change="getStuLeave"
              ></s-select>
            </div>
            <div class="contentBox">
              <div class="tip">
                <span>{{ state.outSchool.msg }}</span>
              </div>
              <div class="box">
                <el-table height="400" :data="state.outSchool.data" style="width: 100%">
                  <el-table-column width="40">
                    <template #default="{ row }">
                      <div style="display: flex; align-items: center" :row="row">
                        <span style="display: inline-block; width: 10px; height: 10px; background: #175bfe"></span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="tick" label="时间" />
                  <el-table-column prop="personName" label="姓名" />
                  <el-table-column prop="personSetName" label="班级" />
                  <el-table-column prop="snapshotUrl" label="图片">
                    <template #default="{ row }">
                      <el-image
                        style="width: 60px; height: 60px"
                        :src="row.snapshotUrl"
                        :preview-teleported="true"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                        :preview-src-list="[row.snapshotUrl]"
                        fit="cover"
                      />
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content modeContent2">
      <el-row :gutter="40">
        <el-col :span="20" :offset="2">
          <div class="situation attendanceStatus">
            <div class="top">
              <span class="title">图书馆使用情况</span>
              <s-select
                v-model="state.libraryTime"
                :clearable="false"
                :options="state.options"
                style="width: 100px"
                @change="getStuLibrary"
              ></s-select>
            </div>
            <div class="contentBox">
              <div class="tip">
                <span>每周平均使用图书馆5次，周六、周日使用时间较长，与班级其他学生相较为频繁</span>
              </div>
              <div class="box">
                <div ref="chartEl3" style="width: 100%; height: 100%"></div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content modeContent2">
      <el-row :gutter="40">
        <el-col :span="20" :offset="2">
          <div class="situation attendanceStatus">
            <div class="top">
              <span class="title">一卡通消费情况</span>
              <s-select
                v-model="state.oneCardTime"
                :clearable="false"
                :options="state.options"
                style="width: 100px"
                @change="getOneCardSolution"
              ></s-select>
            </div>
            <div class="contentBox">
              <div class="tip">
                <span>{{ state.oneCard.msg }}</span>
              </div>
              <div class="box">
                <div ref="chartEl4" style="width: 100%; height: 100%"></div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts" name="ViolationPortraitDetail">
import { userManagePersonnelApi, portraitSummaryApi } from "@/api";
import { pinyin } from "pinyin-pro";
import * as echarts from "echarts";
const route = useRoute();
const formData = ref<any>({}); //班级人员列表
const chartEl = ref(null);
const chartEl2 = ref(null);
const chartEl3 = ref(null);
const chartEl4 = ref(null);
const state: any = reactive({
  laberAttrName: [],
  laberAttrValue: [],
  attendanceTime: "ThisWeek",
  leavesSchTime: "ThisWeek",
  libraryTime: "ThisWeek",
  oneCardTime: "ThisWeek",
  options: [
    {
      label: "本周",
      value: "ThisWeek"
    },
    {
      label: "上周",
      value: "LastWeek"
    },
    {
      label: "本月",
      value: "ThisMonth"
    }
  ],
  weekDates: [],
  attendance: {}, //出勤情况
  outSchool: {}, //出校情况
  library: {}, //图书馆使用情况
  oneCard: {} //一卡通消费情况
});
const genderOptions = ref<any>({
  GENDER_UNKNOWN: "未知",
  GENDER_MALE: "男",
  GENDER_FEMALE: "女"
});
const getDetail = () => {
  userManagePersonnelApi.detail({ id: route.query.personId }).then((res: any) => {
    formData.value = res.data;
  });
  /* 标签属性 */
  portraitSummaryApi.getStudentDetail({ id: route.query.personId }).then((res: any) => {
    state.laberAttrName = res.data.label;
    state.laberAttrValue = res.data.value;
    getLaberAttrCharts(res.data.label, res.data.value);
  });
  /* 出勤情况 */
  getStuAttendance();
  /* 出校情况 */
  getStuLeave();
  /* 图书馆使用情况 */
  getStuLibrary();
  /* 一卡通消费情况 */
  getOneCardSolution();
};
/* chart数据处理 */
const handleDate = (label: any, value: any, key: any = "") => {
  let data: any = [];
  label.forEach((item: any, index: number) => {
    data.push({
      value: value[index],
      name: item + key
    });
  });
  return data;
};
/* 出校情况--请求  */
const getStuLeave = () => {
  portraitSummaryApi.getStudentOutSchool({ id: route.query.personId, searchType: state.leavesSchTime }).then((resp: any) => {
    console.log(resp, "...........出校情况");
    state.outSchool = resp.data;
  });
};
/* 图书馆使用情况--请求 */
const getStuLibrary = () => {
  portraitSummaryApi.getStudentLibrary({ id: route.query.personId, searchType: state.libraryTime }).then((resp: any) => {
    getLibraryCharts(resp.data.label, resp.data.value);
  });
};
/* 一卡通消费情况--请求 */
const getOneCardSolution = () => {
  portraitSummaryApi.getStudentCanteen({ id: route.query.personId, searchType: state.oneCardTime }).then((resp: any) => {
    console.log(resp, "...........");
    state.oneCard = resp.data;
    getOneCardCharts(resp.data.label, resp.data.value);
  });
};

/* 出勤情况分析--请求 */
const getStuAttendance = () => {
  portraitSummaryApi.getStudentAttendance({ id: route.query.personId, searchType: state.attendanceTime }).then((resp: any) => {
    let value = handleDate(resp.data.label, resp.data.value, "");
    state.attendance = resp.data;
    getAttendanceCharts(resp.data.label, value);
  });
};
/* 标签属性--图表 */
const getLaberAttrCharts = (nameArr: any, valueArr: any) => {
  let nameObj: any = [];
  nameArr.map((item: any) => {
    nameObj.push({
      name: item
      // max: 30
    });
  });
  const chart = echarts.init(chartEl.value);
  let option = {
    backgroundColor: "#fff",
    color: ["rgba(0,183,238, 1)", "rgba(86,199,60, 1)"],
    tooltip: {
      show: true,
      trigger: "item",
      extraCssText: "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;"
    },
    radar: {
      center: ["50%", "50%"],
      radius: "70%",
      startAngle: 90,
      splitNumber: 10,
      // shape: "circle",
      splitArea: {
        areaStyle: {
          color: ["#fff", "rgba(204,204,204,0.3)"].reverse()
        }
      },
      axisLabel: {
        show: false,
        fontSize: 20,
        color: "#000",
        fontStyle: "normal",
        fontWeight: "normal"
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#E38F8F"
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#e6e6e6"
        }
      },
      axisName: {
        formatter: "{value}",
        color: "#333"
      },
      indicator: nameObj
    },

    series: [
      {
        name: "标签属性",
        type: "radar",
        symbol: "circle",
        symbolSize: 9,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "#f73131"
              },
              {
                offset: 1,
                color: "#f73131"
              }
            ],
            false
          )
        },
        itemStyle: {
          color: "#f73131",
          borderColor: "#fff",
          borderWidth: 2
        },
        lineStyle: {
          color: "#E38F8F",
          width: 2
        },
        data: [valueArr]
      }
    ]
  };

  chart.setOption(option);
  window.addEventListener("resize", function () {
    chart.resize();
  });
};
/* 出勤情况分析-图表 */
const getAttendanceCharts = (label: any, value: any) => {
  const chart2 = echarts.init(chartEl2.value);
  var giftImageUrl =
    "data:image/png;base64, ";
  let option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    graphic: {
      elements: [
        {
          type: "image",
          style: {
            image: giftImageUrl,
            width: 30,
            height: 30
          },
          left: "center",
          top: "42%"
        }
      ]
    },
    title: {
      text: "出勤率分析",
      left: "center",
      top: "50%",
      padding: [10, 0],

      color: "#175BFE",
      fontSize: 14,
      align: "center"
    },
    legend: {
      orient: "horizontal",
      icon: "circle",
      top: 20,
      x: "center",
      data: label
    },
    color: ["#175BFE", "#F4B91E", "#816AF6", "#13C8CB"],
    series: [
      {
        name: "人员类型",
        type: "pie",
        radius: ["43%", "55%"],
        labelLine: {
          show: true,
          length: 20,
          length2: 20,
          lineStyle: {
            width: 2
          }
        },
        label: {
          show: true,
          formatter: "{d}%"
        },
        data: value
      }
    ]
  };
  chart2.setOption(option);
  window.addEventListener("resize", function () {
    chart2.resize();
  });
};
/* 图书馆使用情况-图表 */
const getLibraryCharts = (label: any, value: any) => {
  const chart3 = echarts.init(chartEl3.value);
  let option = {
    tooltip: {},
    xAxis: {
      type: "category",
      data: label
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: value,
        type: "line"
      }
    ]
  };
  chart3.setOption(option);
  window.addEventListener("resize", function () {
    chart3.resize();
  });
};
/* 一卡通消费情况--图表 */
const getOneCardCharts = (label: any, value: any) => {
  const chart4 = echarts.init(chartEl4.value);
  var emphasisStyle = {
    itemStyle: {
      shadowBlur: 10,
      shadowColor: "rgba(0,0,0,0.3)"
    }
  };
  let option = {
    legend: {
      top: "5%",
      data: ["食堂"]
    },
    xAxis: {
      data: label,
      name: "时间",
      axisLine: { onZero: true },
      splitLine: { show: false },
      splitArea: { show: false }
    },
    tooltip: {},
    yAxis: {
      name: "金额"
    },
    grid: {
      bottom: "10%"
    },
    color: ["#175CFF", "#15C9CA", "#F9B71D", "#9EDB1C"],
    series: [
      {
        name: "食堂",
        barWidth: 20,
        type: "bar",
        stack: "one",
        emphasis: emphasisStyle,
        data: value,
        label: {
          show: true,
          position: "insideBottom",
          formatter: "{c}",
          color: "#000"
        }
      }
    ]
  };
  chart4.setOption(option);
  window.addEventListener("resize", function () {
    chart4.resize();
  });
};
onMounted(() => {
  getDetail();
});
</script>
<style lang="scss" scoped>
.roolcallDetail {
  .header {
    box-sizing: border-box;
    width: 100%;
    padding-bottom: 20px;
    background: #ffffff;
    .top {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 80px;
      padding: 10px 0 20px;
      border-bottom: 2px solid #f3f3f3;
      .title {
        margin-bottom: 12px;
        font-size: 24px;
        font-weight: 600;
        color: #333333;
      }
      .updateTime {
        font-size: 14px;
      }
    }
    .topContent {
      padding: 20px 0 25px;
      .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        .avatar {
          margin-bottom: 10px;
          border-radius: 50%;
        }
        .name {
          margin-bottom: 10px;
          font-size: 18px;
          color: #333333;
          .gender {
            width: 18px;
            &.GENDER_MALE {
              color: #0a7df3;
            }
            &.GENDER_FEMALE {
              color: #f73131;
            }
          }
        }
        .personId {
          margin-bottom: 10px;
          font-size: 14px;
          display: block;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          max-width: 90%;
        }
      }
      .right {
        width: 100%;
        .el-row {
          height: 100%;
          .el-col {
            height: 50px;
            line-height: 50px;
          }
        }
      }
    }
  }
  .content {
    margin-top: 20px;
    background: #ffffff;
    .labelAtteribute {
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      padding-top: 40px;
      .labelAtteribute-item {
        box-sizing: border-box;
        width: calc(50% - 30px);
        height: 50px;
        margin-right: 30px;
        line-height: 50px;
        text-align: center;
        border: 2px solid #f2f2f2;
        .laberAttrValue {
          margin-right: 5px;
          color: #f27078;
        }

        // &:nth-child(1),
        // &:nth-child(2) {
        //   display: flex;
        //   align-items: center;
        //   justify-content: space-between;
        //   padding: 0 40px;
        //   .laberAttrName {
        //     display: flex;
        //     align-items: center;
        //     font-size: 14px;
        //   }
        //   .icon {
        //     display: inline-block;
        //     display: flex;
        //     align-items: center;
        //     justify-content: center;
        //     width: 30px;
        //     height: 30px;
        //     margin-right: 15px;
        //     background: #ffffff;
        //     border-radius: 50%;
        //   }
        // }
        // &:nth-child(1) {
        //   background: rgb(60 126 221 / 10%);
        //   .like-outlined,
        //   .laberAttrValue {
        //     font-weight: 600;
        //     color: rgb(60 126 221);
        //   }
        // }
        // &:nth-child(2) {
        //   background: rgb(243 169 148 / 20%);
        //   .like-outlined,
        //   .laberAttrValue {
        //     font-weight: 600;
        //     color: rgb(243 169 148);
        //   }
        // }
        // &:nth-child(2n) {
        //   margin-right: 0;
        // }
      }
    }
  }
  .modeContent2 {
    padding-bottom: 30px;
    .titleParent {
      width: 100%;
      height: 80px;
      margin-bottom: 25px;
      font-size: 20px;
      font-weight: 600;
      line-height: 80px;
      color: #333333;
      text-align: center;
      border: 2px solid #f2f2f2;
    }
    .situation {
      width: 100%;
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        .title {
          font-size: 18px;
          font-weight: 600;
          line-height: 60px;
        }
      }
      .contentBox {
        height: 450px;
        .tip {
          height: 50px;
          background: #eef1f6;
          span {
            padding-left: 12px;
            font-size: 14px;
            line-height: 50px;
            border-left: 3px solid #3c7edd;
          }
        }
        .box {
          height: calc(100% - 50px);
          border: 2px solid #f2f2f2;
        }
      }
    }
  }
}
</style>
