<template>
    <div class="execution">
        <basic-container>
            <avue-crud ref="crud"
                       :page="page"
                       :data="tableData"
                       :table-loading="tableLoading"
                       :option="tableOption"
                       @on-load="getList"
                       @search-change="searchChange"
                       @refresh-change="refreshChange"
                       @size-change="sizeChange"
                       @current-change="currentChange"
                       @row-update="handleUpdate"
                       @row-save="handleSave"
                       @row-del="rowDel">
<!--              <template slot="menuLeft">-->
<!--                <el-button-->
<!--                  type="primary"-->
<!--                  icon="el-icon-plus"-->
<!--                  size="small"-->
<!--                  @click.stop="addBudget()"-->
<!--                >新增-->
<!--                </el-button>-->
<!--              </template>-->
              <template
                slot="menu"
                slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  icon="el-icon-view"
                  @click="gotoBudget(scope.row,scope.index)">查看
                </el-button>
              </template>
            </avue-crud>
        </basic-container>

      <el-dialog title="新增"
                 :visible.sync="addDialog"
                 width="60%"
                 @close="handleClose"
                 center>
        <el-form
          :model="budgetForm"
          :rules="budgetRules"
          ref="budgetForm"
          label-width="138px"
          :inline="true"
          class="demo-ruleForm">
          <el-form-item label="预算月份：" prop="belongDate">
<!--            <el-input v-model="budgetForm.belongDate"></el-input>-->
            <avue-date type="month" v-model="budgetForm.belongDate" format="yyyy-MM" value-format="yyyy-MM"
                       placeholder="请选择日期">
            </avue-date>
          </el-form-item>
          <el-form-item label="药企名称：" prop="declareDept">
            <el-input v-model="budgetForm.declareDept"></el-input>
          </el-form-item>
          <el-form-item label="预算类型：" prop="budgetType">
            <el-input v-model="budgetForm.budgetType"></el-input>
          </el-form-item>
          <el-form-item label="预算值：" prop="budget">
            <el-input v-model="budgetForm.budget"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelBtn">取 消</el-button>
          <el-button type="primary" :loading="buttonLoading" @click="submitBtn('budgetForm')" >确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
    import {fetchViewList, getObj, addObj, putObj, delObj} from '@/api/wmdeptbudget'
    import {viewOption} from '@/const/crud/wmdeptbudget'

    export default {
        name: 'budgetview',
        data() {
            return {
                budgetForm:{},
                budgetRules:{},
                buttonLoading: false,
                addDialog: false,
                searchForm: {},
                tableData: [],
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                tableLoading: false,
                tableOption: viewOption
            }
        },
        computed: {

        },
        methods: {
            submitBtn() {

            },
            cancelBtn() {
                this.addDialog = false
            },
            handleClose() {
                this.addDialog = false
            },
            addBudget() {
                this.addDialog = true
            },
            gotoBudget(row) {
                console.log(row.deptId)
                this.$router.push({
                    path: "/admin/wmdeptbudget/index?deptId=" + row.deptId+ "&declareDept="+ row.declareDept
                        +"&belongDate="+ row.belongDate+"&type=view",
                });
            },
            getList(page, params) {
                this.tableLoading = true
                fetchViewList(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params, this.searchForm )).then(response => {
                    this.tableData = response.data.data.records
                    this.page.total = response.data.data.total
                    this.tableLoading = false
                }).catch(() => {
                    this.tableLoading=false
                })
            },
            rowDel: function (row, index) {
                this.$confirm('是否确认删除ID为' + row.id, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    return delObj(row.id)
                }).then(data => {
                    this.$message.success('删除成功')
                    this.getList(this.page)
                })
            },
            handleUpdate: function (row, index, done,loading) {
                putObj(row).then(data => {
                    this.$message.success('修改成功')
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading();
                });
            },
            handleSave: function (row, done,loading) {
                addObj(row).then(data => {
                    this.$message.success('添加成功')
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading();
                });
            },
            sizeChange(pageSize){
                this.page.pageSize = pageSize
            },
            currentChange(current){
                this.page.currentPage = current
            },
            searchChange(form, done) {
                this.searchForm = form
                this.page.currentPage = 1
                this.getList(this.page, form)
                done()
            },
            refreshChange() {
                this.getList(this.page)
            }
        }
    }
</script>
