<template>
  <div class="pay-condition">
    <el-form
      :model="ruleForm"
      label-position="top"
      label-width="150px"
      ref="payForm"
      class="rule-form-orange"
    >
      <el-table
        :data="ruleForm.loanConditionsList"
        style="width: 100%">
        <el-table-column label=" 序号" type="index"></el-table-column>
        <el-table-column prop="content" label="条件">
          <template slot-scope="scope">
            <el-form-item label="" :prop="`loanConditionsList.${scope.$index}.content`" style="width: 100%; margin-bottom: 15px;"
              :rules="[{ required: true, message: '请输入条件', trigger: 'blur' }]"
            >
              <el-input type="textarea" autosize placeholder="请输入条件" v-model="ruleForm.loanConditionsList[scope.$index].content" style="width: 100%;" :disabled="isView" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="操作" width="200" v-if="!isView">
          <template slot-scope="scope">
            <el-button type="text" @click="ruleForm.loanConditionsList.push({content: ''})">增加</el-button>
            <el-button v-if="scope.$index !== 0" type="text" @click="deleteCondition(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        loanConditionsList: [{
          content: ''
        }]
      }
    }
  },
  props: ["info", "isView"],
  methods: {
    deleteCondition(index) {
      this.ruleForm.loanConditionsList.splice(index, 1)
    },
    confirm(type) {
      return new Promise((res, rej) => {
        if(type === 'submit') {
          this.$refs.payForm.validate(flag => {
            if(flag) {
              res({ loanConditionsList: this.ruleForm.loanConditionsList })
            } else {
              rej()
            }
          })
        }else {
          res({ loanConditionsList: this.ruleForm.loanConditionsList })
        }

      })
    }
  },
  watch: {
    'info.id': {
      handler: function(val) {
        if(val) {
          if(this.info.loanConditionsList && this.info.loanConditionsList.length > 0) {
            this.ruleForm.loanConditionsList = [...this.info.loanConditionsList]
          }
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.pay-condition {
  margin-bottom: 10px;
}

</style>
