<template>
  <div class="animate-frames props">
    <div class="head">
      <label>{{ animate.name }} </label>
      <t-icon
        name="close"
        class="hover"
        style="font-size: 16px"
        @click="close"
      />
    </div>
    <div style="height: calc(100% - 42px); overflow: auto">
      <template v-if="animate.frames.length">
        <t-collapse
          v-model="openedCollapses"
          :borderless="true"
          :expand-on-row-click="true"
          @change="onChangeCollapse"
        >
          <t-collapse-panel v-for="(item, i) in animate.frames" :value="i">
            <template #header>
              <label style="font-weight: normal">{{ `帧${i + 1}` }}</label>
            </template>
            <template #headerRightContent>
              <t-space size="small" @click.stop>
                <t-tooltip content="在当前帧后面添加动画帧">
                  <t-icon
                    name="folder-add"
                    class="hover ml-4"
                    @click="addFrame(i)"
                  />
                </t-tooltip>
                <t-tooltip content="添加属性">
                  <t-dropdown
                    :options="propOptions"
                    @click="addProp(i, $event)"
                    :minColumnWidth="150"
                  >
                    <t-icon name="file-add" class="hover ml-4" />
                  </t-dropdown>
                </t-tooltip>
                <t-popconfirm
                  content="确认删除该动画帧吗"
                  placement="left"
                  @confirm="animate.frames.splice(i, 1)"
                >
                  <t-icon name="delete" class="hover ml-4" />
                </t-popconfirm>
              </t-space>
            </template>
            <section>
              <div class="form-item">
                <label>时长</label>
                <t-input-number
                  v-model="item.duration"
                  theme="normal"
                  :min="1"
                  placeholder="毫秒"
                  suffix="ms"
                />
              </div>
              <div class="form-item mt-8" v-for="prop in frameProps[i]">
                <template v-if="propDescriptions[prop]">
                  <label>
                    {{ propDescriptions[prop].label }}
                  </label>

                  <div>
                    <t-input-number
                      class="w-full"
                      v-if="propDescriptions[prop].type === 'number'"
                      v-model="item[prop]"
                      theme="normal"
                      :placeholder="propDescriptions[prop].placeholder"
                      :min="propDescriptions[prop].min"
                      :max="propDescriptions[prop].max"
                      :step="propDescriptions[prop].step"
                    />
                    <t-select
                      class="w-full"
                      v-else-if="propDescriptions[prop].type === 'select'"
                      v-model="item[prop]"
                      :placeholder="propDescriptions[prop].placeholder"
                      :options="propDescriptions[prop].options"
                    />
                    <t-color-picker
                      class="w-full"
                      v-else-if="propDescriptions[prop].type === 'color'"
                      v-model="item[prop]"
                      :placeholder="propDescriptions[prop].placeholder"
                      format="CSS"
                      :enable-alpha="true"
                      :color-modes="
                        propDescriptions[prop].colorModes ||
                        propDescriptions[prop].colorModesFn(
                          item[propDescriptions[prop].colorModesBind]
                        )
                      "
                      :show-primary-color-preview="false"
                    />
                    <t-switch
                      v-else-if="propDescriptions[prop].type === 'bool'"
                      v-model="item[prop]"
                      class="ml-8 mt-8"
                      size="small"
                    />
                    <t-select
                      class="w-full"
                      v-else-if="propDescriptions[prop].type === 'child'"
                      v-model="item[prop]"
                      :placeholder="propDescriptions[prop].placeholder"
                    >
                      <t-option
                        v-for="(child, i) in selections.pen.children"
                        :key="i"
                        :value="i"
                        :label="`状态${i + 1}`"
                      />
                    </t-select>
                    <t-input
                      class="w-full"
                      v-else
                      v-model="item[prop]"
                      :placeholder="propDescriptions[prop].placeholder"
                    />
                  </div>
                </template>
                <template v-else>
                  <label>
                    {{ prop }}
                  </label>
                  <div>
                    <t-input class="w-full" v-model="item[prop]" />
                  </div>
                </template>

                <t-icon name="close" class="hover" />
              </div>
            </section>
          </t-collapse-panel>
        </t-collapse>
        <t-divider />
        <div class="mt-16 px-16">
          <t-button class="w-full" @click="addFrame" style="height: 30px">
            添加帧
          </t-button>
        </div>
      </template>
      <div class="flex column center blank" v-else>
        <img src="/img/blank.png" />
        <div class="gray center">还没有动画帧</div>
        <div class="mt-8">
          <t-button @click="addFrame" style="height: 30px">添加动画帧</t-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';

import { useSelection } from '@/services/selections';

const { animate } = defineProps<{
  animate: { name: string; frames: any[] };
}>();

const emit = defineEmits(['close']);

const { selections }: { selections: any } = useSelection();

const openedCollapses = ref([0]);

const frameProps: any = ref([]);

const propDescriptions: any = {
  visible: {
    label: '显示',
    type: 'bool',
  },
  scale: {
    label: '缩放',
    type: 'number',
    min: 0.01,
    max: 100,
    placeholder: '缩放比例',
  },
  rotate: {
    label: '旋转',
    type: 'number',
    min: 0,
    max: 360,
    placeholder: '°',
  },
  x: {
    label: 'X位移',
    type: 'number',
    placeholder: 'px',
  },
  y: {
    label: 'Y位移',
    type: 'number',
    placeholder: 'px',
  },
  color: {
    label: '前景颜色',
    type: 'color',
    colorModes: ['monochrome'],
  },
  bkType: {
    label: '背景类型',
    type: 'select',
    options: [
      {
        label: '纯色',
        value: 0,
      },
      {
        label: '线性渐变',
        value: 1,
      },
      {
        label: '径向渐变',
        value: 2,
      },
    ],
  },
  background: {
    label: '背景颜色',
    type: 'color',
    colorModesFn: (t: number) => {
      if (t > 0) {
        return ['linear-gradient'];
      } else {
        return ['monochrome'];
      }
    },
    colorModesBind: 'bkType',
  },
  text: {
    label: '文字',
  },
  showChild: {
    label: '状态',
    type: 'child',
  },
  flipX: {
    label: '水平翻转',
    type: 'bool',
  },
  flipY: {
    label: '垂直翻转',
    type: 'bool',
  },
  progress: {
    label: '进度',
    type: 'number',
    step: 0.1,
    min: 0,
    max: 1,
    placeholder: '0 - 1之间',
  },
  progressColor: {
    label: '进度颜色',
    type: 'color',
    colorModes: ['monochrome'],
  },
  verticalProgress: {
    label: '垂直进度',
    type: 'bool',
  },
  globalAlpha: {
    label: '透明度',
    type: 'number',
    step: 0.1,
    min: 0,
    max: 1,
    placeholder: '0 - 1之间',
  },
  dash: {
    label: '线条样式',
    type: 'select',
    options: [
      {
        label: `—————————`,
        value: 0,
      },
      {
        label: `- - - - - - - - - - - - -`,
        value: 1,
      },
      {
        label: `—  —  —  —  —  — — `,
        value: 2,
      },
      {
        label: `— - — - — - — - —`,
        value: 3,
      },
    ],
  },
  gradientRadius: {
    label: '背景渐变半径',
    type: 'number',
    min: 0,
    max: 1,
    placeholder: '0 - 1之间',
  },
  lineWidth: {
    label: '线条宽度',
    type: 'number',
    min: 1,
    placeholder: 'px',
  },
  strokeType: {
    label: '线条渐变',
    type: 'bool',
  },
  lineGradientColors: {
    label: '线条渐变颜色',
    type: 'color',
    colorModes: ['linear-gradient'],
  },
  fontFamily: {
    label: '显示阴影',
    type: 'select',
    options: [
      {
        label: '新宋体',
        value: '新宋体',
      },
      {
        label: '微软雅黑',
        value: '微软雅黑',
      },
      {
        label: '黑体',
        value: '黑体',
      },
      {
        label: '楷体',
        value: '楷体',
      },
      {
        label: '-apple-system',
        value: '-apple-system',
      },
      {
        label: 'BlinkMacSystemFont',
        value: 'BlinkMacSystemFont',
      },
      {
        label: 'PingFang SC',
        value: 'PingFang SC',
      },
      {
        label: 'Hiragino Sans GB',
        value: 'Hiragino Sans GB',
      },
      {
        label: 'Microsoft YaHei UI',
        value: 'Microsoft YaHei UI',
      },
      {
        label: 'Microsoft YaHei',
        value: 'Microsoft YaHei',
      },
      {
        label: 'fangsong',
        value: 'fangsong',
      },
      {
        label: 'Source Han Sans CN',
        value: 'Source Han Sans CN',
      },
      {
        label: 'sans-serif',
        value: 'sans-serif',
      },
      {
        label: 'serif',
        value: 'serif',
      },
      {
        label: 'Apple Color Emoji',
        value: 'Apple Color Emoji',
      },
      {
        label: 'Segoe UI Emoji',
        value: 'Segoe UI Emoji',
      },
      {
        label: 'Segoe UI Symbol',
        value: 'Segoe UI Symbol',
      },
    ],
  },
  fontSize: {
    label: '字体大小',
    type: 'number',
    min: 1,
    placeholder: 'px',
  },
  textColor: {
    label: '文字颜色',
    type: 'color',
    colorModes: ['monochrome'],
  },
  textBackground: {
    label: '文字背景',
    type: 'color',
    colorModes: ['monochrome'],
  },
  fontStyle: {
    label: '文字倾斜',
    type: 'select',
    options: [
      {
        label: `正常`,
        value: 'normal',
      },
      {
        label: `倾斜`,
        value: 'italic',
      },
    ],
  },
  fontWeight: {
    label: '文字加粗',
    type: 'select',
    options: [
      {
        label: `正常`,
        value: 'normal',
      },
      {
        label: `加粗`,
        value: 'bold',
      },
    ],
  },
  textHasShadow: {
    label: '文字阴影',
    type: 'bool',
  },
  shadow: {
    label: '显示阴影',
    type: 'bool',
  },
  shadowColor: {
    label: '阴影颜色',
    type: 'color',
    colorModes: ['monochrome'],
  },
  shadowBlur: {
    label: '阴影模糊半径',
    type: 'number',
    min: 0,
    placeholder: '正数',
  },
  shadowOffsetX: {
    label: '阴影X偏移',
    type: 'number',
    placeholder: 'px',
  },
  shadowOffsetY: {
    label: '阴影Y偏移',
    type: 'number',
    placeholder: 'px',
  },
};

const propOptions: any = reactive([]);

onMounted(() => {
  onChangeCollapse([0]);

  Object.keys(propDescriptions).forEach((key) => {
    propOptions.push({
      value: key,
      content: propDescriptions[key].label,
    });
  });
});

const addFrame = (i?: number) => {
  if (i == undefined) {
    i = animate.frames.length - 1;
  }
  animate.frames.splice(i, 0, {});

  openedCollapses.value = [i + 1];
  onChangeCollapse(openedCollapses.value);
};

const onChangeCollapse = (val: number[]) => {
  if (!animate.frames.length) {
    return;
  }
  frameProps.value = [];
  for (let i = 0; i < animate.frames.length; i++) {
    frameProps.value[i] = [];
  }
  for (const i of val) {
    Object.keys(animate.frames[i]).forEach((key) => {
      if (key !== 'duration') {
        frameProps.value[i].push(key);
      }
    });
  }
};

const addProp = (i: number, e: { value: string }) => {
  const found = frameProps.value[i].findIndex((key: string) => key === e.value);
  if (found < 0) {
    frameProps.value[i].push(e.value);
  }
};

const close = () => {
  emit('close');
};
</script>
<style lang="postcss" scoped>
.animate-frames {
  position: fixed;
  top: 100px;
  bottom: 12px;
  right: 308px;
  width: 300px;
  border: 1px solid var(--color-border-input);
  border-radius: 4px;
  box-shadow: rgba(39, 54, 78, 0.08) 0px 2px 10px 0px,
    rgba(39, 54, 78, 0.1) 4px 12px 40px 0px;

  & > .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-background-popup);
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1;
    color: var(--color-title);
  }

  .blank {
    height: 70%;
    img {
      padding: 16px;
      opacity: 0.9;
    }
  }

  .form-item {
    position: relative;

    & > div {
      width: 190px;
      flex-shrink: 0;
    }

    & > svg {
      flex-shrink: 0;
      visibility: hidden;
    }

    &:hover {
      & > svg {
        visibility: visible;
      }
    }
  }

  :deep(.t-collapse) {
    .t-collapse-panel__header {
      .t-input {
        border-color: transparent;
        &:hover {
          border-color: var(--color-border-input);
        }
      }
    }

    .t-collapse-panel__icon:hover {
      background: none;
      svg {
        color: var(--color-primary);
      }
    }
  }
}
</style>
