<template>
  <div class="service-analysis">
    <report-header title="服务单元分析" hideTimePicker>
      <select-service-unit
        v-model="serviceId"
        clearable
        defaultSelect
        style="width: 220px"
      ></select-service-unit>
    </report-header>
    <div class="page-main">
      <div class="scroll-content">
        <div class="col1">
          <div class="row1">
            <div class="table">
              <div class="table-title">服务单元概况</div>
              <div class="tr">
                <div class="td">累计派单数量</div>
                <div class="td">{{ overviewData.crmNum }}</div>
              </div>
              <div class="tr">
                <div class="td">SOP数量</div>
                <div class="td">{{ overviewData.sopNum }}</div>
              </div>
              <div class="tr">
                <div class="td">大区经理人数</div>
                <div class="td">{{ overviewData.leadNum }}</div>
              </div>
              <div class="tr">
                <div class="td">总投入人数</div>
                <div class="td">{{ overviewData.totalPerson }}</div>
              </div>
              <div class="tr">
                <div class="td">投入扫描仪数量</div>
                <div class="td">{{ overviewData.scannerNum }}</div>
              </div>
            </div>
          </div>
          <div class="row2">
            <div class="table table2">
              <div class="table-title">项目整体进度</div>
              <div class="tr">
                <div class="td">所处阶段</div>
                <div class="td">SOP数量</div>
                <div class="td">占比</div>
                <div class="td">操作</div>
              </div>
              <div class="tr" v-for="item in table2data">
                <div class="td">{{ PROJECT_PROCESS[item.process] }}</div>
                <div class="td">{{ item.sopNum }}</div>
                <div class="td">{{ item.ratio }}</div>
                <div class="td">
                  <t-link theme="primary">详情</t-link>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col2">
          <ChinaPointChart :data="mapData"></ChinaPointChart>
        </div>
      </div>
    </div>

    <DetailDrawer v-model="showDetailDrawer" />
  </div>
</template>

<script setup name="ServiceAnalysis">
import { ref, computed, watch } from 'vue';
import ChinaPointChart from '@/components/common/china-point-chart/index.vue';
import { useRequest } from 'vue-request';
import {
  getOverviewData,
  getProjectProgress,
  getChinaMapData,
} from '@/api/report';
import { FullscreenIcon } from 'tdesign-icons-vue-next';
import { cloneDeep } from 'lodash-es';
import { PROJECT_PROCESS } from '@/config/constants';
import DetailDrawer from './detail-drawer.vue';
const showDetailDrawer = ref(true);
const serviceId = ref('');
const overviewData = ref({});
const table2data = ref([]);
const mapData = ref([]);

const _getOverviewData = (serviceUnitId) => {
  getOverviewData({ serviceUnitId }).then((res) => {
    overviewData.value = res || {};
  });
};
const _getProjectProgress = (serviceUnitId) => {
  getProjectProgress({ serviceUnitId }).then((res) => {
    table2data.value = res || [];
  });
};
const _getChinaMapData = (serviceUnitId) => {
  getChinaMapData({ serviceUnitId }).then((res) => {
    mapData.value = res || [];
  });
};
watch(serviceId, (serviceUnitId) => {
  _getOverviewData(serviceUnitId);
  _getProjectProgress(serviceUnitId);
  _getChinaMapData(serviceUnitId);
});
</script>

<style lang="less" scoped>
.service-analysis {
  .page-main {
    height: calc(100vh - 57px);
    padding: 15px;
    overflow: auto;
    .scroll-content {
      height: 100%;
      min-height: 600px;
      min-width: 1000px;
      display: flex;
      .col2 {
        width: calc(100% - 400px);
        height: 100%;
      }
      .col1 {
        width: 400px;
        background-color: #fff;
        border-radius: 6px;
        height: 100%;
        overflow: auto;
        .row1 {
          height: 44%;
          min-height: 300px;
          overflow: auto;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .row2 {
          height: 56%;
          min-height: 350px;
          overflow: auto;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .table {
          width: 300px;
          border-top: 1px solid #ddd;
          border-left: 1px solid #ddd;
          &.table2 {
            width: 370px;
            .tr {
              .td {
                width: 25%;
              }
            }
          }
          .table-title {
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            height: 40px;
            line-height: 39px;
            text-align: center;
            font-weight: bold;
            font-size: 18px;
          }
          .tr {
            height: 36px;
            .td {
              height: 100%;
              border-bottom: 1px solid #ddd;
              border-right: 1px solid #ddd;
              width: 50%;
              float: left;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }
  }
}
</style>
