<template>
  <a-collapse v-model:activeKey="activeKey" ghost expandIconPosition="right">
    <a-collapse-panel key="1">
      <template #header><NodeHead nodeName="数据配置" /> </template>
      <a-form-item :label="t('数据视图')" :colon="false" labelAlign="left">
        <SelectApi
          v-model:value="data.options.apiConfig"
          :exampleStr="exampleStr"
          from="pageDesign"
          :refreshComponent="data.options.refreshComponent"
        />
      </a-form-item>
      <a-form-item :label="t('维度')" :colon="false" labelAlign="left">
        <BindApiColumns
          v-model:value="data.options.labelKey"
          :apiColumns="data.options.apiColumns"
        />
      </a-form-item>
      <a-form-item :label="t('指标')" :colon="false" labelAlign="left">
        <BindApiColumns
          v-model:value="data.options.valueKey"
          :apiColumns="data.options.apiColumns"
        />
      </a-form-item>
      <a-form-item :label="t('目标值')" :colon="false" labelAlign="left">
        <BindApiColumns
          v-model:value="data.options.targetKey"
          :apiColumns="data.options.apiColumns"
        />
      </a-form-item>
    </a-collapse-panel>
  </a-collapse>
</template>

<script setup lang="ts">
  import { inject, onMounted, ref } from 'vue';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import SelectApi from '/@/views/generator/desktop/components/designer/properties/collapse/complex/SelectApi.vue';
  import BindApiColumns from '/@/views/generator/desktop/components/designer/properties/collapse/BindApiColumns.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const data = inject('selectWidget', ref<any>({}));
  const activeKey = ref(['1']);
  onMounted(() => {});

  const exampleStr = ` {
      code: 0,
      msg: 'success',
      data: {
        columns: [
          {prop:'name',label:'测试1'},
          {prop:'value',label:'测试2'}
        ],
        list: [
          {name:'demo1',value:10},
          {name:'demo2',value:30}
        ],
      },
    }`;
</script>

<style lang="less" scoped></style>
