<template>
  <div class='sfDetail'>
    <lb-table :column="column" :pagination="false" :key="key"
      :data="dataList">
    </lb-table>

    <div class="text-center">
      <el-button type="primary" @click="hanldeRecharge">重置</el-button>
      <el-button @click="$popupCacel">取消</el-button>
      <el-button type="primary" @click="handleSubmit" plain>保存</el-button>
    </div>
  </div>
</template>
<script>
  import store from '@/store/index.js'
  import { recharge, updateSfxx } from "@/api/sfxx.js";
  export default {
    props: {
      formData: {
        type: Object,
        default: {}
      }
    },
    data () {
      return {
        key: 0,
        dataList: [],
        column: [
          {
            prop: 'sfdw',
            label: '收费单位',
            render: (h, scope) => {
              return (
                <el-input value={scope.row[scope.column.property]} onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
              )
            }
          },
          {
            prop: 'sfry',
            label: '收费人员',
            render: (h, scope) => {
              return (
                <el-input value={scope.row[scope.column.property]} onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
              )
            }
          },
          {
            prop: 'sfkmmc',
            label: '收费科目名称',
            render: (h, scope) => {
              return (
                <el-input value={scope.row[scope.column.property]} onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
              )
            }
          },
          {
            prop: 'sjffr',
            label: '实际付费人',
            render: (h, scope) => {
              return (
                <el-input value={scope.row[scope.column.property]} onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
              )
            }
          },
          {
            prop: 'ssje',
            label: '实收金额',
            render: (h, scope) => {
              return (
                <el-input value={scope.row[scope.column.property]} onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
              )
            }
          },
          {
            prop: 'ysje',
            label: '应收金额',
            render: (h, scope) => {
              return (
                <el-input value={scope.row[scope.column.property]} onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
              )
            }
          }
        ]
      }
    },
    watch: {
      'formData.dataList': {
        handler (newValue, oldValue) {
          if (newValue.length != 0) {
            this.dataList = _.cloneDeep(newValue)
          }
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      hanldeRecharge () {
        recharge(this.formData.bsmBusiness).then(res => {
          if (res.code == 200) {
            this.dataList = res.result
            this.$message({
              message: '计费成功！',
              type: 'success'
            })
          }
        })
      },
      handleSubmit () {
        this.dataList.forEach(item => {
          item.bsmBusiness = this.formData.bsmBusiness
        })
        updateSfxx(this.dataList).then(res => {
          if (res.code == 200) {
            store.dispatch("user/getPouopData", res.result);
            this.$message({
              message: '修改成功！',
              type: 'success'
            })
            this.$popupCacel()
          }
        })
      }
    }
  }
</script>
<style scoped lang='scss'>
</style>