<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom: 0">
      <el-form :inline="true">
        <el-form-item label="关键字:">
          <el-input v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item" />
        </el-form-item>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
          搜索
        </el-button>
        <el-button class="filter-item" type="green" @click="closeAccount">
          结转
        </el-button>
      <div class="top-right-btn">
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button size="mini" circle icon="el-icon-refresh" @click="getListInfo" />
        </el-tooltip>
      </div>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      v-loading="listLoading"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      :size="!webType ? 'mini':''"
      border
      default-expand-all>
      <el-table-column
        prop="accountCode"
        label="科目编码">
        <template slot-scope="{row}">
          <el-link type="primary" @click="$router.push({path:'/financial/transactionDetails/'+row.id ,query:{idAccount:row.id,accountName:row.accountName}})">{{row.accountCode}}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        prop="accountName"
        label="科目名称">
      </el-table-column>
        <el-table-column
          prop="balanceMoney"
          label="当前余额">
        </el-table-column>
    </el-table>
<!--    <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page" :limit.sync="listData.pageSize" @pagination="getListInfo" />-->

    <el-dialog title="结转" :close-on-click-modal="false" :visible.sync="closeAccountDialog" width="800px">
      <el-form label-width="70px" size="mini">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="账期开始时间" label-width="130px">
              <el-date-picker
                v-model="closeForm.beginTime"
                disabled
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="账期结束时间" label-width="130px">
              <el-date-picker
                style="width: 230px"
                v-model="closeForm.endTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAccountDialog = false">取 消</el-button>
        <el-button type="primary" @click="closeAccountSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getFinanceAccountListWithBalance, closeAccountDataRequest, closeAccountData } from '@/api/financial/accountBalance'
import { parseTime } from '@/utils/index.js'
export default {
  name: 'AccountBalance',
  props: {
    isChoose: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      webType: true,
      search: {
        keyWord: ''
      },
      form: {},
      options: [],

      companyList: [], // 分厂列表
      stockRoomList: [], // 库房列表

      listData: {
        total: 0,
        page: 1,
        pageSize: 10
      },

      listLoading: false,
      tableData: [],
      basePaperName: '',

      closeAccountDialog: false,
      closeForm: {
        beginTime: '',
        endTime: parseTime(new Date())
      }
    }
  },
  mounted() {
    this.getListInfo()
    if (this.$route.query.type === undefined) {
      this.webType = true
    } else {
      this.webType = false
    }
  },
  methods: {
    // 获取列表
    getListInfo() {
      const _that = this
      _that.listLoading = true
      var params = _that.search
      // var page = {
      //   pageIndex: _that.listData.page,
      //   pageSize: _that.listData.pageSize
      // }
      var data = {
        'params': JSON.stringify(params),
        // 'page': JSON.stringify(page)
      }
      // console.log(data);
      getFinanceAccountListWithBalance(data).then(response => {
        console.log(response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data
        // _that.listData.total = response.total
        // console.log(_that.tableData)
        _that.listLoading = false
      }).catch(err => {
        _that.$message.error(err)
        _that.listLoading = false
      })
    },
    // 刷新变革
    tableRefresh() {
      this.getListInfo()
    },
    // 搜索
    searchData() {
      this.listData.page = 1
      this.getListInfo()
    },

    // 获取账期的结束时间
    getCloseDate() {
      const _that = this
      var data = {
      }
      // console.log(data);
      closeAccountDataRequest(data).then(response => {
        // console.log(response)
        _that.closeForm.beginTime = parseTime(response.data)

      }).catch(err => {
        _that.$message.error(err)
      })
    },
    closeAccount() {
      var _that = this
      _that.closeAccountDialog = true
      _that.closeForm.endTime = parseTime(new Date())
      _that.getCloseDate()
    },
    closeAccountSure(){
      const _that = this
      var data = {
        'endTime': _that.closeForm.endTime
      }
      // console.log(data);
      // return
      closeAccountData(data).then(response => {
        // console.log(response)
        if (response.httpCode == 200) {
          _that.closeAccountDialog = false
          _that.$message.success('结转成功')
          _that.tableRefresh()
        } else {
          _that.$message.error(response.msg)
        }

      }).catch(err => {
        _that.$message.error(err)
      })
    },

    // 弹窗内选择操作
    chooseThis(row) {
      // console.log('点击选择');
      this.$emit('choosePaper', row)
    },
    ERPChoose(row) {
      // this.$message.error(row)
      dyERP.sendJson(JSON.stringify(row))
    }
  }
}
</script>

<style lang="scss" scoped>
  .filter-container {
    margin-bottom: 15px;
  }
</style>
