import { Button, DatePicker, Picker, PickerColumn } from 'vant';
import {
  PropType,
  defineComponent,
  onMounted,
  reactive,
  ref,
  watch
} from 'vue';
import styles from './drop-down-more-modal.module.less';
import { coursesType, orchestraClassType } from '@/helpers/constant';

export default defineComponent({
  name: 'drop-down-modal',
  props: {
    selectValues: {
      type: Object,
      default: () => ({})
    },
    columns: {
      type: Array,
      default: () => []
    },
    open: {
      type: Boolean,
      default: false
    }
  },
  emits: ['dropDownClose', 'dropDownConfirm'],
  setup(props, { emit }) {
    const forms = reactive({
      values: [] as any
    });
    const pickerRef = ref();

    onMounted(() => {
      forms.values = props.selectValues;
    });

    watch(
      () => props.selectValues,
      () => {
        forms.values = props.selectValues;
      }
    );
    watch(
      () => props.open,
      () => {
        setTimeout(() => {
          forms.values = props.selectValues;
        }, 100);
      }
    );

    // 名称
    const formatLength = (name: string) => {
      if (name.length > 11) {
        const fristName = name.substring(0, 6);
        const lastName = name.substring(name.length - 5, name.length);
        return fristName + '...' + lastName;
      } else {
        return name;
      }
    };
    return () => (
      <>
        <div class={styles.searchContainer}>
          {props.columns.length > 0 && (
            <>
              <div class={styles.searchTitle}>乐团</div>
              <div class={[styles.searchTypeGroup, styles.searchTypeFlex]}>
                <div
                  class={[
                    styles.searchTypeItem,
                    '' === forms.values.musicGroupIds && styles['is-active']
                  ]}
                  onClick={() => {
                    forms.values.musicGroupIds = '';
                  }}>
                  全部乐团
                </div>
                {props.columns.map((item: any) => (
                  <div
                    class={[
                      styles.searchTypeItem,
                      item.value === forms.values.musicGroupIds &&
                        styles['is-active']
                    ]}
                    onClick={() => {
                      forms.values.musicGroupIds = item.value;
                    }}>
                    {formatLength(item.text)}
                  </div>
                ))}
              </div>
            </>
          )}

          <div class={styles.searchTitle}>班级类型</div>
          <div class={[styles.searchTypeGroup, styles.searchTypeFlex]}>
            {Object.keys(orchestraClassType).map(key => (
              <div
                class={[
                  styles.searchTypeItem,
                  key === forms.values.classGroupType && styles['is-active']
                ]}
                onClick={() => {
                  forms.values.classGroupType = key;
                }}>
                {orchestraClassType[key]}
              </div>
            ))}
          </div>
          <div class={styles.searchTitle}>课程类型</div>
          <div class={[styles.searchTypeGroup, styles.searchTypeFlex]}>
            {Object.keys(coursesType).map(key => (
              <div
                class={[
                  styles.searchTypeItem,
                  key === forms.values.courseScheduleType && styles['is-active']
                ]}
                onClick={() => {
                  forms.values.courseScheduleType = key;
                }}>
                {coursesType[key]}
              </div>
            ))}
          </div>
        </div>
        <div class={['btnGroupPopup', 'van-hairline--top']}>
          <Button
            round
            onClick={() =>
              emit('dropDownConfirm', {
                musicGroupIds: '',
                classGroupType: '',
                courseScheduleType: ''
              })
            }>
            重置
          </Button>
          <Button
            type="primary"
            round
            onClick={async () => {
              emit('dropDownConfirm', forms.values);
            }}>
            确定
          </Button>
        </div>
      </>
    );
  }
});
