<template>
  <div class="app-container">
    <el-card class="dynamic-form">
      <el-form 
        ref="formRef" 
        :model="form" 
        :rules="rules" 
        label-width="80px"
        label-position="top"
      >
        <div class="form-header">
          <div class="header-item">姓名</div>
          <div class="header-item">手机号</div>
          <div class="header-item">操作</div>
        </div>
        <div class="form-items">
          <div 
            v-for="(item, index) in form.items" 
            :key="index" 
            class="form-row"
          >
            <div class="form-cell">
              <el-form-item 
                :prop="'items.' + index + '.perName'" 
                :rules="rules.perName"
              >
                <el-input v-model="item.perName" placeholder="请输入姓名"></el-input>
              </el-form-item>
            </div>
            <div class="form-cell">
              <el-form-item 
                :prop="'items.' + index + '.perPhome'" 
                :rules="rules.perPhome"
              >
                <el-input 
                  v-model="item.perPhome" 
                  placeholder="请输入手机号"
                ></el-input>
              </el-form-item>
            </div>
            <div class="form-cell action">
              <el-button 
                type="text" 
                icon="el-icon-delete" 
                @click="removeItem(index)"
                :disabled="form.items.length === 1"
              >删除本条</el-button>
            </div>
          </div>
        </div>
        <div class="form-footer">
          <el-button @click="addItem">添加</el-button>
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button @click="resetForm">取消</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { messageGetList, messageEdit } from "@/api/tyler/sys";
export default {
  name: 'DynamicForm',
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号必填'));
      }
      if (!/^1[3-9]\d{9}$/.test(value)) {
        return callback(new Error('手机号格式不正确'));
      }
      // 检查手机号是否重复
      const count = this.form.items.filter(item => item.perPhome === value).length;
      if (count > 1) {
        return callback(new Error('手机号不能重复'));
      }
      callback();
    };

    return {
      form: {
        items: [
          {
            perName: '',
            perPhome: ''
          }
        ]
      },
      rules: {
        perName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        perPhome: [
          { required: true, validator: validatePhone, trigger: 'blur' }
        ]
      }
    };
  },
  created(){
    this.getList()
  },
  methods: {
    getList(){
      messageGetList().then(res => {
      console.log(res,'res')
        this.form.items = res.rows;
      })
    },
    addItem() {
      this.form.items.push({
        perName: '',
        perPhome: ''
      });
    },
    removeItem(index) {
      this.form.items.splice(index, 1);
    },
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 提交表单数据
          console.log('提交的数据:', this.form.items);
          messageEdit(this.form.items).then(res => {
            this.$message.success('提交成功');
            this.getList()
          })
          
        } else {
          this.$message.error('请修正表单中的错误');
          return false;
        }
      });
    },
    resetForm() {
      this.getList()
    }
  }
};
</script>

<style scoped>
.dynamic-form {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.form-header {
  display: flex;
  background-color: #f5f7fa;
  padding: 10px 0;
  border-radius: 4px 4px 0 0;
}

.header-item {
  width: 50%;
  text-align: center;
  font-weight: bold;
}

.form-items {
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.form-row {
  display: flex;
  border-bottom: 1px solid #ebeef5;
}

.form-cell {
  flex: 1;
  padding: 10px;
}

.action {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  margin-top: -20px;
}

.form-footer {
  margin-top: 20px;
  text-align: right;
}

:deep(.el-form-item) {
  margin-bottom: 0;
}

:deep(.el-input) {
  width: 100%;
}

:deep(.el-button--text) {
  color: #f56c6c;
}
</style>