<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>VIP课程收费设置
    </h2>
    <div class="m-core">
      <el-form :inline="true"
               class="searchForm"
               v-model.trim="searchForm">
        <el-form-item prop='organId'>
          <el-select class='multiple'
                     style="width:180px!important"
                     v-model.trim="searchForm.organId"
                     filterable
                     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>
          <el-button @click="search"
                     type="danger">搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="tableWrap">
        <el-table :data="dataList"
                  style="width:720px;"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column prop="name"
                           label="课程形式"
                           width="180">
          </el-table-column>
          <el-table-column prop="onlineClassesUnitPrice"
                           label="线上课单价"
                           width="180">
            <template slot-scope="scope">
              <div>
                <el-input v-model.trim="scope.row.onlineClassesUnitPrice"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="offlineClassesUnitPrice"
                           label="线下课单价"
                           width="180">
            <template slot-scope="scope">
              <div>
                <el-input v-model.trim="scope.row.offlineClassesUnitPrice"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           width="180">
            <template slot-scope="scope">
              <div>
                <el-button type="text"
                           @click="saveSeting(scope.row)">保存</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { vipGroupCategory, defaultClassesUnitPrice } from '@/api/vipSeting'
import { getEmployeeOrgan } from '@/api/buildTeam'
export default {
  name: 'vipChargeSeting',
  data () {
    return {
      dataList: [],
      organList: [],
      searchForm: {
        organId: null
      }
    }
  },
  mounted () {
    // 获取课程形态 设置vip课酬
    getEmployeeOrgan().then(res => {
      if (res.code == 200) {
        this.organList = res.data;
        this.searchForm.organId = this.organList[0].id;
        if (this.organList[0].id) {
          this.getList();
        }
      }
    })
    // this.getList();

  },
  methods: {
    search () {
      this.getList();
    },
    getList () {
      vipGroupCategory({ organId: this.searchForm.organId }).then(res => {
        if (res.code == 200) {
          this.dataList = res.data;
        }

      })
    },
    saveSeting (row) {
      defaultClassesUnitPrice({
        offlineClassesUnitPrice: row.offlineClassesUnitPrice,
        onlineClassesUnitPrice: row.onlineClassesUnitPrice,
        organId: this.searchForm.organId,
        vipGroupCategoryId: row.id
      }).then(res => {
        if (res.code == 200) {
          // 保存成功提示=> 刷新列表
          this.$message.success('保存成功')
        } else {
          // 保存失败
          this.$message.error('保存失败,请重试');
        }
      })
    }
  },
}
</script>
<style lang="scss">
</style>