<template>
  <!-- 指标 -->
  <a-form-item
    :wrapperCol="{
      style: { paddingLeft: '10px', paddingRight: '10px', position: 'unset' },
    }"
  >
    <div class="card-box" v-if="data.indicator && data.indicator.length > 0">
      <div class="card-item" v-for="(item, index) in data.indicator" :key="index">
        <a-form :label-col="labelCol" :colon="false" labelAlign="left">
          <a-form-item :label="t('名称')">
            <a-input v-model:value="item.name" @change="changeIndicator" />
          </a-form-item>
          <!-- <a-form-item label="数值" :colon="false" labelAlign="left">
              <a-input-number v-model:value="item.max" />
            </a-form-item> -->
          <a-form-item :label="t('字段')">
            <a-select
              v-model:value="item.value"
              style="width: 100%"
              allowClear
              @change="changeIndicator"
            >
              <a-select-option
                v-for="(val, valIndex) in props.apiColumns"
                :key="valIndex"
                :value="val.prop"
                >{{ val.label }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-form>

        <div class="close-icon" v-if="data.indicator && data.indicator.length > 1">
          <IconFontSymbol
            icon="chongzhishibai"
            style="fill: rgb(255 84 97 / 50%)"
            :size="14"
            @click="deleteItem(index)"
          />
        </div>
      </div>
    </div>
    <PlusCircleFilled class="add-custom !right-33px !top-15px" @click="add" />
  </a-form-item>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';
  import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { PlusCircleFilled } from '@ant-design/icons-vue';
  const { t } = useI18n();
  const labelCol = { style: { width: '112px' } };
  const props = withDefaults(
    defineProps<{
      indicator: Array<{ name: string; value: string }>;
      apiColumns: Array<{ prop: string; label: string }>;
    }>(),
    {
      indicator: () => {
        return [];
      },
    },
  );

  const emit = defineEmits(['update:indicator', 'change']);
  const data = reactive({
    indicator: props.indicator,
  });
  function changeIndicator() {
    emit('update:indicator', data.indicator);
    emit('change');
  }
  function add() {
    let name = t('指标') + Number(data.indicator.length + 1);
    data.indicator.push({
      value: '',
      name,
    });
    changeIndicator();
  }
  function deleteItem(index: number) {
    data.indicator.splice(index, 1);
    changeIndicator();
  }
</script>

<style lang="less" scoped>
  :deep(.ant-form-item-control-input) {
    position: unset;
  }
</style>
