<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>支出记录
    </h2>
    <div class="m-core">
      <el-upload v-permission="'import/downloadTemplate'"
                 style="display: inline-block;"
                 action="/api-web/import/financialExpenditure"
                 :show-file-list="false"
                 :before-upload="beforeUpload"
                 accept=".xlsx,.xls"
                 :headers="headers"
                 :on-error="handleError"
                 :on-success="handleSuccess">
        <el-button class="btn-primary">导入</el-button>
      </el-upload>
      <el-button @click="downloadFile"
                 v-permission="'import/downloadTemplate'"
                 class="btn-primary">模版文件下载</el-button>
      <!-- 搜索类型 -->
      <el-form :inline="true"
               class="searchForm"
               v-model.trim="searchForm">
        <el-form-item>
          <el-input v-model.trim="searchForm.search"
                    placeholder="批次号、申请人等"
                    type="text"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model.trim="searchForm.organId"
                     clearable
                     filterable
                     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-select clearable filterable placeholder="请选择支出类型" v-model="searchForm.saleType">
            <el-option label="1" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select clearable filterable placeholder="请选择支出类别" v-model="searchForm.saleType">
            <el-option label="1" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select clearable filterable placeholder="请选择收款方式" v-model="searchForm.paymentChannel">
            <el-option v-for="item in paymentChannelStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </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>
      <!-- 列表 -->
      <el-row>
        <el-col :span="24">
          <el-button type="primary"
                     v-permission="'financialExpenditure/batchDel/901'"
                     size="medium"
                     icon="el-icon-delete"
                     style="background-color: #14928a; border: 1px solid #14928a; margin-bottom: 15px;"
                     @click="onBatchDel">批量删除</el-button>
        </el-col>
      </el-row>
      <div class="tableWrap">
        <el-table :data='tableList'
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column type="selection"
                           width="50"></el-table-column>
          <el-table-column align='center'
                           prop="id"
                           label="批次号"></el-table-column>
          <el-table-column align='center'
                           prop="financialProcessNo"
                           label="流程编号"></el-table-column>
          <el-table-column align='center'
                           prop="dingtalkProcessNo"
                           label="钉钉流程编号"></el-table-column>
          <el-table-column align='center'
                           prop="organName"
                           label="费用归属分部"></el-table-column>
          <el-table-column align='center'
                           prop="cooperationName"
                           label="费用归属学校"></el-table-column>
          <el-table-column align='center'
                           prop="applyUser"
                           label="申请人"></el-table-column>
          <!-- <el-table-column align='center' prop="itemDetail" label="费用项目"></el-table-column> -->
          <el-table-column align='center'
                           prop="amount"
                           label="付款金额">
            <template slot-scope="scope">
              <div>
                {{scope.row.amount|moneyFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="paymentTime"
                           label="付款时间">
            <template slot-scope="scope">
              <div>
                {{scope.row.paymentTime|dayjsFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="cause"
                           label="事由">
            <template slot-scope="scope">
              <div>
                <el-tooltip class="item"
                            effect="dark"
                            :content="scope.row.cause"
                            placement="top">
                  <div class="noWrap">{{scope.row.cause}}</div>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="费用类型">
            <template slot-scope="scope">{{ scope.row.type | feeType }}</template>
          </el-table-column>
          <el-table-column align='center'
                           label="费用项目">
            <template slot-scope="scope">{{ scope.row.feeProject | feeProject }}</template>
          </el-table-column>
          <el-table-column align='center'
                           prop="itemDetail"
                           label="备注"></el-table-column>
          <el-table-column align='center'
                           width='120px'
                           fixed="right"
                           label="操作">
            <template slot-scope="scope">
              <div>
                <el-popconfirm title="确定删除该条数据吗？"
                               @onConfirm="() => removeRecord(scope.row.id)"
                               v-permission="'financialExpenditure/batchDel/902'">
                  <el-button type="text"
                             slot="reference">删除</el-button>
                </el-popconfirm>
                <el-button type="text"
                           @click="lookDetail(scope.row)">详情</el-button>
              </div>

            </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>
      <recorddetail :show="show"
                    @closeReset='closeReset'
                    @getList='getList'
                    :item='activeRow' />
    </div>
    <!-- <el-dialog
      title="修改支出记录"
      :visible.sync="visible"
    >
      <el-form :model="updateForm" :rules="updateRules" label-width="100px" ref="updateForm">
        <el-form-item label="批次号" prop="batchNo">
          <el-input v-model="ruleForm.batchNo"></el-input>
        </el-form-item>
        <el-form-item label="流程编号" prop="financialProcessNo">
          <el-input v-model="ruleForm.batchNo"></el-input>
        </el-form-item>
        <el-form-item label="钉钉流程编号" prop="dingtalkProcessNo">
          <el-input v-model="ruleForm.batchNo"></el-input>
        </el-form-item>
        <el-form-item label="费用归属分部" prop="organId">
          <el-input v-model="ruleForm.batchNo"></el-input>
        </el-form-item>
        <el-form-item label="费用归属学校" prop="cooperationOrganId">
          <el-input v-model="ruleForm.batchNo"></el-input>
        </el-form-item>
        <el-form-item label="费用归属学校" prop="cooperationOrganId">
          <el-input v-model="ruleForm.batchNo"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="visible = false">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { Export } from '@/utils/downLoadFile'
import { getFinancialExpenditure, applyRefundAudit, removeFinancialExpenditure, updateFinancialExpenditure } from '@/api/orderManager'
import { getEmployeeOrgan, getCooperation } from '@/api/buildTeam'
import { getToken } from "@/utils/auth";
import { paymentChannelStatus } from '@/utils/searchArray'
import recorddetail from '@/views/businessManager/orderManager/payRecordConponents/payRecordDetail'
import load from '@/utils/loading'
import dayjs from 'dayjs'
export default {
  components: { pagination, recorddetail },
  name: 'backMoney',
  data () {
    return {
      show: false,
      detail: null,
      paymentChannelStatus: paymentChannelStatus,
      orderDate: null,
      searchForm: {
        startTime: null,
        endTime: null,
        organId: null,
        search: '',
        dingtalkProcessNo: '',
        financialProcessNo: '',
        cooperationOrganId: null,
      },
      headers: {
        Authorization: getToken()
      },
      tableList: [],
      organList: [],
      cooperations: [],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      passed: [], // 传递的参数
      activeRow: null,
    }
  },
  mounted () {
    getEmployeeOrgan().then(res => {
      if (res.code == 200) {
        this.organList = res.data;
      }
    })
    getCooperation({ 'rows': 1000, })
      .then(res => {
        if (res.code == 200) {
          this.cooperations = res.data.rows;
        }
      })
    this.getList()
    var now = new Date();
    var startDate = dayjs().format('YYYY-MM-DD');
    var endDate = dayjs().format('YYYY-MM-DD');
    this.orderDate = [];
    this.orderDate.push(startDate)
    this.orderDate.push(endDate)
    this.searchOrderDate(this.orderDate)
  },
  methods: {
    editRecord (detail) {
      this.show = true
      this.detail = detail
    },
    removeRecord (id) {
      removeFinancialExpenditure({
        ids: id
      })
        .then(() => this.getList())
    },
    beforeUpload (file) {
      load.startLoading()
    },
    handleSuccess (response, file, fileList) {
      load.endLoading()
      console.log(response, file, fileList)
      if (response.code == 200) {
        this.$message.success('导入成功')
        this.getList()
      } else {
        this.$message.error(response.msg)
      }
    },
    handleError (err, file, fileList) {
      load.endLoading()
      console.log(err, file, fileList)
    },
    downloadFile () {
      Export(this, {
        url: '/api-web/import/downloadTemplate',
        fileName: '财务支出导入模板.xlsx',
        params: {
          templateType: 'FINANCIAL_EXPENDITURE'
        }
      })
    },
    search () {
      this.pageInfo.page = 1;
      this.getList()
    },
    handleSelectionChange (arr) {
      this.passed = [];
      for (let i in arr) {
        // let obj = {};
        // obj.id = arr[i].id;
        // obj.name = arr[i].name;
        this.passed.push(arr[i].id)
      }
    },
    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
      getFinancialExpenditure(params).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]
        this.searchForm.endTime = value[1]
      } else {
        this.searchForm.startTime = null
        this.searchForm.endTime = null
      }
    },
    onReSet () {
      this.orderDate = []
      this.searchForm = {
        startTime: null,
        endTime: null
      }
      this.pageInfo.page = 1
      this.getList()
    },
    onBatchDel () {
      // 批量删除
      const passed = this.passed
      if (passed.length <= 0) {
        this.$message.error('请至少选择一条数据')
        return
      }
      this.$confirm("是否删除选择的支出记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return removeFinancialExpenditure({
          ids: this.passed.join(',')
        })
      })
        .then(() => this.getList())
        .catch(() => { });
    },
    lookDetail (row) {
      this.activeRow = row
      this.show = true
      console.log(111)
    },
    closeReset () {
      this.show = false
    },
  }
}
</script>
<style lang="scss" scoped>
.newBand {
  display: inline-block;
}
.noWrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
