<template>
  <div class="pay">
    <template v-for="(item, index) in datalist">
      <div class="pay-box" :key="index">
        <i class="el-icon-error" @click="handleRemove(index)" v-if="index && canEditable(item)"></i>
        <pay-item :data="item" :index="index" :disabled="!canEditable(item)"></pay-item>
      </div>
    </template>
    <el-button
      icon="el-icon-plus"
      @click="handleAdd"
      style="margin-bottom:20px"
      size="medium"
      v-if="!disabled"
    >{{ $t('pages.affairsHall.pay.Newpayment') }}</el-button>
  </div>
</template>

<script>
import PayItem from './payItem'

export default {
  props: {
    datalist: { type: Array, default: () => [] },
    disabled: { type: Boolean, default: false }
  },
  components: { PayItem },
  methods: {
    canEditable(data) {
      if (this.disabled) {
        return false
      }
      return !['1', '2'].includes(data.status)
    },
    // 添加
    handleAdd() {
      this.datalist.push({ pay_date: '', type: '', money: '', url: '' })
    },
    // 删除
    handleRemove(index) {
      this.datalist.splice(index, 1)
    }
  },
  beforeMount() {
    // 默认创建一条
    !this.datalist.length && this.handleAdd()
  }
}
</script>

<style lang="scss" scoped>
.pay-box {
  position: relative;
  border: 1px solid #b80037;
  padding: 20px;
  .el-icon-error {
    position: absolute;
    right: -14px;
    top: -14px;
    font-size: 28px;
    color: #b80037;
    cursor: pointer;
  }
}
.pay-box {
  margin-bottom: 20px;
}
</style>
