<style>
  .baseSet_Title {
    width: 120px !important;
    padding: 18px 0 0 16px;
    text-align: right;
  }

</style>
<template>
  <div class="page-body">
    <q-tabs style="margin-bottom:20px;" v-model="tabCheck" narrow-indicator dense align="left" class="text-primary">
      <q-tab :ripple="false" name="first" label="基础设置" />
      <q-tab :ripple="false" name="second" label="班级类型" />
    </q-tabs>
    <template v-if="tabCheck=='first'">
      <div class="col row wrap" style="margin-top:30px;">
        <div class="col-2 baseSet_Title">
          基础课时费：
        </div>
        <div class="col-3">
          <q-input filled stack-label maxlength="8" :dense="false" v-model="msg.BasicHourFee" ref="BasicHourFee"
            class="q-pb-lg" @keyup.native="checkPrice(msg,'BasicHourFee')" :rules="[val => !!val || '请填写基础课时费']" />
        </div>
      </div>
      <div class="col row wrap">
        <div class="col-2 baseSet_Title">
          基础带班人数：
        </div>
        <div class="col-3">
          <q-input filled stack-label maxlength="6" :dense="false" v-model="msg.BasicClassNum" ref="BasicClassNum"
            class="q-pb-lg" @keyup.native="checkInteger(msg,'BasicClassNum')" :rules="[val => !!val || '请填写基础带班人数']" />
        </div>
      </div>
      <div class="col row wrap">
        <div class="col-2 baseSet_Title">
          课时分钟数：
        </div>
        <div class="col-3">
          <q-input filled stack-label maxlength="6" :dense="false" v-model="msg.BasicMinutes" ref="BasicMinutes"
            class="q-pb-lg" @keyup.native="checkInteger(msg,'BasicMinutes')" :rules="[val => !!val || '请填写课时分钟数']" />
        </div>
        <div class="col-3" style="padding:18px 0 0 10px;color:gray">
          每节课的分钟数，单位为分钟计算
        </div>
      </div>
      <div class="col row wrap">
        <div class="col-2 baseSet_Title">
        </div>
        <div class="col-3">
          <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important;margin-top:20px;width:100%;"
            @click="saveInfo" />
        </div>
      </div>
    </template>
    <template v-if="tabCheck=='second'">
      <q-table :loading="loading" :pagination="tabeMsg" no-data-label="暂无相关数据" flat class="sticky-column-table"
        separator="none" :data="dataList" :columns="columns" row-key="name">
        <template v-slot:top="props">
          <q-space />
          <div class="page-option">
            <q-btn color="accent" size="sm" icon="add" @click="clearInfo()" ref="addBtn" label="新增" />
          </div>
        </template>
        <template v-slot:body-cell-AddHourFee="props">
          <q-td :props="props">
            <span v-if="props.row.AddHourFee>0" style="color:green;">{{props.row.AddHourFee}}</span>
            <span v-if="props.row.AddHourFee<0" style="color:red;">{{props.row.AddHourFee}}</span>
            <span v-if="props.row.AddHourFee==0" style="color:black;">{{props.row.AddHourFee}}</span>
          </q-td>
        </template>
        <template v-slot:body-cell-TotalClassNum="props">
          <q-td :props="props">
            <span style="color:blue;cursor:pointer"
              @click="goUrlT('classManage',props.row)">{{props.row.TotalClassNum}}</span>
          </q-td>
        </template>
        <template v-slot:body-cell-CompleteClassNum="props">
          <q-td :props="props">
            <span style="color:blue;cursor:pointer"
              @click="goUrlT('classManage',props.row)">{{props.row.CompleteClassNum}}</span>
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="tabeMsg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="修改"
              @click="EditClassType(props.row)" />
            <q-btn flat size="xs" icon="iconfont icon-shanchu" color="negative" style="font-weight:400" label="删除"
              @click="deleteClassType(props.row)" />
          </q-td>
        </template>
      </q-table>
    </template>
    <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale">
      <q-card style="width: 400px;max-width:900px;padding:0 20px;" class="CLM-Form">
        <q-card-section>
          <div class="text-h6">{{commonTitle}}</div>
        </q-card-section>
        <q-input filled stack-label maxlength="20" :dense="false" v-model="addMsg.CTypeName" label="类型名称"
          ref="CTypeName" class="q-pb-lg" :rules="[val => !!val || '请填写类型名称']" />
        <q-input filled stack-label :dense="false" maxlength="6" style="margin:20px 0;" v-model="addMsg.AddHourFee"
          label="基础课时费" ref="AddHourFee" class="q-pb-lg" @keyup.native="checkPrice(addMsg,'AddHourFee')"
          :rules="[val => !!val || '请填写基础课时费']" />
        <q-input filled stack-label :dense="false" maxlength="8" v-model="addMsg.DefaultClassNum" label="默认班级人数"
          ref="DefaultClassNum" class="q-pb-lg" @keyup.native="checkInteger(addMsg,'DefaultClassNum')"
          :rules="[val => !!val || '请填写默认班级人数']" />
        <q-card-actions align="right" class="bg-white">
          <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="persistent=false" />
          <q-btn label="确认" color="accent q-px-md" style="font-weight:400 !important" @click="saveClassType()" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>
<script>
  import {
    GetClassConfig,
    SetClassConfig,
    SetClassType,
    GetClassTypePageList,
    RemoveClassType
  } from '../../api/system/index';

  export default {
    meta: {
      title: "基础设置"
    },
    props: {},
    components: {},
    data() {
      return {
        tabCheck: 'first', //默认选第一个
        dense: false,
        msg: {
          ConfigId: 0,
          BasicHourFee: '', //基础课时费
          BasicClassNum: '', //基础带班人数
          BasicMinutes: '' //课时分钟数
        },
        columns: [{
            name: 'CTypeName',
            label: '类型名称',
            field: 'CTypeName',
            align: 'left'
          },
          {
            name: 'AddHourFee',
            label: '课时费加价',
            field: 'AddHourFee',
            align: 'left',
          },
          {
            name: 'DefaultClassNum',
            label: '默认班级人数',
            field: 'DefaultClassNum',
            align: 'left'
          },
          {
            name: 'TotalClassNum',
            label: '关联班级数',
            field: 'TotalClassNum',
            align: 'left'
          },
          {
            name: 'CompleteClassNum',
            label: '结课班级数',
            field: 'CompleteClassNum',
            align: 'left'
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'RoleId'
          }
        ],
        loading: false,
        dataList: [], //列表数据
        addMsg: {
          CTypeId: 0, //班级类型主键编号
          CTypeName: '', //类型名称
          AddHourFee: '', //课时费加价
          DefaultClassNum: '' //默认班级人数
        },
        //列表数据参数
        tabeMsg: {
          pageIndex: 1,
          pageSize: 12
        },
        pageCount: 0,
        persistent: false,
        commonTitle: ''
      }
    },
    created() {},
    mounted() {
      this.GetClassConfig();
      this.GetClassTypePageList();
    },
    methods: {
      //保存基础数据
      saveInfo() {
        SetClassConfig(this.msg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '数据保存成功！',
              position: 'top'
            })
            this.GetClassConfig();
          }
        })
      },
      //获取基础数据
      GetClassConfig() {
        GetClassConfig({}).then(res => {
          if (res.Code == 1) {
            if (res.Data) {
              this.msg.ConfigId = res.Data.ConfigId;
              this.msg.BasicHourFee = res.Data.BasicHourFee;
              this.msg.BasicClassNum = res.Data.BasicClassNum;
              this.msg.BasicMinutes = res.Data.BasicMinutes;
            }
          }
        })
      },
      //保存班级类型
      saveClassType() {
        if (this.addMsg.CTypeName == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请填写类型名称`
          })
          return;
        }
        if (this.addMsg.AddHourFee == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请填写基础课时费`
          })
          return;
        }
        if (this.addMsg.DefaultClassNum == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请填写默认班级人数`
          })
          return;
        }
        SetClassType(this.addMsg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '数据保存成功！',
              position: 'top'
            })
            this.persistent = false;
            this.GetClassTypePageList();
          }
        })
      },
      //获取班级类型列表数据
      GetClassTypePageList() {
        this.loading = true;
        GetClassTypePageList(this.tabeMsg).then(res => {
          this.loading = false;
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.pageCount = res.Data.PageCount;
          }
        })
      },
      //翻页  
      changePage(val) {
        this.tabeMsg.pageIndex = val;
        this.GetClassTypePageList()
      },
      clearInfo() {
        this.commonTitle = '新增班级类型';
        this.persistent = true;
        this.addMsg.CTypeId = 0;
        this.addMsg.CTypeName = '';
        this.addMsg.AddHourFee = '';
        this.addMsg.DefaultClassNum = '';
      },
      //编辑班级类型
      EditClassType(obj) {
        this.commonTitle = '修改班级类型';
        this.persistent = true;
        this.addMsg.CTypeId = obj.CTypeId;
        this.addMsg.CTypeName = obj.CTypeName;
        this.addMsg.AddHourFee = obj.AddHourFee;
        this.addMsg.DefaultClassNum = obj.DefaultClassNum;
      },
      //删除班级类型费用配置
      deleteClassType(obj) {
        this.$q.dialog({
          title: "删除类型",
          message: '',
          cancel: {
            label: "取消",
            flat: true
          },
          ok: {
            label: "确认",
            flat: true,
            focus: true
          }
        }).onOk(() => {
          let msg = {
            CTypeId: obj.CTypeId
          }
          RemoveClassType(msg).then(res => {
            if (res.Code == 1) {
              this.GetClassTypePageList();
            }
          })
        });
      },
      //跳转
      goUrlT: function (path, obj) {
        this.$router.push({
          path: path,
          query: {
            "CTypeId": obj.CTypeId,
            blank: 'y'
          }
        })
      },
      closeSetForm() {
        this.persistent = false;
      }
    },
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
