<script lang="ts" setup name="DeviceBench">
import { getCurrentInstance, ref } from 'vue'
import type { Ref } from 'vue'
import type { planReturn } from './bench-interface'
import Linechart from '@/components/Echart/LineChart.vue'
import type { lineDataI } from '@/components/Echart/echart-interface'
import { getCustomerExpireData, getHighQualityCustomerList, getSampleAddData, getSampleExpireData } from '@/api/customer/bench'

// 每个展示块高度
const blockHeight = ref(300)
const blockWidth = ref(400)
const { proxy } = getCurrentInstance() as any
// 到期样品表格数据
const dueSampleTableData = ref()
// 到期样品表头
const dueSampleTableHead = [
  { text: '样品名称', value: 'sampleName' },
  { text: '委托方名称', value: 'customerName', width: '120' },
  { text: '上次检定时间', value: 'effectiveDate', width: '180' }, // 指证书出具时间
]

// 优质客户名单表中数据
const highQualityCustomerTableData = ref([])
// 优质客户名单表头
const highQualityCustomerTableHead = [
  { text: '客户名称', value: 'customerName' },
  { text: '总计检定金额', value: 'totalAmount' },
]

// 客户关系表中数据
const customerRelationsTabledata = ref([])
// 客户关系表头
const customerRelationsTableHead = [
  { text: '客户名称', value: 'customerName' },
  { text: '投诉/建议类型', value: 'adviceClass' },
  { text: '投诉/建议时间', value: 'adviceTime', width: '180' },
]

// 样品新增趋势x轴
const sampleAddXData: Ref<string[]> = ref([])
// 样品新增趋势数据
const sampleAddData: Ref<lineDataI[]> = ref([])
// 样品新增趋势趋势y轴最大值
const sampleAddYDataMax = ref()

// 样品到期趋势x轴
const sampleExpireXData: Ref<string[]> = ref([])
// 样品到期趋势数据
const sampleExpireData: Ref<lineDataI[]> = ref([])
// 样品到期趋势y轴最大值
const sampleExpireYDataMax = ref()

// 客户新增趋势x轴
const customerAddXData: Ref<string[]> = ref([])
// 客户新增趋势数据
const customerAddData: Ref<lineDataI[]> = ref([])
// 客户新增趋势趋势y轴最大值
const customerAddYDataMax = ref()

function calcBlockSize() {
  // 计算工作台区域高度 - 顶部-面包屑-边距
  const bodyHeight = document.body.clientHeight - 60 - 50 - 20
  blockHeight.value = bodyHeight > 610 ? (bodyHeight - 10) / 2 : 300
  blockWidth.value = (document.body.clientWidth - 180 - 20 - 20) / 3
  console.log(blockHeight.value, blockWidth.value - 20)
}
window.addEventListener('resize', () => {
  calcBlockSize()
})

// 获取样品新增趋势数据
function fetchSampleAddData() {
  getSampleAddData().then((res) => {
    sampleAddXData.value = res.data.map((item: planReturn) => item.date)
    const yValue = res.data.map((item: planReturn) => Number(item.count))
    sampleAddYDataMax.value = Math.max(yValue) > 10 ? Math.max(yValue) : 10
    sampleAddData.value = [{ name: '客户', data: yValue }]
  })
}

// 获取样品到期趋势数据
function fetchSampleExpireData() {
  getSampleExpireData().then((res) => {
    sampleExpireXData.value = res.data.map((item: planReturn) => item.date)
    const yValue = res.data.map((item: planReturn) => Number(item.count))
    sampleExpireYDataMax.value = Math.max(yValue) > 10 ? Math.max(yValue) : 10
    sampleExpireData.value = [{ name: '客户', data: yValue }]
  })
}

// 获取优质客户名单
function fetchHighQualityCustomerList() {
  getHighQualityCustomerList().then((res) => {
    highQualityCustomerTableData.value = res.data.rows
  })
}
// 获取客户新增趋势数据
function fetchCustomerExpireData() {
  getCustomerExpireData().then((res) => {
  // const res = {
  //   data: [
  //     {
  //       date: '2021-09',
  //       count: '10',
  //     },
  //     {
  //       date: '09090',
  //       count: '10',
  //     },
  //   ],
  // }
    customerAddXData.value = res.data.map((item: planReturn) => item.date)
    const yValue = res.data.map((item: planReturn) => Number(item.count))
    customerAddYDataMax.value = Math.max(yValue) > 10 ? Math.max(yValue) : 10
    customerAddData.value = [{ name: '客户', data: yValue }]
  })
}

// 获取到期样品表格数据
// 获取客户关系表格数据

onMounted(() => {
  calcBlockSize()
  fetchSampleAddData()// 样品新增趋势
  fetchSampleExpireData()// 样品到期趋势
  fetchCustomerExpireData()// 客户新增趋势
  fetchHighQualityCustomerList()// 优质客户名单
})
</script>

<template>
  <app-container>
    <div class="customer-bench">
      <el-row :gutter="10">
        <el-col :span="8">
          <bench-col
            icon="icon-book"
            title="到期样品"
            path-url="/sample/overtime"
            :style="{ height: blockHeight }"
            :height="blockHeight"
          >
            <el-table :data="dueSampleTableData" :height="blockHeight - 60" style="width: 100%; height: 100%;" stripe header-row-class-name="bench-table-header" row-class-name="bench-table-row" class="bench-table">
              <el-table-column
                v-for="item in dueSampleTableHead"
                :key="item.value"
                :prop="item.value"
                align="center"
                :label="item.text"
                :width="item.width"
              />
            </el-table>
          </bench-col>
        </el-col>
        <el-col :span="8">
          <bench-col
            icon="icon-line"
            title="样品新增趋势"
            :height="blockHeight"
          >
            <line-chart
              :x-axis-data="sampleAddXData"
              :width="`${blockWidth - 20}px`"
              :data="sampleAddData"
              unit="件"
            />
          </bench-col>
        </el-col>
        <el-col :span="8">
          <bench-col
            icon="icon-line"
            title="样品到期趋势"
            :height="blockHeight"
          >
            <line-chart
              :x-axis-data="sampleExpireXData"
              :width="`${blockWidth - 20}px`"
              :data="sampleExpireData"
              unit="件"
            />
          </bench-col>
        </el-col>
      </el-row>
    </div>
    <div class="device-bench" style="margin-top: 10px;">
      <el-row :gutter="10">
        <el-col :span="8">
          <bench-col
            icon="icon-book"
            title="客户关系"
            path-url="/customer/advice"
            :style="{ height: blockHeight }"
            :height="blockHeight"
          >
            <el-table :data="customerRelationsTabledata" :height="blockHeight - 60" style="width: 100%; height: 100%;" stripe header-row-class-name="bench-table-header" row-class-name="bench-table-row" class="bench-table">
              <el-table-column
                v-for="item in customerRelationsTableHead"
                :key="item.value"
                :prop="item.value"
                align="center"
                :label="item.text"
                :width="item.width"
              />
            </el-table>
          </bench-col>
        </el-col>
        <el-col :span="8">
          <bench-col
            icon="icon-line"
            title="客户新增趋势"
            :height="blockHeight"
          >
            <line-chart
              :x-axis-data="customerAddXData"
              :width="`${blockWidth - 20}px`"
              :data="customerAddData"
              unit="个"
            />
          </bench-col>
        </el-col>
        <el-col :span="8">
          <bench-col
            icon="icon-book"
            title="优质客户名单"
            :style="{ height: blockHeight }"
            :height="blockHeight"
          >
            <el-table :data="highQualityCustomerTableData" :height="blockHeight - 60" style="width: 100%; height: 100%;" stripe header-row-class-name="bench-table-header" row-class-name="bench-table-row" class="bench-table">
              <el-table-column
                v-for="item in highQualityCustomerTableHead"
                :key="item.value"
                :prop="item.value"
                align="center"
                :label="item.text"
              />
            </el-table>
          </bench-col>
        </el-col>
      </el-row>
    </div>
  </app-container>
</template>

<style lang="scss" scoped>
.customer-bench {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .the-month-total-Data {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0 20px;

    .title {
      display: flex;
      justify-content: space-between;
      font-weight: 500;
      margin-bottom: 3px;
    }

    .content {
      width: 100%;

      .item {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-right: 10px;
        padding: 3px 0;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(to bottom, #e9f5ff, #3d7eff);
        border-radius: 8px;

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .my-equipment {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 20px;

    .item {
      height: 40%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(to right, #caddff, #3d7eff);
      border-radius: 16px;
    }
  }
}
</style>

<style lang="scss">
.bench-table {
  .el-table__header-wrapper {
    border-radius: 8px;
  }
}

.bench-table-header {
  th {
    font-weight: normal;
    font-size: 14px;
  }
}

.bench-table-row {
  border-radius: 8px;
}
</style>
