<template>
  <demo-section>
    <demo-block title="常规">
      <div class="demo-switch-row">
        <drip-switch
          :value="status11"
          @changed="getChoose"
          type="primary"
          :data="dataList1"
          :single="true">
        </drip-switch >
      </div>
      <div class="demo-switch-row">
        <drip-switch
          :value="status21"
          @changed="getChoose"
          :data="dataList2"
          type="primary"
          :single="false">
        </drip-switch >
      </div>
      <div class="demo-switch-row">
        <drip-switch
          :value="status21"
          @changed="getChoose"
          :single="false">
        </drip-switch >
      </div>
    </demo-block>
    <demo-block title="颜色">
      <div class="demo-switch-row">
        <drip-switch
          :value="status11"
          @changed="getChoose"
          type="green"
          :data="dataList1"
          :single="true">
        </drip-switch >
      </div>
      <div class="demo-switch-row">
        <drip-switch
          :value="status11"
          @changed="getChoose"
          type="primary"
          :data="dataList1"
          :single="true">
        </drip-switch >
      </div>
      <div class="demo-switch-row">
        <drip-switch
          :value="status11"
          @changed="getChoose"
          type="orange"
          :data="dataList1"
          :single="true">
        </drip-switch >
      </div>
      <div class="demo-switch-row">
        <drip-switch
          :value="status13"
          @changed="getChoose"
          type="orange"
          :data="dataList1"
          :single="true">
        </drip-switch >
      </div>
      <div class="demo-switch-row">
        <drip-switch
          :value="status12"
          @changed="getChoose"
          :data="dataList2"
          type="green"
          :single="false">
        </drip-switch >
      </div>
      <div class="demo-switch-row">
        <drip-switch
          :value="status12"
          @changed="getChoose"
          :data="dataList2"
          type="primary"
          :single="false">
        </drip-switch >
      </div>
      <div class="demo-switch-row">
        <drip-switch
          :value="status12"
          @changed="getChoose"
          :data="dataList2"
          type="orange"
          :single="false">
        </drip-switch >
      </div>
      <div class="demo-switch-row">
        <drip-switch
          :value="status21"
          @changed="getChoose"
          :data="dataList2"
          type="primary"
          :single="false">
        </drip-switch >
      </div>
    </demo-block>
    <demo-block title="禁用">
      <div class="demo-switch-row">
        <drip-switch
          :value="status21"
          @changed="getChoose"
          :disabled="true"
          :single="true"
          :data="dataList1">
        </drip-switch >
      </div>
      <div class="demo-switch-row">
        <drip-switch
          :value="status22"
          @changed="getChoose"
          :disabled="true"
          :data="dataList2">
        </drip-switch >
      </div>
    </demo-block>
  </demo-section>
</template>

<script>
export default {
  data () {
    return {
      status11: true,
      status12: false,
      status13: false,
      status21: true,
      status22: false,
      dataList1:[{
        name: '是的',
        value: true
      }, {
        name: '不是',
        value: false
      }],
      dataList2:[{
        name: '有',
        value: true
      }, {
        name: '无',
        value: false
      }]
    }
  },
  methods: {
    getChoose (current) {
      console.log(current)
    }
  }
}
</script>

<style lang="postcss">
.demo-switch-row {
  text-align: left;
  margin-left: 80px
}
</style>
