<template>
  <div class="mr-8">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="title" width="100">
        <template #default="scope">
          <div class="text-black">{{ scope.row.quotaName }}</div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="showList?.showIndicRemark"
        prop="remark"
        label="指标说明"
      />
      <el-table-column
        v-if="showList?.showScoreRule"
        prop="scoreRule"
        label="评价标准"
      />
      <el-table-column
        v-if="showList?.showDatasource"
        prop="datasoure"
        label="数据来源"
      />
      <el-table-column
        v-if="showList?.showTargetValue"
        prop="targetValue"
        label="目标值"
      />
      <el-table-column prop="finalValue" label="完成值" />
      <el-table-column
        v-if="showList?.showStartValue"
        prop="startValue"
        label="门槛值"
      />
      <el-table-column
        v-if="showList?.showChallengeValue"
        prop="challengeValue"
        label="挑战值"
      />
      <el-table-column prop="ranking" label="排名" />
      <el-table-column prop="quotaScore" label="得分" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick, watch, onMounted } from "vue";
import { getPersonDimensionChartsList } from "@/api/draw";
const tableData = ref([]);
const showList = ref();
const watchData = ref();
const props = defineProps({
  paramsIndex: {
    type: Object
  }
});
const params = ref({});
const getPersonDimensionChartsApi = async () => {
  const { code, data } = await getPersonDimensionChartsList(params.value);
  if (code == 200) {
    showList.value = data[0]?.dimensionList[0];
    tableData.value = data[0]?.dimensionList[0]?.quotaList;
  }
};
onMounted(() => {
  if (props.paramsIndex) {
    Object.assign(params.value, props.paramsIndex);
    if (props.paramsIndex) {
      getPersonDimensionChartsApi();
    }
  }
});
watch(props, newVal => {
  Object.assign(params.value, newVal.paramsIndex);
  getPersonDimensionChartsApi();
});
const init = (data?: any, id?: any) => {
  if (data) {
    tableData.value = [];
    watchData.value = data;
    setTimeout(() => {
      nextTick(() => {
        if (id) {
          data[0]?.dimensionList.map(it => {
            if (it.dimId == id) {
              showList.value = it;
              tableData.value = it.quotaList;
            }
          });
        } else {
          showList.value = data[0]?.dimensionList[0];
          tableData.value = data[0]?.dimensionList[0].quotaList;
        }
      });
    }, 0);
  }
};
watch(
  watchData.value,
  newVal => {
    showList.value = newVal[0]?.dimensionList[0];
    tableData.value = newVal[0]?.dimensionList[0].quotaList;
  },
  { deep: true }
);
defineExpose({
  init
});
</script>
