<template>
	<div class="xd-color">
		<div class="xd-color__input" id="xd-color">
			<el-input
				:disabled="disabled"
				v-model="color"
				:placeholder="placeholder"
				clearable
				@clear="inputChange"
				@input="inputChange"
				@blur="inputChange"
			></el-input>
		</div>
		<div class="xd-color__alpha" v-if="isAlpha">
			<el-input
				type="text"
				:disabled="disabled"
				v-model="alpha"
				placeholder="透明值：0~1"
				clearable
				@clear="inputChange"
				@input="inputChange"
				@blur="inputChange"
			></el-input>
		</div>
		<div class="xd-color__btn">
			<el-color-picker
        :class="{picker:isCheck === false}"
				color-format="hex"
				:disabled="disabled"
				:show-alpha="showAlpha"
				:value="color"
				:predefine="predefineColors"
				@change="handleChange"
			></el-color-picker>
		</div>
    <div
      v-if="showAlpha===false"
      class="transparent"
      :class="{check:isCheck === true}"
      @click="setColor"
      :style="{'--url-img-bg':'url(' + url +')'}"
    >
      <div></div>
      <i v-if="isCheck" class="el-icon-check"></i>
    </div>
	</div>
</template>

<script>
  import emitter from 'element-ui/src/mixins/emitter';
  export default {
    name: "XdColor",
    mixins: [emitter],
		props:{
      defaultValue: {
        type: String|null,
        default: null
      },

      maps: {
        type: Object | null,
        default() {
          return null
        },
      },

      setting: {
        type: Object,
        default() {
          return {
            showAlpha: false,
						isAlpha: false, //返回值是否为rgba模式
					}
        },
      },

      disabled: {
        type: Boolean,
        default: false,
      },

      size: {
        type: String,
        default: 'medium', //medium / small / mini
      },

      placeholder: {
        type: String,
        default: '请选择颜色值',
      },

      required: {
        type: Boolean,
        default: false,
      },

      //自定义方法
      handleCustom: {
        type: Function || null,
        default: null
      },

		},
    computed:{
      isCheck(){
        if(this.color === '') return '';
        return /^(rgba).+$/.test(this.color);
      }
    },
		data(){
      return {
        color: '',
        alpha: 1,

        showAlpha: false,
        isAlpha: false,
        predefineColors: [
          '#ff0000',
          '#cc0000',
          '#ff4500',
          "#f60",
          '#ff8c00',
          "#f90",
          '#ffcc00',
          '#ffd700',
          '#ffff00',
          '#90ee90',
          "#00ff00",
          "#00cc00",
          "#009900",
          "#006600",
          '#00ced1',
          '#00ffff',
          '#00ccff',
          '#1e90ff',
          '#0066ff',
          '#0000ff',
          '#fff',
          '#f9f9f9',
          '#f4f4f4',
          '#eee',
          '#e5e5e5',
          '#ccc',
          '#999',
          '#666',
          '#333',
          '#000',
        ],
        url:'data:image/png;base64,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',
			}
		},

		created(){
			if(this.defaultValue) {
			  this.color = this.defaultValue;
			}

			if(this.setting && this.$xdHelper.checkVarType(this.setting.showAlpha) === 'boolean') {
			  this.showAlpha = this.setting.showAlpha
			}

      if (this.setting && this.$xdHelper.checkVarType(this.setting.isAlpha) === 'boolean') {
        this.isAlpha = this.setting.isAlpha
      }
      this.update();
		},

		methods: {
      handleChange(value) {
        this.color = value;
        this.inputChange()
      },

      setColor(){
        this.color = 'rgba(0,0,0,0)';
        this.update();
      },

      inputChange(value){
        this.update();
        this.change()
			},

      /**
			 * @description 需要校验检查参数是正确处理方法
       */
			checkParams(){
        return this.color;
			},

			/**
			 * @description 数据改变事件
			 */
			change(){
			  this.$emit('onChange', this.checkParams())
			},


      /**
			 * @description 双向绑定数据处理
       */
			update(){
        this.$emit('input', this.checkParams());
        if (this.$parent.$options['componentName'] === 'ElFormItem') {
          this.dispatch('ElFormItem', 'el.form.change', [this.checkParams()]);
          this.dispatch('ElFormItem', 'el.form.blur', [this.checkParams()])
        }
			},


		}
  }
</script>

<style scoped lang="scss">
	.xd-color {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;

    ::v-deep .picker .el-color-picker__trigger {
      border:1px solid $blue;
    }

    & .transparent {
      box-sizing: border-box;
      width: 35px;
      height: 35px;
      border:1px solid #eee;
      padding: 3px;
      border-radius: 4px;
      cursor: pointer;
      margin-left: 5px;
      position: relative;
      &.check {
        border:1px solid $blue;
      }

      & >i.el-icon-check {
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%, -50%);
        color: $blue
      }

      & > div{
        background-image: var(--url-img-bg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 100%;
        width: 100%;

      }
    }

		&__alpha {
			width: 90px;
			flex-shrink: 0;
			margin-left: 10px;
		}

		&__input {
			flex: 1;
			max-width: 200px;
		}

		&__btn {
			width: 36px;
			height: 36px;
			overflow: hidden;
			margin-left: 10px;
			flex-shrink: 0;
		}
	}

	@media screen and (max-width: 768px) {
		.xd-color {
			&__input {
			}



			&__alpha {
				width: 110px;
			}
		}
	}
</style>
