music-score/src/page-instrument/view-figner/change-subject/index.tsx

import { defineComponent, onMounted, reactive, watch } from "vue";
import styles from "./index.module.less";
import { Button, showToast } from "vant";
import { getQuery } from "/src/utils/queryString";

export default defineComponent({
  name: "change-subject",
  props: {
    subjectList: {
      type: Array,
      default: () => [],
    },
    subject: {
      type: String,
      default: "",
    },
  },
  emits: ["close", "confirm"],
  setup(props, { emit }) {
    const query = getQuery();
    const state = reactive({
      subjectValue: null as any,
      instrumentCode: null as any,
      selectList: [] as any,
    });

    // subject 变化时候 重新刷新
    watch(
      () => props.subject,
      () => {
        selectItem();
      }
    );
    //
    const selectItem = () => {
      // const i: any = props.subjectList.find((item: any) => item.value === props.subject);
      // if (i) {
      //   state.subjectValue = i.id;
      //   state.instrumentCode = i.value;
      //   state.selectList = [];
      // }
      // const i: any = props.subjectList.find((item: any) => item.value === props.subject);
      let i: any = {};
      props.subjectList.forEach((item: any) => {
        if (Array.isArray(item.children)) {
          item.children.forEach((child: any) => {
            if (child.value === props.subject) {
              i = {
                ...child,
                parentId: item.id,
              };
              state.instrumentCode = child.value;
              state.subjectValue = item.id;
              state.selectList = item.children || [];
            }
          });
        }
      });
      if (!i) {
        props.subjectList.forEach((item: any) => {
          if (item.children && item.children.length > 0) {
            item.children.forEach((child: any) => {
              if (child.value === props.subject) {
                state.instrumentCode = child.value;
                state.subjectValue = item.id;
                state.selectList = item.children;
              }
            });
          }
        });
      }
    };

    onMounted(() => {
      console.log(props.subjectList, "subjectList", props.subject, query);
      selectItem();
    });
    return () => (
      <div class={[styles.changeSubject, query.platform === "pc" && styles.changeSubjectPc]}>
        {/* <div class={styles.changeSubjectContainer}>
          <div class={styles.title}>乐器</div>

          <div class={styles.subjectContainer}>
            {props.subjectList.map((item: any) => (
              <div
                class={[styles.subjectItem, item.id === state.subjectValue && styles.active]}
                onClick={() => {
                  // if (item.children.length <= 0) {
                  //   state.instrumentCode = "";
                  // }
                  state.subjectValue = item.id;
                  state.instrumentCode = item.value;
                  // state.selectList = item.children;
                }}
              >
                {item.text}
              </div>
            ))}
          </div>
        </div> */}
        <div class={[styles.changeSubjectContainer, "changeSubjectContainer_pc"]}>
          <div class={styles.title}>声部</div>

          <div class={styles.subjectContainer}>
            {props.subjectList.map((item: any) => (
              <div
                class={[styles.subjectItem, item.children.length > 0 && styles.arrow, item.id === state.subjectValue && styles.active]}
                onClick={() => {
                  if (item.children.length <= 0) {
                    state.instrumentCode = "";
                  }
                  state.subjectValue = item.id;
                  state.selectList = item.children;
                  if (state.selectList.length > 0) {
                    state.instrumentCode = state.selectList[0].value;
                  }
                }}
              >
                {item.text}
              </div>
            ))}
          </div>

          {state.selectList.length > 0 && (
            <>
              <div class={styles.title}>乐器</div>
              <div class={styles.subjectContainer}>
                {state.selectList.map((item: any) => (
                  <div
                    class={[styles.subjectItem, item.value === state.instrumentCode && styles.active]}
                    onClick={() => {
                      state.instrumentCode = item.value;
                    }}
                  >
                    {item.text}
                  </div>
                ))}
              </div>
            </>
          )}
        </div>

        <div class={[styles.btnGroups, "btnGroups_pc"]}>
          <div
            class={[styles.btn, styles.resetBtn]}
            onClick={() => {
              emit("close");
              selectItem();
            }}
          ></div>
          <div
            class={[styles.btn, styles.confirmBtn]}
            onClick={() => {
              if (state.selectList.length > 0 && !state.instrumentCode) {
                showToast("请选择乐器");
                return;
              }
              emit("confirm", state.instrumentCode || state.subjectValue);
            }}
          ></div>
          {/* <Button
            round
            block
            class={styles.resetBtn}
            onClick={() => {
              emit("close");
              selectItem();
            }}
          >
            重置
          </Button>
          <Button
            type="primary"
            block
            round
            class={styles.confirmBtn}
            onClick={() => {
              if (state.selectList.length > 0 && !state.instrumentCode) {
                showToast("请选择乐器");
                return;
              }
              emit("confirm", state.instrumentCode || state.subjectValue);
            }}
          >
            确认
          </Button> */}
        </div>
      </div>
    );
  },
});