<template>
  <div class="mod-config">
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
      <el-form-item label="标题">
        <el-input
          v-model="dataForm.title"
          placeholder="请输入标题"
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item label="培训年份">
        <el-input
          v-model="dataForm.year"
          placeholder="请输入年份(YYYY)"
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="dataForm.type" placeholder="请选择">
          <el-option label="线上" value="1">线上</el-option>
          <el-option label="线下" value="2">线下</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="App名称">
        <el-select v-model="dataForm.displayApp" placeholder="请选择">
          <el-option label="众妙之门" value="1">众妙之门</el-option>
          <el-option label="吴门医述" value="2">吴门医述</el-option>
          <el-option label="心灵空间" value="3">心灵空间</el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          @click="
            pageIndex = 1;
            getDataList();
          "
          >查询</el-button
        >
        <el-button
          type="primary"
          @click="addOrUpdateHandle()"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%"
      @sort-change="handleSortChange"
    >
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="60">
      </el-table-column>
      <el-table-column label="培训日期" width="180" align="center" sortable="custom" :sort-orders="['ascending', 'descending']">
        <template slot-scope="scope">
          <span v-if="scope.row.trainingDate&&scope.row.endDate">
            {{ scope.row.trainingDate }} - {{ scope.row.endDate }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="110" align="center" sortable="custom" :sort-orders="['ascending', 'descending']">
        <template slot-scope="scope">
          <span v-if="scope.row.createTime">
            {{ scope.row.createTime.substring(0, 10) }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="标题" align="center" width="160">
        <template slot-scope="scope">{{ scope.row.title }}</template>
      </el-table-column>
      <el-table-column label="年份" align="center" prop="year" width="90"></el-table-column>
      <el-table-column label="原价" align="center" width="80">
        <template slot-scope="scope">{{ scope.row.fee }}</template>
      </el-table-column>
      <el-table-column label="vip价格" align="center" width="80">
        <template slot-scope="scope">{{ scope.row.vipFee }}</template>
      </el-table-column>
      <el-table-column label="svip价格" align="center" width="80">
        <template slot-scope="scope">{{ scope.row.svipFee }}</template>
      </el-table-column>
      <el-table-column label="湖粉价格" align="center" width="150">
        <template slot-scope="scope">
          一星湖粉 {{ scope.row.oneHuFee }}<br/>
          二星湖粉 {{ scope.row.twoHuFee }}<br/>
          三星湖粉 {{ scope.row.threeHuFee }}<br/>
          四星湖粉 {{ scope.row.fourHuFee }}<br/>
          五星及以上湖粉 {{ scope.row.fiveHuFee }}
        </template>
      </el-table-column>
      <el-table-column label="App名称" align="center" width="90">
        <template slot-scope="scope">
          {{ getAppNames(scope.row.displayApp) }}
        </template>
      </el-table-column>
      <el-table-column label="活动类型" align="center" prop="type" width="90">
        <template slot-scope="scope">
          <span v-if="scope.row.type==1">线上</span>
          <span v-else-if="scope.row.type==2">线下</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="报名状态" align="center" width="200">
        <template slot-scope="scope">
          <el-switch
            @change="changeSingupFlag(scope.row)"
            v-model="scope.row.singupFlag"
            active-color="#13ce66"
            inactive-color="#999"
            :active-value="1"
            :inactive-value="0"
            active-text="可报名"
            inactive-text="不可报名">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="可用积分" align="center" prop="displayJf" width="90">
        <template slot-scope="scope">
          <span v-if="scope.row.displayJf==0">否</span>
          <span v-else-if="scope.row.displayJf==1">是</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="支付方式" align="center" prop="displayJf" width="90">
        <template slot-scope="scope">
          <span v-if="scope.row.payType" v-html="getPayTypes(scope.row.payType)"></span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="是否上架" align="center" width="200">
        <template slot-scope="scope">
          <el-switch
            @change="changeDisplayFlag(scope.row)"
            v-model="scope.row.displayFlag"
            active-color="#13ce66"
            inactive-color="#999"
            :active-value="0"
            :inactive-value="1"
            active-text="上架"
            inactive-text="下架">
          </el-switch>
        </template>
      </el-table-column> -->
      
      <el-table-column label="排序" align="center" prop="sort" width="90"></el-table-column>

      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="editHandle(scope.row)"
            >修改</el-button
          >
          <router-link :to="{ path: '/training-course-user', query: { id: scope.row.id, title: scope.row.title } }">
            <el-button
              type="text"
              size="small"
              >用户列表</el-button
            >
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>

    <!-- 弹窗, 新增 / 修改 -->
    <el-dialog
      :visible.sync="addOrUpdateVisible"
      :title="titlesub"
      class="dialog_box"
      @close="cancleClose"
    >
      <el-form
        :model="addForm"
        ref="addFormRef"
        :rules="addFormRule"
        label-width="100px"
      >  
        <el-form-item label="标题" prop="title">
          <el-input v-model="addForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="培训日期" prop="trainingDate">
          <el-date-picker
            class="custom-flatpickr"
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleDateChange">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="原价" prop="fee">
          <el-input v-model="addForm.fee" placeholder="请输入原价"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="addForm.sort" placeholder="请输入排序"></el-input>
        </el-form-item>
        <el-form-item label="vip类型">
          <el-checkbox-group v-model="vipType" @change="handleCheckedVip" class="checkbox-group">
            <el-checkbox v-for="item in vipList" :label="item.type" :key="item.type">{{item.title}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="vip价格" prop="vipFee">
          <el-input v-model="addForm.vipFee" placeholder="请输入vip价格"></el-input>
        </el-form-item>
        <el-form-item label="svip类型">
          <el-checkbox-group v-model="svipType" @change="handleCheckedSvip" class="checkbox-group">
            <el-checkbox v-for="item in svipList" :label="item.type" :key="item.type">{{item.title}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="svip价格" prop="svipFee">
          <el-input v-model="addForm.svipFee" placeholder="请输入svip价格"></el-input>
        </el-form-item>
        <el-form-item label="湖粉价格">
          <div class="hufen_block">
            <span>一星湖粉</span>
            <el-input v-model="addForm.oneHuFee" placeholder="请输入湖粉价格(30湖分以上)"></el-input>
          </div>
          <div class="hufen_block">
            <span>二星湖粉</span>
            <el-input v-model="addForm.twoHuFee" placeholder="请输入湖粉价格(60湖分以上)"></el-input>
          </div>
          <div class="hufen_block">
            <span>三星湖粉</span>
            <el-input v-model="addForm.threeHuFee" placeholder="请输入湖粉价格(90湖分以上)"></el-input>
          </div>
          <div class="hufen_block">
            <span>四星湖粉</span>
            <el-input v-model="addForm.fourHuFee" placeholder="请输入湖粉价格(120湖分以上)"></el-input>
          </div>
          <div class="hufen_block">
            <span>五星及以上湖粉</span>
            <el-input v-model="addForm.fiveHuFee" placeholder="请输入湖粉价格(150湖分以上)"></el-input>
          </div>
        </el-form-item>
        
        <el-form-item label="选择App" prop="displayApp">
          <el-checkbox-group v-model="appType" @change="handleCheckedApp" class="checkbox-group">
            <el-checkbox v-for="item in appList" :label="item.type" :key="item.type">{{item.title}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="活动类型" prop="type">
          <el-radio-group v-model="addForm.type">
            <el-radio :label="1">线上</el-radio>
            <el-radio :label="2">线下</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="报名状态" prop="singupFlag">
          <el-switch
            v-model="addForm.singupFlag"
            active-color="#13ce66"
            inactive-color="#999"
            :active-value="1"
            :inactive-value="0"
            inactive-text="不可报名"
            active-text="可报名"
            >
          </el-switch>
        </el-form-item>
        <el-form-item label="可用积分支付" prop="displayJf">
          <el-radio-group v-model="addForm.displayJf">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="支付方式" prop="payType">
          <el-checkbox-group v-model="addForm.payType" class="checkbox-group">
            <!-- <el-checkbox :label="1">微信</el-checkbox>
            <el-checkbox :label="2">支付宝</el-checkbox>
            <el-checkbox :label="4">天医币</el-checkbox> -->
            <el-checkbox 
              v-for="[value, label] in payTypeList" 
              :key="value" 
              :label="value"
            >
              {{ label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- <el-form-item label="是否上架" prop="displayFlag">
          <el-switch
            v-model="addForm.displayFlag"
            active-color="#13ce66"
            inactive-color="#999"
            :active-value="0"
            :inactive-value="1"
            inactive-text="下架"
            active-text="上架"
            >
          </el-switch>
        </el-form-item> -->
        <el-form-item label="上传海报" prop="icon">
          <el-upload
            :limit="1"
            class="el-uploadfeng"
            :action="baseUrl + '/oss/fileoss'"
            list-type="picture-card"
            :on-preview="handlePreview"
            :file-list="fileList"
            :on-success="handleSuccess"
            accept=".jpeg,.jpg,.gif,.png"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <span>支持图片类型：.jpeg,.jpg,.gif,.png</span>
          <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
            <img width="100%" :src="addForm.icon" alt="" />
          </el-dialog>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancleClose">取 消</el-button>
        <el-button type="primary" @click="addOrEditCate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { watch } from "less";
import global from "../../common/common.vue"; //引入共用组间
export default {
  data() {
    // 通用校验规则：正数且大于 0
    const validatePositiveNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('原价不能为空'));
      }
      if (!/^\d+(\.\d+)?$/.test(value)) {
        return callback(new Error('必须是正数或小数'));
      }
      if (parseFloat(value) <= 0) {
        return callback(new Error('必须大于 0'));
      }
      callback();
    };
    const validateDisplayApp = (rule, value, callback) => {
      if (!this.appType || this.appType.length == 0) {
        return callback(new Error('请选择应用'));
      }
      callback();
    };
    return {
      baseUrl: global.baseUrl,
      dataForm: {
        title: '',
        type: '',  //1线上 2线下
        year: '',  //日期
        trainingDate: '',
        singupFlag: '',  //1可报名 0不可报名
        displayFlag: '',  //0上架 1下架
        displayApp: ''
      },
      addForm: {
        id: "", //新增不传
        title: "", //标题
        type: 1,  //1线上 2线下
        icon: '',
        year: '',
        trainingDate: '',  //开始日期
        endDate: '',  //截止日期
        fee: '',
        vipType: '',
        vipFee: '',
        svipType: '',
        payType: [],
        displayJf: 1,
        svipFee: '',
        oneHuFee: '',
        twoHuFee: '',
        threeHuFee: '',
        fourHuFee: '',
        fiveHuFee: '',
        singupFlag: 1,  //1可报名 0不可报名
        displayFlag: 0,  //0上架 1下架
        displayApp: '',
        sort: ''
      },
      editId: "",
      addFormRule: {
        title: [
          {
            required: true,
            message: "请输入标题",
          },
        ],
        trainingDate: [
          {
            required: true,
            message: "请选择日期",
            trigger: 'change'
          },
        ],
        fee: [
          {
            required: true,
            validator: validatePositiveNumber
          },
        ],
        payType: [
          {
            required: true,
            message: "请选择支付方式",
            trigger: 'change'
          },
        ],
        displayApp: [
          {
            required: true,
            validator: validateDisplayApp,
            trigger: 'change'
          }
        ]
      },
      dateRange: [],  //日期
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      titlesub: '新增',
      statusType: 0,  //区分新增还是修改
      value: '',  //选择日期
      fileList: [], //图片数组
      dialogVisible: false,
      //保存数据
      vipList: [],
      svipList: [],
      appList: [
        {
          type: '1',
          title: '众妙之门'
        },
        {
          type: '2',
          title: '吴门医述'
        },
        {
          type: '3',
          title: '心灵空间'
        }
      ],
      payTypeList: new Map([
        [1, '微信'],
        [2, '支付宝'],
        [4, '天医币']
      ]),
      //勾选值
      vipType: [],
      svipType: [],
      appType: [],
      //日期排序
      sortParams: {
        date1: '',
        date2: ''
      },
      //疯子读书-0 众妙之门-1 吴门医述-2 心灵空间-3 太湖云医-4
    };
  },
  activated(){
    this.getDataList();
    this.getVipData();
  },
  methods: {
    //app名称展示的逻辑
    getAppNames(displayApp) {
      if (!displayApp) return ''
      return displayApp.split(',')
        .map(code => code.trim())
        .filter(code => code !== '')
        .map(code => {
          const app = this.appList.find(item => item.type === code);
          return app ? app.title : '';
        })
        .join(' ');
    },
    getPayTypes(payType) {
      if (!payType) return ''
      return payType.split(',')
        .map(code => {
          const numericCode = parseInt(code.trim());
          // 从 Map 中获取对应的支付方式名称
          return this.payTypeList.get(numericCode) || '';
        })
        .filter(name => name !== '')
        .join('<br>');
    },
    //排序变化事件
    handleSortChange({ column, prop, order }) {
      // 更新当前列的排序状态
      var name = column.label;
      if(name=='培训日期'){
        this.sortParams.date1 = order 
          ? (order === 'ascending' ? '2' : '1') 
          : null;
      }else{
        this.sortParams.date2 = order 
          ? (order === 'ascending' ? '2' : '1') 
          : null;
      }
      this.getDataList();
    },
    

    //时间选择器
    handleDateChange(val){
      this.addForm.trainingDate = this.formatDate(val[0]);
      this.addForm.endDate = this.formatDate(val[1]);
    },
    //日期格式转换
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份补零
      const day = String(date.getDate()).padStart(2, '0'); // 日期补零
      return `${year}-${month}-${day}`;
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/master/trainingClass/trainingClassList"),
        method: "post",
        data: this.$http.adornData({
          current: this.pageIndex,
          limit: this.pageSize,
          trainingDateSort: this.sortParams.date1,
          createTimeSort:  this.sortParams.date2,
          title: this.dataForm.title,
          type: this.dataForm.type,
          year: this.dataForm.year,
          singupFlag: this.dataForm.singupFlag,
          //displayFlag: this.dataForm.displayFlag,
          displayApp: this.dataForm.displayApp
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.trainingClassList.records;
          this.total = data.trainingClassList.total;
        }
        this.dataListLoading = false;
      });
    },
    //设置开关 修改数据
    changeSingupFlag(data){
      this.editCate(data, '1');
    },
    //上下架开关
    changeDisplayFlag(data){
      this.editCate(data, '1');
    },

    //新增
    addOrUpdateHandle(){
      this.addOrUpdateVisible = true;
      this.statusType = 0;  //新增
      this.titlesub = '新增';
      this.addForm = {
        title: "", //标题
        type: 1,  //1线上 2线下
        icon: '',
        year: '',
        trainingDate: '',
        endDate: '',
        fee: '',
        vipType: '',
        vipFee: '',
        svipType: '',
        appType: '',
        svipFee: '',
        payType: [],
        displayJf: 1,
        threeHuFee: '',
        fiveHuFee: '',
        singupFlag: 1,  //1可报名 0不可报名
        displayFlag: 0,
        sort: ''
      }
      this.fileList = [];
      this.vipType = [];
      this.svipType = [];
      this.appType = [];
      this.$nextTick(() => {
        this.$refs.addFormRef.clearValidate();
      });
    },
    //点击确定
    addOrEditCate(){
      if(this.statusType==0){  //如果是新增
        this.addCate();
      }else if(this.statusType==1){  //如果是修改
        this.editCate(this.addForm, '0');
      }
    },
    //取消
    cancleClose(){
      this.addOrUpdateVisible = false;
    },
    //修改
    editCate(data, type){
      if(type=='0'){
        this.$refs["addFormRef"].validate(valid => {
          if (valid) {
            this.submitData(data);
          }
        })
      }else{
        this.submitData(data);
      }
    },
    //修改
    submitData(data){
      var icon = '';
      var vipType = '';
      var svipType = '';
      var appType = '';
      if(this.fileList&&this.fileList.length>0){
        icon = this.fileList[0].url
      }
      console.log('vipType-submit', this.vipType)
      console.log('svipType-submit', this.svipType)
      console.log('appType-submit', this.appType)
      if(this.vipType&&this.vipType.length>0){
        vipType = String(this.vipType);
      }
      if(this.svipType&&this.svipType.length>0){
        svipType = String(this.svipType);
      }
      if(this.appType&&this.appType.length>0){
        appType = String(this.appType);
      }
      this.$http({
        url: this.$http.adornUrl("/master/trainingClass/editTrainingClass"),
        method: "post",
        data: this.$http.adornData({
          id: data.id,
          title: data.title,
          type: data.type,
          year: data.year,
          trainingDate: data.trainingDate,
          endDate: data.endDate,
          singupFlag: data.singupFlag,
          //displayFlag: data.displayFlag,
          icon: icon,
          fee: data.fee,
          vipType: vipType,
          vipFee: data.vipFee,
          svipType: svipType,
          payType: data.payType.join(','),
          displayJf: data.displayJf,
          displayApp: appType,
          svipFee: data.svipFee,
          oneHuFee: data.oneHuFee,
          twoHuFee: data.twoHuFee,
          threeHuFee: data.threeHuFee,
          fourHuFee: data.fourHuFee,
          fiveHuFee: data.fiveHuFee,
          sort: data.sort
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.addOrUpdateVisible = false;

          this.getDataList();
        }
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    //新增
    addCate(){
      this.$refs["addFormRef"].validate(valid => {
        if (valid) {
          var icon = '';
          var vipType = '';
          var svipType = '';
          var appType = '';
          if(this.fileList&&this.fileList.length>0){
            icon = this.fileList[0].url
          }
          if(this.vipType&&this.vipType.length>0){
            vipType = String(this.vipType);
          }
          if(this.svipType&&this.svipType.length>0){
            svipType = String(this.svipType);
          }
          if(this.appType&&this.appType.length>0){
            appType = String(this.appType);
          }
          this.$http({
            url: this.$http.adornUrl("/master/trainingClass/addTrainingClass"),
            method: "post",
            data: this.$http.adornData({
              id: this.addForm.id,
              title: this.addForm.title,
              type: String(this.addForm.type),
              trainingDate: this.addForm.trainingDate,
              endDate: this.addForm.endDate,
              singupFlag: String(this.addForm.singupFlag),
              //displayFlag: String(this.addForm.displayFlag), 
              icon: icon,
              fee: this.addForm.fee,
              vipType: vipType,
              vipFee: this.addForm.vipFee,
              svipType: svipType,
              displayApp: appType,
              payType: this.addForm.payType.join(','),
              displayJf: this.addForm.displayJf,
              svipFee: this.addForm.svipFee,
              oneHuFee: this.addForm.oneHuFee,
              twoHuFee: this.addForm.twoHuFee,
              threeHuFee: this.addForm.threeHuFee,
              fourHuFee: this.addForm.fourHuFee,
              fiveHuFee: this.addForm.fiveHuFee,
              sort: this.addForm.sort
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success"
              });
              this.addOrUpdateVisible = false;

              this.getDataList();
            }
          });
        }
      })
    },

    //操作
    //点击修改
    editHandle(data){
      this.fileList = [];
      this.addOrUpdateVisible = true;
      this.titlesub = '修改';
      this.statusType = 1;  //修改

      this.addForm.id = data.id;
      this.addForm.title = data.title;
      this.addForm.type = Number(data.type);
      this.addForm.year = data.year;
      this.addForm.trainingDate = data.trainingDate;
      this.addForm.endDate = data.endDate;
      this.addForm.singupFlag = Number(data.singupFlag);
      //this.addForm.displayFlag = Number(data.displayFlag);
      this.addForm.icon = data.icon;
      //图片赋值
      if(data.icon){
        this.fileList.push({
          url: data.icon
        });
      }
      this.addForm.fee = data.fee;
      this.addForm.vipFee = data.vipFee;
      if(data.vipType){
        this.vipType = data.vipType.split(',').map(item => parseInt(item, 10));
      }else{
        this.vipType = [];
      }
      if(data.svipType){
        this.svipType = data.svipType.split(',').map(item => parseInt(item, 10));
      }else{
        this.svipType = [];
      }
      if(data.displayApp){
        this.appType = data.displayApp.split(',').map(item => item.trim());
      }else{
        this.appType = [];
      }

      this.addForm.payType = data.payType.split(',').map(Number);
      this.addForm.displayJf = data.displayJf;
      
      this.addForm.svipFee = data.svipFee;
      this.addForm.oneHuFee = data.oneHuFee;
      this.addForm.twoHuFee = data.twoHuFee;
      this.addForm.threeHuFee = data.threeHuFee;
      this.addForm.fourHuFee = data.fourHuFee;
      this.addForm.fiveHuFee = data.fiveHuFee;
      this.addForm.sort = data.sort;
      this.$nextTick(() => {
        this.$refs.addFormRef.clearValidate();
      });
    },
    //上传图片
    handlePreview(file) {
      this.fileList = [];
      this.addForm.icon = file.url;
      this.fileList.push({
        url: file.url
      });
      this.dialogVisible = true;
    },
    //图片上传成功
    handleSuccess(res, file) {
      if (res.msg == "success") {
        this.fileList.push({
          url: res.url
        });
        this.$message.success("图片上传成功");
      } else {
        this.$message.error("图片上传失败");
      }
    },
    //图片删除操作
    handleRemove(file, fileList) {
      this.fileList = [];
    },

    //获取vip数据
    getVipData(){
      this.$http({
        url: this.$http.adornUrl("/master/trainingClass/getVipBuyConfigList"),
        method: "post",
        data: this.$http.adornData({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.vipList = data.vipBuyConfigList.filter(item => item.type >= 4 && item.type <= 10);
          this.svipList = data.vipBuyConfigList.filter(item => item.type === 1 || item.type === 2);
        }
      });
    },
    //勾选vip
    handleCheckedVip(value){
      console.log('vip的值', value)
    },
    //勾选svip
    handleCheckedSvip(value){
      console.log('svip的值', value)
    },
    //勾选app
    handleCheckedApp(value){
      console.log('app的值', value)
    }
  },
};
</script>

<style lang="less" >
::v-deep.custom-height {
  height: 370px;
}
.avatar-uploader {
  height: 1px;
}
.general_editor {
  height: 420px;
  width: 1060px !important;
}
.editor_form {
  height: 500px;
}

.dialog_box {
  .el-form-item__content {
    width: calc(100% - 120px) !important;
  }
  .form_item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-form-item {
      width: 290px;
    }
  }
}
.checkbox-group .el-checkbox{
  margin-left: 0;
  margin-right: 20px;

  .el-checkbox__label{
    padding-left: 6px;
    font-size: 13px;
  }
}
.hufen_block{
  display: flex;
  align-items: center;

  span{
    width: 120px;
    display: inline-block;
  }
  .el-input{
    width: 90%;
    line-height: 34px;
  }
  .el-input__inner{
    width: 220px;
    height: 30px;
    line-height: 34px;
    padding: 0 8px;
  }
  .el-input__inner::placeholder {
    font-size: 12px;
  }
}
.custom-flatpickr .el-range-input{
  margin-left: 5px;
}
</style>
