<template>
  <div class="classHourReward page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-select @input="resetSearch" standout="bg-primary text-white" option-value="TId" option-label="TeacherName"
                    v-model="msg.TeacherId" :options="TeacherList" emit-value map-options label="带班老师" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" standout="bg-primary text-white" option-value="Id" option-label="Name"
                    v-model="msg.State" :options="StateList" emit-value map-options label="状态" />
        </div>
        <div class="col-3 Sysuser_Date">
          <q-field filled>
             <template v-slot:control>
              <el-date-picker v-model="msg.Month" @change="resetSearch()" type="month">
              </el-date-picker>       
            </template>
          </q-field>
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
               separator="none" title="" :data="data" :columns="columns" row-key="name">
        <template v-slot:top="props">
          <div class="page-option" style="width:100%;">
          <q-btn color="accent" style="float:right;margin-right:0;" size="sm" class="q-mr-md" icon="add" label="新增课时奖励" @click="drawer=true" ></q-btn>
          </div>
        </template>
        <template v-slot:body-cell-State="props">
          <q-td :props="props">
            <div class="state-item" v-if="props.row.State==1" style="background: rgba(255, 204, 0, 0.2);color: #EDBE00">{{props.row.StateName}}</div>
            <div class="state-item" v-if="props.row.State==2" style="background: rgba(2, 196, 153, 0.2);color: #02C499">{{props.row.StateName}}</div>
            <div class="state-item" v-if="props.row.State==3" style="background: rgba(247, 46, 82, 0.2);color: #F72E52">{{props.row.StateName}}</div>
            <div class="state-item" v-if="props.row.State==4" style="background: rgba(41, 97, 254, 0.2);color: #2961FE">{{props.row.StateName}}</div>
          </q-td>
        </template>
        <template v-slot:body-cell-TeacherList="props">
          <q-td :props="props">
            <span style="color: #3FC4FF;cursor: pointer">{{props.row.TeacherList[0].TeacherName}}等{{props.row.TeacherList.length}}位老师
              <q-popup-proxy>
                    <q-banner>
                      <div class="price-popup">
                        <div class="row " v-for="(x,index2) in props.row.TeacherList" :key="index2" style="width: 200px;justify-content: space-between;align-items: center;margin: 7px 0;cursor: pointer">
                            <div class="row" @click="goDetailed(props.row,x.TeacherId)">
                              <span style="color:#2D2D2D;">{{x.TeacherName}}</span>
                            </div>
                            <span style="color: #2860FB">{{x.Money.toFixed(2)}}</span>
                        </div>
                      </div>
                    </q-banner>
              </q-popup-proxy>
            </span>
          </q-td>
        </template>
        <template v-slot:body-cell-FrIdList="props">
          <q-td :props="props">
            <div class="row wrap" style="width: 100%;">
              <div class="frIdlist row" v-for="(x,j) in props.row.FrIdList" :key="j">
                <span style="font-size: 14px;color: #111111">{{x}}</span>
              </div>
            </div>
          </q-td>
        </template>

        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <q-btn flat size="xs" icon="iconfont icon-xiangqing-"  style="font-weight:400;color: #3FC4FF" class="q-mr-xs"
                   label="明细" @click="goDetailed(props.row,'0')" />
            <q-btn-dropdown flat size="xs" color="dark" label="更多" style="margin-left:10px;">
              <q-list>
                <q-item clickable v-close-popup v-if="props.row.State==1">
                  <q-item-section @click="gostudent(props.row,1)">
                    <q-item-label>确认</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup v-if="props.row.State==1 || props.row.State==2">
                  <q-item-section @click="gostudent(props.row,2)">
                    <q-item-label>取消</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup v-if="props.row.State==2">
                  <q-item-section @click="systemShan(props.row)">
                    <q-item-label>制单</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup v-if="props.row.State==1||props.row.State==2">
                  <q-item-section @click="goexport(props.row)">
                    <q-item-label>导出</q-item-label>
                  </q-item-section>
                </q-item>

              </q-list>
            </q-btn-dropdown>
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
                        :input="true" @input="changePage" />
        </template>
      </q-table>
    </div>
<!--    一键制单-->
    <q-dialog v-model="ISsystem"  persistent
              >
      <q-card style="width: 400px;max-width:500px;">
        <q-card-section>
          <div class="text-h6">一键制单</div>
        </q-card-section>
        <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
          <div class="col">
            <q-radio v-model="FinanceMsg.IsPublic" val="0" label="私账" />
            <q-radio v-model="FinanceMsg.IsPublic" val="1" label="公账" />
          </div>
          <div class="col" style="margin-top: 20px">
            <q-select  standout="bg-primary text-white" option-value="ID" option-label="Name"
                      v-model="FinanceMsg.CurrencyId" :options="coinGetList" emit-value map-options label="币种" />
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right" class="bg-white">
          <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="ISsystem=false,Resetsystem()" v-if="!Floading"/>
          <q-btn label="立即制单" color="accent" class="q-px-md" style="font-weight:400 !important" :loading="Floading"
                 @click="savesystem()" />
        </q-card-actions>
      </q-card>
    </q-dialog>
<el-drawer
  title=""
  :visible.sync="drawer"
  :wrapperClosable="false"
  :with-header="false">
  <div style="padding: 15px" class="class-popover">
    <div style="margin: 10px 0;font-size: 14px;font-weight: bold;color:#2D2D2D;">新增课时奖励</div>
    <q-select class="col-12 q-pb-lg q-pr-lg" multiple clearable filled stack-label use-input use-chips
              option-value="TId" option-label="TeacherName" v-model="tempManager" ref="ManagerId" :options="TeacherList"
              label="所有老师" :dense="false" emit-value map-options @filter="filterFn">
      <template v-slot:no-option>
        <q-item>
          <q-item-section class="text-grey">
            未找到相关数据
          </q-item-section>
        </q-item>
      </template>
    </q-select>
    <div class="col-12">
      <div class="col-12 Sysuser_Date">
        <q-field filled>
          <template v-slot:control>
        <el-date-picker v-model="addMsg.Month"   type="month" style="border:none;" :picker-options="pickerOptions"></el-date-picker>       
        </template>
        </q-field>
      </div>
    </div>

    <div class="row col" style="margin-top: 30px">
      <q-btn class="q-mr-md" label="取消" @click="drawer=false" />
      <q-btn color="accent" class="q-mr-md" label="保存" @click="saveOrderInfo()"  :loading="Dloading"/>
    </div>
  </div>
</el-drawer>
  </div>
</template>

<script>
  import {
    getTeachingBonusPageList,
    getBonusStateEnumList,//教师奖励状态 枚举
    setTeachingBonusAdd,//新增课时奖励
    setTeachingBonusState,//教师绩效 设置状态
    setTeachingBonusFinance,//教师奖励 生成财务单据
  } from '../../api/course/class'
  import {
    getTeacherDropDownList,
  } from '../../api/school/index';
    export default {
        name: "classHourReward",
      data(){
          return{
            loading:false,
            ISsystem:false,
            Floading:false,
            Dloading:false,
            drawer:false,
            data:[],
            pageCount:0,
            msg:{
              pageIndex:1,
              pageSize:10,
              rowsPerPage:10,
              Month:'',
              TeacherId:0,
              State:0,
            },
            //公告column
            columns: [{
              name: 'State',
              label: '状态',
              align: 'left'
            },
              {
                name: 'Month',
                field: 'Month',
                label: '月份',
                align: 'left',
              },
              {
                name: 'TeacherList',
                label: '关联老师',
                align: 'left'
              },
              {
                name: 'Money',
                label: '发放总金额',
                field: 'Money',
                align: 'left'
              },
              {
                name: 'UpdateTime',
                label: '生成时间',
                field:'UpdateTime',
                align: 'left'
              },
              {
                name: 'FrIdList',
                label: '财务单据',
                align: 'left'
              },
              {
                name: 'UpdateByName',
                label: '操作人',
                align: 'left',
                field: 'UpdateByName'
              }, {
                name: 'optioned',
                label: '操作',
                field: 'DeptId'
              }],
            TeacherList: [], //关联教师下拉数据
            AllTeacherList:[],//保存值
            StateList: [], //状态下拉
            tempManager:[],
            visible:false,
            addMsg:{//新增课时奖励
              Month:'',
              TeacherIds:'',
            },
            coinGetList:[],//币种数组
            FinanceMsg:{//生成财务单据的参数
              BonusId:0,
              IsPublic:'0',
              CurrencyId:'',
            },
            pickerOptions:{
              disabledDate(time) {
                return time.getTime() > Date.now();
              },
            },
          }
      },
      created() {
        this.getList();
        this.GetTeacherList()
        this.GetBonusStateList()
        this.financeinfo_post_GetList()
      },
      methods:{
        financeinfo_post_GetList() { // 获取币种
          this.apipost('financeinfo_post_GetList', {
            Name: '',
            TCID: 0
          }, res => {
            if (res.data.resultCode == 1) {
              this.coinGetList = res.data.data;
              this.FinanceMsg.CurrencyId = this.coinGetList[0].ID
            }
          }, err => {})
        },
        resetSearch() {
          this.msg.pageIndex = 1;
          this.getList()
        },
        //翻页
        changePage(val) {
          this.msg.pageIndex = val;
          this.getList()
        },
        getList(){

            this.loading = true;
            getTeachingBonusPageList(this.msg).then(res => {
              this.loading = false
              this.data = res.Data.PageData
              console.log(this.data)
              this.pageCount = res.Data.PageCount;


            }).catch(() => {
              this.loading = false
            })
        },
        //获取教师下拉
        GetTeacherList() {
          getTeacherDropDownList({}).then(res => {
            if (res.Code == 1) {
              this.TeacherList = res.Data;
              this.TeacherList.unshift({
                TId: 0,
                TeacherName: "不限"
              })
              this.AllTeacherList = this.TeacherList
            }
          })
        },
        GetBonusStateList(){
          getBonusStateEnumList({}).then(res => {
            if (res.Code == 1) {
              this.StateList = res.Data;
              this.StateList.unshift({
                Id: 0,
                Name: "不限"
              })
            }
          })
        },
        //筛选员工
        filterFn(val, update) {
          update(() => {
            if (val === '') {
              this.TeacherList = JSON.parse(JSON.stringify(this.AllTeacherList))
            } else {
              const needle = val.toLowerCase()
              this.TeacherList = this.AllTeacherList.filter(v => v.TeacherName.toLowerCase().indexOf(needle) > -1)
            }
          })
        },
        saveOrderInfo(){

          if(this.tempManager && this.tempManager.length>0){
            let all =false

            this.tempManager.forEach(x=>{
              if(x==0){
                all = true
              }
            })
            if(all==true){//如果选了全部 就不所有老师带过去
              let data = []
              this.AllTeacherList.forEach(x=>{
                if(x.TId!=0){
                  data.push(x.TId)
                }
              })
              this.addMsg.TeacherIds =data.join(',')
            }else {
              this.addMsg.TeacherIds =this.tempManager.join(',')
            }
          }else {
            this.$q.notify({
              type: 'warning',
              position: 'top',
              timeout: 1500,
              message: `请选择教师`
            })
            return
          }
          if(this.addMsg.Month==''){
            this.$q.notify({
              type: 'warning',
              position: 'top',
              timeout: 1500,
              message: `请选择月份`
            })
            return
          }
          this.Dloading=true
          setTeachingBonusAdd(this.addMsg).then(res => {
            this.Dloading=false
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '保存成功！',
                position: 'top'
              })
              this.resetSearch()
              this.drawer=false
            }
          })

        },
        gostudent(item,type){//确认
          let that = this
          let text = '';
          if(type==1){
            text = '确认奖励'
          }else if(type==2){
            text = '取消奖励'
          }
          this.$q.dialog({
            title: '提示信息',
            message: text,
            cancel: true,
            persistent: true,
            html: true,
            ok: "确定",
            cancel: "取消",
          }).onOk(() => {
            setTeachingBonusState({
              BonusId: item.Id,
              Type:type
            }).then(res => {
              if (res.Code == 1) {
                that.$q.notify({
                  icon: 'iconfont icon-chenggong',
                  color: 'accent',
                  timeout: 2000,
                  message: '操作成功',
                  position: 'top'
                })
                that.getList()

              }
            })
          }).onCancel(() => {

          });
        },
        systemShan(item){//一键制单
          this.FinanceMsg.BonusId = item.Id
          this.ISsystem =true;
        },
        Resetsystem(){
          this.FinanceMsg={
            BonusId:0,
            IsPublic:'0',
            CurrencyId:'',
          }
        },
        savesystem(){
          if(this.FinanceMsg.CurrencyId==''){
            this.$q.notify({
              type: 'warning',
              position: 'top',
              timeout: 1500,
              message: `请选择币种`
            })
            return
          }
          let that = this
          that.Floading = true
          setTeachingBonusFinance(this.FinanceMsg).then(res => {
            if (res.Code == 1) {
              that.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '制单成功',
                position: 'top'
              })
              that.getList()
              that.Resetsystem()
              that.Floading = false
              that.ISsystem=false


            }
          }).catch(() => {
            this.Floading = false
          })

        },
        goexport(){//导出

        },
        goDetailed(item,TeacherId){//明细
          var tempStr = '/course/rewardDetailed?Id=' + item.Id+'&TeacherId='+TeacherId;
          this.$router.push({
            path: tempStr
          });
        }
      }
    }
</script>

<style>
  .classHourReward .Sysuser_Date .el-input--prefix .el-input__inner {
    background-color: red;
    border: 0;
  }
  .classHourReward .state-item{
    padding: 3px 0px;border-radius: 3px;width: 70px;
    text-align: center;
  }
  .classHourReward .frIdlist{
    padding: 3px 10px;
    border-radius: 3px;
    background: #EEEEEF;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
  }

  .class-popover .q-pr-lg{
    padding-right: 0;
    margin-top: 20px;
  }
  .classHourReward .el-date-editor.el-input{
    width: 100%;
  }
  .classHourReward .el-date-editor.el-input input{
    background-color: transparent!important;
  }
  .classHourReward .el-range-editor .el-range-input {
    background: none;
  }
  .Sysuser_Date .el-input__inner{
    background: transparent!important;
    border:0!important;
  }
</style>
