<template>
  <div>
    <el-form ref="form" :inline="true" :model="form" label-width="108px">
      <el-table :data="form.params" border style="width: 100%;" @selection-change="addJsonSelectionChange">
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" width="150">
          <template slot="header" slot-scope="scope">
            <span style="color:#2d65dc;">参数名称</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'params.' + scope.$index + '.param'">
              <el-input v-model="scope.row.param" autocomplete="off" type="text" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" width="625">
          <template slot="header" slot-scope="scope">
            <span style="color:#2d65dc;">说明</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'params.' + scope.$index + '.comment'">
              <el-input v-model="scope.row.comment" autocomplete="off" style="width: 510px" type="text" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" width="150">
          <template slot="header" slot-scope="scope">
            <span style="color:#2d65dc;">类型</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'params.' + scope.$index + '.type'">
              <el-select v-model="scope.row.type" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" width="110">
          <template slot="header" slot-scope="scope">
            <span style="color:#2d65dc;">是否必填</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'params.' + scope.$index + '.required'">
              <el-switch v-model="scope.row.required" active-color="#13ce66" inactive-color="#ff4949" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" width="200">
          <template slot="header" slot-scope="scope">
            <span style="color:#2d65dc;">操作</span>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'params.' + scope.$index + '.value'">
              <el-button circle icon="el-icon-plus" type="primary" @click="addTableItem" />
              <el-button circle icon="el-icon-delete" type="danger" @click="delTableItem" />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: false,
      addJsonMultiple: [],
      tabItemId: 1, // 表格数据的 id
      form: {
        params: [],
        addJsonRules: {
          param: [{ required: true, message: '请输入参数名称', trigger: 'blur' }],
          comment: [{ required: true, message: '说明不能为空', trigger: 'blur' }],
          type: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
          required: [{ required: true, message: '是否必填不能为空', trigger: 'blur' }],
          // value: [{ required: true, message: '其他相关验证提示（根据业务定）', trigger: 'blur' }],
        },
      },
      options: [
        { value: '1', label: '字符串' },
        { value: '2', label: '数字型' },
        { value: '3', label: '日期' },
        { value: '4', label: '时间' },
      ],
    };
  },
  mounted() {
    this.fetchRequestParams();
  },
  methods: {
    fetchRequestParams() {
      setTimeout(() => {
        // 模拟从后端获取的数据
        // const requestParams = [{ param: 'name_', comment: '学生姓名', type: 'string', required: 'false' }];
        const requestParams = this.$parent.form.requestParams; // 获取父组件（DetailDialog）传递过来的请求参数数据
        if (Array.isArray(requestParams)) {
          this.form.params = requestParams.map(item => ({
            param: item.param,
            comment: item.comment,
            type: item.type,
            required: item.required,
            tabItemId: `T${Math.floor(Math.random() * 1000000)}`, // 为每行数据生成唯一的 tabItemId
          }));
        }
      }, 1000);
    },
    RndNum(n) {
      // 生成随机数
      let rdmNum = '';
      for (let i = 0; i < n; i++) {
        rdmNum += Math.floor(Math.random() * 10); // [0,10)的整数
      }
      return rdmNum;
    },
    addJsonSelectionChange(val) {
      this.addJsonMultiple = val;
    },
    // 添加
    addTableItem() {
      this.tabItemId = `T${this.RndNum(6)}`; // 生成以T开头的七位随机数
      this.form.params.push({
        param: '',
        comment: '',
        type: '',
        required: false,
        tabItemId: this.tabItemId,
      });
    },
    // 删除
    delTableItem() {
      // 确认删除
      if (this.addJsonMultiple.length > 0) {
        const arrs = [];
        const ids = this.addJsonMultiple.map(val => val.tabItemId); // 拿到选中的数据id,
        this.form.params.forEach(item => {
          if (!ids.includes(item.tabItemId)) {
            // 当id在params中，表示数据被选中，该将其删除，即将不被选中的保留
            arrs.push(item);
          }
        });
        this.form.params = arrs;
      } else {
        this.$message.warning('请选择要删除的数据');
      }
    },
  },
};
</script>
