<script>
type ItemType = {
	value : string
	name : string
	checked : boolean
}
export default {
	data() {
		return {
			items: [
				{
					value: 'CHN',
					name: '中国',
					checked: true,
				},
				{
					value: 'USA',
					name: '美国',
					checked: false,
				},
				{
					value: 'BRA',
					name: '巴西',
					checked: false,
				},
				{
					value: 'JPN',
					name: '日本',
					checked: false,
				},
				{
					value: 'ENG',
					name: '英国',
					checked: false,
				},
				{
					value: 'FRA',
					name: '法国',
					checked: false,
				},
			] as ItemType[],

			text: '未选中',
			wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
			value: [] as string[],
			disabled: true,
			checked: true,
			color: '#007aff',
			// 组件属性 autotest
			checked_boolean: false,
			disabled_boolean: false,
			color_input: "#007aff",
			backgroundColor_input: "#ffffff",
			borderColor_input: "#d1d1d1",
			activeBackgroundColor_input: "#ffffff",
			activeBorderColor_input: "#d1d1d1",
			iconColor_input: "#007aff"
		}
	},
	methods: {
		checkboxChange: function (e : CheckboxGroupChangeEvent) {
			const selectedNames : string[] = []
			this.items.forEach((item) => {
				if (e.detail.value.includes(item.value)) {
					selectedNames.push(item.name)
				}
			})
			uni.showToast({
				icon: 'none',
				title: '当前选中:' + selectedNames.join(','),
			})
		},
		testChange: function (e : CheckboxGroupChangeEvent) {
			this.value = e.detail.value
		},
		checkbox_click() { console.log("组件被点击时触发") },
		checkbox_touchstart() { console.log("手指触摸动作开始") },
		checkbox_touchmove() { console.log("手指触摸后移动") },
		checkbox_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
		checkbox_touchend() { console.log("手指触摸动作结束") },
		checkbox_tap() { console.log("手指触摸后马上离开") },
		checkbox_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
		change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
		change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
		confirm_color_input(value : string) { this.color_input = value },
		confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
		confirm_borderColor_input(value : string) { this.borderColor_input = value },
		confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
		confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
		confirm_iconColor_input(value : string) { this.iconColor_input = value }
	}
}
</script>

<template>
  <view class="main">
    <checkbox
      :disabled="disabled_boolean"
      :checked="checked_boolean"
      :color="color_input"
      :backgroundColor="backgroundColor_input"
      :borderColor="borderColor_input"
      :activeBackgroundColor="activeBackgroundColor_input"
      :activeBorderColor="activeBorderColor_input"
      :iconColor="iconColor_input"
      @click="checkbox_click"
      @touchstart="checkbox_touchstart"
      @touchmove="checkbox_touchmove"
      @touchcancel="checkbox_touchcancel"
      @touchend="checkbox_touchend"
      @tap="checkbox_tap"
      @longpress="checkbox_longpress"
      ><text>uni-app-x</text></checkbox
    >
  </view>

  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view class="content">
      <page-head title="组件属性"></page-head>
      <boolean-data
        :defaultValue="false"
        title="当前是否选中，可用来设置默认选中"
        @change="change_checked_boolean"
      ></boolean-data>
      <boolean-data
        :defaultValue="false"
        title="是否禁用"
        @change="change_disabled_boolean"
      ></boolean-data>
      <input-data
        defaultValue="#007aff"
        title="checkbox的颜色"
        type="text"
        @confirm="confirm_color_input"
      ></input-data>
      <input-data
        defaultValue="#ffffff"
        title="checkbox默认的背景颜色"
        type="text"
        @confirm="confirm_backgroundColor_input"
      ></input-data>
      <input-data
        defaultValue="#d1d1d1"
        title="checkbox默认的边框颜色"
        type="text"
        @confirm="confirm_borderColor_input"
      ></input-data>
      <input-data
        defaultValue="#ffffff"
        title="checkbox选中时的背景颜色"
        type="text"
        @confirm="confirm_activeBackgroundColor_input"
      ></input-data>
      <input-data
        defaultValue="#d1d1d1"
        title="checkbox选中时的边框颜色"
        type="text"
        @confirm="confirm_activeBorderColor_input"
      ></input-data>
      <input-data
        defaultValue="#007aff"
        title="checkbox的图标颜色，优先级大于color属性"
        type="text"
        @confirm="confirm_iconColor_input"
      ></input-data>
    </view>

    <view>
      <page-head title="默认及使用"></page-head>
      <view class="uni-padding-wrap uni-common-mt">
        <view class="uni-title uni-common-mt">
          <text class="uni-title-text"> 默认样式 </text>
        </view>
        <view>
          <checkbox-group
            class="uni-flex uni-row checkbox-group"
            @change="testChange"
            style="flex-wrap: wrap"
          >
            <checkbox
              value="cb"
              :checked="checked"
              :color="color"
              style="margin-right: 30rpx"
              class="checkbox cb"
              >选中
            </checkbox>
            <checkbox
              value="cb1"
              style="margin-right: 30rpx"
              class="checkbox cb1"
              >{{ text }}</checkbox
            >
            <checkbox value="cb2" :disabled="disabled" class="checkbox cb2"
              >禁用</checkbox
            >
            <checkbox
              value="cb3"
              style="margin-top: 20rpx"
              class="checkbox cb3"
            >
              {{ wrapText }}
            </checkbox>
          </checkbox-group>
        </view>
        <view class="uni-title uni-common-mt">
          <text class="uni-title-text"> 不同颜色和尺寸的checkbox </text>
        </view>
        <view>
          <checkbox-group class="uni-flex uni-row checkbox-group">
            <checkbox
              value="cb1"
              :checked="true"
              color="#FFCC33"
              style="transform: scale(0.7); margin-right: 30rpx"
              class="checkbox"
              >选中
            </checkbox>
            <checkbox
              value="cb"
              color="#FFCC33"
              style="transform: scale(0.7)"
              class="checkbox"
              >未选中</checkbox
            >
          </checkbox-group>
        </view>
      </view>

      <view class="uni-padding-wrap">
        <view class="uni-title uni-common-mt">
          <text class="uni-title-text"> 推荐展示样式 </text>
        </view>
      </view>
      <view class="uni-list uni-common-pl">
        <checkbox-group @change="checkboxChange" class="checkbox-group">
          <checkbox
            class="uni-list-cell uni-list-cell-pd checkbox"
            v-for="(item, index) in items"
            :key="item.value"
            :value="item.value"
            :checked="item.checked"
            :class="index < items.length - 1 ? 'uni-list-cell-line' : ''"
          >
            {{ item.name }}
          </checkbox>
        </checkbox-group>
      </view>
    </view>

    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<style>
.main {
  max-height: 500rpx;
  padding: 10rpx 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-direction: row;
  justify-content: center;
}

.main .list-item {
  width: 100%;
  height: 200rpx;
  border: 1px solid #666;
}

.uni-list-cell {
  justify-content: flex-start;
}
</style>
