<template>
  <sd-value-picker
    ref="picker"
    :modal-props="{ class: $style.iconWrapper, width: 860 }"
    v-bind="$props"
    single
    title="选择图标"
    v-on="$listeners"
  >
    <template v-slot="scope">
      <a-card :class="$style.iconCard">
        <a-radio-group v-if="!theme" v-model="radioVal" :class="$style.typeRadio">
          <a-radio-button v-for="item in sourceIcons" :key="item.theme" :value="item.theme">
            {{ item.label }}
          </a-radio-button>
        </a-radio-group>
        <!-- 占位 -->
        <div v-else :class="$style.themePlace"></div>
        <a-tabs v-if="viewIcons" :key="viewIcons.theme" @change="toggleTabs">
          <a-tab-pane v-for="(item, i) in viewIcons.icons" :key="i" :tab="item.type">
            <sd-picker-source-icon
              v-if="typeKey === i"
              :type-key="typeKey"
              :load-list-data="item.iconList"
              :render="itemRender"
              v-bind="scope"
            />
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </template>
  </sd-value-picker>
</template>

<script>
import cloneDeep from 'lodash.clonedeep'
import { allIcons } from '@/common/components/sd-icon-library'
import officalIcons from '@/common/components/sd-icon-library/offical-icons'
import SdIcon from './sd-icon'
import SdPickerSourceIcon from './sd-picker/sd-picker-source-icon.vue'
import components from './_import-components/sd-icon-picker-import'
import pickerMixinInternal from './sd-picker/picker-mixin-internal'

function getTheme(t) {
  switch (t) {
    case 'outline':
      return 'outlined'
    case 'fill':
      return 'filled'
    case 'twotone':
      return 'twoTone'
    default:
      return t
  }
}

/**
 * input框，通过弹出对话框选择图标
 * @displayName SdIconPicker 图标选择器
 */
export default {
  name: 'SdIconPicker',
  components: {
    ...components,
    'sd-picker-source-icon': SdPickerSourceIcon,
  },
  mixins: [pickerMixinInternal],
  props: {
    /**
     * @ignore
     */
    single: {
      type: Boolean,
      default: false,
    },
    /**
     * <p>指定图标的风格，默认不指定，即显示全部</p>
     * <p>线框风格：outlined</p>
     * <p>实底风格：filled</p>
     * <p>双色风格：twoTone</p>
     * @since 8.1.0.24
     */
    theme: {
      type: String,
      default: undefined,
    },
  },
  data() {
    return {
      radioVal: 'outlined',
      typeKey: 0,
    }
  },
  computed: {
    sourceIcons() {
      // antd 提供的图标
      const icons = cloneDeep(officalIcons)
      // 系统推荐（产品定制）图标
      const sysIcons = cloneDeep(allIcons)
      // 转换theme(转换为对外暴露的值)
      sysIcons.forEach((icon) => {
        icon.theme = getTheme(icon.theme)
      })
      // 合并系统推荐(产品定制)图标
      icons.forEach((icon) => {
        // 从系统推荐图标中获取相同风格的图标
        const iconList = sysIcons
          .filter((_) => _.theme === icon.theme)
          .map((_) => ({
            id: `${_.name}/${_.theme}`,
            name: _.name,
            theme: _.theme,
          }))
        icon.icons.unshift({
          type: '系统推荐',
          iconList,
        })
      })
      return icons
    },
    viewIcons() {
      return this.sourceIcons.find((s) => s.theme === this.radioVal)
    },
  },
  watch: {
    radioVal() {
      this.typeKey = 0
    },
  },
  created() {
    if (this.theme) {
      this.radioVal = this.theme
    }
  },
  methods: {
    itemRender(item) {
      return (
        <div class='custom-icon-list'>
          <SdIcon type={item.id.split('/')[0]} theme={item.id.split('/')[1]} />
          <span>{item.name}</span>
        </div>
      )
    },
    toggleTabs(key) {
      this.typeKey = key
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$icon-margin: 10px;
.icon-wrapper {
  .icon-card {
    width: 800px;
    .type-radio {
      margin-bottom: $icon-margin;
    }
    .theme-place {
      height: 32px;
      margin-bottom: $icon-margin;
    }
  }
  :global(.ant-modal-body) {
    min-height: 400px;
    overflow: visible;
  }

  :global(.ant-tabs-content) {
    height: 350px;
  }
  :global .ant-transfer-list {
    height: auto;
    border: none;
    .ant-transfer-list-content {
      height: 410px;
      padding: $icon-margin;
      overflow-y: scroll;
    }
    .ant-transfer-list-body-search-wrapper {
      position: absolute;
      top: 4px;
      left: 420px;
      z-index: 99;
      width: 350px;
    }
    .ant-transfer-list-content-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .custom-icon-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100px;
        cursor: pointer;
      }
      span {
        text-align: center;
      }
      &:hover {
        background-color: transparent;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }

      .ant-checkbox-wrapper,
      .ant-radio-wrapper {
        width: 100%;
        margin-right: 0;
        transition: all 0.3s;
      }
      .ant-checkbox-wrapper-checked,
      .ant-radio-wrapper-checked {
        color: $white;
        background-color: $primary-color;
      }
      .anticon {
        /* stylelint-disable-next-line */
        font-size: 30px;
      }
      .ant-checkbox,
      .ant-radio {
        position: absolute;
        display: none;
      }

      .ant-checkbox + span,
      .ant-radio + span {
        padding: 0;
      }
    }
  }

  :global .ant-modal-body {
    padding-top: 10px;
  }
}
</style>
