<template>
  <div class="m-container">
    <div>
      <el-form :inline="true" :model="form" ref="form">
        <el-alert
          style="margin: 20px 0 40px"
          title="预报名规则"
          :closable="false"
          type="info"
        >
        </el-alert>
        <el-row>
          <el-form-item
            prop="132"
            :rules="[
              {
                required: false,
                pattern: /^\d+$/,
                message: '请输入正确的人数',
              },
            ]"
          >
            乐团预报名人数达到
            <el-input v-model="form['132']" placeholder="请输入人数">
              <template slot="append">人</template>
            </el-input>
            时，可将乐团状态变更为创建缴费中。
          </el-form-item>
        </el-row>
        <el-alert
          style="margin: 40px 0"
          title="报名缴费规则"
          :closable="false"
          type="info"
        >
        </el-alert>
        <el-row>
          <el-form-item
            prop="134"
            :rules="[
              {
                required: false,
                pattern: /^\d+$/,
                message: '请输入正确的人数',
              },
            ]"
          >
            报名缴费阶段乐团若未合并学员，缴费人数达到
            <el-input v-model="form['134']" placeholder="请输入人数">
              <template slot="append">人</template>
            </el-input>
            时，可确认开团。
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            prop="135"
            :rules="[
              {
                required: false,
                pattern: /^\d+$/,
                message: '请输入正确的人数',
              },
            ]"
          >
            报名缴费阶段乐团若合并学员，缴费人数达到
            <el-input v-model="form['135']" placeholder="请输入人数">
              <template slot="append">人</template>
            </el-input>
            时，可确认开团。
          </el-form-item>
        </el-row>
        <el-alert
          style="margin: 40px 0"
          title="乐团筹备规则"
          :closable="false"
          type="info"
          v-if="isPlatform"
        >
        </el-alert>
        <el-row v-if="isPlatform">
          <el-form-item
            prop="76"
            :rules="[
              {
                required: false,
                pattern: /^[1-9][0-9]*$/,
                message: '请输入正确的天数',
              },
            ]"
          >
            订单支付
            <el-input v-model="form['76']" placeholder="请输入天数">
              <template slot="append">天</template>
            </el-input>
            后自动更新为已收货，不设置时立即更新。
          </el-form-item>
        </el-row>
        <el-alert
          style="margin: 40px 0"
          title="会员乐团规则"
          :closable="false"
          type="info"
        >
        </el-alert>
        <el-row>
          <el-form-item
            prop="136"
            :rules="[
              {
                required: true,
                message: '请输入人数',
              },
              {
                required: false,
                pattern: /^[1-9][0-9]*$/,
                message: '请输入正确的人数',
              },
            ]"
          >
            <span style="color: #f56c6c; margin-right: 4px">*</span>
            乐团各声部不购买团练宝或乐器就可以直接入团的人数
            <el-input v-model="form[136]" placeholder="请输入人数">
              <template slot="append">人</template> </el-input
            >。
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            prop="133"
            :rules="[
              {
                required: true,
                message: '请输入分钟数',
                trigger: 'change',
              },
              {
                pattern: /^[1-9][0-9]*$/,
                message: '请输入正确的分钟数',
              },
            ]"
          >
            <span style="color: #f56c6c; margin-right: 4px">*</span>
            会员团每学期赠送
            <el-input v-model="form[133]" placeholder="请输入分钟数">
              <template slot="append">分钟</template>
            </el-input>
            课程。
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            prop="99"
            :rules="[
              {
                required: false,
                pattern: /^[1-9][0-9]*$/,
                message: '请输入正确的天数',
              },
            ]"
          >
            每学期结束前
            <el-input v-model="form[99]">
              <template slot="append">天</template>
            </el-input>
            提醒教务老师安排下学期课程。
          </el-form-item>
        </el-row>
        <!-- <el-row>
          <el-form-item
            prop="99"
            :rules="[
              {
                required: false,
                pattern: /^[1-9][0-9]*$/,
                message: '请输入正确的天数',
              },
            ]"
          >
            学员团练宝有效期结束前
            <el-input v-model="form[104]" >
              <template slot="append">天</template>
            </el-input>
            自动创建续费。
          </el-form-item>
        </el-row> -->
      </el-form>

      <el-button
        type="primary"
        @click="save"
        class="saveBtn"
        v-if="!isPlatform"
        v-permission="'sysTenantConfig/batchUpSet_teamRules'"
        >保存</el-button
      >
      <el-button
        type="primary"
        @click="save"
        class="saveBtn"
        v-else
        v-permission="'sysConfig/batchUpdate_teamRules'"
        >保存</el-button
      >
    </div>
  </div>
</template>
<script>
import { getSysTenantConfig, setSysTenantConfig } from "../api";
import { sysConfigList, sysConfigUpdate } from "@/api/generalSettings"; // 平台的修改和查
export default {
  props: ["isPlatform"],
  data() {
    return {
      form: {},
      questionList: [],
      rulesVisiable: false,
    };
  },
  async mounted() {
    this.getRules();
    // try {
    //   const res = await questionnaireTopicQueryPage({ page: 1, rows: 999 });
    //   this.questionList = res.data.rows.map((item) => {
    //     return {
    //       label: item.title,
    //       value: String(item.id),
    //     };
    //   });
    // } catch (e) {
    //   console.log(e);
    // }
  },
  methods: {
    getRules() {
      if (this.isPlatform) {
        this.getPlatformRules();
      } else {
        this.getInstitutionRules();
      }
    },
    async getPlatformRules() {
      try {
        const res = await sysConfigList({ group: "MUSIC" });
        res.data.forEach((item) => {
          // this.form[item.paramName] = item.paranValue
          this.$set(this.form, item.id, item.paranValue);
        });
        // this.$forceUpdate()
        console.log(this.form);
      } catch (e) {
        console.log(e);
      }
    },
    async getInstitutionRules() {
      try {
        const res = await getSysTenantConfig({ group: "MUSIC" });
        res.data.forEach((item) => {
          // this.form[item.paramName] = item.paranValue
          this.$set(this.form, item.id, item.paranValue);
        });
        // this.$forceUpdate()
        console.log(this.form);
      } catch (e) {
        console.log(e);
      }
    },
    savePlatform() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let param = [];
          for (let i in this.form) {
            param.push({
              id: i,
              paranValue: this.form[i],
            });
          }
          try {
            const res = await sysConfigUpdate(param);
            this.$message.success("保存成功");
            this.getRules();
          } catch (e) {
            console.log(e);
          }
        }
      });
    },
    saveInstitution() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let param = [];
          for (let i in this.form) {
            param.push({
              id: i,
              paranValue: this.form[i],
            });
          }
          try {
            const res = await setSysTenantConfig(param);
            this.$message.success("保存成功");
            this.getRules();
          } catch (e) {
            console.log(e);
          }
        }
      });
    },
    save() {
      if (this.isPlatform) {
        this.savePlatform();
      } else {
        this.saveInstitution();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../index.scss";
</style>
