<template>
  <div class="props">
    <t-collapse :borderless="true" :expand-on-row-click="false" v-model="openedCollapses">
      <t-collapse-panel v-for="(trigger, i) in data.triggers" :value="i + 1">
        <template #header>
          <t-input v-model="trigger.name" class="mr-12"></t-input>
        </template>
        <template #headerRightContent>
          <t-popconfirm @confirm="data.triggers.splice(i, 1)" :popup-props="{ placement: 'left' }" :content="$t('确认删除该行为吗？')">
            <delete-icon class="hover"></delete-icon>
          </t-popconfirm>
        </template>
        <section>
          <div class="form-item banner">
            <label>{{$t('触发条件')}}</label>
            <div class="w-full flex middle between">
              <div></div>
              <t-radio-group v-model="trigger.conditionType">
                <t-radio value="and"> {{$t('满足全部条件')}} </t-radio>
                <t-radio value="or"> {{$t('满足任意条件')}} </t-radio>
              </t-radio-group>
            </div>
          </div>
          <div v-for="(c, index) in trigger.conditions" class="mb-12">
            <div class="flex middle between head">
              <div class="flex middle">
                <arrow-right-icon class="mr-4"></arrow-right-icon>
{{$t('                条件')}}{{ index + 1 }}
              </div>
              <close-icon
                class="hover"
                @click="trigger.conditions.splice(index, 1)"
              />
            </div>
            <div class="py-4">
              <div class="form-item mt-8">
                <label>{{$t('对象')}}</label>
                <t-tree-select v-model="c.source" :data="penTree" filterable class="shrink-0" @change="onChangeTriggerTarget(c)" :placeholder="$t('对象')"></t-tree-select>
              </div>
              <div class="form-item mt-4">
                <label>{{$t('条件类型')}}</label>
                <t-radio-group v-model="c.type">
                  <t-radio value=""> {{$t( '关系条件' )}} </t-radio>
                  <t-radio value="fn"> {{$t( '高级条件' )}} </t-radio>
                </t-radio-group>
              </div>
              <template v-if="!c.type">
                <div class="form-item mt-8">
                  <label>{{$t( '属性名' )}}</label>
                  <t-select-input
                    v-model:inputValue="c.key"
                    :value="c.keyLabel"
                    v-model:popupVisible="c.keyPopupVisible"
                    allow-input
                    clearable
                    @clear="c.keyLabel = undefined"
                    @focus="c.keyPopupVisible = true"
                    @blur="c.keyPopupVisible = false"
                    @input-change="onKeyInput(c)"
                    class="shrink-0"
                    style="width: 152px"
                  >
                    <template #panel>
                      <ul style="padding: 8px 12px">
                        <li
                          v-for="item in cProps"
                          :key="item.value"
                          @click="
                            c.key = item.value;
                            c.keyLabel = item.label;
                            c.keyPopupVisible = false;
                          "
                        >
                          {{ item.label }}
                        </li>
                      </ul>
                    </template>
                  </t-select-input>
                </div>
                <div class="form-item mt-8">
                  <label>{{$t('关系运算')}}</label>
                  <t-select v-model="c.operator" :options="operatorOptions" clearable class="shrink-0" :placeholder="$t('关系运算')"></t-select>
                </div>
                <div class="form-item mt-8">
                  <label>{{$t('运算对象')}}</label>
                  <t-select v-model="c.valueType" class="shrink-0" :placeholder="$t('固定值')">
                    <t-option key value :label="$t('固定值')"> {{$t('固定值')}} </t-option>
                    <t-option key="prop" value="prop" :label="$t('对象属性值')">
                      {{$t('对象属性值')}}
                    </t-option>
                  </t-select>
                </div>
                <div v-if="!c.valueType" class="form-item mt-8 form-item-valueType">
                  <label>{{$t('值')}}</label>
                  <t-input v-model="c.value" @change="valueChange($event, c)" class="shrink-0" style="width: 320px"></t-input>
                </div>
                <template v-else>
                  <div class="form-item mt-8">
                    <label>{{$t('对象')}}</label>
                    <t-tree-select v-model="c.target" :data="penTree" filterable class="shrink-0" @change="onChangeTriggerTarget(c)" :placeholder="$t('对象')"></t-tree-select>
                  </div>
                  <div class="form-item mt-8">
                    <label>{{$t('属性')}}</label>
                    <t-select-input v-model:inputValue="c.value" :value="c.label" v-model:popupVisible="c.popupVisible" allow-input clearable @clear="c.label = undefined" @focus="c.popupVisible = true" @blur="c.popupVisible = false" @input-change="onInput(c)" class="shrink-0">
                      <template #panel>
                        <ul style="padding: 8px 12px">
                          <li
                            v-for="item in cProps"
                            :key="item.value"
                            @click="
                              c.value = item.value;
                              c.label = item.label;
                              c.popupVisible = false;
                            "
                          >
                            {{ item.label }}
                          </li>
                        </ul>
                      </template>
                    </t-select-input>
                  </div>
                </template>
              </template>
              <template v-else>
                <div>function condition(pen) {</div>
                <CodeEditor
                  class="mt-4"
                  @change="codeChange($event, c)"
                  v-model="c.fnJs"
                />
                <div class="mt-4">}</div>
              </template>
            </div>
          </div>
          <div class="mt-8">
            <a @click="addTriggerCondition(trigger)"> + {{$t('添加条件')}} </a>
          </div>

          <div class="form-item banner mt-16">
            <label>{{$t('执行动作')}}</label>
          </div>
          <Actions class="mt-8" :data="trigger" />
        </section>
      </t-collapse-panel>
    </t-collapse>

    <div class="mt-8 ml-16">
      <!-- <a @click="onAddTrigger"> + 添加行为 </a> -->
      <t-button @click="onAddTrigger" style="width: 90%;" variant="outline">
        <template #icon><add-icon></add-icon></template>
        {{$t('添加行为')}}
      </t-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  getCurrentInstance,
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  onUnmounted,
  reactive,
  ref,
  toRaw,
} from 'vue';
import { getPenTree, typeOptions, changeType } from '@/services/common';
import { ArrowRightIcon, CloseIcon, DeleteIcon, AddIcon } from 'tdesign-icons-vue-next';
import CodeEditor from '@/views/components/common/CodeEditor.vue';
import Actions from './Actions.vue';

const openedCollapses = ref([1]);
onBeforeMount(() => {
  penTree.value = getPenTree();
});
const data = reactive({
  triggers: [],
});
const { proxy } = getCurrentInstance();
const $t = proxy.$t

onMounted(() => {
  const d = meta2d.store.data as any;
  if (!d.triggers) {
    d.triggers = [];
  }
  data.triggers = d.triggers;
  meta2d.on('opened', getTriggers);
});

onBeforeUnmount(() => {
  meta2d.off('opened', getTriggers);
});

const getTriggers = () => {
  const d = meta2d.store.data as any;
  if (!d.triggers) {
    d.triggers = [];
  }
  data.triggers = d.triggers;
};
const penTree: any = ref([]);

const operatorOptions = ref<any>([
  { label: '=', value: '=' },
  { label: '!=', value: '!=' },
  { label: '>', value: '>' },
  { label: '<', value: '<' },
  { label: '>=', value: '>=' },
  { label: '<=', value: '<=' },
  { label: $t('包含'), value: '[)' },
  { label: $t('不包含'), value: '![)' },
]);

const cProps = [
  {
    value: 'x',
    label: 'X',
  },
  {
    value: 'y',
    label: 'Y',
  },
  {
    value: 'width',
    label: $t('宽'),
  },
  {
    value: 'height',
    label: $t('高'),
  },
  {
    value: 'visible',
    label: $t('显示'),
  },
  {
    value: 'text',
    label: $t('文字'),
  },
  {
    value: 'color',
    label: $t('颜色'),
  },
  {
    value: 'background',
    label: $t('背景颜色'),
  },
  {
    value: 'progress',
    label: $t('进度'),
  },
  {
    value: 'progressColor',
    label: $t('进度颜色'),
  },
  {
    value: 'showChild',
    label: $t('状态'),
  },
  {
    value: 'rotate',
    label: $t('旋转'),
  },
  {
    value: 'disabled',
    label: $t('禁用'),
  },
  {
    value: 'selectedKey',
    label: $t('单选选中值'),
  },
  {
    value: 'animateReverse',
    label: $t('连线动画反向'),
  }
];

const valueChange = (e, c: any) => {
  c.value = changeType(e);
};

const onChangeTriggerTarget = (c: any) => {
  /*
  c.targetProps = [
    {
      value: 'x',
      label: 'X',
    },
    {
      value: 'y',
      label: 'Y',
    },
    {
      value: 'width',
      label: $t('宽'),
    },
    {
      value: 'height',
      label: $t('高'),
    },
    {
      value: 'visible',
      label: $t('显示'),
    },
    {
      value: 'text',
      label: $t('文字'),
    },
    {
      value: 'progress',
      label: $t('进度'),
    },
    {
      value: 'showChild',
      label: $t('状态'),
    },
    {
      value: 'rotate',
      label: $t('旋转'),
    },
  ];*/

  const target: any = meta2d.findOne(c.target);
  if (target && target.realTimes) {
    for (const item of target.realTimes) {
      const found = cProps.findIndex((elem: any) => elem.value === item.key);
      if (found < 0) {
        cProps.push({
          value: item.key,
          label: item.label,
        });
      }
    }
  }
};

const onInput = (item: any) => {
  item.label = item.value;
};

const onKeyInput = (item: any) => {
  item.keyLabel = item.key;
};

const addTriggerCondition = (trigger: any) => {
  trigger.conditions.push({
    type: '',
    operator: '=',
    valueType: '',
  });
};

const codeChange = (e: any, a: any) => {
  a.fn = null;
};

const onAddTrigger = () => {
  const i = data.triggers.length;
  data.triggers.push({
    name: $t('行为')+ (i + 1),
    conditionType: 'and',
    conditions: [],
    actions: [],
  });
};
</script>
<style lang="postcss" scoped>
.props{
  padding-top:12px;
}
:deep(.t-collapse.t--border-less) {
  .t-collapse-panel__header {
    border: none;
    /* border-top: none; */
    /* border-bottom: 1px solid var(--td-border-level-1-color); */
    padding: 8px 12px;

    .t-input {
      border: none;
      padding-left: 0;
      font-size: 14px;
    }
  }

  .t-collapse-panel__content {
    padding: 8px 0;
  }
}

.title {
  position: relative;
  margin: 8px 0;

  :deep(.t-input) {
    border-color: var(--color-background-input);
    border-radius: 0;
    border-left: none;
    border-top: none;
    border-right: none;
    padding-left: 0;
    padding-bottom: 8px;
    font-size: 14px;

    &:hover {
      border-color: var(--color-border-input);
    }
  }
}

.head {
  margin-top: 10px;
}

.banner {
  /* background-color: var(--color-background-input);
  padding: 0 12px; */
}
</style>
