<template>
  <a-input>
    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
      <slot :name="item" v-bind="data || {}"> </slot>
    </template>
    <template #suffix>
      <div class="colorRange">
        <input class="colorInput" v-model="color" type="color" />
      </div>
    </template>
  </a-input>
</template>
<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';

  export default defineComponent({
    name: 'NsInputColor',
    emits: ['change', 'validateChange'],
    setup(props, { attrs, emit }) {
      const color = ref(attrs.value);
      watch(
        () => color.value,
        (val) => {
          emit('change', val);
        },
        {
          immediate: true,
        },
      );
      return {
        color,
      };
    },
  });
</script>
<style lang="less" scoped>
  .colorRange {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    border-radius: 50%;
    width: 32px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAv1JREFUOE9dk01oXFUUx///e+97M0km7cRO2rRJ05lF60JKErIoAcFm4cZSa8GNFaRuXAlp7bq2XbgSLOlCV0IXLgQ3CuJCkBTcdVHjSkHrzKK0GtPOR+a9N+/djyPzihi8cLhcOL/fOVzOIf53mr8snLWu8YZT8xecX2i6cFxcmP+5CEe3rT14C2trnf0I/32cbdfrT110IwtmI/cHaMNx2NCCC01Y34STE3CuIciizdBTt3Cx1RuzpWAMO3IrD2Y58UpSV2UeFsX6kyzCi+XtfAthNA3JDKQw27Jr1/Fuq1cKzj+e/qTw6mo6hr3hwBqkYU5yd5q5X0IRTovLFylJBcgiSB4JrdoMl2av8vKTajOjbudBYeQVEq8xFvTcAaR2FZl7Gbk7A580BHsVPhcYwGpIodb53m5814LvOK+Yi8K4i74z2B1V2S1WMbBvSp6uQZ7VKMMYGEUQa2QsgOMmP+ipB07UiguAE4WRUBIXcSeP0UlP4e/kQymeLFG6U4LEEIWBOAV4BQZ2eH0AEQBCSgigB2EDMfQavyeH8eODe4L2POM0grKE8UqMB7WH6ADyToJAgIoUDYEGOEHgkKac6gr/WtnGDwtL8kcD7E+Uf1h278cxBr9I2YmIEzGBCgQ1RTSUyGwB1H4D8erH8ufu23w4MycPD5M7NUhvEkhjMDf4id8VuF0BN6oAaxTUFVArKPFTsPpIwMvvo//rRQz5ErrxLB7NKOzUgN4UMKziLu9bvBKTW5MQTmtKlAmjIRB1gXgH4LVLyO6fQ4KTyLEoiT7EZ1NGdmvg4xitcpDagtuTgVdMAahUYIaE6Usp0R+dR/79a5KiyRzHYHFEClVnv1LZXM14pRR0BXXJucVMllUKmAQwexQzEKrP1sV+dY4jWUDBoyhkFh4vbDscWW+Bz0e5lHRRVxY3dMINnQI6AfSeUH15BuHzCzIKcyyrY+ZOgombLaz8t0z71zNro4kBbuqUyzqRJfXtMsKnr3esO/a1DQe/mcZb9/bn/wP2RI8xMJtt1AAAAABJRU5ErkJggg==)
      no-repeat;
    background-size: 16px 16px;
    background-position: center;
    .colorInput {
      opacity: 0;
    }
  }
</style>
