<template>
    <div>
        <el-form :inline="true" :model="query" class="query-form" size="mini">
            <el-row>
                <el-form-item class="query-form-item">
                    <el-input v-model="query.key" placeholder="搜索"></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="handleAddClick"
                        >添加往来单位信息
                        </el-button
                        >
                    </el-button-group>
                </el-form-item>
            </el-row>
        </el-form>

        <el-table
            v-loading="loading"
            :data="list"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
            <el-table-column label="序号" type="index" fixed></el-table-column>
            <el-table-column label="往来单位ID" prop="unitId" fixed></el-table-column>
            <el-table-column
                label="企业自定义ID"
                prop="thirdId"
                fixed
            ></el-table-column>
            <el-table-column label="名称" prop="name" fixed></el-table-column>
            <el-table-column
                label="往来单位简写"
                prop="spell"
                fixed
            ></el-table-column>
            <el-table-column
                label="社会信用号"
                prop="creditNo"
                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
                    >
                    <el-button
                        type="text"
                        size="small"
                        @click.native.stop="handleLinkClick(scope.row)"
                    >关联自助平台
                    </el-button
                    >
                    <el-button
                        type="text"
                        size="small"
                        @click.native.stop="deleteDialog(scope.row)"
                    >删除
                    </el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            :page-size="query.limit"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="total"
        ></el-pagination>

        <el-dialog
            :title="editTypeMap[editType]"
            :visible.sync="editDialogVisible"
            width="60%"
        >
            <el-form :model="editQuery" ref="editQuery" :rules="rules">
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="10" class="el-col" type="flex">
                        <div class="text item">
                            <el-form-item label="往来单位名称" prop="name">
                                <el-input
                                    v-model="editQuery.name"
                                    style="width: 60%"
                                    size="small"
                                    @input="change()"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="text item">
                                <el-form-item label="往来单位简写" prop="spell">
                                    <el-input
                                        v-model="editQuery.spell"
                                        size="small"
                                        style="width: 60%"
                                    ></el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="10" class="el-col" type="flex">
                        <div class="text item">
                            <el-form-item label="企业自定义ID" prop="thirdId">
                                <el-input
                                    v-model="editQuery.thirdId"
                                    style="width: 60%"
                                    size="small"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="10" class="el-col" type="flex">
                        <div class="text item">
                            <el-form-item label="社会信用号" prop="creditNo">
                                <el-input
                                    v-model="editQuery.creditNo"
                                    style="width: 60%"
                                    size="small"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click.native="cancelDialog" size="small">取消</el-button>
                <el-button type="primary" size="small" @click.native="formSubmit()"
                >提交
                </el-button
                >
            </div>
        </el-dialog>
        <el-dialog
            :title="editTypeMap[editType]"
            :visible.sync="editLoginVisible"
            width="70%"
        >
            <el-form :model="editLogin" ref="editSumit" :rules="platformRules">
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="14" class="el-col" type="flex">
                        <div class="edit-text">
                            <!--                            <el-form-item label="自助平台名称:" prop="platformId">-->
                            <!--                                <el-select-->
                            <!--                                    v-model="editLogin.platformId"-->
                            <!--                                    style="width: 70%"-->
                            <!--                                    @change="intentPlatform"-->
                            <!--                                    placeholder="请选择自助平台"-->
                            <!--                                >-->
                            <!--                                    <el-option-->
                            <!--                                        v-for="item in platformList"-->
                            <!--                                        :key="item.platformId"-->
                            <!--                                        :label="item.name"-->
                            <!--                                        :value="item.id"-->
                            <!--                                    >-->
                            <!--                                    </el-option>-->
                            <!--                                </el-select>-->
                            <!--                            </el-form-item>-->
                            <el-form-item label="自助平台名称" prop="thirdId">
                                <el-input
                                    v-model="editLogin.platformName"
                                    style="width: 70%"
                                    size="small"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4" class="el-col" type="flex" style="margin-top: 10px">
                        <el-button type="primary" icon="search" @click="handSelectPlat" size="mini"
                        >选择自助平台
                        </el-button
                        >
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="18" class="el-col" type="flex">
                        <div class="text item">
                            <el-form-item label="本平台单据类型:" prop="targetAction">
                                <el-select
                                    v-model="editLogin.sourceAction"
                                    style="width: 70%"
                                    disabled
                                    @change="intentPlatform"
                                    placeholder="请选择本平台单据类型"
                                >
                                    <el-option
                                        v-for="item in busTypes"
                                        :key="item.action"
                                        :label="item.name"
                                        :value="item.action"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="18" class="el-col" type="flex">
                        <div class="text item">
                            <el-form-item label="自助平台单据类型:" prop="targetAction">
                                <el-select
                                    v-model="editLogin.targetAction"
                                    style="width: 70%"
                                    @change="intentPlatform"
                                    placeholder="请选择自助平台单据类型"
                                >
                                    <el-option
                                        v-for="item in platTypes"
                                        :key="item.action"
                                        :label="item.name"
                                        :value="item.action"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click.native.stop="cancelEditDialog" size="small">取消</el-button>
                <el-button type="primary" size="small" @click.native="editSubmit()"
                >提交
                </el-button
                >
            </div>
        </el-dialog>
        <el-dialog title="选择自助平台" :visible.sync="platformVisible" width="35%">
            <el-table
                v-loading="loading"
                @row-click="intentPlatform"
                :data="platformList"
                style="width: 100%"
            >
                <el-table-column
                    label="序号"
                    type="index"
                    width="80"
                ></el-table-column>
                <el-table-column
                    label="自助平台名称"
                    prop="name"
                    width="140"
                ></el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click.native.stop="loginDialog(scope.row)"
                        >选入
                        </el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog title="权限验证" :visible.sync="loginDialogVisible" ref="editLogin" width="35%">
            <el-form>
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="18" class="el-col" type="flex">
                        <div class="text item">
                            <el-form-item label="账号:" prop="platformUsername">
                                <el-input
                                    :disabled="platformEdit"
                                    v-model="editLogin.platformUsername"
                                    style="width: 80%"
                                    size="small"
                                    @input="change()"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="18" class="el-col" type="flex">
                        <div class="text item">
                            <el-form-item label="密码:" prop="platformPassword">
                                <el-input
                                    :disabled="platformEdit"
                                    v-model="editLogin.platformPassword"
                                    style="width: 80%"
                                    size="small"
                                    type="password"
                                    @input="change()"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native.stop="cancelDialog" size="small">取消</el-button>
                <el-button type="primary" size="small" @click.native="linkSubmit()"
                >提交
                </el-button
                >
            </div>

        </el-dialog>
    </div>
</template>

<script>
import {
    getUnitMaintain,
    addUnit,
    modifyUnit,
    deleteUnitMaintain,
} from "../../api/receipts/unitMaintain";
import {
    getPlatform, getPlatformBusTypes,
    linkPlatform,
} from "../../api/auth/platform";
import {getBusType} from "@/api/warehouse/BusRole";

export default {
    data() {
        return {
            query: {
                key: "",
                page: 1,
                limit: 20,
            },

            editQuery: {
                unitId: null,
                thirdId: null,
                name: null,
                spell: null,
                creditNo: null,
            },
            editLogin: {
                platformId: null,
                platformUsername: null,
                platformPassword: null,
                appid: null,
                appKey: null,
                sceretKey: null,
                targetAction: null,
                sourceAction: null,
            },
            editPlatfromQuery: {
                id: null,
                name: null,
                host: null,
            },
            platformVisible: false,
            editLoginVisible: false,
            checked: false,
            editDialogVisible: false,
            loginDialogVisible: false,
            list: [],
            platformList: [],
            platTypes: [],
            busTypes: [],
            total: 0,
            multipleSelection: [],
            platformEdit: false,
            rules: {
                name: [
                    {required: true, message: "请输入往来单位名称", trigger: "change"},
                ],
                spell: [
                    {required: true, message: "请输入往来单位简写", trigger: "change"},
                ],
                creditNo: [
                    {required: true, message: "请输入社会信用号", trigger: "change"},
                ],
            },
            platformRules: {
                platformId: [
                    {required: true, message: "请选择自助平台", trigger: "change"},
                ],
                targetAction: [
                    {required: true, message: "请选择目标单据类型", trigger: "change"},
                ],
            },
            editType: 0,
            editTypeMap: {
                0: "新增往来单位",
                1: "编辑往来单位",
                2: "关联自助平台",
            },
        };
    },

    methods: {
        onReset() {
            this.$router.push({
                path: "",
            });
            this.query = {
                key: "",
                page: 1,
                limit: 20,
            };
            this.getList();
        },
        getList() {
            this.loading = true;
            getUnitMaintain(this.query)
                .then((response) => {
                    this.loading = false;
                    this.list = response.data.list || [];
                    this.total = response.data.total || 0;
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.total = 0;
                });
        },
        //获取自助平台数据
        getPlatformList() {
            this.loading = true;
            getPlatform()
                .then((response) => {
                    this.loading = false;
                    this.platformList = response.data.list || [];
                })
                .catch(() => {
                    this.loading = false;
                    this.platformList = [];
                });
        },
        deleteUnit(data) {
            this.loading = true;
            let tquery = {
                id: data.id + "",
            };

            deleteUnitMaintain(tquery)
                .then((response) => {
                    if (response.code == 20000) {
                        this.getList();
                        this.$message({
                            type: "success",
                            message: "删除成功！",
                        });
                    }
                })
                .catch(() => {
                });
        },

        cancelDialog() {
            this.editDialogVisible = false;
            this.loginDialogVisible = false;
            this.platformVisible = false;
        },

        handleModifyClick(row) {//修改往来单位
            this.editType = 1;
            this.editDialogVisible = true;
            this.editQuery = row;
        },
        handleLinkClick(row) {  //关联自助平台
            this.platformEdit = false;
            this.editType = 2;
            this.editLogin = {
                id: row.id,
                platformId: row.platformId,
                targetAction: row.targetAction,
                sourceAction: row.sourceAction,
                platformName:row.platformName,
            };
            if (row.secretKey == null) {
                this.platformEdit = false;
            }
            this.editLogin.sourceAction = "SalesWareHouseOut";
            this.getPlatformType(row.unitId);
            this.editLoginVisible = true;
        },

        handSelectPlat() {
            this.platformVisible = true;
        },
        loginDialog(row) {
            this.loginDialogVisible = true;
            this.editLogin.platformId = row.id;
        },
        handleAddClick() {
            this.editType = 0;
            this.editDialogVisible = true;
            this.editQuery = {
                unitId: null,
                thirdId: null,
                name: null,
                spell: null,
                creditNo: null,
            };
            var timestamp3 = new Date().getTime();
            this.editQuery.unitId = timestamp3;
        },

        change() {
            var pinyin = require("pinyin");
            var py = pinyin(this.editQuery.name, {
                style: pinyin.STYLE_FIRST_LETTER, // 设置拼音风格
                heteronym: true,
            });
            var str = "";
            py.forEach((item) => {
                str = str + item[0];
            });
            this.editQuery.spell = str;
        },

        formSubmit() {
            this.$refs["editQuery"].validate((valid) => {
                if (valid) {
                    if (this.editType == 0) {
                        addUnit(this.editQuery)
                            .then((response) => {
                                if (response.code == 20000) {
                                    this.getList();
                                    this.$message({
                                        type: "success",
                                        message: "添加成功",
                                    });
                                    this.cancelDialog();
                                } else {
                                    this.$message.error(response.message);
                                }
                            })
                            .catch(() => {
                            });
                    } else {
                        modifyUnit(this.editQuery)
                            .then((response) => {
                                if (response.code == 20000) {
                                    this.getList();
                                    this.$message({
                                        type: "success",
                                        message: "修改成功",
                                    });
                                    this.cancelDialog();
                                } else {
                                    this.$message.error(response.message);
                                }
                            })
                            .catch(() => {
                            });
                    }
                }
            });
        },
        intentPlatform(value) {
            this.editPlatfromQuery.id = value;
        },
        deleteDialog(rowId) {
            this.$confirm("此操作将永久删除该产品信息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.deleteUnit(rowId);
                })
                .catch(() => {
                });
        },
        linkSubmit() {
            linkPlatform(this.editLogin)
                .then((response) => {
                    if (response.code == 20000) {
                        this.$message({
                            type: "success",
                            message: "关联成功",
                        });
                        this.cancelDialog();
                        this.getPlatformType();
                    } else {
                        this.$message.error(response.message);
                    }

                })
                .catch(() => {
                });

        },


        editSubmit() {
            modifyUnit(this.editLogin)
                .then((response) => {
                    if (response.code == 20000) {
                        this.getList();
                        this.$message({
                            type: "success",
                            message: "修改成功",
                        });
                        this.editLoginVisible = false;
                    } else {
                        this.$message.error(response.message);
                    }
                })
                .catch(() => {
                });
        },
        cancelEditDialog() {
            this.editLoginVisible = false;
        },
        exportTxt() {
        },

        handleSelectionChange(val) {
            console.log("----" + val);
            this.multipleSelection = val;
        },

        handleCurrentChange(val) {
            this.query.page = val;
            this.getList();
        },

        getPlatformType(id) {
            let query = {unitId: id};
            getPlatformBusTypes(query)
                .then((response) => {
                    this.platTypes = response.data.list || [];
                })
                .catch(() => {
                });
        },

        getBusType() {
            let query = {};
            getBusType(query)
                .then((response) => {
                    this.busTypes = response.data.list || [];
                })
                .catch(() => {
                });
        },
    },
    mounted() {
    },
    created() {
        this.getList();
        this.getPlatformList();
        this.getBusType();
        var pinyin = require("pinyin");
        console.log(
            pinyin("中心", {
                style: pinyin.STYLE_FIRST_LETTER, // 设置拼音风格
                heteronym: true,
            })
        );
    },
};
</script>
