<template>
  <div class="project-analysis">
    <report-header
      title="项目进度监控"
      v-model:dateRange="curTimeRange"
      @timeChange="timeChange"
    >
      <t-select
        style="width: 200px"
        :options="serviceOptions"
        v-model="serviceId"
        :keys="{ label: 'name', value: 'id' }"
        filterable
      ></t-select>
    </report-header>
    <div class="page-main">
      <div class="scroll-content">
        <div class="row1 flex items-center">
          <div class="card">
            <div class="title">
              <span class="label">大区项目阶段分布及对比</span>
              <FullscreenIcon
                class="cursor-pointer"
                @click="chart1?.maximize"
                color="#595959"
              />
            </div>
            <div class="chart-wrap">
              <my-chart
                :options="options1"
                @chartClick="chart1Click"
                ref="chart1"
              ></my-chart>
            </div>
          </div>
          <div class="card">
            <div class="title">
              <span class="label">项目进度阶段总体分布占比</span>
            </div>
            <div class="chart-wrap">
              <my-chart :options="options2"></my-chart>
            </div>
          </div>
          <div class="card">
            <div class="title">
              <span class="label">供应商项目阶段分布及对比</span>
              <FullscreenIcon
                class="cursor-pointer"
                @click="chart3?.maximize"
                color="#595959"
              />
            </div>
            <div class="chart-wrap">
              <my-chart
                :options="options3"
                @chartClick="chart3Click"
                ref="chart3"
              ></my-chart>
            </div>
          </div>
        </div>
        <div class="row2">
          <div class="card">
            <div class="title">
              <span class="label">项目燃尽图</span>
            </div>
            <div class="chart-wrap">
              <my-chart :options="options4"></my-chart>
            </div>
          </div>
        </div>
      </div>
    </div>
    <SopDetailDrillDialog
      v-model:visible="showSopDetailDrill"
      :data="sopDetailDrillData"
      :footer="false"
    ></SopDetailDrillDialog>
  </div>
</template>

<script setup name="ProjectAnalysis">
import { ref, computed, onMounted, watch } from 'vue';
import { useRequest } from 'vue-request';
import {
  createCakePieOption,
  createPercentBarOption,
  createLineOption,
} from '@/utils/chart';
import {
  serviceServiceList,
  projectStageAnalysis,
  projectProcessAnalysis,
} from '@/api/report';
import SopDetailDrillDialog from './sop-detail-drill-dialog.vue';
import { FullscreenIcon } from 'tdesign-icons-vue-next';
const chart1 = ref();
const chart3 = ref();
const showSopDetailDrill = ref(false);
const sopDetailDrillData = ref({
  serviceId: '',
  serviceName: '',
  regionId: '',
  supplierId: '',
  regionName: '',
  supplierName: '',
});
const curTimeRange = ref([]);
const timeParams = computed(() => {
  return {
    startTime: new Date(curTimeRange.value[0] + ' 00:00:00').getTime(),
    endTime: new Date(curTimeRange.value[1] + ' 23:59:59').getTime(),
  };
});
const serviceOptions = ref([]);
const serviceId = ref('');
const timeChange = (time) => {
  serviceServiceList(timeParams.value).then((res) => {
    serviceOptions.value = res || [];
    res?.length && (serviceId.value = res[0].id);
  });
};
const sortKeys = ['prepare', 'scan', 'evaluation', 'summary', 'finish'];
const legendData = ['准备', '扫描', '评卷', '收尾', '已完结'];
const {
  data: result1,
  loading: loading1,
  run: run1,
} = useRequest(projectStageAnalysis);
const {
  data: result2,
  loading: loading2,
  run: run2,
} = useRequest(projectStageAnalysis);
const {
  data: result3,
  loading: loading3,
  run: run3,
} = useRequest(projectStageAnalysis);
const {
  data: result4,
  loading: loading4,
  run: run4,
} = useRequest(projectProcessAnalysis);
const options4 = computed(() => {
  let actual = result4.value?.actual || [];
  let plan = result4.value?.plan || [];

  let xData = Array.from(
    new Set([
      ...actual.map((item) => item.datetime),
      ...plan.map((item) => item.datetime),
    ])
  );
  xData.sort();
  let data1 = xData.map((datetime) => {
    let find1 = actual.find((item) => item.datetime == datetime);
    return find1 ? find1.count : 0;
  });
  let data2 = xData.map((datetime) => {
    let find2 = plan.find((item) => item.datetime == datetime);
    return find2 ? find2.count : 0;
  });
  // let data1 = actual.map((item) => {
  //   return xData.includes(item.datetime) ? item.count : 0;
  // });
  // let data2 = plan.map((item) => {
  //   return xData.includes(item.datetime) ? item.count : 0;
  // });
  let sData = [
    { name: '实际', data: data1 },
    { name: '计划', data: data2 },
  ];
  return createLineOption({ xData, sData }, { yAxis: { name: '单位：人/天' } });
});

watch(serviceId, (serviceId) => {
  run1({ serviceId, group: 'REGION' });
  run2({ serviceId, group: 'POPULATION' });
  run3({ serviceId, group: 'SUPPLIER' });
  run4({ serviceId });
});
const options1 = computed(() => {
  let res = result1.value || {};
  let xData = Object.keys(res);

  let originData = Object.values(res).map((item) => {
    return sortKeys.map((v) => item[v] || 0);
  });
  return createPercentBarOption({
    xData: xData,
    originData: originData,
    legendData: legendData,
  });
});
const chart1Click = (params) => {
  let obj = result1.value?.[params.name];
  sopDetailDrillData.value = {
    serviceId: serviceId.value,
    serviceName: serviceOptions.value.find((item) => item.id == serviceId.value)
      ?.name,
    regionId: obj.region_id,
    supplierId: '',
    regionName: params.name,
    supplierName: '',
  };
  showSopDetailDrill.value = true;
};
const chart3Click = (params) => {
  let obj = result3.value?.[params.name];
  sopDetailDrillData.value = {
    serviceId: serviceId.value,
    serviceName: serviceOptions.value.find((item) => item.id == serviceId.value)
      ?.name,
    regionId: '',
    supplierId: obj.supplier_id,
    regionName: '',
    supplierName: params.name,
  };
  showSopDetailDrill.value = true;
};
const options2 = computed(() => {
  let obj = result2.value?.POPULATION || {};
  let data = sortKeys.map((prop, index) => {
    return {
      name: legendData[index],
      value: obj[prop] || 0,
    };
  });
  return createCakePieOption(
    {
      data: data,
      radius: [0, 70],
      center: ['50%', '40%'],
      seriesName: '总体分布占比',
      showLegendValue: false,
    },
    {
      legend: {
        orient: 'horizontal',
        top: null,
        right: null,
        bottom: '0%',
        left: 'center',
      },
    }
  );
});
const options3 = computed(() => {
  let res = result3.value || {};
  let xData = Object.keys(res);
  let originData = Object.values(res).map((item) => {
    return sortKeys.map((v) => item[v] || 0);
  });
  return createPercentBarOption({
    xData: xData,
    originData: originData,
    legendData: legendData,
  });
});
</script>

<style lang="less" scoped>
.project-analysis {
  .page-main {
    height: calc(100vh - 57px);
    padding: 15px;
    overflow: auto;
    .scroll-content {
      height: 100%;
      min-height: 600px;
      min-width: 1000px;
      .row1 {
        height: calc(60% - 16px);
        .card {
          width: calc((100% - 30px) / 3);
          height: 100%;
          &:not(:first-child) {
            margin-left: 15px;
          }
        }
      }
      .row2 {
        margin-top: 15px;
        height: 40%;
        .card {
          height: 100%;
        }
      }
    }

    .card {
      padding: 4px 10px 10px 10px;
      background-color: #fff;
      border: 1px solid #e5e5e5;
      border-radius: 4px;
      .title {
        height: 36px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .label {
          color: #262626;
          font-size: 14px;
          // font-weight: bold;
        }
      }
      .chart-wrap {
        height: calc(100% - 36px);
      }
    }
  }
}
</style>
