import MHeader from '@/components/m-header';
import MSticky from '@/components/m-sticky';
import { Button, Tab, Tabs } from 'vant';
import { PropType, defineComponent, onMounted, reactive, watch } from 'vue';
import styles from '../index.module.less';
import CastItem from './cast-item';
import { useRect } from '@vant/use';
import deepClone from '@/helpers/deep-clone';

export default defineComponent({
  name: 'cast-modal',
  props: {
    type: {
      type: String as PropType<'edit' | 'look'>,
      default: 'edit'
    },
    subjectAllList: {
      type: Array,
      default: () => []
    },
    performerList: {
      type: Array,
      default: () => []
    }
  },
  emits: ['close', 'update:performerList', 'confirm'],
  setup(props, { emit }) {
    const formatSubjectList = () => {
      const performerList = props.performerList || ([] as any);

      props.subjectAllList.forEach((subject: any) => {
        const item: any = performerList.find(
          (item: any) => item.subjectId == subject.subjectId
        );
        subject.selectList = item ? deepClone(item.studentList) : [];
      });

      console.log(props.subjectAllList, 'props.subjectAllList');
      return props.subjectAllList || [];
    };
    const forms = reactive({
      varName: '--popup-navbar-height',
      popupHeight: 0,
      height: 0,
      bottomHeight: 0,
      subjectList: formatSubjectList()
    });

    onMounted(() => {
      const { height } = useRect(
        document.querySelector('.van-tab') as HTMLElement
      );
      forms.height = height;
    });

    watch(
      () => props.subjectAllList,
      () => {
        forms.subjectList = formatSubjectList();
      }
    );

    watch(
      () => props.performerList,
      () => {
        forms.subjectList = formatSubjectList();
      }
    );

    const onSubmit = () => {
      const selectList: any = [];
      forms.subjectList.forEach((subject: any) => {
        if (subject.selectList && subject.selectList.length > 0) {
          selectList.push({
            studentCount: subject.selectList.length,
            studentList: subject.selectList,
            subjectId: subject.subjectId,
            subjectName: subject.subjectName
          });
        }
      });
      console.log(selectList, 'selectList');
      emit('close');
      emit('update:performerList', selectList);
      emit('confirm', selectList);
    };

    return () => (
      <div
        class={styles.castPopupContainer}
        style="background-color: #f8f9fc; height: 100%">
        <MSticky
          varName={forms.varName}
          onBarHeight={(height: number) => {
            forms.popupHeight = height;
          }}>
          <MHeader title="演员名单" />
        </MSticky>
        <Tabs shrink sticky offsetTop={forms.popupHeight}>
          {forms.subjectList.map((item: any) => (
            <Tab
              name={item.subjectId}
              title={item.subjectName + `(${item.studentCount})`}>
              <CastItem
                type={props.type}
                height={forms.height}
                headerHeight={forms.popupHeight}
                bottomHeight={forms.bottomHeight}
                studentList={item.studentList}
                v-model:selectItem={item.selectList}
              />
            </Tab>
          ))}
        </Tabs>
        {/* 判断是否是编辑模式 */}
        {props.type === 'edit' && (
          <MSticky
            position="bottom"
            onBarHeight={(height: any) => {
              forms.bottomHeight = height;
            }}>
            <div class={'btnGroupFixed'}>
              <Button round block type="primary" onClick={onSubmit}>
                确认
              </Button>
            </div>
          </MSticky>
        )}
      </div>
    );
  }
});
