<template>
  <el-checkbox-group v-model="tmp" @change="changeSelected">
    <div
      v-for="item in options"
      :key="item.value"
      class="flex-start flex-col mr-15 inline-flex"
    >
      <el-checkbox
        :label="item.value"
      >{{ item.label }}</el-checkbox>
      <div>
        <i class="el-icon-arrow-right icon-font" />
        <el-checkbox
          icon="el-icon-arrow-right"
          :label="`${item.value}_top`"
          :disabled="!tmp.includes(item.value)"
        >置顶</el-checkbox>
      </div>
    </div>
  </el-checkbox-group>
</template>

<script>
export default {
  name: 'SetCheckBoxWithTop',

  props: {
    value: {
      type: Array,
      default: () => []
    },
    options: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      tmp: []
    }
  },

  watch: {
    value: {
      handler(val) {
        this.tmp = val
      },
      immediate: true
    }
  },

  methods: {
    changeSelected(params) {
      const result = params
      this.options.map(x => {
        const key = x.value
        const topIndex = result.findIndex(y => y === `${key}_top`)
        const index = result.findIndex(y => y === key)
        if (index === -1 && topIndex !== -1) result.splice(topIndex, 1)
      })
      this.$emit('input', result)
    }
  }
}
</script>

<style scoped>
.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.flex-col {
  flex-direction: column;
}
.mr-15 {
  margin-right: 15px;
}
.inline-flex {
  display: inline-flex;
}
.icon-font {
  font-size: 14px;
  padding-right: 5px;
}
</style>
