<template>
  <div style="padding: 15px 0;">
    <divider>radio:no default value</divider>
    <checker
      v-model="demo1"
      default-item-class="demo1-item"
      selected-item-class="demo1-item-selected"
    >
      <checker-item
        v-for="val in demo1Radio"
        :key="val"
        :value="val"
      >
        {{ val }}
      </checker-item>
      <!-- <checker-item :value="2">2</checker-item> -->
      <!-- <checker-item :value="3">3</checker-item> -->
    </checker>
    <br>
    <span>current value is: {{ demo1 }}</span>
    <br>

    <divider>checkbox</divider>
    <checker
      v-model="demo1Checkbox"
      type="checkbox"
      default-item-class="demo1-item"
      selected-item-class="demo1-item-selected"
    >
      <checker-item :value="1">
        1
      </checker-item>
      <checker-item :value="2">
        2
      </checker-item>
      <checker-item :value="3">
        3
      </checker-item>
    </checker>
    <br>
    <span>current value is: {{ JSON.stringify(demo1Checkbox) }}</span>
    <br>

    <divider>checkbox with max limit</divider>
    <checker
      v-model="demo1CheckboxMax"
      :max="2"
      type="checkbox"
      default-item-class="demo1-item"
      selected-item-class="demo1-item-selected"
    >
      <checker-item value="1">
        1
      </checker-item>
      <checker-item value="2">
        2
      </checker-item>
      <checker-item value="3">
        3
      </checker-item>
    </checker>
    <br>
    <span>current value is: {{ JSON.stringify(demo1CheckboxMax) }}</span>
    <br>

    <divider>default value 2</divider>
    <checker
      v-model="demo2"
      default-item-class="demo2-item"
      selected-item-class="demo2-item-selected"
    >
      <checker-item value="1">
        1
      </checker-item>
      <checker-item value="2">
        2
      </checker-item>
      <checker-item value="3">
        3
      </checker-item>
    </checker>
    <br>
    <span>current value is: {{ demo2 }}</span>
    <br>
    <divider>custom anything</divider>
    <checker
      v-model="demo3"
      default-item-class="demo3-item"
      selected-item-class="demo3-item-selected"
    >
      <checker-item value="one">
        <img
          src="http://placeholder.qiniudn.com/80x50/FF3B3B/ffffff"
          alt=""
        >
      </checker-item>
      <checker-item value="two">
        <img
          src="http://placeholder.qiniudn.com/80x50/FFEF7D/ffffff"
          alt=""
        >
      </checker-item>
      <checker-item value="three">
        <img
          src="http://placeholder.qiniudn.com/80x50/8AEEB1/ffffff"
          alt=""
        >
      </checker-item>
    </checker>
    <br>
    <span>current value is: {{ demo3 }}</span>
    <br>
    <divider>used in a popup</divider>
    <group>
      <cell
        title="select color"
        :value="demo4"
        is-link
        @click.native="showPopup=true"
      />
    </group>
    <popup
      v-model="showPopup"
      class="checker-popup"
    >
      <div style="padding:10px 10px 40px 10px;">
        <p style="padding: 5px 5px 5px 2px;color:#888;">
          Colors
        </p>
        <checker
          v-model="demo4"
          default-item-class="demo4-item"
          selected-item-class="demo4-item-selected"
          disabled-item-class="demo4-item-disabled"
          @on-item-click="showPopup=false"
        >
          <checker-item value="花跟叶">
            花跟叶
          </checker-item>
          <checker-item value="鸟与树">
            鸟与树
          </checker-item>
          <checker-item value="我和你">
            我和你
          </checker-item>
          <checker-item
            value="全套礼品装"
            disabled
          >
            全套礼品装
          </checker-item>
        </checker>
      </div>
    </popup>

    <divider>A real world radio example {{ demo5 }}</divider>
    <checker
      v-model="demo5"
      default-item-class="demo5-item"
      selected-item-class="demo5-item-selected"
    >
      <checker-item
        v-for="i in [1, 2, 3]"
        :key="i"
        :value="i"
      >
        ￥{{ i*300 }}
      </checker-item>
    </checker>
    <br>
    <divider>A real world checkbox example {{ JSON.stringify(demo6) }}</divider>
    <checker
      v-model="demo6"
      type="checkbox"
      default-item-class="demo5-item"
      selected-item-class="demo5-item-selected"
    >
      <checker-item
        v-for="i in [1, 2, 3]"
        :key="i"
        :value="i"
      >
        {{ ['good', 'nice','awesome'][i - 1] }}
      </checker-item>
    </checker>
  </div>
</template>

<script>
import { Checker, CheckerItem, Divider, Group, Cell, Popup } from '../components/_index'

export default {
  components: {
    Checker,
    CheckerItem,
    Divider,
    Group,
    Cell,
    Popup
  },
  data () {
    return {
      demo1: '1',
      demo1Radio: [1, 2, 3],
      demo1Checkbox: [2, 1],
      demo1CheckboxMax: ['2', '3'],
      demo2: '2',
      demo3: '',
      demo4: '花跟叶',
      showPopup: false,
      demo5: 1,
      demo6: [2, 3]
    }
  }
}
</script>

<style lang="less">
@import '../styles/variable.less';
@import '../styles/cui/widget/cui_cell/cui_cell_global';
.checker-popup {
  background: rgba(255,255,255,0.5);
}
.demo1-item {
  border: 1px solid #ccc;
  padding: 5/@w 15/@w;
}
.demo1-item-selected {
  border: 1px solid green;
}
.demo2-item {
  width: 40/@w;
  height: 40/@w;
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 50%;
  line-height: 40/@w;
  text-align: center;
}
.demo2-item-selected {
  border-color: green;
}
.demo3-item {
  padding: 5/@w;
  font-size: 0;
}
.demo3-item-selected {
  outline: 1px solid #8B8AEE;
}
.demo4-item {
  background-color: #ddd;
  color: #222;
  font-size: 14px;
  padding: 5/@w 10/@w;
  margin-right: 10/@w;
  line-height: 18/@w;
  border-radius: 15px;
}
.demo4-item-selected {
  background-color: #FF3B3B;
  color: #fff;
}
.demo4-item-disabled {
  color: #999;
}
.demo5-item {
  width: 100/@w;
  height: 26/@w;
  line-height: 26/@w;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin-right: 6/@w;
}
.demo5-item-selected {
  background: #ffffff url(../assets/demo/checker/active.png) no-repeat right bottom;
  border-color: #ff4a00;
}
</style>
