<template>
    <div class="intellscriptgeneration" :class="!theme ? 'themeDark' : 'themeLight'">
        <el-row :gutter="50" justify="space-evenly" :style="pageHeight">
            <el-col :span="9" class=" warn-table">
                <div class="listTop">
                    <p class="tableTit">基本脚本</p>
                    <el-table :data="tableData" :height="tableHeight" 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>
                </div>

                <existing ref="childRowSet" @getExistingData="getData" :height="tableHeight" :theme="theme" />

            </el-col>

            <el-col :span="1">
                <div style="text-align: center;" :style="btnHeight">
                    <!-- <el-button type="primary" @click="onAddItem">
                        填加
                        <el-icon class="el-icon--right">
                            <ArrowRight />
                        </el-icon>
                    </el-button> -->
                    <img src="../../../assets/images/left.png" @click="onAddItem" alt="">
                </div>
            </el-col>
            <el-col :span="13" class="warn-table">
                <div style="margin-bottom: 12px">
                    <el-input v-model="scriptname" style="width: 500px">
                        <template #prepend>输入脚本名称：</template>
                    </el-input>
                    <el-button type="primary" @click="saveJson" style="margin-left: 10px">保存脚本</el-button>
                </div>
                <el-table :data="tableData3" :height="listHeight">
                    <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-col>
        </el-row>
    </div>

</template>

<script>
    import {
        save
    } from '@/api/report';
    import existing from "../existing.vue";
    export default {
        components: {
            existing
        },
        data() {
            return {
                tableHeight: (document.documentElement.clientHeight - 220) / 2,
                listHeight: document.documentElement.clientHeight - 160,
                scriptname: '',
                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: ''
                    }
                ],
                childCurrentRow: [],
                tableData3: [],
                childRowSet: null,
                theme: null,
            }
        },
        computed: {
            pageHeight() {
                return {
                    'height': document.documentElement.clientHeight - 115 + 'px'
                }
            },
            btnHeight() {
                return {
                    'height': (document.documentElement.clientHeight - 160) + 'px',
                    'padding-top': (document.documentElement.clientHeight - 160) / 2 + 'px'
                }
            }
        },
        watch: {
            '$store.state.theme': {
                handler: function (newVal, oldVal) {
                    this.theme = newVal
                },
                immediate: true
            }
        },
        methods: {
            handleCurrentChange(val) {
                this.currentRow = val;
                if (this.childRowSet) {
                    this.childRowSet.setTableRow()
                }
                this.setCurrent(val)
            },
            onAddItem() {
                if (this.currentRow) {
                    this.tableData3.push(Object.assign({}, this.currentRow))
                } else {
                    this.tableData3.push(Object.assign({}, this.childCurrentRow))
                }
            },
            saveJson() {
                save({
                    scriptname: this.scriptname
                }, this.tableData3).then(res => {
                    console.log(res)
                });
            },
            handleDelete(index) {
                this.tableData3.splice(index, 1)
            },
            getData(data) {
                this.childCurrentRow = data
            },
            setCurrent(row) {
                this.$refs.singleTableRef.setCurrentRow(row)
            }
        }
    }
</script>

<style scoped lang="less">
    .intellscriptgeneration {
        .listTop {
            margin-bottom: 20px;

            .tableTit {
                line-height: 40px;
                margin-left: 10px;
            }
        }
    }

    .themeDark {
        padding: 20px 0;
        background: #161f1e;
        border-radius: 10px;

        .tableTit {
            font-size: 16px;
            color: #f8f9ff;
        }
    }

    .themeLight {
        padding: 20px 0;
        background: #edeffb;
        border-radius: 10px;

        .listTop {
            background: #f8f9ff;

            .tableTit {
                font-size: 16px;
                color: #9093a6;
            }
        }

    }
</style>