<template>
  <div class="m-container">
    <el-page-header @back="goBack"
                    :content="organName">
    </el-page-header>
    <div class="m-core">
      <!-- <el-button @click="downloadFile"
                 v-permission="'operatingReport/export'"
                 class="btn-primary">导出</el-button> -->
      <!-- 搜索类型 -->
      <el-form :inline="true"
               class="searchForm"
               v-model.trim="searchForm">
        <!-- <el-form-item prop='organId'>
          <el-select class='multiple'
                     v-model.trim="searchForm.organIdList"
                     clearable
                     filterable
                     multiple
                     collapse-tags
                     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-select clearable
                     filterable
                     placeholder="请选择所属学校"
                     v-model="searchForm.cooperationOrganId">
            <el-option v-for="(item,index) in cooperations"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="searchForm.month"
                          type="month"
                          placeholder="选择月份">
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item>
          <el-date-picker style="width:410px;"
                          v-model.trim="orderDate"
                          type="daterange"
                          value-format="yyyy-MM-dd"
                          @change="searchOrderDate"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :picker-options="{ firstDayOfWeek: 1 }">
          </el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-button @click="search"
                     type="danger">搜索</el-button>
          <el-button @click="onReSet"
                     type="primary">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <div class="tableWrap">
        <el-table :data='tableList'
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <!-- <el-table-column align='center'
                           width="150"
                           prop="organName"
                           label="分部"></el-table-column> -->
          <el-table-column align='center'
                           prop="schoolName"
                           label="学校">
          </el-table-column>
          <el-table-column align='center'
                           prop="sellAmount"
                           width="150px"
                           label="销售收入(元)">
            <template slot-scope="scope">
              <div>
                {{scope.row.sellAmount | moneyFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="serviceAmount"
                           width="150px"
                           label="服务收入(元)">
            <template slot-scope="scope">
              <div>
                {{scope.row.serviceAmount | moneyFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="otherIncome"
                           width="150px"
                           label="其它收入(元)">
            <template slot-scope="scope">
              <div>
                {{scope.row.otherIncome | moneyFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="refundAmount"
                           width="150px"
                           label="业务退费(元)">
            <template slot-scope="scope">
              <div>
                {{scope.row.refundAmount | moneyFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="incomeTotal"
                           width="150px"
                           label="收入合计(元)">
            <template slot-scope="scope">
              <div class="point">
                {{scope.row.incomeTotal | moneyFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="sellCost"
                           width="150px"
                           label="销售成本(元)">
            <template slot-scope="scope">
              <div>
                {{scope.row.sellCost | moneyFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="expensesAmount"
                           width="150px"
                           label="固定支出(元)">
            <template slot-scope="scope">
              <div>
                {{scope.row.expensesAmount | moneyFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="variableCost"
                           width="150px"
                           label="变动支出(元)">
            <template slot-scope="scope">
              <div>
                {{scope.row.variableCost | moneyFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="distributionAmount"
                           width="150px"
                           label="分摊费用(元)">
            <template slot-scope="scope">
              <div>
                {{scope.row.distributionAmount | moneyFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="costAmount"
                           width="150px"
                           label="成本费用合计(元)">
            <template slot-scope="scope">
              <div class="point">
                {{scope.row.costAmount | moneyFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="profit"
                           label="利润(元)">
            <template slot-scope="scope">
              <div class="point">
                {{scope.row.profit | moneyFormat}}
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column label='操作'>
            <template slot-scope="scope">
              <el-button type="text"
                         @click="lookDetail(scope.row)">查看</el-button>
            </template>

          </el-table-column> -->
        </el-table>
        <pagination :total="pageInfo.total"
                    :page.sync="pageInfo.page"
                    :limit.sync="pageInfo.limit"
                    :page-sizes="pageInfo.page_size"
                    @pagination="getList" />
      </div>
    </div>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { Export } from '@/utils/downLoadFile'
import { getOperatingReport, applyRefundAudit } from '@/api/orderManager'
import { getEmployeeOrgan, getCooperation } from '@/api/buildTeam'
import store from '@/store'
import dayjs from 'dayjs'
export default {
  components: { pagination },
  name: 'backMoney',
  data () {
    return {
      orderDate: null,
      searchForm: {
        startTime: null,
        endTime: null,
        organId: null,
        month: '',
        cooperationOrganId: '',
        organIdList: []
      },
      tableList: [],
      organList: [],
      cooperations: [],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      organId: null,
      organName: null
    }
  },
  mounted () {
    this.init()
  },
  activated () {
    this.init()
  },
  methods: {
    init () {
      this.organId = this.$route.query.organId
      this.organName = this.$route.query.organName
      getEmployeeOrgan().then(res => {
        if (res.code == 200) {
          this.organList = res.data;
        }
      })
      getCooperation({ 'rows': 1000, organId: this.organId })
        .then(res => {
          if (res.code == 200) {
            this.cooperations = res.data.rows;
            let flag = this.cooperations.some(item => {
              return item.id == this.searchForm.cooperationOrganId
            })
            if (!flag) {
              this.searchForm.cooperationOrganId = null
            }
            const form = { ...this.searchForm }
            form.month = dayjs().format('YYYY-MM')
            this.searchForm = form
            this.getList()
            var now = new Date();
            var startDate = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())).toISOString().slice(0, 10);
            var endDate = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())).toISOString().slice(0, 10);
            this.orderDate = [];
            this.orderDate.push(startDate)
            this.orderDate.push(endDate)
          }
        })

    },
    search () {
      this.pageInfo.page = 1;
      this.getList()
    },
    // downloadFile () {
    //   let params = this.searchForm
    //   Export(this, {
    //     url: '/api-web/operatingReport/export',
    //     params: {
    //       ...params,
    //       month: (params.month ? dayjs(params.month).format('YYYY-MM-DD') : ''),
    //     }
    //   }, '是否确认导出报表？')
    // },
    onTeachingSubmit (formName, status) { // 添加数据
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.status = status
          applyRefundAudit(this.form).then(res => {
            if (res.code == 200) {
              this.$message.success('操作成功')
              this.backStatus = false
              this.getList()
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          return false;
        }
      })
    },
    getList () {
      let params = this.searchForm
      params.rows = this.pageInfo.limit
      params.page = this.pageInfo.page
      getOperatingReport({
        ...params,
        month: (params.month ? dayjs(params.month).format('YYYY-MM-DD') : ''),
        organIdList: this.organId,
        type: 'school'
      }).then(res => {
        let result = res.data
        if (res.code == 200) {
          this.tableList = result.rows
          this.pageInfo.total = result.total
        }
      })
    },
    searchOrderDate (value) {
      if (value) {
        this.searchForm.startTime = value[0] + ' 00:00:00'
        this.searchForm.endTime = value[1] + ' 23:59:59'
      } else {
        this.searchForm.startTime = null
        this.searchForm.endTime = null
      }
    },
    onReSet () {
      this.orderDate = null
      this.searchForm = {
        startTime: null,
        endTime: null,
        month: '',
        cooperationOrganId: '',
        organIdList: []
      }
      this.getList()
    },
    goBack () {
      // searchForm: this.searchForm,
      // pageInfo: this.pageInfo
      this.$router.push({ path: '/orderList/businessStatement', query: { ...this.$route.query } })
    }
  }
}
</script>
<style lang="scss" scoped>
.point {
  font-weight: bold;
  color: #13817a;
}
</style>
