<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <template v-slot:header>
            <div class="clearfix">
              <span>个人信息</span>
            </div>
          </template>
          <div>
            <div class="text-center">
              <img
                :src="userStore.avatar"
                style="width: 120px; height: 120px; border-radius: 50%"
              />
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="user" />用户姓名
                <div class="pull-right">{{ state.user.nickName }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" />手机号码
                <div class="pull-right">{{ state.user.phonenumber }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="email" />用户邮箱
                <div class="pull-right">{{ state.user.email }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="tree" />所属部门
                <div class="pull-right" v-if="state.user.dept">
                  {{ state.user.dept.deptName }} / {{ state.postGroup }}
                </div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="peoples" />所属角色
                <div class="pull-right">{{ state.roleGroup }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" />创建日期
                <div class="pull-right">{{ state.user.createTime }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <PanelGroup :totalList="totalList" />
        <!-- 统计柱状图 -->
        <div class="echarts_box">
          <div
            v-hasRole="['admin', 'associationemployee']"
            class="select_company"
          >
            <p>选择保险公司</p>
            <el-select
              v-model="queryParams.deptIds[0]"
              placeholder="请选择保险公司"
              style="width: 240px"
              @change="getList"
            >
              <el-option
                v-for="item in deptOptions"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId"
              />
            </el-select>
          </div>
          <div ref="chartRef" style="width: 100%; height: 400px"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import useUserStore from "@/store/modules/user";
import { getUserProfile } from "@/api/system/user";
import { getStatistics } from "@/api/index";
import PanelGroup from "@/components/PanelGroup";
import { listDept } from "@/api/system/dept";
import { onMounted } from "vue";
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const chartRef = ref(null);
const listData = ref([]);
const totalList = ref({
  0: 0,
  1: 0,
  2: 0,
  3: 0,
});
const xList = ref([]);
const company = ref("");
const option = ref({});
const deptOptions = ref([]);
const queryParams = reactive({
  deptIds: [""],
  type: 1,
  startTime: proxy.parseTime(
    new Date().setFullYear(new Date().getFullYear() - 1)
  ),
  endTime: proxy.parseTime(new Date()),
});
const state = reactive({
  user: {},
  roleGroup: {},
  postGroup: {},
});

onMounted(() => {
  getList();
  if (proxy.$auth.hasRoleOr(["admin", "associationemployee"])) {
    getDeptList();
  }
});

/** 查询部门列表 */
const getDeptList = () => {
  listDept().then((response) => {
    deptOptions.value = response.data.filter((item) => item.parentId === 100);
  });
};
function getUser() {
  getUserProfile().then((response) => {
    state.user = response.data;
    state.roleGroup = response.roleGroup;
    state.postGroup = response.postGroup;
  });
}
const showText = (index) => {
  let obj = {
    0: "未承接",
    1: "已承接",
    2: "未完成",
    3: "已完成",
  };
  return obj[index];
};
// 获取统计数据
const getList = async () => {
  const { data } = await getStatistics(queryParams);
  xList.value = data?.map((item) => item.month);
  let newData = data?.map((data) => data.statisticsVo[0]);
  let newArr = newData?.map((item) => {
    return [
      item.toBeUndertaken,
      item.undertaken,
      item.notCompleted,
      item.completed,
    ];
  });
  const arrList = [[], [], [], []];
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 13; j++) {
      arrList[i]?.push(newArr[j][i]);
      totalList.value[i] += newArr[j][i];
    }
  }
  listData.value = arrList.map((child, index) => {
    return {
      name: showText(index),
      type: "bar",
      emphasis: {
        focus: "series",
      },
      data: child,
    };
  });
  company.value = data[0]?.statisticsVo[0]?.deptName;
  init();
};

const init = () => {
  const myChart = proxy.echarts.init(chartRef.value);
  option.value = {
    color: ["#7f36fe", "#36a3f7", "#f4516c", "#34bfa3"],
    title: {
      text: company.value + `一年内数据统计`,
      x: "center",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      x: "right",
      data: ["未承接", "已承接", "未完成", "已完成"],
    },
    xAxis: [
      {
        type: "category",
        axisTick: { show: false },
        data: xList.value,
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: listData.value,
  };
  myChart.setOption(option.value);
};
getUser();
</script>

<style lang="scss" scoped>
.select_company {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 18px;
  color: #666;
}
</style>