<template>
  <div>
    <el-form :model="form" label-width="80px" ref="form">
      <el-form-item
        label="分部"
        prop="organId"
        :rules="[{ required: true, message: '请选择分部' }]"
      >
        <el-select
          v-model.trim="form.organId"
          filterable
          clearable
          :disabled="makeType == 'update'"
          placeholder="请选择分部"
          @change="changeSection"
        >
          <el-option
            v-for="(item, index) in selects.branchs"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="合作单位"
        prop="school"
        :rules="[{ required: true, message: '请选择合作单位' }]"
      >
        <el-select
          v-model.trim="form.school"
          :disabled="!form.organId || makeType == 'update'"
          filterable
          clearable
        >
          <el-option
            v-for="(item, index) in cooperationList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="活动主题"
        prop="title"
        :rules="[{ required: true, message: '请输入活动主题', max: 20 }]"
      >
        <el-input
            v-model.trim="form.title"
            maxlength="20"
            clearable
            placeholder="请输入活动主题"
          ></el-input>
      </el-form-item>
      <el-form-item
        label="选择问卷"
      >
        <el-select
          v-model.trim="form.topicId"
          filterable
          :disabled="makeType == 'update'"
          clearable
        >
          <el-option v-for="item in topicList" :key="item.id" :label="item.title" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-alert
        title="若不选择问卷，则直接跳转乐器选购页面"
        :closable="false"
        type="error">
      </el-alert>
      <!-- <el-form-item
        label="是否参与调查"
        prop="showQuestion"
        :rules="[{ required: true, message: '请选择是否参与调查' }]"
      >
        <el-select
          v-model.trim="form.showQuestion"
          filterable
          clearable
        >
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="0"></el-option>
        </el-select>
      </el-form-item> -->
    </el-form>
  </div>
</template>
<script>
import { queryByOrganId } from "@/api/systemManage";
import { addReplacement, updateReplacement } from "../api"
import { questionnaireTopicQueryPage } from '../../setQuestions/api'
export default {
  props: [ 'makeType', 'makeDetail' ],
  data() {
    return {
      form: {
        organId: "",
        school: "",
        title: "",
        topicId: null,
      },
      cooperationList: [],
      topicList: []
    };
  },
  async mounted() {
    try {
      let res = await questionnaireTopicQueryPage({ page: 1, rows: 999, status: 1 })
      this.topicList = res.data.rows
    } catch {
      //
    }

    if(this.makeType == 'update') {
      let makeDetail = this.makeDetail
      if(makeDetail.organId) {
        await this.changeSection(makeDetail.organId)
      }
      this.form = {
        organId: makeDetail.organId,
        school: makeDetail.cooperationOrganId,
        title: makeDetail.title,
        topicId: makeDetail.topicId,
      }
    }
  },
  methods: {
    async changeSection(val) {
      this.form.school = "";
      await queryByOrganId({ organId: val }).then((res) => {
        if (res.code == 200) {
          this.cooperationList = res.data;
        }
      });
    },
   submit() {
      this.$refs.form.validate( async(res) => {
        if (res) {
          try{
            let form = this.form
            if(this.makeType == 'create') {
              const res = await addReplacement({
                cooperationOrganId: form.school,
                organId: form.organId,
                topicId: form.topicId,
                title: form.title})
            } else if(this.makeType == 'update') {
              const res = await updateReplacement({
                id: this.makeDetail.id,
                title: form.title})
            }
            this.$message.success('保存成功')
            this.$emit('getList')
            this.$emit('close')
          }catch(e){
          console.log(e)
          }

        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-select {
  width: 100% !important;
}
</style>
