<template>
  <div class="revenue-expenditure-plan">
    <cy-comm-table
      ref="commTable"
      style="margin-top: 20px"
      :columns="columns"
      :data="tableData"
      :count="0"
      row-key="index"
    />
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" label-position="top" class="rule-form-orange">
      <el-form-item label="预期IRR" prop="planIrrStr" style="width: 100%">
        <el-input v-model="ruleForm.planIrrStr" disabled placeholder="请输入预期IRR" clearable>
          <template slot="append">%</template>
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { replaceNull } from '@/utils'
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      tableData: [],
      columns: [
        {
          label: '序号',
          index: true
        },
        {
          label: '收支日期',
          prop: 'incomeExpenditureDate',
          render: (h, row) => {
            return (
              <el-date-picker
                v-model={row.incomeExpenditureDate}
                disabled={this.disabled}
                type='date'
                placeholder='选择日期'
                value-format='yyyy-MM-dd'
                onChange={() => this.$emit('getTrrData')}
              >
              </el-date-picker>
            )
          }
        },
        {
          label: '类型',
          showTooltip: true,
          render: (h, row) => {
            const optionDom = this.constant.incormeExpenditureType.map(item => (<el-option
              key={item.code}
              label={item.name}
              value={item.code}
            ></el-option>))
            return (
              <el-select disabled={this.disabled} v-model={row.incomeExpenditureType} placeholder='请选择' onChange={() => this.$emit('getTrrData')}>
                {optionDom}
              </el-select>
            )
          }
        },
        {
          label: '收款',
          prop: 'userName',
          render: (h, row) => {
            return <cy-amount-input disabled={this.disabled} v-model={row.receivables} placeholder='请输入收款' onBlur={() => this.$emit('getTrrData')}/>
          }
        },
        {
          label: '放款',
          prop: 'userName',
          render: (h, row) => {
            return <cy-amount-input disabled={this.disabled} v-model={row.loan} placeholder='请输入收款' onBlur={() => this.$emit('getTrrData')}/>
          }
        },
        {
          label: '最终现金流',
          prop: 'userTypeName',
          render: (h, row) => {
            return <el-input disabled={this.disabled} v-model={row.finalCashFlow} placeholder='请输入最终现金流' onBlur={() => this.$emit('getTrrData')}/>
          }
        },
        {
          label: '收款主体',
          showTooltip: true,
          render: (h, row) => {
            const optionDom = this.constant.receivingSubjectList.map(item => (<el-option
              key={item.code}
              label={item.name}
              value={item.code}
            ></el-option>))
            return (
              <el-select disabled={this.disabled} v-model={row.receivingSubject} placeholder='请选择' onChange={() => this.$emit('getTrrData')}>
                {optionDom}
              </el-select>
            )
          }
        },

        {
          label: '操作',
          show: !this.disabled,
          render: (h, row, index) => {
            const btnList = [
              {
                msg: '新增',
                category: 'add'
              },
              {
                msg: '删除',
                category: 'delete'
              }
            ]
            const options = btnList.map(item => {
              return (
                <span class='table-icon-box' style='font-size: 14px;' onClick={() => { this.handlerOperate(item.category, row, index) }}>
                  { item.msg }
                </span>
              )
            })
            return <div>{ options }</div>
          },
          width: 130
        }
      ],
      ruleForm: {
        planIrrStr: ''
      },
      rules: {}
    }
  },
  computed: {
    ...mapGetters(['constant'])
  },
  watch: {
    detailsInfo: {
      handler(newV) {
        if (newV && Object.keys(newV).length) {
          const list = JSON.parse(JSON.stringify(newV.incomeExpenditurePlanList))
          replaceNull(list)
          this.tableData = JSON.parse(JSON.stringify(list)) 
          this.handlerTable()
          this.ruleForm.planIrrStr = newV.planIrrStr
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['incormeExpenditureType'])
  },
  methods: {
    handlerOperate(type, row, index) {
      console.log(type, index)
      if (type === 'add') {
        this.tableData.push({
          incomeExpenditureDate: '',
          incomeExpenditureType: '',
          receivables: '',
          loan: '',
          finalCashFlow: '',
          receivingSubject: '',
          currency: ''
        })
        this.handlerTable()
      } else if (type === 'delete') {
        this.tableData.splice(index, 1)
      }
    },
    handlerTable() {
      this.tableData = this.tableData.map((item, index) => {
        item.index = index
        return item
      })
    },
    getParams() {
      return this.tableData.map(item => {
        delete item.index
        return item
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.revenue-expenditure-plan {

}
</style>
