<template>
    <div>
        <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
            <el-form-item class="query-form-item">
                <el-input
                    v-model="filterQuery.action"
                    placeholder="业务类型"
                    style="width: 400px"
                ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button-group>
                    <el-button type="primary" icon="el-icon-refresh" @click="onReset"></el-button>
                    <el-button type="primary" icon="search" @click="getList">查询</el-button>
                    <el-button type="primary" icon="search" @click="selectAll">关联选入</el-button>
                </el-button-group>
                <!-- <el-button type="primary" icon="search" @click="handleAddClick"
                  >新增</el-button
                > -->
            </el-form-item>
        </el-form>

        <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="list"
            style="width: 100%"
            @selection-change="handleSelectionUdiChange">
            <el-table-column
                type="selection"
                width="55"
            ></el-table-column>
            <el-table-column label="序号" type="index" width="120" fixed></el-table-column>
            <el-table-column label="业务类型名称" prop="name" fixed></el-table-column>
            <el-table-column label="主业务类型代码" prop="mainAction" fixed></el-table-column>
            <el-table-column label="业务类型代码" prop="action" fixed></el-table-column>
            <el-table-column label="是否启用" prop="enable" fixed>
                <template slot-scope="scope">
                    <span>{{ enableMap[scope.row.enable] }}</span>
                </template>
            </el-table-column>
            <el-table-column label="本地单据类型" prop="localAction" fixed></el-table-column>
            <el-table-column label="第三方系统" prop="thirdName" fixed></el-table-column>

            <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="small"
                        @click.native.stop="handleModifyClick(scope.row)"
                    >编辑
                    </el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
            title="新增业务类型关联"
            :visible.sync="addDialogVisible"
            width="70%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            v-if="addDialogVisible"
        >
            <modifyDialog :inputQuery="inputQuery"></modifyDialog>
            <div style="text-align: center">
                <el-button type="primary" size="small" icon="search" @click="onAddSubmit"
                >提交
                </el-button
                >
                <el-button type="primary" size="small" icon="search" @click="cancelDialog"
                >取消
                </el-button
                >
            </div>
        </el-dialog>

        <el-dialog
            title="编辑业务类型关联"
            :visible.sync="modifyDialogVisible"
            width="70%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            v-if="modifyDialogVisible"
        >
            <modifyDialog :inputQuery="inputQuery"></modifyDialog>
            <div style="text-align: center">
                <el-button type="primary" size="small" icon="search" @click="onModifySubmit"
                >提交
                </el-button
                >
                <el-button type="primary" size="small" icon="search" @click="cancelDialog"
                >取消
                </el-button
                >
            </div>
        </el-dialog>
        <el-pagination
            :page-size="filterQuery.limit"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="total"
        ></el-pagination>
    </div>
</template>
<script>
    import {
        getAllBusType, updateBusRole
    } from "../../api/warehouse/BusRole";


    export default {

        name: "BussinessType",
        props: {
            roleId: {
                type: Object,
                required: true,
            },
        },


        data() {
            return {
                filterQuery: {
                    roleId:null,
                    page: 1,
                    limit: 20,
                },
                addDialogVisible: false,
                modifyDialogVisible: false,
                list: [],
                inputQuery: {
                    action: "",
                    name: "",
                    enable: "",
                    remark: "",
                    mainAction: "",
                    thirdSysFk: "",
                    id: "",
                    localAction: null,
                },
                enableMap: {
                    true: "是",
                    false: "否",
                },

                total: 0,
                multipleSelection: [],
            };
        },

        methods: {
            onReset() {


                this.$router.push({
                    path: "",
                });
                this.filterQuery = {
                    roleId:null,
                    page: 1,
                    limit: 20,
                };
                this.getList();
            },
            cancelDialog() {
                this.modifyDialogVisible = false;
                this.addDialogVisible = false;
            },

            getList() {
                this.loading = true;
                this.filterQuery.roleId = this.roleId;
                getAllBusType(this.filterQuery)
                    .then((response) => {
                        this.loading = false;
                        this.list = response.data.list || [];
                        this.total = response.data.total || 0;
                        // this.$refs.multipleTable.toggleRowSelection( this.list[0]);


                        this.list.forEach(row => {
                            if (row.check) {
                                console.log("row.check) = " + row.check);
                                this.$nextTick(() => {
                                    this.$refs.multipleTable.toggleRowSelection(row);
                                });

                            }

                        });

                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                        this.total = 0;
                    });
            },
            checkSelectable(row, index) {
                return !row.check;
            },
            handleSelectionUdiChange(val) {
                console.log("----" + val);
                this.multipleSelection = val;
            },
            selectAll() {
                this.loading = true;
                let selectData = this.multipleSelection;
                let actions = [];
                selectData.forEach((obj) => {
                    console.log("action=" + obj.action);
                    actions.push(obj.action);
                });
                let query = {
                    roleId: this.roleId,
                    actions: actions,
                };
                updateBusRole(query)
                    .then((response) => {
                        if (response.code == 20000) {
                            this.$emit("closeBTDialog", true);
                        } else {
                            this.$message.error(response.message);
                        }
                    })
                    .catch(() => {
                    });
            },
            onAddSubmit() {
            },


            deleteDialog(rowId) {
                this.$confirm("此操作将永久删除该业务类型信息, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.deleteOrders(rowId);
                    })
                    .catch(() => {
                    });
            },

        },
        components: {},
        mounted() {
        },
        created() {
            this.getList();
        },
    };
</script>
