<template>
  <div>
    <el-form ref="addJsonForm" :inline="true" :model="addJsonForm" :rules="addJsonForm.addJsonRules" label-width="108px">
      <el-table :data="addJsonForm.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>
            <i style="color:#F56C6C;">*</i>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'params.' + scope.$index + '.name'" :rules="addJsonForm.addJsonRules.name">
              <el-input v-model="scope.row.name" autocomplete="off" type="text" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" width="725">
          <template slot="header" slot-scope="scope">
            <span style="color:#2d65dc;">说明</span>
            <i style="color:#F56C6C;">*</i>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'params.' + scope.$index + '.value'" :rules="addJsonForm.addJsonRules.value">
              <el-input v-model="scope.row.value" autocomplete="off" style="width: 600px" type="text" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" width="160">
          <template slot="header" slot-scope="scope">
            <span style="color:#2d65dc;">类型</span>
            <i style="color:#F56C6C;">*</i>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'params.' + scope.$index + '.type'" :rules="addJsonForm.addJsonRules.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="200">
          <template slot="header" slot-scope="scope">
            <span style="color:#2d65dc;">操作</span>
            <i style="color:#F56C6C;">*</i>
          </template>
          <template slot-scope="scope">
            <el-form-item :prop="'params.' + scope.$index + '.value'" :rules="addJsonForm.addJsonRules.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: [],
      FormInAddPopup: {
        dataSourceJson: '', // 获取到的dataJson,显示为 [{name:"",value:""},{name:"",value:""}] 的格式
      },
      tabItemId: 1, // 表格数据的 id
      addJsonForm: {
        params: [
          {
            name: '',
            value: '',
            tabItemId: 1, // 弹框中，删除空行的唯一标志，默认从1开始
            type: '1',
          },
        ],
        addJsonRules: {
          name: [{ required: true, message: '请输入参数名称', trigger: 'blur' }],
          value: [{ required: true, message: '说明不能为空', trigger: 'blur' }],
        },
      },
      options: [
        {
          value: '1',
          label: '字符串',
        },
        {
          value: '2',
          label: '整型',
        },
        {
          value: '3',
          label: '浮点',
        },
        {
          value: '4',
          label: '日期',
        },
        {
          value: '5',
          label: '时间',
        },
        {
          value: '6',
          label: '文本',
        },
        {
          value: '7',
          label: '时间戳',
        },
      ],
    };
  },
  methods: {
    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.addJsonForm.params.push({
        name: '',
        value: '',
        tabItemId: this.tabItemId,
      });
    },
    // 删除
    delTableItem() {
      // 确认删除
      if (this.addJsonMultiple.length > 0) {
        const arrs = [];
        const ids = this.addJsonMultiple.map(val => val.tabItemId); // 拿到选中的数据id,
        this.addJsonForm.params.forEach(item => {
          if (!ids.includes(item.tabItemId)) {
            // 当id在params中，表示数据被选中，该将其删除，即将不被选中的保留
            arrs.push(item);
          }
        });
        this.addJsonForm.params = arrs;
      } else {
        this.$message.warning('请选择要删除的数据');
      }
    },
  },
};
</script>
