<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>VIP/乐理课程收费设置
    </h2>
    <div class="m-core">
      <save-form :inline="true"
               ref="searchForm"
               class="searchForm"
               @submit="search"
               :model.sync="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 selects.branchs"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button native-type="submit"
                     type="primary">搜索</el-button>
        </el-form-item>
      </save-form>
      <div class="tableWrap">
        <el-table :data="dataList"
                  style="width:100% !important;"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column prop="name"
                           label="课程形式">
          </el-table-column>
          <el-table-column prop="onlineClassesUnitPrice"
                           label="线上课单价">
            <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="线下课单价">
            <template slot-scope="scope">
              <div>
                <el-input v-model.trim="scope.row.offlineClassesUnitPrice"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" v-if="$helpers.permission('vipGroupDefaultClassesUnitPrice/add')"
                           @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'
import { Searchs } from '@/helpers'
export default {
  name: 'vipChargeSeting',
  data () {
    return {
      dataList: [],
      organList: [],
      searchForm: {
        organId: null
      }
    }
  },
  async mounted () {
    // 获取课程形态 设置vip课酬
    // 获取分部
    await this.$store.dispatch('setBranchs')
    // 获取缓存的分部编号
    const searchs = new Searchs(this.$route.fullPath)
    const branchId = searchs.searchs[searchs.key]?.form.organId
    this.searchForm.organId = branchId ? branchId : this.selects?.branchs[0]['id']
    this.search()

  },
  methods: {
    search () {
      this.$refs.searchForm.validate(valid => {
        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>
