<template>
	<div class="xd-item-notice" v-if="initStatus">
    <div
      class="xd-item-notice__item"
      v-for="item in list"
      :key="item.value"
      @click="handleSelect(item)"
    >
      <div class="xd-item-notice__item-input">
        <el-checkbox :disabled="disabled || item.disabled" v-if="selectType === 'check'" @click.native.stop v-model="item.checked" @change="handleChange"></el-checkbox>
        <el-radio :disabled="disabled || item.disabled" v-if="selectType === 'radio'"  @click.native.stop v-model="radioValue" :label="item.value" @input="handleChange"></el-radio>
      </div>
      <div class="xd-item-notice__item-text" :style="{cursor: disabled ?'not-allowed!important':'pointer!important'}">
        <div class="xd-item-notice__item-text-inline" v-if="inline || isShowIcon">
          <span>{{item.label}}</span>
          <template v-if="item.notes">
            <span v-if="!isShowIcon" v-html="item.notes"></span>
            <el-tooltip
              popper-class="notice-popper"
              placement="top"
              v-else
              :content="item.notes"
            ><i class="el-icon-question"></i></el-tooltip>
          </template>

        </div>
        <div class="xd-item-notice__item-text-block" v-else>
          <div>{{item.label}}</div>
          <div v-if="item.notes" v-html="item.notes"></div>
        </div>
      </div>

    </div>
	</div>
</template>

<script>
  import emitter from 'element-ui/src/mixins/emitter';

  export default {
    name: "XdItemNotice",
    components: {},
    mixins: [emitter],
		props:{
      defaultValue: {
        type: Array|String|Number|null,
        default() {
          return []
        },
      },

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

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

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

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

      placeholder: {
        type: Object,
        default() {
          return {

          }
        },
      },

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

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

		},
		data(){
      return {
        isShowIcon: false,
        inline: true,
        selectType: 'check',
        initStatus: false,
        list: [],

        selectTypeList: ['check', 'radio'],

        radioValue: '',
			}
		},

		created(){
      //设置默认值
      if (typeof this.handleCustom !== 'function') {
        throw new Error(`请实现handleCustom自定义方法`);
      }

      if(this.setting
        && this.$xdHelper.checkVarType(this.setting) === 'object'
        && this.$xdHelper.checkVarType(this.setting.type) === 'string'
        && this.selectTypeList.includes(this.setting.type)
      ) {
        this.selectType = this.setting.type;
      }


      if(this.setting
        && this.$xdHelper.checkVarType(this.setting) === 'object'
        && this.$xdHelper.checkVarType(this.setting.icon) === 'boolean'
      ) {
        this.isShowIcon = this.setting.icon;
      }

      this.handleCustom({action: 'list', data: {
        params: {},
        cb:(res)=>{
          this.init(res);
        }
      }})
		},

		methods: {
      handleChange(){
        this.change();
        this.update()
      },

      handleSelect(item){
        if(this.disabled||item.disabled) return;
        if(this.selectType === 'check') item.checked = !item.checked;
        else this.radioValue = item.value;
        this.change();
        this.update()
      },

      checkStatus(value){
        if(this.selectType === 'check') {
          if(this.$xdHelper.checkVarType(this.defaultValue) === 'array') {
            if(this.defaultValue.length === 0) return false;
            else return this.defaultValue.includes(value)
          }else {
            return false
          }
        }
        else {
          return  value === this.defaultValue;
        }
      },

      init(list){
        let flag = true;
        this.list = list.map(item=>{
          if(item.notes) flag = false;
          return {...item, checked: this.checkStatus(item.value)}
        });
        if(this.selectType === 'radio') this.radioValue = this.defaultValue;
        this.inline = this.setting.inline === null? flag : this.setting.inline;
        if(!this.$xdHelper.isPC()) this.inline = false;
        this.initStatus = true;
        this.$nextTick(()=>{
          if(this.selectType === 'radio' && !this.defaultValue){
            this.update()
          }

          if(this.selectType === 'check'
            && this.$xdHelper.checkVarType(this.defaultValue) === 'array'
            && this.defaultValue.length > 0
          ){
            this.update()
          }
        })
      },


      /**
			 * @description 需要校验检查参数是正确处理方法
       */
			checkParams(isBackValue=true){
        if(this.selectType === 'radio') return  this.radioValue;
        return this.list.filter(item=>{
          return item.checked
        }).map(item=>{
          if(isBackValue) return item.value
          return item;
        })
			},

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


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

		}
  }
</script>

<style scoped lang="scss">
	.xd-item-notice {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-flow: wrap;

    & ::v-deep .el-radio__label {
      display: none;
    }


    &__item {
      margin: 0 20px 0 0;
      flex-shrink: 0;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;

      &-input {
        margin-right: 10px;
        margin-top: -1px;
      }


      & > div:nth-child(2) {
        cursor: pointer;
      }

      &-text {
        line-height: 36px;

        &-inline {
          font-size: 12px;

          & i.el-icon-question {
            margin-left: -8px;
            color: #ccc;
            font-size: 18px;
          }

          & > *:first-child {
            font-size: 14px;
            margin-right: 10px;
            font-weight: 700;
            color: #666;
          }

          & > *:nth-child(2) {
            font-size: 12px;
            color: #999;
          }
        }

        &-block {
          font-size: 12px;

          & > *:first-child {
            font-size: 14px;
            margin-right: 10px;
            font-weight: 700;
            color: #333;
            line-height: 16px;
            padding-top: 9px;
          }

          & > *:nth-child(2) {
            font-size: 12px;
            color: #999;
            line-height: 22px;
          }
        }
      }
    }
	}

	@media screen and (max-width: 768px) {
		.xd-item-notice {

      &__item {
        flex-shrink: 0;
        width: 100%;
        margin-bottom: 0;
        &-input{
          flex-shrink: 0;
        }

        &-text {
          flex: 1;

          & > * > *:nth-child(2){
            line-height: 16px;
            padding-top: 3px;
          }
        }
      }
    }
	}
</style>
<style>
.notice-popper {
  max-width: 250px;
}
</style>
