import { defineComponent, reactive, ref, watch } from 'vue';
import styles from '../operation.module.less';
import { Button, Checkbox, CheckboxGroup, Tag } from 'vant';

export default defineComponent({
  name: 'performance-team',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    performances: {
      type: Array,
      default: () => []
    },
    selectIds: {
      // 选中声部编号
      type: Array,
      default: () => []
    }
  },
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    const checkboxRefs = ref([] as any);
    const forms = reactive({
      performanceList: props.performances || [],
      checkboxs: props.selectIds || ([] as any)
    });

    // 选择
    watch(
      () => props.performances,
      () => {
        console.log(props.performances, 'props.performances');
        forms.performanceList = props.performances;
      }
    );

    watch(
      () => props.selectIds,
      () => {
        forms.checkboxs = props.selectIds;
      }
    );

    watch(
      () => props.show,
      () => {
        if (!props.show) forms.checkboxs = props.selectIds;
      }
    );

    return () => (
      <div class={styles.popupContainer}>
        <h2 class={styles.popupTitle}>选择表演团队</h2>
        <CheckboxGroup
          class={[styles.searchTypeFlex, styles.multFlex]}
          v-model={forms.checkboxs}>
          {forms.performanceList.map((item: any, index: number) => (
            <Tag
              type={
                forms.checkboxs.includes(item.subjectId) ? 'primary' : 'default'
              }>
              <Checkbox
                name={item.subjectId}
                ref={(el: any) => (checkboxRefs.value[index] = el)}
                onClick={(e: MouseEvent) => {
                  e.stopPropagation();
                }}
              />
              <span class={'van-ellipsis'}>{item.subjectName}</span>
            </Tag>
          ))}
        </CheckboxGroup>
        <div class={['btnGroupPopup']}>
          <Button round onClick={() => emit('close')}>
            取消
          </Button>
          <Button
            type="primary"
            round
            onClick={() => emit('confirm', forms.checkboxs)}>
            确定
          </Button>
        </div>
      </div>
    );
  }
});
