<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.valueKey"
          :apiColumns="data.options.apiColumns"
        />
      </a-form-item>
    </a-collapse-panel>
  </a-collapse>
</template>

<script setup lang="ts">
  import { inject, onMounted, ref } from 'vue';
  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 { NodeHead } from '/@/components/ModalPanel/index';
  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}
      ],
    },
  }`;
</script>

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