<template>
  <div class="custom-chart-configurations-data" v-if="targetData">
    <a-form :label-width="45" label-placement="left" :model="targetData.request" layout="vertical">
      <a-form-item label="请求方式">
        <a-select v-model:value="targetData.request.requestDataType" allowClear placeholder="请选择请求方式" style="width: 100%">
          <a-select-option :value="0">静态数据</a-select-option>
          <a-select-option :value="1">动态请求</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="数据内容" v-if="targetData.request.requestDataType === 0" style="position: relative">
        <a-button type="primary" style="position: absolute; right: 0; top: -40px" class="border-radius" @click="editSource" v-if="!showEdit"
          >编辑</a-button
        >
        <a-button type="primary" style="position: absolute; right: 0; top: -40px" class="border-radius" @click="saveSource" v-if="showEdit"
          >保存</a-button
        >
        <a-card :bordered="false">
          <guns-code :code="source" height="480px" v-if="!showEdit" />
          <a-textarea v-model:value="source" v-if="showEdit" :rows="18"></a-textarea>
        </a-card>
      </a-form-item>
      <a-form-item label="请求地址" v-if="targetData.request.requestDataType === 1">
        <a-input v-model:value="targetData.request.requestUrl" allowClear placeholder="请输入请求地址"></a-input>
      </a-form-item>
      <a-form-item label="请求类型" v-if="targetData.request.requestDataType === 1">
        <a-select v-model:value="targetData.request.requestHttpType" allowClear placeholder="请选择请求类型" style="width: 100%">
          <a-select-option value="get">GET</a-select-option>
          <a-select-option value="post">POST</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="更新间隔" v-if="targetData.request.requestDataType === 1">
        <a-input-number
          style="width: 70%"
          v-model:value="targetData.request.requestInterval"
          allowClear
          placeholder="请输入更新间隔"
        ></a-input-number>
        <a-select v-model:value="targetData.request.requestIntervalUnit" allowClear placeholder="请选择时间类型" style="width: 30%">
          <a-select-option value="second">秒</a-select-option>
          <a-select-option value="minute">分</a-select-option>
          <a-select-option value="hour">时</a-select-option>
          <a-select-option value="day">天</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup name="ChartData">
import { computed, ref, watch } from 'vue';
import { useChartEditStore } from '@/store/modules/chart/chartEditStore';

const chartEditStore = useChartEditStore();

const source = ref('');

const showEdit = ref(false);

const targetData = computed(() => {
  const list = chartEditStore.getComponentList;
  const targetIndex = chartEditStore.fetchTargetIndex();
  return list[targetIndex];
});

watch(
  () => targetData.value?.option?.dataset,
  newData => {
    showEdit.value = false;
    if (newData && targetData?.value?.chartConfig?.chartFrame === 'echarts') {
      // 只有 DataSet 数据才有对应的格式
      source.value = newData;
    } else if (newData !== undefined && newData !== null) {
      source.value = newData;
    } else {
      source.value = '此组件无数据源';
    }
    source.value = JSON.stringify(source.value);
  },
  {
    immediate: true
  }
);

const editSource = () => {
  showEdit.value = true;
};

const saveSource = () => {
  targetData.value.option.dataset = JSON.parse(source.value);
  showEdit.value = false;
};
</script>

<style></style>
