<template>
	<div class="xd-radio-custom">
		<div
			class="xd-radio-custom__item"
			v-if="list.length >0"
			v-for="(item) in list"
			:key="item.value"
			@click="handleClick(item)"
			:class="{
				active: item.value === listIndex,
				'xd-radio-custom__item-disabled': disabled,
			}"
			:style="{background: item.value === listIndex ? actionBgc : 'none'}"
		>
			<div :style="{textAlign: item.desc? '':'center'}">{{item.label}}</div>
			<div v-if="item.desc"><div v-html="item.desc"></div></div>
			<div class="bg" v-if="item.value === listIndex"></div>
			<div class="icon" v-if="item.value === listIndex"><i class="el-icon-check"></i></div>
		</div>
	</div>
</template>

<script>
  import emitter from 'element-ui/src/mixins/emitter';
  const Color = require('color');

  export default {
    name: "XdRadioCustom",
    mixins: [emitter],
		props:{
      defaultValue: {
        type: Number|String|Boolean|null,
        default: null,
      },

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

      setting: {
        type: Object,
        default() {
          return {}
        },
      },

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

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

      placeholder: {
        type: Object,
        default() {
          return {
            //todo
            // fullPlaceholder: '请输入金额',
            // cutPlaceholder: '请输入金额',
            //todo 插件文本框所使用提示（外面传入）
          }
        },
      },

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

      //是否启用自定义校验器
      useCustomRules: {
        type: Boolean,
        default: false,
      },

      //数字字符串 转 数字
      isNumber: {
        type: Boolean,
        default: true,
      },

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

		},
		data(){
      return {
        actionBgc: '',
        listIndex: '',
        list: []
			}
		},

		created(){
      this.actionBgc = `rgba(${Color(this.$variables.xdBlue).alpha(0.11).array().join(',')})`;
      this.handleMapToList();

      //绑定数据
      this.update();
		},

		methods: {

      handleClick(item){
        console.log('handleClick',this.disabled);
        if(this.disabled) return;
      	this.listIndex = item.value;
      	this.change();
      	this.update();
			},

      /**
       * @description 初始化映射关系到数据列表(需要自己实现)
			 * 把默认数据转化为内部数据
       */
      handleMapToList() {
        if(this.setting && this.$xdHelper.checkVarType(this.setting.list) === 'array'){
          this.list = this.setting.list;
				}
        if(this.defaultValue !== null) {
          this.listIndex = this.defaultValue;
				}
      },

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

			/**
			 * @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-radio-custom {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-flow: wrap;

		&__item {
			width: 170px;
			height: 80px;
			padding: 10px;
			background: #fff;
			border: 1px solid rgba(229, 229, 229, 1);
			border-radius: 5px;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-flow: wrap;
			margin-right: 10px;
			margin-bottom: 10px;
			cursor: pointer;
			position: relative;
			overflow: hidden;

			&.active {
				border: 1px solid $blue;

				& > div.bg {
					position: absolute;
					right: -20px;
					bottom: -20px;
					width: 40px;
					height: 40px;
					background: $blue;
					transform: rotate(45deg);
				}

				& > div.icon {
					width: 15px;
					height: 15px;
					position: absolute;
					right: 0;
					bottom: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
				}
			}

			&-disabled.active {
				border: 1px solid #e5e5e5;
				background: #F5F7FA!important;

				& > div.bg {
					position: absolute;
					right: -20px;
					bottom: -20px;
					width: 40px;
					height: 40px;
					background: #bbb;
					transform: rotate(45deg);
				}

				& > div:first-child {
					color: #999;
				}
			}

			& > div:first-child {
				font-size: 16px;
				color: #333;
				font-weight: bold;
				line-height: 20px;
				width: 100%;
				flex-shrink: 0;

			}

			& > div:nth-child(2) {
				font-size: 12px;
				color: #999;
				width: 100%;
				height: 45px;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				& > * {
					line-height: 16px;
				}
			}

			&-disabled {
				cursor: not-allowed;

				& > div:first-child {
					color: #999;
				}

				& > div:nth-child(2) {
					color: #aaa;
				}

			}


		}
	}

	@media screen and (max-width: 768px) {
		.xd-radio-custom {
		}
	}
</style>
