<template>
  <div>
    <el-button
      v-permission="'vipGroupDefaultClassesCycle/add'"
      @click="addVipTimer"
      type="primary"
      style="margin-bottom: 20px"
      >新建</el-button
    >
    <el-table
      :data="rightList"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
    >
      <el-table-column label="达到课时总数(次)" prop="maxClassTimes">
      </el-table-column>
      <el-table-column label="可排课时间段(月)" prop="month"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-button
              type="text"
              v-permission="'vipGroupDefaultClassesCycle/update'"
              @click="resetTimerList(scope.row)"
              >修改</el-button
            >
            <el-popover
              placement="top"
              width="160"
              v-permission="'vipGroupDefaultClassesCycle/delete'"
              :ref="scope.row.id"
            >
              <p>您确定删除该周期循环吗?</p>
              <div style="text-align: right; margin: 0">
                <el-button
                  size="mini"
                  type="text"
                  @click="scope._self.$refs[scope.row.id].doClose()"
                  >取消</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  @click="removeDefaultClassesCycle(scope)"
                  >确定</el-button
                >
              </div>
              <el-button type="text" slot="reference">删除</el-button>
            </el-popover>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 周期循环新增弹窗 -->
    <el-dialog
      :title="(vipTimerFrom.isAdd ? '添加' : '修改') + 'VIP时间段'"
      width="500px"
      @close="onVipStatusClose('timerStatus')"
      :visible.sync="timerStatus"
    >
      <el-form :model="vipTimerFrom" ref="timerStatus">
        <el-form-item
          label="达到课时总数"
          prop="count"
          :rules="[
            { required: true, message: '请输入达到课时总数', trigger: 'blur' },
          ]"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model.trim="vipTimerFrom.count"
            type="number"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="可排课时间段"
          prop="timer"
          :rules="[
            { required: true, message: '请输入可排课时间段', trigger: 'blur' },
          ]"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model.trim="vipTimerFrom.timer"
            type="number"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="timerStatus = false">取 消</el-button>
        <el-button type="primary" @click="addTimerStatus('timerStatus')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getDefaultClassesCycle,
  addDefaultClassesCycle,
  resetDefaultClassesCycle,
  removeDefaultClassesCycle,
} from "@/api/vipSeting";
export default {
  data() {
    return {
      formLabelWidth: "120px",
      rightList: [],
      timerStatus: false, //课程时间段弹窗状态
      vipTimerFrom: {
        count: "",
        timer: "",
        isAdd: true,
        id: "",
      },
      dynamicTags: [],

      inputValue: "",
    };
  },
  mounted() {
    this.getDefaultClassesCycle();
  },
  methods: {
    async getDefaultClassesCycle() {
      // 获取默认右边参数
      await getDefaultClassesCycle().then((res) => {
        this.rightList = res.data;
      });
    },

    // 新增时间段
    addVipTimer() {
      this.timerStatus = true;
      this.vipTimerFrom.isAdd = true;
    },
    addTimerStatus(formName) {
      // 点击添加后 发送请求单独添加=> 刷新列表
      // 判断是添加还是修改
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const vipTimerFrom = this.vipTimerFrom;
          if (vipTimerFrom.isAdd) {
            // 添加
            await addDefaultClassesCycle({
              organId: null,
              maxClassTimes: vipTimerFrom.count,
              month: vipTimerFrom.timer,
            }).then((res) => {
              if (res.code == 200) {
                this.$message.success("添加成功");
                this.getDefaultClassesCycle();
                this.timerStatus = false;
              }
            });
          } else {
            // 修改
            await resetDefaultClassesCycle({
              maxClassTimes: vipTimerFrom.count,
              month: vipTimerFrom.timer,
              id: vipTimerFrom.id,
            }).then((res) => {
              this.$message.success("修改成功");
              this.getDefaultClassesCycle();
              this.timerStatus = false;
            });
          }
        }
      });
    },
    resetTimerList(row) {
      this.timerStatus = true;
      const vipTimerFrom = this.vipTimerFrom;
      this.$nextTick(() => {
        vipTimerFrom.count = row.maxClassTimes;
        vipTimerFrom.timer = row.month;
        vipTimerFrom.id = row.id;
        vipTimerFrom.isAdd = false;
      });
    },
    // 删除时间管理
    removeDefaultClassesCycle(scope) {
      removeDefaultClassesCycle({
        id: scope.row.id,
      }).then((res) => {
        if (res.code == 200) {
          scope._self.$refs[scope.row.id].doClose();
          this.$message.success("删除成功");
          this.getDefaultClassesCycle();
        }
      });
    },
    onVipStatusClose(formName) {
      this.inputVisible = false;
      this.inputValue = "";
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="scss" scoped>
</style>