<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="名称" prop="title">
        <el-input
          v-model="form.title"
          placeholder="请输入名称"
          :disabled="dlgType === 3"
        />
      </el-form-item>
      <el-form-item label="题目列表" prop="questionIds">
        <el-button type="primary" @click="selectQuestion">
          {{ selectNumber ? `已选${selectNumber}条题目` : "选择题目" }}
        </el-button>
      </el-form-item>
      <el-form-item label="显示状态" prop="status">
        <el-select
          :disabled="dlgType === 3"
          v-model="form.status"
          placeholder="请选择显示状态"
          style="width: 100%"
        >
          <el-option
            v-for="dict in statusOption"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          :disabled="dlgType === 3"
          type="textarea"
          :rows="4"
          v-model="form.remark"
          placeholder="请输入备注"
        />
      </el-form-item>
    </el-form>
    <div style="text-align: right" v-if="dlgType !== 3">
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
    <div style="text-align: right" v-else>
      <el-button @click="handleCancel">关 闭</el-button>
    </div>
    <!-- 题目列表（可选） -->
    <el-dialog title="选择题目" :visible.sync="dlgVisible" append-to-body>
      <QuestionSelect
        ref="questionRef"
        :selectedIds="selectedIds"
        @close="handleClose"
        @confirm="confirmQuestion"
      />
    </el-dialog>

    <!-- 题目列表（不可选，用于查看的） -->
    <el-dialog title="已选题目" :visible.sync="selectedVisible" append-to-body>
      <SelectedQuestion
        :selectedIds="selectedIds"
        @close="selectedVisible = false"
      />
    </el-dialog>
  </div>
</template>

<script>
import QuestionSelect from "@/components/QuestionSelect";
import SelectedQuestion from "@/components/SelectedQuestion";
export default {
  components: { QuestionSelect, SelectedQuestion },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    loading: {
      type: Boolean,
      default: false,
    },
    dlgType: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      // 状态组
      statusOption: [
        { value: "0", label: "显示" },
        { value: "1", label: "隐藏" },
      ],
      // 题目列表弹窗相关参数
      dlgVisible: false,
      selectedVisible: false,
      selectedIds: "",
      // 已选题目的条数
      selectNumber: 0,
      form: {
        title: "",
        questionIds: "",
        status: "",
        remark: "",
      },
      rules: {
        title: [{ required: true, trigger: "blur", message: "请输入名称" }],
        questionIds: [
          { required: true, trigger: "blur", message: "请选择题目" },
        ],
        status: [
          { required: true, trigger: "change", message: "请选择显示状态" },
        ],
      },
    };
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.form = {
            id: newVal.id || "",
            title: newVal.title || "",
            questionIds: newVal.questionIds || "",
            status: newVal.status || "",
            remark: newVal.remark || "",
          };
          let selects = newVal.questionIds ? newVal.questionIds.split(",") : [];
          this.selectNumber = selects.length;
          this.$nextTick(() => {
            this.$refs.form && this.$refs.form.clearValidate();
          });
        }
      },
    },
  },
  methods: {
    // 关闭题库弹窗
    handleClose() {
      this.dlgVisible = false;
    },
    // 选择题目，打开题库弹窗
    selectQuestion() {
      if (this.dlgType !== 3) {
        this.dlgVisible = true;
        this.$refs.questionRef && this.$refs.questionRef.resetQuery();
      } else {
        this.selectedVisible = true;
      }
      this.selectedIds = this.form.questionIds;
    },
    // 确认添加题目
    confirmQuestion(val) {
      // console.log(val);
      this.form.questionIds = val.map((t) => t.id).join(",");
      this.selectNumber = val.length;
      // console.log(this.form.questionIds);
    },
    // 确定
    handleConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let obj = {
            ...this.form,
          };
          console.log(obj);
          this.$emit("confirm", obj);
        }
      });
    },

    // 取消
    handleCancel() {
      this.form = {
        title: "",
        questionIds: "",
        status: "",
        remark: "",
      };
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate();
      });
      this.$emit("cancel");
    },
  },
};
</script>

<style lang="scss" scoped></style>
