<template>
  <div>

    <div class="tableDate">
      <div class="button" style="width:6%;float:right;">
        <P><el-button class="el-icon-plus" @click.prevent="addRow()"></el-button></P>
        <p><el-button class="el-icon-minus" @click.prevent="delData()"></el-button></p>
      </div>
      <div class="table">
        <el-table :data="tableData"
                  ref="table"
                  tooltip-effect="dark"
                  border
                  stripe
                  style="width: 93%"
                  @selection-change='selectRow'>
          <el-table-column type="selection" width="45" align="center"></el-table-column>
          <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
          <el-table-column label="收费项目" align="center">
            <template slot-scope="scope">
              <el-input  v-model="scope.row.itemkind"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="单元数量" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.unitcount"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="单价" align="center">
            <template slot-scope="scope">
              <el-input  v-model="scope.row.perfee"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="小计" align="center">
            <template slot-scope="scope">

              {{ (scope.row.pertotal = scope.row.unitcount *scope.row.perfee) | keepTwoNum}}
            </template>
          </el-table-column>

        </el-table>
      </div>
    </div>
    <div style="padding-top:20px">
    <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
      <el-row :gutter="24">
        
            <el-row>
              <el-col :xs="24" :md="11" font="left">
                <el-form-item label="收费单号" prop="feecode">
                  <el-input placeholder="请输入收费单号" v-model="formData.feecode"
                            clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
           
              <el-col :xs="24" :md="11" font="left">
                <el-form-item label="费用性质" prop="feecharacter">
                  <el-select filterable v-model="formData.feecharacter"
                             placeholder="请输入费用性质"
                             clearable
                             :style="{width: '100%'}">
                    <el-option v-for="(item, index) in feeOptions"
                               :key="index"
                               :label="item.name"
                               :value="item.value"
                               :disabled="item.disabled">

                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>

            <el-row>
              <el-col :xs="24" :md="11" font="left">
                <el-form-item label="总计" prop="totalfee">
                  <el-input placeholder="请输入总计"
                            v-model="formData.totalfee"
                            clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
           
              <el-col :xs="24" :md="11" font="left">
                <el-form-item label="扣减额" prop="deductions">
                  <el-input placeholder="请输入扣减额"
                            v-model="formData.deductions"
                            clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :md="11" font="left">
                <el-form-item label="外汇类型" prop="exchangetype">
                  <el-select v-model="formData.exchangetype"
                             placeholder="请选择外汇类型"
                             filterable
                             allow-create
                             :style="{width: '100%'}">
                    <el-option v-for="(item, index) in exchangetypeOptions"
                               :key="index"
                               :label="item.label"
                               :value="item.value"
                               :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>

              </el-col>
           
              <el-col :xs="24" :md="11" font="left">

                <el-form-item label="外币汇率" prop="exchangerate">
                  <el-input placeholder="请输入外币汇率"
                            v-model="formData.exchangerate"
                            clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :md="11" font="left">
                <el-form-item label="实收人名币" prop="paidrmb">
                  <el-input placeholder="请输入金额"
                            v-model="formData.paidrmb"
                            clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
           
              <el-col :xs="24" :md="11" font="left">
                <el-form-item label="实收外币" prop="paidwb">
                  <el-input placeholder="请输入金额"
                            v-model="formData.paidwb"
                            clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :md="22" font="left">
                <el-form-item label="备注" prop="remark">
                 
                  <el-input type="textarea" :rows="2" v-model="formData.remark"
                            clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col font="right">
                <el-button style="float: right;" type="primary" @click="submitForm">保存</el-button>
              </el-col>
            </el-row>
         
      

      </el-row>

    </el-form>
</div>

  </div>
</template>
<script>
  import { getChargeitemList,getBillList,getBill,createChargeitem,createBill,updateChargeitem} from "@/api/finanacial";

  import { getDictList } from "@/api/dict";
  import { genTree } from "@/utils";
import checkPermission from '@/utils/permission'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
 
  inheritAttrs: false,
  components: {  Treeselect },
  props: ["certapp"],
  data() {
      return {
         tableData: [],
        selectlistRow: [],
        rowNum:1,
        formData: {
          number:this.certapp,
          totalfee: null,
          deductions:null,
          exchangetype: "人名币-RMB-￥",
          exchangerate: null,
          paidrmb: null,
          paidwb: null,
          remark: null,
          feecode:null
        },
        
         feeOptions:[],
         listLoading: true,
        dialogVisible:false,
        dialogType: 'create',
        exchangetypeOptions: [
        {
          label: "人民币-RMB-￥",
          value: "人民币-RMB-￥",
        },
        {
          label: "欧元-EURO-€",
          value: "欧元-EURO-€",
        },
        {
          label: "美元-USD—$",
          value: "美元-USD—$",
        },
      ],
        dgVisiable: false,
       
      };
    },
   computed: {},
  watch: {

  },
    created() {
      
      this.getDiclist();
      
      
   if(this.certapp!=null){
             this.getChareList();

    }
      
  },
  mounted() {},
    methods: {
     checkPermission,
     // 获取表格选中时的数据
      selectRow (val) {
        this.selectlistRow = val
        console.log(this.selectlistRow)
      },
      // 增加行
      addRow () {
       	  var list = {
          rowNum:this.rowNum,
          itemkind:'',
          unitcount: '',
          perfee: '',
          pertotal:''
   		 };
        this.tableData.unshift(list)
        this.rowNum += 1;
      },
      // 删除方法
      // 删除选中行
       delData () {
        for (let i = 0; i < this.selectlistRow.length; i++) {
          let val = this.selectlistRow
          val.forEach((val, index) => {
            this.tableData.forEach((v, i) => {
              if (val.rowNum === v.rowNum) {
                // i 为选中的索引
                this.tableData.splice(i, 1)
              }
            })
          })
        }
        // 删除完数据之后清除勾选框
        this.$refs.table.clearSelection()
      }
       ,

      getChareList() {
        
        getBillList({ number:this.certapp }).then((response) => {
          this.listLoading = true;
        
          if (response.data.length) {
            this.formData = response.data[0];
            
        getChargeitemList({ bills:response.data[0].feecode  }).then((response) => {
          
          if (response.data) {
            
            this.tableData = response.data;
            
         
          }
      
        });
          }
        this.listLoading = false;
        });
       
      
      },
       
      
  
    //费用性质
      getDiclist() {
        getDictList({ type__code: "cost_nature" }).then(response => {
          this.feeOptions = genTree(response.data);
        });
      }
      ,
   
      submitForm() {
        let val = this.selectlistRow
        this.$refs["elForm"].validate(valid => {
          if (!valid) return;
          // TODO 提交表单
          
          createBill(this.formData).then(response => {
           
            this.$message({
            type: 'success',
              message: '成功!'
          
            })
            
            for (var i=0; i < val.length; i++) {
             this.chargeIetm = val[i]
              this.chargeIetm.bills = this.formData.feecode;
               createChargeitem(this.chargeIetm).then(response => {
            this.$message({
            type: 'success',
              message: '成功!'
          
            })
            
                  })
            }

          });
          
        });
      },
    }
};

</script>

