<template>
  <div>
    <div class="color-selector-gradient" v-if="gradient" :class="{ active: showToColor }">
      <div class="color-selector">
        <Input class="color-selector-input" v-model="color" placeholder="请输入" @input="change"></Input>
        <ColorPicker placement="bottom-end" v-model="color" :alpha="alpha" @on-active-change="change($event)" @on-change="change($event)" />
      </div>
      <div class="color-selector-switch" @click="showToColor = !showToColor">
          <Icon type="ios-arrow-forward" />
      </div>
      <div class="color-selector" v-if="showToColor">
        <Input class="color-selector-input" v-model="toColor" placeholder="请输入" @input="change($event, 'to')"></Input>
        <ColorPicker placement="bottom-end" v-model="toColor" :alpha="alpha" @on-active-change="change($event, 'to')" @on-change="change($event, 'to')" />
      </div>
    </div>
    <div class="color-selector" v-else>
      <Input class="color-selector-input" v-model="color" placeholder="请输入" @input="change"></Input>
      <ColorPicker placement="bottom-end" v-model="color" :alpha="alpha" @on-active-change="change($event)" @on-change="change($event)" />
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      value: {
        type: [String, Array],
        default: ''
      },
      gradient: Boolean,
      alpha: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        showToColor: false,
        color: this.value || '',
        toColor: '',
      }
    },
    watch: {
      value(val) {
        if (Array.isArray(val)) {
          this.color = val[0];
          this.toColor = val[1];
          this.showToColor = true;
        } else {
          this.color = val;
        }
      },
      showToColor(val) {
        if (val && this.toColor) {
          this.$emit('input', [this.color, this.toColor]);
        } else {
          this.toColor = '';
          this.$emit('input', this.color);
        }
      }
    },
    methods: {
      change(val, type) {
        if (type === 'to' || this.toColor) {
          this.$emit('input', [this.color, this.toColor]);
        } else {
          this.$emit('input', val);
        }
      }
    }
  }
</script>
<style lang="less">
  .color-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-gradient {
      position: relative;
      .color-selector {
        padding-left: 28px;
      }
      &.active {
        .color-selector-switch {
          position: relative;
          top: 0;
          &::before {
            display: block;
          }
          .ivu-icon {
            transform: rotate(90deg);
            position: relative;
          }
        }
      }
    }
    &-switch {
      position: absolute;
      top: 5px;
      left: 0;
      .ivu-icon {
        position: absolute;
        z-index: 2;
        font-size: 16px;
        width: 20px;
        height: 20px;
        line-height: 21px;
        text-align: center;
        margin-right: 5px;
        cursor: pointer;
        background-color: #f5f5f5;
      }
      &::before {
        position: absolute;
        z-index: 1;
        display: none;
        content: ' ';
        top: 0;
        bottom: 0;
        left: 10px;
        margin: auto;
        height: 65px;
        width: 16px;
        border-color: #e8e8e8;
        border-width: 1px 0 1px 1px;
        border-style: solid;
      }
    }
    &-input {
      width: 100px !important;
      flex-basis: 100px !important;
    }
  }
</style>