<template>
  <div>
    <el-button
      v-permission="'vipGroupCategory/add'"
      @click="addGroupCategory"
      type="primary"
      style="margin-bottom: 20px"
      >新建</el-button
    >
    <el-table
      :data="leftList"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
    >
      <el-table-column label="课程形式" prop="name"> </el-table-column>
      <el-table-column label="班级人数(人)" prop="studentNum">
      </el-table-column>
      <el-table-column label="课程课时(分钟)" prop="singleClassMinutes">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-button
              type="text"
              v-permission="'vipGroupCategory/update'"
              @click="resetGroupCategory(scope.row)"
              >修改</el-button
            >
            <el-popover
              placement="top"
              width="160"
              v-permission="'vipGroupCategory/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="removeGroupCategory(scope)"
                  >确定</el-button
                >
              </div>
              <el-button type="text" slot="reference">删除</el-button>
            </el-popover>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 课程类型新增弹窗 -->
    <el-dialog
      :title="(vipStatusFrom.isAdd ? '添加' : '修改') + `VIP课程形式`"
      class="courseMask"
      width="500px"
      @close="onVipStatusClose('vipStatus')"
      :visible.sync="vipStatus"
    >
      <el-form :model="vipStatusFrom" ref="vipStatus">
        <el-form-item
          label="课程形式"
          prop="name"
          :rules="[
            { required: true, message: '请输入课程形式', trigger: 'blur' },
          ]"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model.trim="vipStatusFrom.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="班级人数"
          prop="num"
          :rules="[
            { required: true, message: '请输入班级人数', trigger: 'blur' },
          ]"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model.trim="vipStatusFrom.num"
            type="number"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="课程课时"
          prop="dynamicTags"
          :rules="[
            {
              required: true,
              message: '请输入课程课时',
              trigger: 'blur, change',
            },
          ]"
          :label-width="formLabelWidth"
        >
          <el-tag
            :key="index"
            effect="dark"
            type="info"
            v-for="(tag, index) in vipStatusFrom.dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model.trim="inputValue"
            ref="saveTagInput"
            style="width: 100px"
            size="small"
            @keyup.enter.native="handleInputConfirm"
          >
          </el-input>
          <el-button
            v-if="!inputVisible"
            class="button-new-tag"
            size="small"
            @click="showInput"
            >+ 添加</el-button
          >
          <el-button
            v-if="inputVisible"
            class="button-new-tag"
            size="small"
            @click="handleInputConfirm"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="vipStatus = false">取 消</el-button>
        <el-button type="primary" @click="addVipStatus('vipStatus')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { removeVipGroupCategory, vipGroupCategory, addVipGroupCategory,
  resetVipGroupCategory, } from "@/api/vipSeting";
export default {
  data() {
    return {
      leftList: [],
      vipStatus: false, // 课程形态弹窗状态
      formLabelWidth: "120px",
      inputValue:'',
      vipStatusFrom: {
        name: "",
        num: "",
        dynamicTags: [],
        isAdd: true,
        id: "",
      }, // 弹窗内容
      inputVisible: false,
    };
  },
  mounted() {
    this.getVipGroupCategoryList();
  },
  methods: {
    resetGroupCategory(row) {
      // 修改课程形式
      const vipStatusFrom = this.vipStatusFrom;
      this.vipStatus = true;
      this.$nextTick(() => {
        vipStatusFrom.name = row.name;
        vipStatusFrom.timer = row.singleClassMinutes.split(",");
        vipStatusFrom.dynamicTags = row.singleClassMinutes.split(",");
        vipStatusFrom.num = row.studentNum;
        vipStatusFrom.id = row.id;
        vipStatusFrom.isAdd = false;
      });
    },
    async removeGroupCategory(scope) {
      await removeVipGroupCategory({
        id: scope.row.id,
      }).then((res) => {
        if (res.code == 200) {
            scope._self.$refs[scope.row.id].doClose()
          this.$message.success("删除成功");
          this.getVipGroupCategoryList();
        }
      });
    },
    // 新增分类
    addGroupCategory() {
      this.vipStatus = true;
      this.vipStatusFrom.isAdd = true;
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    onVipStatusClose(formName) {
      this.inputVisible = false;
      this.inputValue = "";
      this.$refs[formName].resetFields();
    },
    async getVipGroupCategoryList() {
      // 获取默认左边参数
      await vipGroupCategory().then((res) => {
        if (res.code == 200) {
          this.leftList = res.data;
        }
      });
    },
    addVipStatus(formName) {
      // 点击添加后 发送请求单独添加=> 刷新列表
      // 判断是添加还是修改
      this.$refs[formName].validate(async (valid) => {
        console.log(valid);
        if (valid) {
          const vipStatusFrom = this.vipStatusFrom;
          if (vipStatusFrom.isAdd) {
            await addVipGroupCategory({
              name: vipStatusFrom.name,
              singleClassMinutes: vipStatusFrom.dynamicTags.join(","),
              studentNum: vipStatusFrom.num,
            }).then((res) => {
              if (res.code == 200) {
                this.$message.success("添加成功");
                this.getVipGroupCategoryList();
                this.vipStatus = false;
              }
            });
          } else {
            await resetVipGroupCategory({
              name: vipStatusFrom.name,
              singleClassMinutes: vipStatusFrom.dynamicTags.join(","),
              studentNum: vipStatusFrom.num,
              id: vipStatusFrom.id,
            }).then((res) => {
              this.$message.success("修改成功");
              this.getVipGroupCategoryList();
              this.vipStatus = false;
            });
          }
        }
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.vipStatusFrom.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    handleClose(tag) {
      this.vipStatusFrom.dynamicTags.splice(
        this.vipStatusFrom.dynamicTags.indexOf(tag),
        1
      );
    },
  },
};
</script>
<style lang="scss" scoped>
</style>