<template>
  <div
    class="mb-px flex text-text-primary items-center justify-between px-4 py-3 rounded"
    :class="className"
  >
    <div class="flex items-center justify-between flex-1 mr-1.5">
      <div class="title flex-shrink-0 mr-4">{{ title }}</div>
    </div>
    <van-switch
      active-color="#4F62C1"
      :value="checked"
      size="20px"
      @change="change"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Switch } from 'vant'

Vue.use(Switch)

export default Vue.extend({
  name: 'SwitchCell',
  components: {
    // 'app-icon':()=>import('@/components/common/Icon.vue')
  },
  props: {
    title: String,
    checked: {
      type: Boolean,
      default: false
    },
    className: {
      type: String,
      default: 'bg-white'
    }
  },
  methods: {
    change(val: boolean) {
      this.$emit('update:checked', val)
      this.$emit('change', val)
    }
  }
})
</script>

<style lang="less">

</style>
