<template>
    <div class="app-container">
        <div class="filter-container">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item >
                    <el-button icon="el-icon-plus"  size="small"  type="primary" @click="dialogEditVisible=true;eidtModel=0;">添加</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="s1Data" border>
            <el-table-column
                label="杂费名称"
                prop="Name"
                />
            <el-table-column
                label="费用类型"
                prop="StrFeeType"
                />
            <el-table-column
                label="计算方式"
                prop="StrCalculationMethod"
                />
            <el-table-column
                label="添加时间"
                prop="CreateTime"
                />
            <el-table-column
                label="添加人"
                prop="CreateUserName"
                />
            <el-table-column
                label="更新时间"
                prop="UpdateTime"
                />
            <el-table-column
                label="更新人"
                prop="UpdateUserName"
                />
            <el-table-column
                label="说明"
                prop="Remark"
                />

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="dialogEditVisible=true;eidtModel=1;row=scope.row">
                        编辑<i class="el-icon-edit"></i>
                    </el-button>
                </template>
            </el-table-column>
            </el-table>

      <el-dialog :title="(eidtModel==1?'编辑':'添加') +'费用'" :visible.sync="dialogEditVisible">
        <el-form :model="row" label-width="120px">
          <el-form-item label="杂费名称">
            <el-input v-model="row.Name" autocomplete="off" />
          </el-form-item>
          <el-form-item  label="说明">
            <el-input v-model="row.Remark" autocomplete="off" />
          </el-form-item>
          <el-form-item  label="费用类型">
            <el-select v-model="row.FeeType" placeholder="请选择" filterable>
                <el-option
                v-for="item in FeeTypes"
                :key="item.Name"
                :label="item.Name"
                :value="item.Value"
                />
            </el-select>
          </el-form-item>
          <el-form-item label="计算方式">
                <el-select v-model="row.CalculationMethod" placeholder="请选择" filterable>
                <el-option
                v-for="item in CalculationMethods"
                :key="item.Name"
                :label="item.Name"
                :value="item.Value"
                />
            </el-select>
          </el-form-item>
          <el-input v-model="row.Id"  type="hidden"/>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogEditVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>

        </div>
    </div>
</template>
<style scoped>

</style>
<script>
import { _queryAll,_add,_edit } from "@/api/financeIncidentalType";
import { _getFinanceIncidentalType,_getCalculationMethod } from "@/api/baseInfo";
// import { de } from 'date-fns/locale';
export default {
    name: 'FinanceIncidentalType',
    data(){
        return {
            dialogEditVisible : false,
            eidtModel :0,
            s1Data:[],
            row:{},
            FeeTypes:[],
            CalculationMethods:[]
        }
    },
    methods:{
        save()
        {

            if(!this.row.Id|| this.row.Id==0)
            {
                _add(this.row)
                .then(response=>{
                    this.getData();
                    this.dialogEditVisible=false;
                })
                .catch(error=>{

                });

            }
            else{
                _edit(this.row)
                .then(response=>{
                    this.getData();
                    this.dialogEditVisible=false;
                })
                .catch(ereror=>{

                });
            }
        },
        getData(){
            _queryAll().then(response=>{
                this.s1Data=response;
                var that = this;
                for (var i = 0; i < response.length; i++) {
                    for (var j = 0; j < that.FeeTypes.length; j++) {
                        if (that.FeeTypes[j].Value == response[i].FeeType)
                         {
                             response[i].StrFeeType = that.FeeTypes[j].Name
                         }
                }
                }

                for (var i = 0; i < response.length; i++) {
                    for (var j = 0; j < that.CalculationMethods.length; j++) {
                        if (that.CalculationMethods[j].Value == response[i].CalculationMethod)
                         {
                             response[i].StrCalculationMethod = that.CalculationMethods[j].Name
                         }
                    }
                }


            });
        }
    },
    created(){
        _getFinanceIncidentalType().then(response=>{
            this.FeeTypes = response;
            _getCalculationMethod().then(r=>{
                this.CalculationMethods = r;
                this.getData();
            })
        })

    }
}
</script>
