<template>
  <ConfigTitle :quiz-index="copyConfig.title" :title="title" />
  <div class="choice-config">
    <div
      class="choice-config-inline"
      :class="{ 'choice-config-inline-disable': disableUpdateBtn }"
    >
      <span class="choice-config-label">此题必答</span>
      <a-switch
        v-model:checked="copyConfig.config.is_required"
        :checkedValue="1"
        :unCheckedValue="0"
        :disabled="disableUpdateBtn"
        @change="switchChange"
      />
    </div>
  </div>
</template>

<script>
import { computed, reactive } from "@vue/reactivity";
import ConfigTitle from "../../components/config/ConfigTitle.vue";
import { quickQuesTypeList } from "../../../../../utils/common.js";
export default {
  name: "CascadeConfig",
  components: { ConfigTitle },
  emits: ["update"],
  props: {
    config: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, context) {
    const copyConfig = computed(() => {
      return reactive(JSON.parse(JSON.stringify(props.config)));
    });
    const disableUpdateBtn = computed(() => {
      return props.config.permissions?.disable_update || false;
    });
    const title = computed(() => {
      const type = copyConfig.value?.config.quick_type || 0;
      const str =
        quickQuesTypeList.find((q) => q.quickType === type)?.name || "级联题";
      return str;
    });
    const switchChange = () => {
      context.emit("update", copyConfig.value);
    };
    return {
      copyConfig,
      disableUpdateBtn,
      title,
      switchChange,
    };
  },
};
</script>

<style lang="scss" scoped>
.choice-config {
  padding: 32px 20px;
  width: 100%;
  background: #ffffff;
  border-radius: 6px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-size: 14px;
  color: #434343;
  &-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-disable {
      color: #8c8c8c;
    }
    &::v-deep .ant-switch-disabled {
      background-color: #d5ebc3;
      opacity: 1;
    }
  }
  &-label {
    font-weight: bold;
  }
  &-line {
    width: 100%;
    height: 1px;
    background: #f5f5f5;
    margin: 32px 0 23px 0;
  }
  &-option {
    display: flex;
    margin-top: 12px;
  }
}
</style>
