<template>
  <div class="co-radiolist" @change="$emit('change', currentValue)">
    <label class="co-radiolist-title" v-text="title"></label>
    <x-cell v-for="(option, i) in options" :key="i">
      <label class="co-radiolist-label" slot="title">
        <span
          :class="{'is-right': align === 'right'}"
          class="co-radio">
          <input
            class="co-radio-input"
            type="radio"
            v-model="currentValue"
            :disabled="option.disabled"
            :value="option.value || option">
          <span class="co-radio-core"></span>
        </span>
        <span class="co-radio-label" v-text="option.label || option"></span>
      </label>
    </x-cell>
  </div>
</template>

<script>
import XCell from 'CoUI/packages/cell/index.js';
if (process.env.NODE_ENV === 'component') {
  require('CoUI/packages/cell/style.css');
}
/**
 * co-radio
 * @module components/radio
 * @desc 单选框列表，依赖 cell 组件
 *
 * @param {string[]|object[]} options - 选项数组，可以传入 [{label: 'label', value: 'value', disabled: true}] 或者 ['ab', 'cd', 'ef']
 * @param {string} value - 选中值
 * @param {string} title - 标题
 * @param {string} [align=left] - checkbox 对齐位置，`left`, `right`
 *
 * @example
 * <co-radio v-model="value" :options="['a', 'b', 'c']"></co-radio>
 */
export default {
  name: 'co-radio',

  props: {
    title: String,
    align: String,
    options: {
      type: Array,
      required: true
    },
    value: String
  },

  data() {
    return {
      currentValue: this.value
    };
  },

  watch: {
    value(val) {
      this.currentValue = val;
    },

    currentValue(val) {
      this.$emit('input', val);
    }
  },

  components: {
    XCell
  }
};
</script>

<style lang="css">
  @import "../../../src/style/var-ios9.css";

  @component-namespace co {
    @component radiolist {

      .co-cell {
        padding: 0;
      }

      @descendent label {
        display: block;
        padding: 0 0.5rem;
      }

      @descendent title {
        font-size: 0.6rem;
        margin: 0.4rem;
        display: block;
        color: $radio-title-color;
      }
    }

    @component radio {
      @when right {
        float: right;
      }

      @descendent label {
        vertical-align: middle;
        margin-left: 0.3rem;
      }

      @descendent input {
        display: none;

        &:checked {
          + .co-radio-core {
            background-color: $color-blue;
            border-color: $color-blue;

            &::after {
              background-color: $color-white;
              transform: scale(1);
            }
          }
        }

        &[disabled] + .co-radio-core {
          background-color: $color-grey;
          border-color: #ccc;
        }
      }

      @descendent core {
        display: inline-block;
        background-color: $color-white;
        border-radius: 100%;
        border: 0.05rem solid #ccc;
        position: relative;
        size: 1rem;
        vertical-align: middle;

        &::after {
          content: " ";
          border-radius: 100%;
          position: absolute 0.25rem * * 0.25rem;
          size: 0.4rem;
          transition: transform .2s;
          transform: scale(0);
        }
      }
    }
  }
</style>
