<template>
  <div v-if="data.options.chartType === chartType.line">
    <a-form-item :label="t('条件颜色')" :colon="false" labelAlign="left">
      <SelectColor v-model:value="data.options.condition.color" />
    </a-form-item>
    <a-form-item :label="t('条件选中')" :colon="false" labelAlign="left">
      <SelectColor v-model:value="data.options.condition.selected" />
    </a-form-item>
    <a-form-item
      :label="t('横向')"
      :label-col="{ style: { width: '112px' } }"
      :wrapperCol="{
        style: { textAlign: 'right' },
      }"
    >
      <a-switch v-model:checked="data.options.isCrosswise" />
    </a-form-item>
    <a-form-item
      :label="t('显示统计')"
      :label-col="{ style: { width: '112px' } }"
      :wrapperCol="{
        style: { textAlign: 'right' },
      }"
    >
      <a-switch v-model:checked="data.options.count.show" />
    </a-form-item>
    <a-form-item :label="t('统计单位')" :colon="false" labelAlign="left">
      <a-input v-model:value="data.options.count.unit" />
    </a-form-item>
    <a-form-item :label="t('统计标题')" :colon="false" labelAlign="left">
      <a-input v-model:value="data.options.count.title" />
    </a-form-item>
  </div>
  <div v-if="data.options.chartType === chartType.barPercent">
    <a-form-item :label="t('单位')" :colon="false" labelAlign="left">
      <a-input v-model:value="data.options.unit" />
    </a-form-item>
  </div>
</template>

<script setup lang="ts">
  import { inject, ref } from 'vue';
  import { chartType } from '../../../types';

  import SelectColor from '/@/views/generator/desktop/components/designer/properties/SelectColor.vue';

  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();

  const data = inject('selectWidget', ref<any>({}));
</script>

<style lang="less" scoped>
  .indicator-box {
    display: flex;
    flex-direction: column;
  }

  .indicator-box .indicator-item {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 42px;
    margin: 0 0 10px;
    background-color: #eaedf1;
    border-radius: 4px;
    padding: 5px;
    border: 1px solid #d3dbe5;
  }

  .indicator-box .indicator-icon {
    background: @primary-color;
    fill: #fff !important;
    border-radius: 4px;
    padding: 4px;
    width: 32px;
    height: 32px;
    margin-right: 5px;
  }

  .delete-icon {
    color: @clear-color;
  }

  .setting-icon {
    color: @primary-color;
    margin-right: 10px;
    margin-left: 10px;
  }

  .indicator-box :deep(.rule-input) {
    display: none;
  }
</style>
