<template >
  <div class="m-container">
    <h2>
      <div class="squrt"></div>VIP活动方案
    </h2>

    <div class="m-core">
      <div class="newBand" v-permission="'/vipNewActive'" @click="gotoNewActive">新建</div>
      <el-form :inline="true" class="searchForm" v-model.trim="searchForm">
        <el-form-item prop="organId">
          <el-select
            class="multiple"
            filterable
            style="width:180px!important"
            v-model.trim="searchForm.organId"
            clearable
            placeholder="请选择分部"
          >
            <el-option
              v-for="(item,index) in organList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
                <el-form-item prop="organId">
          <el-select
            filterable
            style="width:180px!important"
            v-model="searchForm.enable"
            clearable
            @clear='resetEnable'
            placeholder="活动状态"
          >
            <el-option
              label="开启"
              :value="true"
            ></el-option>
            <el-option
              label="关闭"
              :value="false"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" type="danger">搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="tableWrap">
        <el-table :data="tableList" :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column align="center" prop="id" label="活动编号"></el-table-column>
          <el-table-column align="center" prop="name" label="活动名称"></el-table-column>
          <el-table-column align="center" prop="vipGroupCategoryNames" label="适用课程形式"></el-table-column>
          <el-table-column align="center" prop="type" :formatter="fommatterType" label="活动类型"></el-table-column>
          <el-table-column align="center" label="适用课时类型" :formatter="fommatterCourseType"></el-table-column>
          <el-table-column align="center" label="结算标准">
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.salarySettlementJson | onlinePip }}</p>
                <p>{{ scope.row.salarySettlementJson | unonlinePip }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="结算说明">
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.salarySettlementJson | onlineDesc }}</p>
                <p>{{ scope.row.salarySettlementJson | unonlineDesc }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="启用状态" prop="enable" :formatter="fommatterEnable"></el-table-column>
          <el-table-column align="center" width="130px" label="活动持续时间">
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.startTime | formatTimer }}</p>
                <p>{{ scope.row.endTime | formatTimer }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" width="130px" label="课程安排时间">
            <template slot-scope="scope">
              <div>
                <p>{{ scope.row.coursesStartTime | formatTimer }}</p>
                <p>{{ scope.row.coursesEndTime | formatTimer }}</p> 
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button
                  type="text"
                  v-permission="'vipGroupActivity/update'"
                  @click="reset(scope.row)"
                >修改</el-button>
                <!-- <el-button type='text'
                @click="remove(scope.row)">删除</el-button>-->
                <el-popover
                  placement="top"
                  width="160"
                  v-permission="'vipGroupActivity/delete'"
                  :ref="scope.$index"
                >
                  <p>确定删除?</p>
                  <div style="text-align: right; margin: 0">
                    <el-button
                      size="mini"
                      type="text"
                      @click="scope._self.$refs[scope.$index].doClose()"
                    >取消</el-button>
                    <el-button type="primary" size="mini" @click="remove(scope)">确定</el-button>
                  </div>
                  <el-button type="text" slot="reference">删除</el-button>
                </el-popover>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <pagination
          :total="rules.total"
          :page.sync="rules.page"
          :limit.sync="rules.limit"
          :page-sizes="rules.page_size"
          @pagination="getList"
        />
      </div>
    </div>
    <el-dialog title="提示" width="60%" :before-close="closeVipform" :visible.sync="dialogVisible">
      <div>
        <el-form
          :label-position="labelPosition"
          :model="resetForm"
          ref="vipform"
          :rules="resetFormRules"
          class="vipform"
        >
          <el-form-item label="活动名称" prop="name">
            <el-input style="width:400px" v-model.trim="resetForm.name"></el-input>
          </el-form-item>
          <el-form-item label="适用分部" prop="organ">
            <el-select v-model.trim="resetForm.organ" filterable multiple clearable>
              <el-option
                v-for="(item,index) in organList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-button @click="onCheckAllBranch">适用所有分部</el-button>
          </el-form-item>
          <el-form-item label="活动描述" prop="desc">
            <el-input
              type="textarea"
              v-model.trim="resetForm.desc"
              style="width:400px"
              :rows="5"
              placeholder="请输入活动说明"
            ></el-input>
          </el-form-item>
          <el-form-item label="活动时间" prop="activeTime">
            <el-date-picker
              v-model.trim="resetForm.activeTime"
              type="datetimerange"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="课程时间" prop="courseTime">
            <el-date-picker
              v-model.trim="resetForm.courseTime"
              type="datetimerange"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="课程形式" prop="stauts">
            <el-select v-model.trim="resetForm.stauts" filterable clearable multiple>
              <el-option
                v-for="(item,index) in courseStatusList"
                :key="index"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="activeRange">
          <div class="left">
            <p>活动适用范围&结算标准：</p>
          </div>
          <div class="right">
            <div class="chioseWrap">
              <el-checkbox label="线上课" v-model.trim="online"></el-checkbox>
              <el-select v-model.trim="onlineSalary" clearable filterable>
                <el-option label="老师默认课酬" value="TEACHER_DEFAULT"></el-option>
                <el-option label="实际课程单价比例折扣" value="RATIO_DISCOUNT"></el-option>
                <el-option label="固定课酬" value="FIXED_SALARY"></el-option>
              </el-select>
              <!--   v-show='onlineSalary!= "TEACHER_DEFAULT"' -->
              <el-input
                placeholder="请输入"
                style="width:100px"
                type="number"
                @mousewheel.native.prevent
                :class="onlineSalary!= 'TEACHER_DEFAULT'?'':'ishidden'"
                v-model.trim="onlineprice"
              ></el-input>
              <el-checkbox
                label="是否参加梯度"
                style="margin-left:20px;"
                v-model.trim="onlineClassJoinGradientRewards"
              ></el-checkbox>
            </div>
            <div class="chioseWrap">
              <el-checkbox label="线下课" v-model.trim="unonline"></el-checkbox>
              <el-select v-model.trim="unonlineSalary" filterable clearable>
                <el-option label="老师默认课酬" value="TEACHER_DEFAULT"></el-option>
                <el-option label="实际课程单价比例折扣" value="RATIO_DISCOUNT"></el-option>
                <el-option label="固定课酬" value="FIXED_SALARY"></el-option>
              </el-select>
              <el-input
                placeholder="请输入"
                style="width:100px"
                :class="unonlineSalary!= 'TEACHER_DEFAULT'?'':'ishidden'"
                type="number"
                @mousewheel.native.prevent
                v-model.trim="unonlineprice"
              ></el-input>
              <el-checkbox
                label="是否参加梯度"
                style="margin-left:20px;"
                v-model.trim="offlineClassJoinGradientRewards"
              ></el-checkbox>
            </div>
            <div class="chioseWrap">
              <el-checkbox v-model.trim="paymentReadonlyFlag" label="可自定义单价"></el-checkbox>
              <el-checkbox v-model.trim="salaryReadonlyFlag" label="可自定义课酬"></el-checkbox>
            </div>
          </div>
        </div>
        <div class="activeType">
          <div class="left">
            <p style="width:60px;">活动类型</p>
          </div>
          <div class="right">
            <div>
              <div
                class="head"
                :class="activeType=='BASE_ACTIVITY'?'active':''"
                @click="activeType='BASE_ACTIVITY'"
              >基础活动</div>
              <p class="title" v-if="activeType=='BASE_ACTIVITY'">课程原价</p>
            </div>
            <div>
              <div
                class="head"
                :class="activeType=='DISCOUNT'?'active':''"
                @click="activeType='DISCOUNT'"
              >折扣</div>
              <el-input
                v-if="activeType=='DISCOUNT'"
                v-model.trim="attribute1"
                placeholder="请输入折扣数值"
              ></el-input>
            </div>
            <div>
              <div
                class="head"
                :class="activeType=='GIVE_CLASS'?'active':''"
                @click="activeType='GIVE_CLASS'"
              >赠送课时</div>
              <el-input
                placeholder="多少节开始赠"
                v-if="activeType=='GIVE_CLASS'"
                v-model.trim="attribute1"
                style="margin-right:10px;"
              ></el-input>
              <span v-if="activeType=='GIVE_CLASS'">赠</span>
              <el-input
                v-if="activeType=='GIVE_CLASS'"
                placeholder="请输入赠送课时数"
                v-model.trim="attribute2"
                style="margin:0 10px;"
              ></el-input>
              <el-checkbox
                v-if="activeType=='GIVE_CLASS'"
                v-model.trim="giveClassPaySalaryFlag"
                label="赠送课时结算课酬"
              ></el-checkbox>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="resetRow">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import {
  vipGroupActivity,
  vipGroupCategory,
  addVipActive,
  resetVipActive,
  removeVipActive
} from "@/api/vipSeting";
import { getEmployeeOrgan } from "@/api/buildTeam";
export default {
  name: "vipActiveList",
  components: { pagination },
  data() {
    return {
      labelPosition: "right",
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      searchForm: { organId: null,enable:null },
      organList: [],
      dialogVisible: false,
      resetForm: {
        name: "",
        desc: "",
        activeTime: [],
        courseTime: [],
        stauts: [],
        organ: []
      }, // 修改信息
      resetFormRules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 1, max: 25, message: "长度在 1 到 25 个字符", trigger: "blur" }
        ],
        desc: [
          { required: false, message: "请输入文字描述", trigger: "blur" },
          {
            min: 1,
            max: 200,
            message: "长度在 1 到 200 个字符",
            trigger: "blur"
          }
        ],
        activeTime: [
          { required: false, message: "请选择活动时间", trigger: "blur" }
        ],
        courseTime: [
          { required: false, message: "请选择课程时间", trigger: "blur" }
        ],
        organ: [{ required: true, message: "请选择分部", trigger: "blur" }]
      },
      courseStatusList: [],
      activeType: "",
      online: true,
      unonline: true,
      onlineClassJoinGradientRewards: false,
      offlineClassJoinGradientRewards: false,
      onlineSalary: "TEACHER_DEFAULT",
      unonlineSalary: "TEACHER_DEFAULT",
      onlineprice: "",
      unonlineprice: "",
      salaryReadonlyFlag: true,
      paymentReadonlyFlag: true,
      attribute1: "",
      attribute2: "",
      attribute3: "",
      giveClassPaySalaryFlag: false,
      activeId: ""
    };
  },
  created() {
    this.init();
  },
  activated() {
    this.init();
  },
  mounted() {},
  filters: {
    onlinePip(val) {
      let obj = JSON.parse(val);
      // debugger;
      if (
        obj &&
        obj.onlineSalarySettlement &&
        obj.onlineSalarySettlement.salarySettlementType
      ) {
        switch (obj.onlineSalarySettlement.salarySettlementType) {
          case "RATIO_DISCOUNT": {
            return "线上:比例结算";
            break;
          }
          case "TEACHER_DEFAULT": {
            return "线上:老师默认";
            break;
          }
          case "FIXED_SALARY": {
            return "线上:固定课酬";
            break;
          }
        }
      }
    },
    unonlinePip(val) {
      let obj = JSON.parse(val);
      if (
        obj &&
        obj.offlineSalarySettlement &&
        obj.offlineSalarySettlement.salarySettlementType
      ) {
        switch (obj.offlineSalarySettlement.salarySettlementType) {
          case "RATIO_DISCOUNT": {
            return "线下:比例结算";
            break;
          }
          case "TEACHER_DEFAULT": {
            return "线下:老师默认";
            break;
          }
          case "FIXED_SALARY": {
            return "线下:固定课酬";
            break;
          }
        }
      }
    },
    onlineDesc(val) {
      let obj = JSON.parse(val);
      // debugger;
      if (
        obj &&
        obj.onlineSalarySettlement &&
        obj.onlineSalarySettlement.salarySettlementType
      ) {
        switch (obj.onlineSalarySettlement.salarySettlementType) {
          case "RATIO_DISCOUNT": {
            if (obj.onlineSalarySettlement.settlementValue) {
              return `线上:${obj.onlineSalarySettlement.settlementValue}%`;
            } else {
              return "-";
            }
            break;
          }
          case "TEACHER_DEFAULT": {
            return "线上:默认";
            break;
          }
          case "FIXED_SALARY": {
            if (obj.onlineSalarySettlement.settlementValue) {
              return `线上:${obj.onlineSalarySettlement.settlementValue}/次`;
            } else {
              return "-";
            }

            break;
          }
        }
      }
    },
    unonlineDesc(val) {
      let obj = JSON.parse(val);
      if (
        obj &&
        obj.offlineSalarySettlement &&
        obj.offlineSalarySettlement.salarySettlementType
      ) {
        switch (obj.offlineSalarySettlement.salarySettlementType) {
          case "RATIO_DISCOUNT": {
            if (obj.offlineSalarySettlement.settlementValue) {
              return `线下:${obj.offlineSalarySettlement.settlementValue}%`;
            } else {
              return "-";
            }
            break;
          }
          case "TEACHER_DEFAULT": {
            return "线下:默认";
            break;
          }
          case "FIXED_SALARY": {
            if (obj.offlineSalarySettlement.settlementValue) {
              return `线下:${obj.offlineSalarySettlement.settlementValue}/次`;
            } else {
              return "-";
            }
            break;
          }
        }
      }
    }
  },
  methods: {
    init() {
      if (this.$route.query.searchForm) {
        this.$route.query.searchForm instanceof Object
          ? (this.searchForm = this.$route.query.searchForm)
          : (this.searchForm = JSON.parse(this.$route.query.searchForm));
      }
      if (this.$route.query.rules) {
        this.$route.query.rules instanceof Object
          ? (this.rules = this.$route.query.rules)
          : (this.rules = JSON.parse(this.$route.query.rules));
      }
      getEmployeeOrgan().then(res => {
        if (res.code == 200) {
          this.organList = res.data;
        }
      });
      this.getList();
      // 首先获取课程形式
      // 获取分部id
      vipGroupCategory().then(res => {
        if (res.code == 200) {
          this.courseStatusList = res.data;
        }
      });
    },
    onCheckAllBranch() {
      // 适用所有分部
      this.resetForm.organ = [];
      this.organList.forEach(item => {
        this.resetForm.organ.push(item.id);
      });
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    getList() {
      let enable = this.searchForm.enable
      vipGroupActivity({
        organId: this.searchForm.organId,
        rows: this.rules.limit,
        page: this.rules.page,
        enable
      }).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      });
      
    },
    resetEnable(val){
      val = null
    },
    // 格式化活动类型
    fommatterType(row, column) {
      switch (row.type) {
        case "BASE_ACTIVITY": {
          return "基础";
          break;
        }
        case "DISCOUNT": {
          return "折扣";
          break;
        }
        case "GIVE_CLASS": {
          if (row.giveClassPaySalaryFlag) {
            return "买赠(赠课结算)";
          } else {
            return "买赠(不结算)";
          }

          break;
        }
      }
    },
    // 格式化课时类型
    fommatterCourseType(row) {
      let date = JSON.parse(row.salarySettlementJson);
      let str = "";
      if (date && date.onlineSalarySettlement) {
        str += "线上 ";
      }
      if (date && date.offlineSalarySettlement) {
        str += "线下";
      }
      return str;
    },
    // 格式化启用状态
    fommatterEnable(row) {
      switch (row.enable) {
        case 0: {
          return "关闭";
          break;
        }
        case 1: {
          return "开启";
          break;
        }
      }
    },
    // 点击列表修改同步状态
    reset(row) {
      this.activeId = row.id;
      this.dialogVisible = true;
      this.resetForm.name = row.name;
      this.resetForm.desc = row.description;

      if (row.organId) {
        this.resetForm.organ = row.organId.split(",").map(res => {
          return parseInt(res);
        });
      }
      if (row.vipGroupCategoryIdList) {
        this.resetForm.stauts = row.vipGroupCategoryIdList
          .split(",")
          .map(res => {
            return parseInt(res);
          });
      }

      // 同步活动时间
      if (row.startTime && row.endTime) {
        this.resetForm.activeTime = [row.startTime, row.endTime];
      }
      if (row.coursesStartTime && row.coursesEndTime) {
        this.resetForm.courseTime = [row.coursesStartTime, row.coursesEndTime];
      }
      // 同步适用范围
      let obj = JSON.parse(row.salarySettlementJson);
      // 同步线上课状态
      obj.onlineSalarySettlement ? (this.online = true) : (this.online = false);

      if (obj.onlineSalarySettlement) {
        this.onlineSalary = obj.salarySettlementType;
        if (obj.onlineSalarySettlement.settlementValue) {
          this.onlineprice = obj.onlineSalarySettlement.settlementValue;
        }
        if (obj.onlineSalarySettlement.salarySettlementType)
          this.onlineSalary = obj.onlineSalarySettlement.salarySettlementType;
      }
      // 同步线下课状态
      obj.offlineSalarySettlement
        ? (this.unonline = true)
        : (this.unonline = false);
      if (obj.offlineSalarySettlement) {
        this.unonlineSalary = obj.offlineSalarySettlement;
        if (obj.offlineSalarySettlement.settlementValue) {
          this.unonlineprice = obj.offlineSalarySettlement.settlementValue;
        }
        if (obj.offlineSalarySettlement.salarySettlementType)
          this.unonlineSalary =
            obj.offlineSalarySettlement.salarySettlementType;
      }
      //
      this.salaryReadonlyFlag = !!parseInt(row.salaryReadonlyFlag);
      this.paymentReadonlyFlag = !!parseInt(row.paymentReadonlyFlag);
      this.offlineClassJoinGradientRewards = !!parseInt(
        row.offlineClassJoinGradientRewards
      );
      this.onlineClassJoinGradientRewards = !!parseInt(
        row.onlineClassJoinGradientRewards
      );
      this.activeType = row.type;
      this.attribute1 = row.attribute1;
      this.attribute2 = row.attribute2;
      this.giveClassPaySalaryFlag =
        row.giveClassPaySalaryFlag == 1 ? true : false;
    },
    // 点击确认按钮发送修改请求
    resetRow() {
      this.$refs["vipform"].validate(valid => {
        if (valid) {
          // 验证通过
          let coursesStartTime;
          let coursesEndTime;
          let startTime;
          let endTime;
          if (!this.resetForm.courseTime) {
            this.resetForm.courseTime = [];
            // coursesStartTime = null;
            // coursesEndTime = null;
          }
          if (!this.resetForm.activeTime) {
            this.resetForm.activeTime = [];
            // startTime = null;
            // endTime = null;
          }
          let id = this.activeId;
          coursesStartTime = this.resetForm.courseTime[0] || null;
          coursesEndTime = this.resetForm.courseTime[1] || null;
          startTime = this.resetForm.activeTime[0] || null;
          endTime = this.resetForm.activeTime[1] || null;
          let organId = this.resetForm.organ.join(",");
          let type = this.activeType;
          let vipGroupCategoryIdList = this.resetForm.stauts.join(",");
          let onlineSalarySettlement;
          let offlineSalarySettlement;
          if (this.online) {
            // 勾选线上
            onlineSalarySettlement = {
              salarySettlementType: this.onlineSalary,
              settlementValue: this.onlineprice
            };
          } else {
            onlineSalarySettlement = null;
          }
          if (this.unonline) {
            // 勾选线下
            offlineSalarySettlement = {
              salarySettlementType: this.unonlineSalary,
              settlementValue: this.unonlineprice
            };
          } else {
            offlineSalarySettlement = null;
          }
          let salaryReadonlyFlag = this.salaryReadonlyFlag * 1;
          let paymentReadonlyFlag = this.paymentReadonlyFlag * 1;
          let giveClassPaySalaryFlag = this.giveClassPaySalaryFlag * 1;
          let vipGroupSalarySettlement = {
            onlineSalarySettlement,
            offlineSalarySettlement
          };
          // 发请求创建活动
          resetVipActive({
            paymentReadonlyFlag,
            id,
            coursesStartTime,
            coursesEndTime,
            startTime,
            endTime,
            name: this.resetForm.name,
            description: this.resetForm.desc,
            organId,
            type,
            vipGroupCategoryIdList,
            vipGroupSalarySettlement,
            salaryReadonlyFlag,
            giveClassPaySalaryFlag,
            attribute1: this.attribute1,
            attribute2: this.attribute2,
            attribute3: this.attribute3,
            onlineClassJoinGradientRewards:
              this.onlineClassJoinGradientRewards * 1,
            offlineClassJoinGradientRewards:
              this.offlineClassJoinGradientRewards * 1
          }).then(res => {
            if (res.code == 200) {
              this.$message.success("恭喜你,活动修改成功");
              this.dialogVisible = false;
              this.getList();
            }
          });
        } else {
          this.$message.error("请填写必要参数");
        }
      });
    },
    remove(scope) {
      let id = scope.row.id;
      removeVipActive({ id }).then(res => {
        if (res.code == 200) {
          this.$message.success("恭喜您删除成功");
          this.getList();
        }
        scope._self.$refs[scope.$index].doClose();
      });
    },
    gotoNewActive() {
      // 带参数 searchForm: { organId: null } 搜索条件
      let rules = JSON.stringify(this.rules);
      let searchForm = JSON.stringify(this.searchForm);
      this.$router.push({
        path: "/vipClassSet/vipNewActive?type=create",
        query: { rules, searchForm }
      });
    },
    closeVipform() {
      console.log(111);
      this.$refs["vipform"].resetFields();
      this.dialogVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.activeType {
  .right {
    .el-input {
      width: 150px !important;
    }
  }
}
.activeRange {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  .left {
    height: 72px;
    line-height: 72px;
  }
  .right {
    .chioseWrap {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      height: 72px;
      line-height: 72px;
      align-items: center;
      .el-checkbox {
        margin-right: 20px;
      }
      .el-select {
        margin-right: 20px;
      }
    }
  }
}
.activeType {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  .left {
    margin-right: 20px;
    p {
      height: 40px;
      line-height: 40px;
    }
  }
  .right {
    > div {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      height: 40px;
      line-height: 40px;
      margin-bottom: 20px;
      .head {
        width: 120px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #ccc;

        text-align: center;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 10px;
      }
      > .head.active {
        background-color: #13817a;
        color: #fff;
        border: none;
      }
      .title {
        line-height: 40px;
        height: 40px;
      }
    }
  }
}
.vipform {
  .el-select {
    width: 400px !important;
    .el-input__inner {
      width: 400px;
    }
  }
}
.ishidden {
  visibility: hidden;
}
</style>