<template>
    <el-dialog class="transferItems" :title="showBinds.titleMap" width="1024px" v-model="visible" destroy-on-close @closed="$emit('closed')">
        <div style="margin:20px 30px 10px 30px;">
            <el-button @click="addInputData">{{ showBinds.addButtonLab }}</el-button>
            <el-button @click="removeInputData">{{ showBinds.removeButtonLab }}</el-button>
            <div style="min-height:10px;"></div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column align="center" :label="showBinds.choose" width="80">
                    <template #default="scope">
                        <el-checkbox ref="indexCheckbox" :value="getSelectValue(scope.$index)" @change="selectRow(scope.$index)"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column align="center" :label="showBinds.col1Lab" width="160">
                    <template #default="scope">
                        <el-input class="langInput" v-model="scope.row.keyword" size="default" clearable @change="confirm();"></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="center" :label="showBinds.col2Lab" width="160">
                    <template #default="scope">
                        <el-checkbox @change="chkChange(scope.$index, 0, scope.row)" v-model="scope.row.scan"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column align="center" :label="showBinds.col3Lab" width="160">
                    <template #default="scope">
                        <el-checkbox @change="chkChange(scope.$index, 1, scope.row)" v-model="scope.row.seport"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column align="center" v-for="item in languages" width="100" :key="item.key" :label="item.name">
                    <template #default="scope">
                        <el-input class="langInput" v-model="rowsLanguages(scope.$index, item.key).value" size="default"  @change="confirm();"></el-input>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-dialog>
</template>
<script>
import save from "./saveContentConfig";
import tool from '@/utils/tool';
import { $t } from '../../locales';

export default {
    components: {
        save,
    },
    data() {
        return {
            showBinds: {
                titleMap: $t('reportDesigner.CommentAndTranslation'),
                col1Lab: $t('sysLog.keyword'),
                col2Lab: $t('reportDesigner.ScanComment'),
                addButtonLab:  $t('reportLabel.addItem'),
                removeButtonLab:  $t('delete'),
                col3Lab: $t('reportDesigner.ReportComment'),
                choose:  $t('Choose')
            },
            languages: [
                {
                    key: "Chinese",
                    name: "Chinese",
                },
                {
                    key: "English",
                    name: "English",
                },
                {
                    key: "German",
                    name: "German",
                },
                {
                    key: "Greek",
                    name: "Greek",
                },
                {
                    key: "Malay",
                    name: "Malay",
                },
                {
                    key: "Portuguese",
                    name: "Portuguese",
                },
                {
                    key: "Romanian",
                    name: "Romanian",
                },
                {
                    key: "Spanish",
                    name: "Spanish",
                },
                {
                    key: "Swedish",
                    name: "Swedish",
                },
                {
                    key: "Norwegian",
                    name: "Norwegian",
                },
                {
                    key: "Danish",
                    name: "Danish",
                },
                {
                    key: "Finnish",
                    name: "Finnish",
                },
                {
                    key: "French",
                    name: "French",
                },
                {
                    key: "Polish",
                    name: "Polish",
                },
                {
                    key: "Russian",
                    name: "Russian",
                },
                {
                    key: "Uighur",
                    name: "Uighur",
                },
                {
                    key: "Italian",
                    name: "Italian",
                },
                {
                    key: "Czech",
                    name: "Czech",
                },
                {
                    key: "Khmer",
                    name: "Khmer",
                },
                {
                    key: "Hungarian",
                    name: "Hungarian",
                }
            ],
            visible: false,
            tableData: [],
            selectRows: []
        }
    },
    methods: {
        //赋值--初始化
        open(data) {
            this.visible = true;
            if (data && data.length > 0) {
                this.tableData = data;
            }
        },
        confirm() {
            console.log("this.tableData", this.tableData)
            this.$emit("setlanguages", tool.objCopy(this.tableData));
        },
        addInputData() {
            this.tableData.push({
                keyword: 'NewComment-',
                scan: false,
                seport: false,
                languageDatas: []
            })
        },
        sortAsc(x, y) {
            if (x < y) {
                return -1;
            } else if (x > y) {
                return 1;
            }
            else {
                return 0;
            }
        },
        sortDesc(x, y) {
            return this.sortAsc(y, x);
        },
        removeInputData() {
            if (this.selectRows.length > 0) {
                var sortedIndex = this.selectRows.sort(this.sortDesc)
                for (var index of sortedIndex) {
                    this.tableData.splice(index, 1);
                }
                this.selectRows.splice(0,this.selectRows.length);
                this.$refs.indexCheckbox.isChecked = false;
            }
        },
        rowsLanguages(index, newKey) {
            if (index == -1) {
                return null;
            }
            let lang = this.tableData[index].languageDatas.filter(f => f.key == newKey);
            if (lang && lang.length > 0) {
                return lang[0];
            }
            else {
                let newlan = { key: newKey, value: "" };
                this.tableData[index].languageDatas.push(newlan);
                return newlan;
            }
        },
        selectRow(index) {
            var data = this.selectRows.filter(f => f == index);
            if (data && data.length > 0) {
                let sortedIndex = data.sort(this.sortDesc);
                for (var i of sortedIndex)
                    this.selectRows.splice(i, 1);
            }
            else {
                this.selectRows.push(index);
            }
        },
        getSelectValue(index)
        {
            var data = this.selectRows.filter(f => f == index);
            if (data && data.length > 0) {
                return true;
            }
            else
            {
                return false;
            }
        },
        chkChange(index, type, row) {
            if (index == -1) {
                return;
            }
            if (type === 0) {
                this.tableData[index].scan = row.scan;
            }
            else {
                this.tableData[index].seport = row.seport;
            }
        }
    },
    computed: {
    }
}
</script>

<style>
.langInput>.el-input__inner {
    border: 0 !important;
}
</style>