<template>
  <div class="el-color-select flex-center-center">
    <el-dropdown trigger="click">
      <div class="el-color-select-option--active" :class="disabled ? 'is-disabled' : '' ">
        <div class="el-color-select-box--active" @click="showColorSelect">
          <div
            v-if="!value"
            class="el-color-select-box__image--active"
            :style="{'background': `url(${defaultColorImg}) no-repeat top left/cover`}"
          ></div>
          <div
            v-else
            class="el-color-select-box__color--active"
            :style="{'background-color': value}"
          ></div>
        </div>
        <div
          class="el-color-select-option__label--active"
          @click="showColorSelect"
          v-if="label"
        >{{ label }}</div>
      </div>
      <el-dropdown-menu
        slot="dropdown"
        class="el-color-select-dropdown"
        :visible-arrow="showArrow"
      >
        <el-dropdown-item
          class="el-color-select-dropdown__item"
          v-for="(item, index) in data"
          :key="index"
        >
          <div
            class="el-color-select-option--items"
            @click="changeColor(item)"
          >
            <div class="el-color-select-box--items">
              <div
                v-if="!item.color"
                class="el-color-select-box__image--items"
                :style="{'background': `url(${defaultColorImg}) no-repeat top left/cover`}"
              ></div>
              <div
                v-else
                class="flex-center-center el-color-select-box__color--items"
                :style="{'background-color': item.color}"
              >
              </div>
            </div>
            <div class="el-color-select-option__label--items">{{ item.name }}</div>
          </div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>

</template>
<script>
import ElDropdown from 'element-ui/packages/dropdown';
import ElDropdownMenu from 'element-ui/packages/dropdown-menu';
import ElDropdownItem from 'element-ui/packages/dropdown-item';
const colorList = [
  {
    color: '',
    name: '不使用'
  },
  {
    color: '#D3D4C5',
    name: '豆沙'
  },
  {
    color: '#B2C2B6',
    name: '浅墨绿'
  },
  {
    color: '#E6FFAB',
    name: '浅绿'
  },
  {
    color: '#FEF6D5',
    name: '浅黄'
  },
  {
    color: '#BEE7E9',
    name: '青碧'
  },
  {
    color: '#C8F1FF',
    name: '浅蓝'
  },
  {
    color: '#D9E3F7',
    name: '灰蓝'
  },
  {
    color: '#E3C5D5',
    name: '藕色'
  },
  {
    color: '#FAE0FF',
    name: '浅粉'
  },
  {
    color: '#EFB5B5',
    name: '肉红'
  }
];
export default {
  name: 'ElColorSelect',
  components: {
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem
  },
  props: {
    data: {
      type: Array,
      default() {
        return colorList;
      }
    },
    label: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    showArrow: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultColorImg: 'https://static.dingdandao.com/c5ccc5f418e9da67f93626faab9c8df5'
    };
  },
  methods: {
    changeColor(data) {
      this.$emit('input', data.color);
      this.$emit('change', data.color);
    },
    showColorSelect(e) {
      if (this.disabled) {
        e.stopPropagation();
      }
    }
  }
};
</script>
