<style>
    .baseSet_Title {
      width: 120px !important;
      padding: 18px 0 0 16px;
      text-align: right;
    }
   .settleAccounts  .border-bottom {
        /* border-bottom: 1px dashed #EEE; */
        padding-bottom: 5px;
        margin-bottom: 5px;
    }
    .settleAccounts  .text-bottom{
        height: 32px;line-height: 32px; margin-bottom: 10px;
    }
    .settleAccounts ._icon_btn i.icon-xiugai {
    background-color: #47BF8C;
  }
    .settleAccounts ._icon_btn i {
    width: 30px;
    height: 30px;
    display: inline-block;
    color: white !important;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    margin-right: 10px;
    cursor: pointer;
    outline: none;
  }
 .settleAccounts .el-table td,.el-table th{
    padding: 5px 0;
  }
  .settleAccounts .el-input {
        width: 100%;
        border: none;
        background-color: transparent;
    }
.settleAccounts .items-center .el-input__inner {
    width: 100%;
    border: none;
    background-color: transparent;
}

.SettleAccounts-Form  .el-input {
        width: 100%;
        border: none;
        background-color: transparent;
    }
.SettleAccounts-Form  .el-input__inner {
    width: 100%;
    border: none;
    background-color: transparent;
}
  
  </style>
  <template>
    <div class="page-body settleAccounts">
        <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 filled stack-label @input="resetSearch()" option-value="SId"
                      option-label="SName" v-model="msg.SchoolId" ref="SchoolId" :options="schoolList" label="校区"
                      :dense="false" emit-value map-options />
                </div>
                <div class="col-3">
                    <q-select filled stack-label @input="resetSearch()" option-value="Id"
                      option-label="Name" v-model="msg.State"  :options="StateList" label="状态"
                      :dense="false" emit-value map-options />
                </div>
                <div class="col-3">
                    <q-field filled>
                         <template v-slot:control>
                            <el-date-picker v-model="msg.Month" type="month" placeholder="选择月份" value-format="yyyy-MM"  @change = 'resetSearch' > </el-date-picker>    
                        </template>
                    </q-field>
                </div>
                
            </div>
        </div>
        <div class="page-search row items-center" style="justify-content: space-between;">
            <span style="font-size: 20px;font-weight: 400;">财务轧账  </span>
            <q-btn  color="primary" size="11px" label="新增" @click="addzaaccounts" style="margin-left:10px"/>
        </div>
      <template >
        <el-table
            ref="filterTable"
            :data="tableData"
            v-loading = 'loading'

            :header-cell-style="{backgroundColor:'#f5f6f7', color: '#a8a8b3'}"
            border
            style="width: 100%">
            <el-table-column  prop="Month" width='150' label="月份"  ></el-table-column>
            <el-table-column  prop="SchoolList" label="校区" > 
                <template slot-scope="scope">
                    <div v-if="scope.row.SchoolList.length>0"> 
                        <span v-for="(x,y) in scope.row.SchoolList" :key='y'>
                            {{x.SName}}{{scope.row.SchoolList.length != y+1?'、':''}}
                        </span>
                    </div>
                 </template>
            </el-table-column>
            <el-table-column prop="State" width='150' label="状态" >
                <template slot-scope="scope">
                    <span>{{scope.row.State==1?'启用':'停用'}}</span>
                    
                 </template>
            </el-table-column>
           
            <el-table-column prop="UpdateByName" width='150' label="创建人"> </el-table-column>
            <el-table-column prop="UpdateTime" width='200' label="创建时间"> </el-table-column>
            <el-table-column prop="UpdateTime" width='150' label="操作"> 
                <template slot-scope="scope">
                    <div class="_icon_btn">
                        <el-tooltip class="item" effect="dark" content="修改" placement="top">
                            <i class="iconfont icon-xiugai"
                                @click="goedit(scope.row)"></i>
                        </el-tooltip>
                     
                    </div>
                 </template>
            </el-table-column>
           
        </el-table>
        <div style="margin-top: 10px;text-align: center;">
            <el-pagination background @current-change="handleCurrentChanges" layout="total,prev, pager, next, jumper" :current-page.sync="msg.PageIndex"
              :page-size="msg.PageSize" :total='total'>
            </el-pagination>
          </div>
      </template>
      <q-dialog v-model="persistent"  persistent transition-show="scale">
        <q-card style="width: 800px;max-width:900px;" class="SettleAccounts-Form">
          <q-card-section>
            <div class="text-h6">{{optionTitle}}</div>
          </q-card-section>
          <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
            <div class="row wrap">
              <div class="col-12">
                <q-select filled stack-label option-value="SId" option-label="SName" v-model="xuexiaoList" multiple  use-chips @input="choicecontent"
                 :options="schoolList2" label="校区" :dense="false" class="col-6 q-pr-lg q-pr-lg" emit-value  option-disable="inactive"
                map-options />
              </div>
            </div>
            <div class="row wrap" style="margin-top: 20px;">
              <div class="col-6">
                <q-field filled  class="col-6 q-pr-lg q-pb-lg">
                     <template v-slot:control>
                        <el-date-picker v-model="addMsg.Month" type="month" placeholder="选择月份" value-format="yyyy-MM"   > </el-date-picker>    
                    </template>
                </q-field>
              </div>
              <div class="col-6">
                
                  <q-radio v-model="addMsg.State" val="1" label="启用" />
                  <q-radio v-model="addMsg.State" val="2" label="停用" />
              </div>
            </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="persistent = false" />
            <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveCourseLoading"
              @click="saveCourse" />
          </q-card-actions>
        </q-card>
      </q-dialog>
      
    </div>
  </template>
  <script>
    import {
        getSchoolDropdown
    } from '../../../api/school/index'
    import{
        getFinanceMonthStatementPageList,
        setFinanceMonthStatementInfo,
    } from '../../../api/finance/index'
    import {
        EduDownLoad,
    } from '../../../api/common/common';
    const accounts = {
        Id:0,
        Month:'',
        State:'1',
        SchoolList:[]
    }
    export default {
      meta: {
        title: "财务轧账"
      },
      props: {},
      components: {
       
      },
      data() {
        return {
          loading: false,
          //列表数据参数
          msg: {
            PageIndex:1,
            PageSize:10,
            SchoolId:-1,
            State:0,
            Month: '',
        
          },
          pageCount: 0,
          tableData:[],
          total:0,
          StateList:[{Id:0,Name:'不限'},{Id:1,Name:'启用'},{Id:2,Name:'停用'}],
          schoolList:[],
          schoolList2:[],
          optionTitle:'新增轧账',
          persistent:false,
          addMsg:Object.assign({},accounts),
          saveCourseLoading:false,
          xuexiaoList:[],
        }
      },
      created() {
        let userinfo = this.getLocalStorage();
      },
      mounted() {
        this.getList()
        this.getBranchList()


      },
      methods: {
        resetSearch() {
            this.msg.PageIndex = 1;
            this.getList()
        },
        getList(){
          if(this.msg)
            this.loading = true;
            getFinanceMonthStatementPageList(this.msg).then(res => {
            if (res.Code == 1) {
              this.loading = false;
              this.tableData = res.Data.PageData
              this.total = res.Data.Count
            
            }
          })
        },
        unique(arr,Name){//数组去重
			    const res = new Map();
          return arr.filter(
            (list) => !res.has(list.text) && res.set(list.text, 1)
          );
		},
        handleCurrentChanges(val){
          this.msg.PageIndex= val;
          this.getList()
        },
     
       
        getBranchList(){//获取校区
          getSchoolDropdown({}).then(res => {
            this.schoolList = res.Data;
           
            var obj = {
                SName: '全部',
                SId: -1
            }
            this.schoolList.unshift(obj);
            this.schoolList2 = JSON.parse(JSON.stringify(this.schoolList)) ;
            this.schoolList2.forEach(x=>{
                x.inactive = false
            })
          }).catch(() => {

          })
        },
        choicecontent(){
            if(this.xuexiaoList.length>0){
                let ishow = false
                this.xuexiaoList.map(x=>{
                    if(x == '-1'){
                        ishow = true
                        return
                    }
                })
                if(ishow == true){
                    this.schoolList2.forEach(j=>{
                        if(j.SId!= '-1'){
                            j.inactive = true
                        }
                    })
                    this.xuexiaoList= [-1]
                }else{
                    this.schoolList2.forEach(x=>{
                        x.inactive = false
                    })
                }
                
            }else if(this.xuexiaoList.length == 0){
                this.schoolList2.forEach(x=>{
                    x.inactive = false
                })
            }
            
        },
        goedit(row){//修改
            this.addMsg.Id = row.Id;
            this.addMsg.Month = row.Month;
            this.addMsg.State = row.State.toString();
            this.xuexiaoList = []
            row.SchoolList.forEach(x=>{
                this.xuexiaoList.push(x.SId)
            })
            this.choicecontent()
            this.persistent = true
        },
        addzaaccounts(){//新增扎帐
            this.xuexiaoList = []
            this.addMsg = Object.assign({},accounts)
            this.choicecontent()
            this.persistent = true
        },
        saveCourse(){
            if(this.xuexiaoList && this.xuexiaoList.length==0){
                this.$q.notify({
                    type: 'negative',
                    position: "top",
                    message: `请选择校区`
                })
                return
            }
            if(this.addMsg.Month == '' ||  this.addMsg.Month == null){
                this.$q.notify({
                    type: 'negative',
                    position: "top",
                    message: `请选择扎帐的月份`
                })
                return
            }
            this.addMsg.SchoolList = []
            this.xuexiaoList.forEach(x=>{
                let obj = {SId:x}
                this.addMsg.SchoolList.push(obj)
            })
            this.saveCourseLoading = true
            setFinanceMonthStatementInfo(this.addMsg).then(res => {
                this.saveCourseLoading = false
                this.$q.notify({
                    icon: 'iconfont icon-chenggong',
                    color: 'accent',
                    timeout: 2000,
                    message: '提交成功',
                    position: 'top'
                })
                this.handleCurrentChanges(1)
                this.persistent = false
            }).catch(() => {

            })
            

        },
   
     
        tcexport(){//导出
            var msg = JSON.parse(JSON.stringify(this.msg));
            EduDownLoad("/SellCommission/GetSellCommissionStatisticsToExcel", msg, "提成统计.xls")
        },
        
      },
    }
  
  </script>
  <style lang="sass">
    @import url('~assets/css/table.sass')
  
  </style>
  