<script setup>
import { save } from "@/api/report/index";
import existing from "../existing.vue"

const tableData = [
  {
    id: '',
    scriptName: '',
    before: '打开网页：',
    behind: '',
    beforeText: '',
    behindText: ''
  },
  {
    id: '',
    scriptName: '',
    before: '在：',
    behind: '输入：',
    beforeText: '',
    behindText: ''
  },
  {
    id: '',
    scriptName: '',
    before: '点击：',
    behind: '',
    beforeText: '',
    behindText: ''
  },
  {
    id: '',
    scriptName: '',
    before: '读取：',
    behind: '',
    beforeText: '',
    behindText: ''
  },
  {
    id: '',
    scriptName: '',
    before: '自动填写：',
    behind: '',
    beforeText: '',
    behindText: ''
  }
]
const currentRow = ref()
const childCurrentRow = ref([])
const tableData3 = ref([])
const scriptname = ref()
const singleTableRef = ref()
const handleCurrentChange =  (val)=> {
  currentRow.value = val;
  if (childRowSet.value) {
    childRowSet.value.setTableRow()
  }
  setCurrent(val)
}
const onAddItem = () => {
  if(currentRow.value){
    tableData3.value.push(Object.assign({}, currentRow.value))
  }else {
    tableData3.value.push(Object.assign({}, childCurrentRow.value))
  }
}
const saveJson = () => {

  save({ scriptname: scriptname.value },tableData3.value).then(res => {
    console.log(res)
  });
}
const handleDelete = function (index) {
  tableData3.value.splice(index, 1)
}
const getData = (data)=> {
  childCurrentRow.value=data
}
/*const handleRowClick=(table)=>{
  tableid.value=table
}*/
const childRowSet=ref(null)
const setCurrent = (row) => {
  singleTableRef.value.setCurrentRow(row)
}
</script>

<template>
  <el-row :gutter="50" justify="space-evenly">
    <el-col :span="8">
      <el-table :data="tableData" highlight-current-row ref="singleTableRef"
                @current-change="handleCurrentChange">
        <el-table-column label="基本脚本">
          <template #default="scope">
            <el-input style="width: 150px" disabled>
              <template #prepend>{{ scope.row.before }}</template>
            </el-input>
            <el-input v-if="scope.row.behind !==''" style="width: 150px" disabled>
              <template #prepend>{{ scope.row.behind }}</template>
            </el-input>
          </template>
        </el-table-column>
      </el-table>

      <existing ref="childRowSet" @getExistingData="getData"/>

    </el-col>

    <el-col :span="2">
      <br><br><br><br><br>
      <el-button type="primary" @click="onAddItem">
        填加
        <el-icon class="el-icon--right"><ArrowRight /></el-icon>
      </el-button>
    </el-col>
    <el-col :span="12">
      <el-table :data="tableData3">
        <el-table-column type="index" width="30"/>
        <el-table-column label="脚本步骤">
          <template #default="scope">
            <el-input v-model="scope.row.beforeText" v-if="scope.row.before && scope.row.before !==''" style="width: 419px">
              <template #prepend>{{ scope.row.before }}</template>
            </el-input>
            <el-input v-model="scope.row.behindText" v-if="scope.row.behind && scope.row.behind !==''" style="width: 250px">
              <template #prepend>{{ scope.row.behind }}</template>
            </el-input>
            <el-button v-if="scope.row.scriptName !==''" type="warning" round>{{ scope.row.scriptName}}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="right" width="80">
          <template #default="scope">
            <el-button
                type="danger"
                @click="handleDelete(scope.$index)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-input v-model="scriptname" style="width: 500px">
        <template #prepend>输入脚本名称：</template>
      </el-input>
      <el-button type="primary" @click="saveJson">保存脚本</el-button>
    </el-col>
  </el-row>

</template>

<style scoped lang="scss">

</style>