<template>
  <van-field
    v-model="element.stem"
    :label="element.stem"
    :required="element.config.is_required === 1"
    label-align="top"
    class="base-select"
  >
    <template #label>
      <div
        :contenteditable="active"
        class="van-field"
        @blur="saveStem($event, element)"
        v-html="element.stem"
      ></div>
    </template>
    <template #input>
      <van-checkbox-group>
        <template v-for="item in element.options">
          <van-checkbox
            v-for="(it, index) in item"
            :key="index"
            :name="it.value"
            :label="it.label"
            :disabled="it.disabled"
            icon-size="0.45rem"
          >
            <template #default>
              <div class="flex align-center space-between">
                <div
                  class="van-cell van-cell--borderless"
                  :contenteditable="active"
                  @blur="saveOption($event, it)"
                  v-html="it.option"
                ></div>
                <div class="right-action">
                  <option-action v-if="active"></option-action>
                </div>
              </div>
            </template>
          </van-checkbox>
        </template>
      </van-checkbox-group>
    </template>
  </van-field>
</template>
<script setup>
import OptionAction from '@/views/Design/components/ActionCompoents/OptionAction.vue';
import { ref } from 'vue';
const props = defineProps({
  element: {
    type: Object,
    default: () => {
      return {
        stem: ''
      };
    }
  },
  active: {
    type: Boolean,
    default: false
  }
});

const element = ref(props.element);
const saveOption = (e, ele) => {
  ele.option = e.target.innerHTML;
};
const saveStem = (e, ele) => {
  ele.stem = e.target.innerHTML;
};
</script>
<style scoped lang="scss">
.base-select {
  & .van-checkbox-group {
    width: 100%;

    & .van-checkbox {
      width: 100%;

      & ::v-deep .van-checkbox__label {
        width: 100%;
      }
    }
  }
}
</style>
