<template>
    <div>
        <el-dialog title="设置抓取规则" :visible="rulesVisable" v-if="rulesVisable" @close="cancelRules"
            append-to-body :destroy-on-close="true" center>
            <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 20px;"
                @click="addForm">新增系统内置抓取规则</el-button>
            <div class="formDom">
                <el-form ref="form" :model="formData" label-width="150px">
                    <div class="formItem" v-for="(item, index) in formData.forms" :key="item.key">
                        <el-button type="primary" icon="el-icon-delete" style="margin-bottom: 20px;"
                            @click="deleteForm(item)">删除</el-button>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="抓取文件名：" :prop="'forms.' + index + '.fileName'" :rules="[
                                    {
                                        required: true,
                                        message: '抓取文件名不能为空',
                                    },
                                ]">
                                    <el-input v-model="item.fileName" placeholder="请输入抓取文件名" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="字段名：" :prop="'forms.' + index + '.columnName'" :rules="[
                                    {
                                        required: true,
                                        message: '字段名不能为空',
                                    },
                                ]">
                                    <el-select v-model="item.columnName" placeholder="请选择" @change="columnNameChange(item)">
                                        <el-option v-for="dict in dict.type.case_built_type" :key="dict.value"
                                            :label="dict.label" :value="dict.label"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="开始抓取字段：" :prop="'forms.' + index + '.startContent'">
                                    <el-input v-model="item.startContent" placeholder="请输入开始抓取字段" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="结束抓取字段：" :prop="'forms.' + index + '.endContent'">
                                    <el-input v-model="item.endContent" placeholder="结束抓取字段" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="指定抓取开始位置：" :prop="'forms.' + index + '.startContentRepeatOrder'">
                                    <el-input-number v-model="item.startContentRepeatOrder" controls-position="right" :min="1"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="指定抓取结束位置：" :prop="'forms.' + index + '.endContentRepeatOrder'">
                                    <el-input-number v-model="item.endContentRepeatOrder" controls-position="right" :min="1"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="抓取方向：" :prop="'forms.' + index + '.fatchOrder'">
                                    <el-select v-model="item.fatchOrder" placeholder="请选择">
                                        <el-option v-for="dict in fatchOrderList" :key="dict.key"
                                            :label="dict.name" :value="dict.key"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-form>
            </div>
            <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 20px;"
                @click="addFormCustom">新增自定义抓取规则</el-button>
            <div class="formDom">
                <el-form ref="form_custom" :model="formData_custom" label-width="150px">
                    <div class="formItem" v-for="(item, index) in formData_custom.forms" :key="item.key">
                        <el-button type="primary" icon="el-icon-delete" style="margin-bottom: 20px;"
                            @click="deleteFormCustom(item)">删除</el-button>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="字段：" :prop="'forms.' + index + '.column'" :rules="[
                                    {
                                        required: true,
                                        message: '字段不能为空',
                                    },
                                ]">
                                    <el-input v-model="item.column" placeholder="请输入字段" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="字段名：" :prop="'forms.' + index + '.columnName'" :rules="[
                                    {
                                        required: true,
                                        message: '字段名不能为空',
                                    },
                                ]">
                                    <el-input v-model="item.columnName" placeholder="请输入字段名" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="抓取文件名：" :prop="'forms.' + index + '.fileName'" :rules="[
                                    {
                                        required: true,
                                        message: '抓取文件名不能为空',
                                    },
                                ]">
                                    <el-input v-model="item.fileName" placeholder="请输入抓取文件名" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="开始抓取字段：" :prop="'forms.' + index + '.startContent'">
                                    <el-input v-model="item.startContent" placeholder="请输入开始抓取字段" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="结束抓取字段：" :prop="'forms.' + index + '.endContent'">
                                    <el-input v-model="item.endContent" placeholder="结束抓取字段" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="指定抓取开始位置：" :prop="'forms.' + index + '.startContentRepeatOrder'">
                                    <el-input-number v-model="item.startContentRepeatOrder" controls-position="right" :min="1"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="指定抓取结束位置：" :prop="'forms.' + index + '.endContentRepeatOrder'">
                                    <el-input-number v-model="item.endContentRepeatOrder" controls-position="right" :min="1"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="抓取方向：" :prop="'forms.' + index + '.fatchOrder'">
                                    <el-select v-model="item.fatchOrder" placeholder="请选择">
                                        <el-option v-for="dict in fatchOrderList" :key="dict.key"
                                            :label="dict.name" :value="dict.key"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelRules" class="endbutton"><span>取 消</span></el-button>
                <el-button type="primary" @click="submitRules" class="endbutton"><span>确认</span></el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    getFatchRuleByTemplateid,
    saveFatchRules
} from "@/api/officialSeal/officialSeal.js";
export default {
    props: ["rulesVisable", "rulesData", "queryParams"],
    dicts: ["case_built_type"],
    data() {
        return {
            formData: {
                forms: [{
                    // fileName: "",
                    // startContent: '',
                    // endContent: '',
                    // column: "",
                    // columnName: "",
                }]
            },
            formData_custom: {
                forms: []
            },
            fatchOrderList: [
                {
                    name:'从前向后抓取',
                    key:0
                },
                {
                    name:'从后往前抓取',
                    key:1
                }
            ]
        };
    },
    watch: {
        rulesData(val) {
            if (val) {
                this.formData.forms = [];
                this.formData_custom.forms = [];
                this.getFatchRuleByTemplateidFn({ id: val.id })
            }
        }
    },
    created() {

    },
    methods: {
        cancelRules() {
            this.$emit("cancelRules");
        },
        addForm() {
            this.formData.forms.push({
                fileName: "",
                startContent: '',
                endContent: '',
                column: "",
                columnName: "",
                isDefault: 0
            });
        },
        deleteForm(item) {
            var index = this.formData.forms.indexOf(item)
            if (index !== -1) {
                this.formData.forms.splice(index, 1)
            }
        },
        deleteFormCustom(item) {
            var index = this.formData_custom.forms.indexOf(item)
            if (index !== -1) {
                this.formData_custom.forms.splice(index, 1)
            }
        },
        addFormCustom() {
            this.formData_custom.forms.push({
                fileName: "",
                startContent: '',
                endContent: '',
                column: "",
                columnName: "",
                isDefault: 1
            });
        },
        columnNameChange(item){
            let result = this.dict.type.case_built_type.find((data=>{
                return data.label == item.columnName
            }))
            item.column = result.value;
        },
        submitRules() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.$refs['form_custom'].validate((valid_custom) => {
                        if (valid_custom) {
                            let paramsList = this.formData.forms.concat(this.formData_custom.forms)
                            this.saveFatchRulesFn({
                                id: this.rulesData.id,
                                fatchRules: paramsList
                            })
                        }
                    })
                }
            });
        },
        // 根据id获取抓取规则
        getFatchRuleByTemplateidFn(data) {
            getFatchRuleByTemplateid(data).then(res => {
                // this.formData.forms = res.data;
                // this.selectList = res.data
                this.formData.forms = [];
                this.formData_custom.forms = [];
                console.log(res.data,"LLLLLLLLLLLLLLLLLLLLLLLLLLLL");
                res.data.forEach(item => {
                    if(item.isDefault == 0){
                        this.formData.forms.push(item)
                    }else if(item.isDefault == 1){
                        this.formData_custom.forms.push(item)
                    }
                });
            })
        },
        // 提交抓取规则
        saveFatchRulesFn(data) {
            saveFatchRules(data).then(res => {
                this.$message.success('提交成功');
                this.$emit("cancelRules");
                this.$emit('getList', this.queryParams);
            })
        }
    },
};
</script>
  
<style lang="scss" scoped>
::v-deep .el-form {
    border: 1px solid #c2bcbc;
    padding: 20px;
    margin-bottom: 15px;
    max-height: 300px;
    overflow-y: scroll;
}
.el-input-number{
    width: 180px;
}
</style>