<template>
  <div class="dashboard_container" v-loading="loading">
    <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)">
      <ContentWrap>
        <el-form class="-mb-15px" :inline="true" label-width="68px">
          <el-form-item label="切换公司" class="w-360px">
            <el-select
              v-model="currentCompanyId"
              style="width: 100%"
              @change="changeCompanyOptions"
            >
              <el-option
                v-for="item in companyOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </ContentWrap>
    </div>
    <!-- 统计卡片区域 -->
    <div class="stat_cards">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="stat_card">
            <div class="stat_item">
              <div class="title_box">
                <div class="stat_label">在职员工总数</div>
                <div class="stat_value">{{ dataObj.activeEmployee }}</div>
              </div>
              <div class="stat_ring" id="empTotalEcharts" style="width: 100px; height: 100px"></div>
              <div class="legend_box">
                <div class="legend_item"
                  ><span class="btn_c color1"></span
                  ><span class="legend_label">劳务员工数</span></div
                >
                <div class="legend_item"
                  ><span class="btn_c color2"></span
                  ><span class="legend_label">正式员工数</span></div
                >
                <div class="legend_item"
                  ><span class="btn_c color3"></span
                  ><span class="legend_label">试用期员工数</span></div
                >
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" v-for="(item, index) in statData" :key="index">
          <div class="stat_card">
            <div class="stat_item">
              <div class="title_box">
                <div class="stat_label">{{ item.label }}</div>
                <div class="stat_value">{{ item.value }}</div>
              </div>
              <div
                class="stat_ring"
                :id="'ring-chart-' + index"
                style="width: 100px; height: 100px"
              ></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 审批与待办区域 -->
    <div class="approval_section">
      <el-row :gutter="20">
        <el-col :span="16">
          <div class="approval_card">
            <div class="left_box">
              <div class="card_header">
                <div>审批流程</div>
                <div class="right_btn_box">
                  <!-- <span class="btn">我的流程</span>
                  <span class="btn">待审批</span>
                  <span class="btn">已审批</span> -->
                  <el-radio-group v-model="radioValue" @change="changeRadio">
                    <el-radio-button label="我的流程" />
                    <el-radio-button label="待审批" />
                    <el-radio-button label="已审批" />
                  </el-radio-group>
                </div>
              </div>
              <div class="approval_list">
                <template v-if="taskData && taskData.length > 0">
                  <div class="approval_item" v-for="(item, index) in taskData" :key="index">
                    <div class="approval_info" v-if="radioValue == '我的流程'">
                      <div class="approval_person">{{
                        item && item.startUser && item.startUser.nickname
                      }}</div>
                      <div class="approval_desc">{{ item.name }}</div>
                    </div>
                    <div class="approval_info" v-else>
                      <div class="approval_person">{{
                        item.processInstance &&
                        item.processInstance.startUser &&
                        item.processInstance.startUser.nickname
                      }}</div>
                      <div class="approval_desc">{{
                        item.processInstance && item.processInstance.name
                      }}</div>
                    </div>
                    <div class="approval_actions" v-if="radioValue == '我的流程'">
                      <template v-if="item.status === 1 && item.tasks?.length > 0">
                        <span
                          ><el-tag type="warning" size="small" class="dsp_btn">审批中</el-tag></span
                        >
                      </template>
                      <!-- 非审批中状态 -->
                      <template v-else>
                        <!-- <el-tag type="warning" size="small" class="dsp_btn">待审批</el-tag> -->
                        <dict-tag
                          :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
                          :value="item.status"
                        />
                      </template>
                      <!-- <el-tag type="warning" size="small" class="dsp_btn">待审批</el-tag> -->
                      <span class="cl_btn" @click="handleDetail(item)">详情</span>
                    </div>
                    <div class="approval_actions" v-if="radioValue == '待审批'">
                      <el-tag type="warning" size="small" class="dsp_btn">待审批</el-tag>
                      <span class="cl_btn" @click="handleAudit(item)">处理</span>
                    </div>
                    <div class="approval_actions" v-if="radioValue == '已审批'">
                      <el-tag type="warning" size="small" class="dsp_btn">已审批</el-tag>
                      <span class="cl_btn" @click="handleAudit(item)">查看</span>
                    </div>
                  </div>
                </template>
                <el-empty v-else class="!py-30px" :image-size="30" description="暂无数据" />
              </div>
            </div>
            <div class="right_box">
              <div class="jx_top_box">
                <div class="box_item">
                  <div class="stat_label">计薪人员</div>
                  <div class="stat_value">{{ dataObj.payrollStaff }}</div>
                </div>
                <div class="box_item box_item1">
                  <div class="stat_label">实发工资</div>
                  <div class="stat_value">￥ {{ dataObj.netSalary }}</div>
                </div>
              </div>
              <div class="bl_bottom_box">
                <div class="zb_box_item">
                  <div class="bmzb">部门占比</div>
                  <div class="item_box item_box1">
                    <template
                      v-if="dataObj.departmentProportion && dataObj.departmentProportion.length > 0"
                    >
                      <div
                        class="progress_box"
                        v-for="(item, index) in dataObj.departmentProportion"
                        :key="index"
                      >
                        <div class="tips"
                          ><span>{{ item.name }}</span
                          ><span>{{ item.total }}({{ item.rate }}%)</span></div
                        >
                        <el-progress :percentage="item.rate" :show-text="false" />
                      </div>
                    </template>
                    <el-empty v-else class="!py-30px" :image-size="30" description="暂无数据" />
                  </div>
                </div>
                <div class="zb_box_item zb_box_item1">
                  <div class="bmzb">项目占比</div>
                  <div class="item_box item_box1">
                    <template
                      v-if="dataObj.projectProportion && dataObj.projectProportion.length > 0"
                    >
                      <div
                        class="progress_box"
                        v-for="(item, index) in dataObj.projectProportion"
                        :key="index"
                      >
                        <div class="tips"
                          ><span>{{ item.projectName }}</span
                          ><span>{{ item.total }}({{ item.rate }}%)</span></div
                        >
                        <el-progress :percentage="item.rate" :show-text="false" />
                      </div>
                    </template>
                    <el-empty v-else class="!py-30px" :image-size="30" description="暂无数据" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="staff_stat_card">
            <div class="box_title">公司人员统计</div>
            <div class="staff_stat_item">
              <div class="stat_label">总员工数</div>
              <div class="stat_value">{{ dataObj.activeEmployee }}</div>
            </div>
            <div class="staff_stat_detail">
              <div class="stat_row">
                <div class="progress_box">
                  <div class="tips"
                    ><span>正式员工</span
                    ><span
                      >{{ dataObj.regularEmployee }}({{ regularPercentage2 * 100 }}%)</span
                    ></div
                  >
                  <el-progress
                    :percentage="regularPercentage2 * 100"
                    :show-text="false"
                    color="#5046e6"
                  />
                </div>
                <div class="progress_box">
                  <div class="tips"
                    ><span>试用期员工</span
                    ><span
                      >{{ dataObj.probationPeriodEmployee }}({{
                        probationPercentage3 * 100
                      }}%)</span
                    ></div
                  >
                  <el-progress
                    :percentage="probationPercentage3 * 100"
                    :show-text="false"
                    color="#fbcd14"
                  />
                </div>
                <div class="progress_box">
                  <div class="tips"
                    ><span>劳务员工</span
                    ><span>{{ dataObj.laborEmployee }}({{ laborPercentage1 * 100 }}%)</span></div
                  >
                  <el-progress
                    :percentage="laborPercentage1 * 100"
                    :show-text="false"
                    color="#9ca3af"
                  />
                </div>
              </div>
              <!-- 其他统计条类似结构，省略重复代码 -->
            </div>
            <div class="gender_ratio">
              <div class="box_title">性别比例</div>
              <div class="gender_box">
                <div class="gender_item">
                  <el-icon><Male /></el-icon>
                  <span>男性</span>
                  <span>{{ dataObj.genderRatio && dataObj.genderRatio[0].malePct }}%</span>
                </div>
                <div class="gender_item">
                  <el-icon><Female /></el-icon>
                  <span>女性</span>
                  <span>{{ dataObj.genderRatio && dataObj.genderRatio[0].femalePct }}%</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 证件与合同到期提醒、生日提醒区域 -->
    <div class="reminder_section">
      <el-row :gutter="20">
        <el-col :span="16">
          <div class="reminder_card">
            <div class="box_title">证件与合同到期提醒</div>
            <div class="reminder_list_box">
              <div class="reminder_list">
                <div class="reminder_type">证件即将到期</div>
                <div
                  class="item_box"
                  v-if="dataObj.documentExpired && dataObj.documentExpired.length > 0"
                >
                  <template v-for="(item, index) in dataObj.documentExpired" :key="index">
                    <empInfoItem
                      :employeeName="item.employeeName"
                      :departName="item.departName"
                      :lastDate="item.endTime"
                      :certificateName="item.certificateName"
                    />
                  </template>
                </div>
                <el-empty v-else class="!py-30px" :image-size="30" description="暂无数据" />
              </div>
              <div class="reminder_list" style="margin-left: 50px">
                <div class="reminder_type">合同即将到期</div>
                <div
                  class="item_box"
                  v-if="dataObj.contractExpiration && dataObj.contractExpiration.length > 0"
                >
                  <template v-for="(item, index) in dataObj.contractExpiration" :key="index">
                    <empInfoItem
                      :employeeName="item.employeeName"
                      :departName="item.departName"
                      :lastDate="item.endTime"
                    />
                  </template>
                </div>
                <el-empty v-else class="!py-30px" :image-size="30" description="暂无数据" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="birthday_card">
            <div class="reminder_list">
              <div class="reminder_type1">生日提醒</div>
              <div
                class="item_box"
                v-if="dataObj.birthdayReminder && dataObj.birthdayReminder.length > 0"
              >
                <template v-for="(item, index) in dataObj.birthdayReminder" :key="index">
                  <empInfoItem
                    :employeeName="item.employeeName"
                    :departName="item.departName"
                    :lastDate="item.birthday"
                    :certificateName="item.certificateName"
                    :isAvatar="true"
                    color="#6b7280"
                  />
                </template>
              </div>
              <el-empty v-else class="!py-30px" :image-size="30" description="暂无数据" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getIntDictOptions, getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { Male, Female } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import * as hrHomeApi from '@/api/hr/home'
import empInfoItem from './empInfoItem.vue'

const { push } = useRouter() // 路由

const activeTab = ref('all')
const loading = ref(false) // 列表的加载中
const dataObj = ref({})
const taskData = ref([])
const radioValue = ref('我的流程')

const contractStatusOptions = getStrDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)

const currentCompanyId = ref()
const companyOptions = ref([])
const getCompanyData = async () => {
  const data = await hrHomeApi.getCompany()
  const arr = data.filter((item) => {
    return item.code != 'top'
  })
  companyOptions.value = arr
  if (arr && arr.length > 0) {
    currentCompanyId.value = arr[0].id
  }
  getDataObj()
  getTaskTodoPage('我的流程')
}
getCompanyData()

const changeCompanyOptions = async (val) => {
  // console.log(val)
  getDataObj()
  getTaskTodoPage(radioValue.value)
}

const changeRadio = async (label) => {
  // console.log(label, radioValue.value)
  getTaskTodoPage(label)
}

const getTaskTodoPage = async (label) => {
  try {
    const obj = {
      pageNo: 1,
      pageSize: 99,
      category: ' HR',
      name: '',
      processDefinitionKey: '',
      deptId: currentCompanyId.value
    }
    if (label === '我的流程') {
      const data = await hrHomeApi.getTaskMyPage(obj)
      taskData.value = data.list
    }
    if (label === '待审批') {
      const data = await hrHomeApi.getTaskTodoPage(obj)
      taskData.value = data.list
    }
    if (label === '已审批') {
      const data = await hrHomeApi.getTaskDonePage(obj)
      taskData.value = data.list
    }
  } finally {
  }
}

/** 处理审批按钮 */
const handleAudit = (row) => {
  push({
    name: 'BpmProcessInstanceDetail',
    query: {
      id: row.processInstance.id,
      taskId: row.id,
      path: '/hr/hrhome'
    }
  })
}

const handleDetail = (row) => {
  push({
    name: 'BpmProcessInstanceDetail',
    query: {
      id: row.id,
      path: '/hr/hrhome'
    }
  })
}
const statData = ref([
  { label: '劳务员工数', value: 248, percentage: 20 },
  { label: '正式员工数', value: 820, percentage: 65.7 },
  { label: '试用期员工数', value: 180, percentage: 14.4 }
])

const laborPercentage1 = ref(0) //劳务员工数
const regularPercentage2 = ref(0) //正式员工数
const probationPercentage3 = ref(0) //试用期员工数
const getDataObj = async () => {
  loading.value = true
  try {
    const obj = {
      deptId: currentCompanyId.value
    }
    const data = await hrHomeApi.getHrHomePageInfo(obj)
    dataObj.value = data
    if (data) {
      createEcharts()
      // laborEmployee //劳务员工数
      // regularEmployee //正式员工数
      // probationPeriodEmployee //试用期员工数
      const total = data.activeEmployee //员工总数
      let percentage1 = parseFloat((data.laborEmployee / total).toFixed(3))
      laborPercentage1.value = percentage1
      let percentage2 = parseFloat((data.regularEmployee / total).toFixed(3))
      regularPercentage2.value = percentage2
      let percentage3 = parseFloat((data.probationPeriodEmployee / total).toFixed(3))
      probationPercentage3.value = percentage3

      statData.value = [
        { label: '劳务员工数', value: data.laborEmployee, percentage: percentage1 * 100 || 0 },
        { label: '正式员工数', value: data.regularEmployee, percentage: percentage2 * 100 || 0 },
        {
          label: '试用期员工数',
          value: data.probationPeriodEmployee,
          percentage: percentage3 * 100 || 0
        }
      ]
      console.log(111, statData.value)

      createEcharts1()
    }

    // total.value = data.total
  } finally {
    loading.value = false
  }
}
const createEcharts = async () => {
  const chartDom = document.getElementById('empTotalEcharts')
  const myChart = echarts.init(chartDom)
  const option = {
    legend: {
      show: false,
      orient: 'horizontal',
      left: '50%',
      top: '2%', // 调整图例位置到顶部
      itemWidth: 10, // 图例标记的图形宽度
      itemHeight: 10, // 图例标记的图形高度
      textStyle: {
        fontSize: 12 // 图例文字大小
      }
    },
    series: [
      {
        name: '员工统计',
        type: 'pie',
        radius: ['62%', '80%'], // 调整环形图的内外半径
        avoidLabelOverlap: false,
        label: {
          show: false, // 隐藏标签
          position: 'center'
        },
        labelLine: {
          show: false // 隐藏标签引导线
        },
        data: [
          {
            value: dataObj.value.laborEmployee,
            name: '劳务员工数',
            itemStyle: { color: '#95a3b8' }
          }, // 蓝色
          {
            value: dataObj.value.regularEmployee,
            name: '正式员工数',
            itemStyle: { color: '#5046e6' }
          }, // 绿色
          {
            value: dataObj.value.probationPeriodEmployee,
            name: '试用期员工数',
            itemStyle: { color: '#fbcd14' }
          } // 黄色
        ]
      }
    ]
  }
  myChart.setOption(option)
}

const createEcharts1 = async () => {
  statData.value.forEach((item, index) => {
    const chartDom = document.getElementById('ring-chart-' + index)
    const myChart = echarts.init(chartDom)
    const option = {
      series: [
        {
          type: 'pie',
          radius: ['70%', '90%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          data: [
            { value: item.percentage, itemStyle: { color: '#6a5acd' } },
            { value: 100 - item.percentage, itemStyle: { color: '#e0e0e0' } },
            // 对于在职员工总数，黄色部分特殊处理
            ...(item.label === '在职员工总数'
              ? [{ value: 5, itemStyle: { color: '#ffd700' } }]
              : [])
          ]
        }
      ]
    }
    myChart.setOption(option)
  })
}

onMounted(() => {
  // getDataObj()
  // getTaskTodoPage('我的流程')
})
</script>

<style lang="less" scoped>
.legend_box {
  position: absolute;
  left: 170px;
  top: 20px;
  .legend_item {
    .btn_c {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 2px;
      margin-right: 6px;
    }
    .color1 {
      background: #95a3b8;
    }
    .color2 {
      background: #5046e6;
    }
    .color3 {
      background: #fbcd14;
    }
    .legend_label {
      font-size: 12px;
    }
  }
}
.dashboard_container {
  background-color: #f5f7fa;
  .stat_cards {
    // margin-bottom: 20px;
  }

  .stat_card {
    margin-bottom: 20px;
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .stat_item {
      display: flex;
      flex-direction: column;
      // align-items: center;
      position: relative;
      .stat_ring {
        margin-left: 66px;
      }
      .title_box {
        position: absolute;
        top: 0px;
        left: 0px;
      }
      .stat_value {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
      }
      .stat_label {
        font-size: 12px;
        color: #606266;
        margin-bottom: 3px;
      }
    }
  }

  .approval_section {
    .approval_card {
      background: #fff;
      padding: 20px;
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      display: flex;
      height: 298px;
      .left_box {
        width: 380px;
      }
      .right_box {
        margin-left: 20px;
        .jx_top_box {
          display: flex;
          .box_item {
            width: 200px;
            border-radius: 6px;
            padding: 10px 20px;
            background: #f3f4f6;
          }
          .box_item1 {
            margin-left: 20px;
          }
        }
        .bl_bottom_box {
          display: flex;
          .zb_box_item {
            width: 200px;
            // border-radius: 6px;
            // padding: 10px 20px;
            // background: #f3f4f6;
            .bmzb {
              margin-top: 10px;
            }
            .progress_box {
              margin-top: 16px;
              font-size: 12px;
              .tips {
                display: flex;
                justify-content: space-between;
                margin-bottom: 2px;
              }
            }
          }
          .zb_box_item1 {
            margin-left: 20px;
          }
        }
      }
    }
    margin-bottom: 20px;
    .card_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: bold;
      .right_btn_box {
        font-size: 13px;
        .btn {
          display: inline-block;
          cursor: pointer;
          margin-left: 10px;
          font-size: 12px;
          background: #f3f4f6;
          color: #666;
          padding: 3px 10px;
          border-radius: 4px;
        }
      }
    }
    .approval_item {
      padding: 15px 0 5px 0px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .approval_info {
        flex: 1;
        .approval_person {
          font-size: 16px;
          color: #111827;
        }
        .approval_desc {
          font-size: 14px;
          color: #6b7280;
        }
      }
      .approval_actions {
        margin-left: 20px;
        margin-right: 10px;
        .dsp_btn {
          cursor: pointer;
        }
        .cl_btn {
          display: inline-block;
          cursor: pointer;
          margin-left: 10px;
          font-size: 13px;
          color: #5046e6;
        }
      }
      .approval_task {
        flex: 2;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }

  .staff_stat_card {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 298px;
    .box_title {
      font-size: 16px;
      font-weight: bold;
    }
    .staff_stat_item {
      margin: 16px 0px;
      .stat_value {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 5px;
      }
      .stat_label {
        font-size: 12px;
        color: #606266;
        margin-bottom: 3px;
      }
    }
    .staff_stat_detail {
      .stat_row {
        .progress_box {
          margin-top: 10px;
          font-size: 12px;
          .tips {
            display: flex;
            justify-content: space-between;
            margin-bottom: 2px;
          }
        }
        // display: flex;
        // align-items: center;
        // margin-bottom: 10px;
        // span {
        //   margin-right: 10px;
        // }
      }
    }
    .gender_ratio {
      margin-top: 10px;
      .box_title {
        font-size: 16px;
        font-weight: bold;
      }
      .gender_box {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        .gender_item {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          span {
            margin: 0 5px;
          }
        }
      }
    }
  }

  .reminder_section {
    .reminder_card,
    .birthday_card {
      background: #fff;
      padding: 20px;
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      height: 307px;
      .box_title {
        font-size: 20px;
        font-weight: bold;
      }
      .reminder_list_box {
        display: flex;
        .reminder_list {
          width: 380px;
          .reminder_type {
            font-size: 16px;
            font-weight: bold;
            margin-top: 10px;
          }
        }
      }
      .reminder_type1 {
        font-size: 16px;
        font-weight: bold;
      }
      .reminder_item,
      .birthday_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #ebeef5;
      }
    }
    .birthday_card {
      height: 307px;
    }
  }
}

.item_box,
.approval_list {
  height: 210px;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(230, 231, 238, 0.5) transparent;
}

.item_box::-webkit-scrollbar,
.approval_list::-webkit-scrollbar {
  width: 6px;
}

.item_box::-webkit-scrollbar-track,
.approval_list::-webkit-scrollbar-track {
  background: transparent;
}

.item_box::-webkit-scrollbar-thumb,
.approval_list::-webkit-scrollbar-track {
  background-color: rgba(220, 224, 242, 0.5);
  border-radius: 3px;
}
.item_box1 {
  height: 170px;
}
.approval_list {
  height: 230px;
}
</style>
