<template>
  <Dialog v-model="visible" diaTitle="工作负载详情" width="80%" height="70%" @close="closeFun">
    <div class="table-content">
      <div class="filter-box">
        <el-radio-group v-model="radioData" @change="changeRadioDataFun">
          <el-radio-button label="表格" value="table" />
          <el-radio-button label="图表" value="chart" />
        </el-radio-group>
      </div>
      <div class="content-inner" v-if="radioData === 'table'">
        <BaseTable
          :fullHeight="true"
          ref="workloadTableRef"
          :tableName="'PROJECT_TASK_WORKLOAD'"
          :hidePagination="true"
        >
          <template #exeStatus="{ row }">
            <StatusDot
              :status="getTaskExeStyleClass(row.exeStatus)"
              :title="
                TASK_PROCESS_STATUS_OBJ[row.exeStatus as keyof typeof TASK_PROCESS_STATUS_OBJ]
              "
            />
          </template>
          <template #achieveStatus="{ row }">
            <StatusDot
              :status="getTaskAchieveStyleClass(row.achieveStatus)"
              :title="
                TASK_CALCULATE_STATUS_OBJ[
                  row.achieveStatus as keyof typeof TASK_CALCULATE_STATUS_OBJ
                ] || '未分析'
              "
            />
          </template>
          <template #progress="{ row }"> {{ row.progress || 0 }}% </template>
          <template #approvalStatus="{ row }">
            <StatusDot
              :status="
                getApproveStyleClass(row.approvalStatus || TASK_APPROVE_STATUS_ENUM.NOT_APPROVED)
              "
              :title="
                TASK_APPROVE_STATUS.O[row.approvalStatus || TASK_APPROVE_STATUS_ENUM.NOT_APPROVED]
              "
            >
            </StatusDot>
          </template>
        </BaseTable>
      </div>
      <div class="content-inner" v-else>
        <EchartCard
          title=""
          ref="workloadChartRef"
          :barType="'barChart'"
          :chartsId="'workload-chart'"
          @refresh="initWorkloadChartFun"
        ></EchartCard>
      </div>
    </div>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue';
import Dialog from '@/components/common/dialog/index.vue';
import { listTaskWorkDaysApi } from '@/api/project/task';
import BaseTable from '@/components/common/table/baseTable.vue';
import {
  getApproveStyleClass,
  getTaskAchieveStyleClass,
  getTaskExeStyleClass,
} from '@/components/common/statusDot/statusMap';
import {
  TASK_APPROVE_STATUS_ENUM,
  TASK_CALCULATE_STATUS_OBJ,
  TASK_PROCESS_STATUS_OBJ,
} from '@/utils/enum/task';
import StatusDot from '@/components/common/statusDot/index.vue';
import { useDict } from '@/utils/useDict';
import EchartCard from '@/components/common/echartCard/index.vue';

const { TASK_APPROVE_STATUS } = useDict('TASK_APPROVE_STATUS');
const emit = defineEmits(['update:modelValue', 'confirm']);

interface Props {
  modelValue: boolean;
  list: any[];
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  list: () => [],
});
const visible = ref(false);
const tableData = ref<any>([]);
const radioData = ref('table');
const workloadTableRef = ref();
const workloadChartRef = ref();

const changeRadioDataFun = async () => {
  if (radioData.value === 'table') {
    nextTick(() => {
      workloadTableRef.value.setDataFun(tableData.value);
    });
  } else {
    await initWorkloadChartFun();
  }
};
const getUserWorkLoadDataFun = async () => {
  const taskIds = tableData.value.map((item: any) => {
    return item.uuid;
  });
  const param = {
    taskIds,
  };

  const xData: any = [];
  const seriesData: any = [];
  const datas: any = [];

  const res: any = await listTaskWorkDaysApi(param);
  if (res && res.code === 200) {
    res.data.forEach((item: any) => {
      xData.push(item.taskName);
      datas.push(item.days);
    });
    seriesData.push({
      type: 'bar',
      name: '工作负载(小时)',
      barWidth: '30%',
      // name: res.data[i].userName,
      data: datas,
    });

    return {
      xData,
      seriesData,
    };
  } else {
    return {
      xData,
      seriesData,
    };
  }
};

const initWorkloadChartFun = async () => {
  const { xData, seriesData } = await getUserWorkLoadDataFun();

  workloadChartRef.value.commonChartRef.disposeEchartsByKey('chart-1');
  workloadChartRef.value.commonChartRef.option = {
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      show: false,
      top: '0%',
      left: 'center',
    },
    grid: {
      top: '10%',
      bottom: '10%',
      left: '5%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
      data: xData,
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: function (value: any) {
          return value + 'h';
        },
      },
    },
    dataZoom: xData.length > 4 ? [] : null,
    series: seriesData,
  };
  workloadChartRef.value.commonChartRef.initChart();
};

watch(
  () => props.modelValue,
  (val: boolean) => {
    radioData.value = 'table';
    tableData.value = [...props.list];
    visible.value = val;
    changeRadioDataFun();
  }
);

const closeFun = () => {
  visible.value = false;
  tableData.value = [];
  emit('update:modelValue', false);
};
</script>

<style lang="scss" scoped>
.table-content {
  width: 100%;
  height: 100%;
  // height: 600px;

  .filter-box {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .content-inner {
    width: 100%;
    height: calc(100% - 40px);
  }
}
</style>
