<style lang="scss">
.ul-radio-group {
  border-radius: 5px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;

  .btn {
    background: transparent;
    padding: 0;
    margin: 0;
    border: none;
  }
  .item {
    min-width: 80px;
    padding: 0px 15px;
    text-align: center;
    display: inline-block;
    border: 1px solid #ccc;
    border-left: 0;
    height: 32px;
    line-height: 32px;
    cursor: pointer;
    .checkbox-button-input {
      width: 0;
      height: 0;
      opacity: 0;
    }
    .ant-checkbox {
      display: none;
    }
  }
  .bgcolor {
    color: rgba(0, 0, 0, 0.25);
    background-color: #f5f5f5;
    border-color: #d9d9d9;
    cursor: not-allowed;
  }
  .item::after {
    content: '';
    position: absolute;
    right: 1px;
    top: -2px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid;
    border-left-color: #e0e0e0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-radius: 2px;
  }
  .item:hover {
    color: #1890ff;
  }
  .selection {
    color: #fff;
    background: #1890ff;
    // border-color: #1890ff;
  }
  .item.selection:hover {
    color: #fff;
    background: #40a9ff;
  }
  .item.selection:after {
    border-left: 6px solid #1890ff;
  }
  .item:hover::after {
    // border-color: #40a9ff;
    border-left: 6px solid #40a9ff;
  }
  .bgcolor:hover {
    color: rgba(0, 0, 0, 0.25);
    background-color: #f5f5f5;
    border-color: #d9d9d9;
    cursor: not-allowed;
  }
  .bgcolor:hover::after {
    // border-color: #40a9ff;
    border-left: 6px solid #e0e0e0;
  }
  .bgcolor.selection:after {
    border-left: 6px solid #e0e0e0;
  }
  .bgcolor.selection {
    color: rgba(0, 0, 0, 0.25);
    background-color: #f5f5f5;
    border-color: #d9d9d9;
    cursor: not-allowed;
  }
  .bgcolor.selection:hover {
    // color: #1890ff;
    color: rgba(0, 0, 0, 0.25);
    background-color: #f5f5f5;
    border-color: #d9d9d9;
    cursor: not-allowed;
  }
  .bgcolor.selection:after {
    border-left: 6px solid #e0e0e0;
  }
  .ant-checkbox-wrapper + .ant-checkbox-wrapper {
    margin-left: 0;
  }
}
.ul-radio-group .item:first-child {
  border-radius: 5px 0 0 5px;
  border-left: 1px solid #ccc;
}
.ul-radio-group .item.selection:first-child {
  border-radius: 5px 0 0 5px;
  border-left: 1px solid #1890ff;
}
.ul-radio-group .item.selection:nth-child(2) {
  border-left: 1px solid #1890ff;
}
.ul-radio-group .item:first-child:after {
  border-left: 0;
}
.ul-radio-group .item:last-child {
  border-radius: 0px 5px 5px 0px;
}
</style>
<template>
    <div class="ul-radio-group">
        <a-checkbox-group v-model="selectedVal" :disabled="disabled" style="width: 100%">
            <a-checkbox
                v-for="item of selectOption"
                :label="item.label"
                :key="item.value"
                :value="item.value"
                :class="{
                    item: true && userButton,
                    selection: selectedVal && selectedVal.indexOf(item.value) > -1 && userButton,
                    bgcolor: item.disabled
                }"
            >
                {{ item.label }}
            </a-checkbox>
        </a-checkbox-group>
    </div>
</template>
<script>
import {isArray} from '@/utils/Tools';
import {getAction } from '@/api/manage';
export default {
    name: 'check-more-plat',
    props: {
        userButton: {
            type: Boolean,
            default() {
                return true
            }
        },
        code: {
            // 参数code
            type: String,
            default: ''
        },
        allValue: {
            type: Boolean,
            default() {
                return false
            }
        },
        options: {
            // 外部传入的option 可替代请求项
            type: Array,
            default() {
                return []
            }
        },
        value: {
            // v-model绑定值
            type: [Number, Array, String],
            default() {
                return []
            }
        },
        label: {
            // label 绑定值
            type: [Array, String],
            default: ''
        },
        radioStyle: {
            // 是否复选框模拟单选效果
            type: Boolean,
            default: false
        },
        disabled: {
            // 是否禁用
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            selectOption: []
        }
    },
    watch: {
        options(val) {
            if (isArray(val)) {
                this.selectOption.splice(0, this.selectOption.length);
                this.selectOption.push(...val);
            }
        },
        selectedVal(n, o) {
            if (this.radioStyle && !this.allValue) {
                if (n.length == 0) {
                this.selectedVal = o;
                }
            }
        }
    },
    computed: {
        selectedVal: {
            get: function () {
                return this.value;
            },
            set: function (val) {
                this.selectChange(val);
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            if (this.code && this.options.length == 0) {
                // 如果code值不为空且options.lengt==0， 则去请求字典项
                this.getOptions();
            }
            else {
                // 否则直接获取外部传入的options
                this.selectOption.splice(0, this.selectOption.length);
                this.selectOption.push(...this.options);
            }
        });
    },
  methods: {
    getOptions() {
        // 获取字典项
        getAction('/sys/dictItem/list', { dictId: this.code, pageSize: 1000, pageNo: 1 }).then((res) => {
            if (res.success && isArray(res.result.records)) {
                var data = res.result.records;
                data = data.map((item) => {
                    return {
                        label: item.itemText,
                        value: item.itemValue,
                        ...item
                    };
                });
                if (this.allValue) {
                    data.unshift({ label: '不检查', value: 'unlimited' });
                    if (this.value == '' || this.value == '' || this.value == null || this.value.length == 0) {
                        this.selectedVal = ['unlimited'];
                    };
                }
                else {
                    if (this.value == '' || this.value == '' || this.value == null || this.value.length == 0) {
                        this.selectedVal = [];
                    }
                }
                this.selectOption.push(...data);
            }
        });
    },
    selectChange(val) {
        // 选择事件
        if (!this.radioStyle) {
            // 多选
            var retrunData = [];
            let label = this.selectOption.filter((v) => val.findIndex((item) => item == v.value) > -1).map((v) => v.label);
            if (this.allValue) {
                if (val.findIndex((item) => item == 'unlimited') == 0) {
                    retrunData = val.slice(-1);
                }
                else if (val.findIndex((item) => item == 'unlimited') == val.length - 1) {
                    retrunData = ['unlimited'];
                }
                else {
                    retrunData = val;
                }
            }
            else {
                retrunData = val;
            }
            this.$emit('input', retrunData);
            this.$emit('update:label', label);
            this.$emit('change', val);
        }
        else {
            // 模拟单选radio效果
            let selectVal = [];
            if (this.allValue) {
                if (val.length == 0) {
                    selectVal = ['unlimited'];
                }
            }
            else {
                if (val.length == 0) {
                    selectVal = [];
                }
            }
            if (val.length > 0) {
                selectVal = val.slice(-1);
            }
            let label = this.selectOption
            .filter((v) => selectVal.findIndex((item) => item == v.value) > -1)
            .map((v) => v.label);
            this.$emit('input', selectVal);
            this.$emit('update:label', label);
            this.$emit('change', selectVal);
        }
    },
    emitChange(...args) {
        // emit change事件
        this.$emit('change', ...args);
    },
    consoleFun(...args) {
        // 打印信息
        if (process.env.NODE_ENV == 'development') {
            console.log(...args);
        }
    }
  }
}
</script>

