<template>
  <view>
	<Sieving
	ref="daDropdown"
	:dropdownMenu="dropdownMenuList"
	themeColor="#333"
	@confirm="handleConfirm"
	@close="handleClose"
	@open="handleOpen">
		<!-- <template v-slot:slot2="{item,index}">
		  <view style="padding: 20px">
		    自定义插槽内容，更多业务
		    <button @click="$refs.daDropdown.closeMenuPopup()">关闭</button>
		  </view>
		</template> -->
	</Sieving>
  </view>
</template>

<script>
// 引入组件
import Sieving from '@/components/sieving/index.vue'
export default {
  components: { Sieving },
  data() {
    return {
      dropdownMenuList: [
        {
          title: '类型',
          type: 'cell',
          prop: 'god1',
          showAll: true,
          showIcon: true,
          value: '2', // 默认内容2
          options: [
            { label: '综合排序', value: '1' },
            // { label: '下拉列表项1', value: '1', suffix: '可插入副标题' },
            { label: '好评最多', value: '2' },
            { label: '距离最近', value: '3' },
          ],
        },
        
        {
          title: '口味',
          type: 'filter',
          prop: 'god4',
          // 默认选中单选2、多选2、3、滑动30
          value: { ft1: '2', ft2: ['2', '3'], ft3: 30 },
          options: [
            {
              title: '口味（单选）',
              type: 'radio',
              prop: 'ft1',
              options: [
                { label: '酱香', value: '1' },
                { label: '麻辣', value: '2' },
                { label: '特辣', value: '3' },
                { label: '微微辣', value: '4' },
              ],
            },
            {
              title: '配菜（可多选）',
              type: 'checkbox',
              prop: 'ft2',
              options: [
                { label: '香菜', value: '1' },
                { label: '辣椒', value: '2' },
                { label: '折耳根', value: '3' },
                { label: '蒜泥', value: '4' },
                { label: '耗油', value: '5' },
                { label: '精品牛肉酱', value: '6' },
              ],
            },
            {
              title: '糖度',
              type: 'slider',
              prop: 'ft3',
              componentProps: {
                min: 0,
                max: 100,
                step: 1,
                showValue: true,
              },
            },
          ],
        },
        {
          title: '区域',
          type: 'picker',
          prop: 'god5',
          showAll: true,
          showIcon: true,
          field: {
            label: 'label',
            value: 'value',
            children: 'children',
          },
          value: ['2', '2-2'], // 默认选中 级联X22
          options: [{
            label: '广东省',
            value: '1',
            children: [
              {
                label: '佛山市',
                value: '1-1',
              },
              {
                label: '深圳市',
                value: '1-2',
              }
            ],
          },
          {
            label: '海南省',
            value: '2',
            children: [
              {
                label: '海口市',
                value: '2-1',
              },
              {
                label: '儋州市',
                value: '2-2',
              },
              {
                label: '三亚市',
                value: '2-3',
              },
            ],
          },
          {
            label: '浙江省',
            value: '3',
            children: [
              {
                label: '杭州市',
                value: '3-1',
              },
              {
                label: '宁波市',
                value: '3-2',
              },
              {
                label: '嘉兴市',
                value: '3-3',
              },
            ],
          }],
        },
        {
          title: '日期',
          type: 'daterange',
          prop: 'god6',
          // 默认选中 2022-01-01到2022-02-01
          value: { start: '2022-01-01', end: '2022-02-01' },
        },
		// {
		//   title: '插槽',
		//   type: 'slot2',
		//   prop: 'god2',
		//   showArrow: true,
		// },
		// {
		//   title: '排序',
		//   type: 'sort',
		//   prop: 'god3',
		//   value: 'asc', // 默认升序
		// },
      ],
    }
  },
  mounted() {
  },
  methods: {
    handleConfirm(v, selectedValue) {
		console.log('当前项: ', v)
		console.log('---------------')
		console.log('全部项目(所有): ', selectedValue)
    },
    handleClose(v, callbackMenuList) {
      // console.log('handleClose ==>', v, callbackMenuList)
    },
    handleOpen(v) {
      // console.log('handleOpen ==>', v)
    },
  },
}
</script>

<style scoped>

</style>