<template>
  <DesignPropertiesBox v-if="data.show">
    <a-collapse v-model:activeKey="activeKey" ghost expandIconPosition="right">
      <a-collapse-panel key="1" :header="t('基础配置')">
        <a-form-item :label="t('标题')" :colon="false" labelAlign="left">
          <a-input v-model:value="data.info.config.title" />
        </a-form-item>
      </a-collapse-panel>
      <a-collapse-panel key="2" :header="t('数据配置')">
        <a-form-item :label="t('数据视图')" :colon="false" labelAlign="left">
          <ApiSelect
            v-model:value="data.info.config.apiConfig"
            :exampleStr="exampleStr"
            @save="saveApiConfig"
          />
        </a-form-item>
        <a-form-item :label="t('维度')" :colon="false" labelAlign="left">
          <BindApiColumns
            v-model:value="data.info.config.labelKey"
            :apiColumns="data.info.config.apiColumns"
            @change="resetDisplay"
          />
        </a-form-item>
        <a-form-item :label="t('指标')" :colon="false" labelAlign="left">
          <BindApiColumns
            v-model:value="data.info.config.valueKey"
            :apiColumns="data.info.config.apiColumns"
            @change="resetDisplay"
          />
        </a-form-item>
      </a-collapse-panel>
      <a-collapse-panel key="3" :header="t('饼图设置')">
        <a-form-item :label="t('圆心大小')" :colon="false" labelAlign="left">
          <a-slider
            v-model:value="data.pieConfig.centerOfCircleSize"
            @change="changeCenterOfCircleSize"
          />
        </a-form-item>
        <a-form-item :label="t('外圆大小')" :colon="false" labelAlign="left">
          <a-slider
            v-model:value="data.pieConfig.sizeOfOuterCircle"
            @change="changeSizeOfOuterCircle"
          />
        </a-form-item>
        <!-- <a-form-item :label="t('水平位置')" :colon="false" labelAlign="left">
          <a-slider
            v-model:value="data.pieConfig.horizontalPosition"
            @change="changeHorizontalPosition"
          />
        </a-form-item>
        <a-form-item :label="t('垂直位置')" :colon="false" labelAlign="left">
          <a-slider
            v-model:value="data.pieConfig.verticalPosition"
            @change="changeVerticalPosition"
          />
        </a-form-item> -->
        <a-form-item :label="t('南丁格尔')" :colon="false" labelAlign="left">
          <a-select
            v-model:value="data.info.config.echarts.series[0].roseType"
            style="width: 100%"
            allowClear
            @change="resetDisplay"
          >
            <a-select-option
              v-for="(item, index) in roseTypeOptions"
              :key="index"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <!-- <a-form-item :label="t('圆角大小')" :colon="false" labelAlign="left">
          <a-slider v-model:value="data.pieConfig.borderRadius" @change="changeBorderRadius" />
        </a-form-item> -->
        <!-- <a-form-item :label="t('选中模式')" :colon="false" labelAlign="left">
          <a-select
            v-model:value="data.info.config.echarts.series[0].selectedMode"
            style="width: 100%"
            allowClear
            @change="resetDisplay"
          >
            <a-select-option
              v-for="(item, index) in selectedModeOptions"
              :key="index"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item :label="t('默认选中')" :colon="false" labelAlign="left">
          <a-input-number
            v-model:value="data.info.config.defaultSelect"
            :min="0"
            @change="resetDisplay"
          />
        </a-form-item> -->
      </a-collapse-panel>
      <a-collapse-panel key="4" :header="t('文本标签')">
        <Label
          v-model:label="data.info.config.echarts.series[0].label"
          :formatterText="formatterText"
          @change="resetDisplay"
        />
      </a-collapse-panel>
      <a-collapse-panel key="5" :header="t('图例设置')">
        <Legend
          v-model:legend="data.info.config.echarts.legend"
          :formatterText="legendFormatterText"
          v-model:autoWidth="data.info.config.autoWidth"
          @change="resetDisplay"
        />
      </a-collapse-panel>
      <a-collapse-panel key="6" :header="t('配色设置')">
        <Colors v-model:info="data.info" @change="resetDisplay" />
      </a-collapse-panel>
      <a-collapse-panel key="7" :header="t('大小定位')">
        <Location v-model:info="data.info.h" />
      </a-collapse-panel>
    </a-collapse>
  </DesignPropertiesBox>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref, watch } from 'vue';
  import { DesignPropertiesBox } from '/@/components/Desktop';
  import ApiSelect from './ApiSelect.vue';
  import { pieInfo } from '../config/info';
  import Label from './collapse/Label.vue';
  import Legend from './collapse/Legend.vue';
  import Location from './collapse/Location.vue';
  import BindApiColumns from './collapse/BindApiColumns.vue';
  import { LocationType } from '/@/enums/desktop';
  import { PieItemInfo } from '/@/model/mobileDesign/designer';
  import Colors from './collapse/Colors.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const props = withDefaults(
    defineProps<{
      info: PieItemInfo;
    }>(),
    {
      info: () => {
        return pieInfo;
      },
    },
  );
  watch(
    () => props.info,
    (val) => {
      if (val) data.info = val;
    },
    {
      deep: true,
    },
  );
  const data: {
    info: any;
    show: boolean;
    pieConfig: {
      centerOfCircleSize: number;
      sizeOfOuterCircle: number;
      horizontalPosition: number;
      verticalPosition: number;
      borderRadius: number;
      location: LocationType;
    };
  } = reactive({
    info: pieInfo,
    show: false,
    pieConfig: {
      centerOfCircleSize: 0,
      sizeOfOuterCircle: 60,
      horizontalPosition: 50,
      verticalPosition: 40,
      borderRadius: 0,
      color: [],
      location: LocationType.BOTTOM_CENTER,
    },
  });
  const activeKey = ref(['1', '2', '3']);

  onMounted(() => {
    data.info = props.info;
    if (props.info.config.echarts.series) {
      data.pieConfig.centerOfCircleSize = Number(
        (props.info.config.echarts.series[0].radius[0] + '').split('%')[0],
      );
      data.pieConfig.sizeOfOuterCircle = Number(
        (props.info.config.echarts.series[0].radius[1] + '').split('%')[0],
      );
    }
    data.show = true;
  });
  function saveApiConfig() {
    resetApiData();
    resetDisplay();
  }
  function resetApiData() {
    data.info.config.apiData = [];
    data.info.config.apiColumns = [];
    data.info.config.valueKey = '';
    data.info.config.labelKey = '';
  }
  function resetDisplay() {
    if (data.info.config.renderKey >= 0) {
      data.info.config.renderKey++;
    }
  }

  function changeCenterOfCircleSize(val: number) {
    if (
      data.info.config.echarts &&
      Array.isArray(data.info.config.echarts.series) &&
      Array.isArray(data.info.config.echarts.series[0].radius)
    ) {
      data.info.config.echarts.series[0].radius[0] = val + '%';
    }
    resetDisplay();
  }
  function changeSizeOfOuterCircle(val: number) {
    if (
      data.info.config.echarts &&
      Array.isArray(data.info.config.echarts.series) &&
      Array.isArray(data.info.config.echarts.series[0].radius)
    ) {
      data.info.config.echarts.series[0].radius[1] = val + '%';
    }
    resetDisplay();
  }
  // function changeHorizontalPosition(val: number) {
  //   if (
  //     data.info.config.echarts &&
  //     Array.isArray(data.info.config.echarts.series) &&
  //     Array.isArray(data.info.config.echarts.series[0].center)
  //   ) {
  //     data.info.config.echarts.series[0].center[0] = val + '%';
  //   }
  //   resetDisplay();
  // }
  // function changeVerticalPosition(val: number) {
  //   if (
  //     data.info.config.echarts &&
  //     Array.isArray(data.info.config.echarts.series) &&
  //     Array.isArray(data.info.config.echarts.series[0].center)
  //   ) {
  //     data.info.config.echarts.series[0].center[1] = val + '%';
  //   }
  //   resetDisplay();
  // }
  // function changeBorderRadius(val: number) {
  //   if (
  //     data.info.config.echarts &&
  //     Array.isArray(data.info.config.echarts.series) &&
  //     data.info.config.echarts.series[0].itemStyle &&
  //     data.info.config.echarts.series[0].itemStyle
  //   ) {
  //     data.info.config.echarts.series[0].itemStyle.borderRadius = val + '%';
  //   }
  //   resetDisplay();
  // }
  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}
          ],
        },
      }`;
  const roseTypeOptions = [
    {
      label: t('圆心角数据百分比'),
      value: 'radius',
    },
    {
      label: t('圆心角相同'),
      value: 'area',
    },
  ];
  // const selectedModeOptions = [
  //   {
  //     label: t('单选'),
  //     value: 'single',
  //   },
  //   {
  //     label: t('多选'),
  //     value: 'multiple',
  //   },
  // ];
  const formatterText = `参数说明

  {b}：数据名。

  {c}：数据值。

  {d}：百分比。
  `;

  const legendFormatterText = `参数说明
  {name}：数据名。

  {value}：数据值。`;
</script>

<style lang="less" scoped>
  .box {
    position: relative;
    padding-top: 50px;
    overflow: auto;
  }

  .item-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #262626;
    font-size: 14px;
    padding-left: 16px;
  }

  .item-title::after {
    content: '';
    display: block;
    position: absolute;
    height: 1px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f0f0f0;
  }
</style>
