<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" style="width: 300px;" placeholder="搜索" clearable="true"></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="search"
                        >查询
                        </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="往来单位编码" prop="unitId" fixed></el-table-column>
            <el-table-column label="往来单位名称" prop="corpName" fixed></el-table-column>
            <el-table-column label="拼音码" prop="pinyinCode" fixed></el-table-column>
            <el-table-column label="医院客户名称" prop="platformName" 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="unbindDialog(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"
            :current-page="query.page"
        ></el-pagination>

        <el-dialog
            title="关联医院客户"
            :visible.sync="editLoginVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="40%"
        >
            <el-form :model="editLogin" ref="editLogin" :rules="platformRules">
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="15" class="el-col" type="flex">
                        <div class="text item">
                            <el-form-item label="医院客户名称" prop="corpName">
                                <el-select
                                    v-model="editLogin.corpName"
                                    style="width: 65%"
                                    :disabled="editDialogVisible"
                                    @change="intentPlatform"
                                    placeholder="请选择医院客户"
                                >
                                    <el-option
                                        v-for="item in corpNamesList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="15" class="el-col" type="flex">
                        <div class="edit-text">
                            <el-form-item label="自助平台名称" prop="platformId">
                                <el-select
                                    v-model="editLogin.platformId"
                                    style="width: 65%"
                                    @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>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="15" class="el-col" type="flex">
                        <div class="text item">
                            <el-form-item label="本地单据类型" prop="sourceAction">
                                <el-select
                                    v-model="editLogin.sourceAction"
                                    style="width: 65%"
                                    placeholder="请选择本地单据类型"
                                >
                                    <el-option
                                        v-for="item in bussinessTypes"
                                        :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="20" class="el-col" type="flex">
                        <div class="text item">
                            <el-form-item label="目标仓库分库" prop="invCode">
                                <el-select v-model="editLogin.invCode"
                                           style="width: 35%;"
                                           placeholder="目标仓库信息" @change="locInvChange"
                                           clearable>
                                    <el-option
                                        v-for="item in targetInvs"
                                        :key="item.name"
                                        :label="item.name"
                                        :value="item.code">
                                        <span style="float: left">{{ item.name }}</span>
                                    </el-option>
                                </el-select>
                                <el-select v-model="editLogin.invSubCode" placeholder="目标分库信息"
                                           style="width: 35%;"
                                           @change="locSubInvChange"
                                           clearable>
                                    <el-option
                                        v-for="item in targetSubInvs"
                                        :key="item.name"
                                        :label="item.name"
                                        :value="item.code">
                                        <span style="float: left">{{ item.name }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="15" class="el-col" type="flex">
                        <div class="text item">
                            <el-form-item label="目标单据类型" prop="targetAction">
                                <el-select
                                    v-model="editLogin.targetAction"
                                    style="width: 65%"
                                    placeholder="请选择目标单据类型"
                                >
                                    <el-option
                                        v-for="item in targetActions"
                                        :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="15" class="el-col" type="flex">
                        <div class="text item">
                            <el-form-item label="账号" prop="platformUsername">
                                <el-input
                                    v-model="editLogin.platformUsername"
                                    placeholder="请输入账号"
                                    style="width: 78%"
                                    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="15" class="el-col" type="flex">
                        <div class="text item">
                            <el-form-item label="密码" prop="platformPassword">
                                <el-input
                                    v-model="editLogin.platformPassword"
                                    placeholder="请输入密码"
                                    style="width: 78%"
                                    size="small"
                                    type="password"
                                    show-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 {
    getUnbindUnitMaintain,
    getUnitMaintain,
    addUnit,
    modifyUnit
} from "../../api/receipts/unitMaintain";
import {
    getPlatform,
    linkPlatform,
    getLinkPlatformList,
    unbindPlatform,
    getTargetActions, getTargetInv, getTargetSubInv
} from "../../api/auth/platform";
import {getBusTypeByUser} from "@/api/warehouse/BusRole";

export default {
    data() {
        return {
            query: {
                key: "",
                coryType: null,
                customerId: this.$store.getters.customerId,
                page: 1,
                limit: 20
            },
            editLogin: {
                id: null,
                corpName: null,
                platformId: null,
                platformUsername: null,
                platformPassword: null,
                appid: null,
                appKey: null,
                sceretKey: null,
                sourceAction: null,
                targetAction: null,
                invCode: "",
                invSubCode: "",
            },
            editPlatfromQuery: {
                id: null,
                name: null,
                host: null
            },
            loading: false,
            editLoginVisible: false,

            checked: false,
            editDialogVisible: false,
            list: [],
            total: 0,
            multipleSelection: [],
            platformList: [],
            corpNamesList: [],
            bussinessTypes: [],
            targetActions: [],
            targetInvs: [],
            targetSubInvs: [],
            platformRules: {
                corpName: [
                    {required: true, message: "请选择往来单位", trigger: "change"}
                ],
                platformId: [
                    {required: true, message: "请选择自助平台", trigger: "change"}
                ],
                invCode: [
                    {required: true, message: "请选择目标分库", trigger: "change"}
                ],
                invSubCode: [
                    {required: true, message: "请选择目标分库", trigger: 'change'}
                ],
                platformUsername: [
                    {required: true, message: "请输入账号", trigger: "change"}
                ],
                platformPassword: [
                    {required: true, message: "请输入密码", trigger: "change"}
                ],
                sourceAction: [
                    {required: true, message: "请选择本地单据类型", trigger: "change"}
                ],
                targetAction: [
                    {required: true, message: "请选择目标单据类型", trigger: "change"}
                ]

            },


            curPlatformId: "",
            editType: 0,
            corpTypeList: [
                {
                    value: 1,
                    label: "客户"
                },
                {
                    value: 2,
                    label: "供应商"
                },
                {
                    value: 4,
                    label: "特殊往来"
                }
            ]
        };
    },

    methods: {
        onReset() {
            this.$router.push({
                path: ""
            });
            this.query = {
                key: "",
                coryType: null,
                customerId: this.$store.getters.customerId,
                page: 1,
                limit: 20
            };
            this.getList();
        },
        resetForm() {
            this.$nextTick(() => {
                this.$refs['editLogin'].resetFields();
                this.$refs["editLogin"].clearValidate();
            });
        },
        search() {
            this.query.page = 1;
            this.getList();
        },
        getList() {
            this.loading = true;
            getLinkPlatformList(this.query).then((res) => {
                this.loading = false;
                this.list = res.data || [];
            }).catch(() => {
                this.loading = false;
                this.list = [];
            });
        },
        cancelDialog() {
            this.editLoginVisible = false;
        },
        handleModifyClick(row) {
            if (row.platformId != null) {
                //已经绑定过
                this.$confirm("是否需要重新关联自助平台?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.editType = 2;
                    this.editLoginVisible = true;
                    this.editLogin = row;
                    this.editDialogVisible = true;
                    this.getUnitMaintain();
                    this.getPlatformList();
                    this.getLocalBussinessType();
                    this.curPlatformId = row.platformId;
                    this.getTargetInv();

                    this.getTargetSubInv();
                    this.getTargetActions();
                }).catch(() => {
                });
            } else {
                this.editType = 2;
                this.editLoginVisible = true;
                this.editLogin = row;
            }
        },
        handleAddClick() {
            this.editType = 0;
            this.editLoginVisible = true;
            this.editDialogVisible = false;
            this.resetForm();
            this.curPlatformId = "",
                //清空表单数据
                this.editLogin = {
                    id: null,
                    corpName: null,
                    platformId: null,
                    platformUsername: null,
                    platformPassword: null,
                    appid: null,
                    appKey: null,
                    sceretKey: null,
                    sourceAction: null,
                    targetAction: null,
                    invCode: "",
                    invSubCode: "",
                };
            this.getLocalBussinessType();
            this.getUnitMaintain();
            this.getPlatformList();
        },
        change() {
        },
        getUnitMaintain() {
            let unitQuery = {
                customerId: this.$store.getters.customerId,
                corpType: 1,
                page: 1,
                limit: 20
            };
            getUnitMaintain(unitQuery)
                .then((response) => {
                    this.corpNamesList = response.data.list || [];
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        //获取自助平台数据
        getPlatformList() {
            this.loading = true;
            getPlatform().then((response) => {
                this.loading = false;
                this.platformList = response.data.list || [];
            }).catch(() => {
                this.loading = false;
                this.platformList = [];
            });
        },
        intentPlatform(value) {
            this.editPlatfromQuery.id = value;
            this.curPlatformId = value;
            //拉取对应平台的单据类型
            this.getTargetInv(value);
        },


        getTargetActions() {
            this.targetActions = [];
            let query = {
                platformId: this.curPlatformId,
                invSubCode: this.editLogin.invSubCode,
            };
            getTargetActions(query).then((res) => {
                this.targetActions = res.data.list || [];
            }).catch((error) => {
                this.$message.error("获取自助平台单据类型失败");
            });
        },


        getTargetInv() {
            this.targetActions = [];
            let query = {
                platformId: this.curPlatformId
            };
            getTargetInv(query).then((res) => {
                this.targetInvs = res.data || [];
            }).catch((error) => {
                this.$message.error("获取自助平台单据类型失败");
            });
        },


        getTargetSubInv() {
            this.targetActions = [];
            let query = {
                invCode: this.editLogin.invCode,
                platformId: this.curPlatformId
            };
            getTargetSubInv(query).then((res) => {
                this.targetSubInvs = res.data || [];
            }).catch((error) => {
                this.$message.error("获取自助平台单据类型失败");
            });
        },
        getLocalBussinessType() {
            let tQuery = {};
            getBusTypeByUser(tQuery).then((res) => {
                this.bussinessTypes = res.data.list || [];
            }).catch((error) => {
                this.$message.error(error.message);
            });
        },
        //获取往来单位集合
        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(() => {
                            });
                    }
                }
            });
        },
        unbindDialog(row) {
            this.$confirm("此操作将解除绑定, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.loading = true;
                let query = {
                    corpId: row.id
                };
                unbindPlatform(query).then((res) => {
                    this.loading = false;
                    this.getList();
                    this.$message.success("解绑成功");
                }).catch((error) => {
                    this.loading = false;
                    this.$message.error("解绑失败");
                });
            }).catch(() => {
            });
        },
        linkSubmit() {
            //判断此用户是否已经添加过
            let corpId = this.editLogin.corpName;
            if (!this.editDialogVisible) {
                let corpNameTemp = null;
                this.corpNamesList.forEach(item => {
                    if (item.id == this.editLogin.corpName) {
                        corpNameTemp = item.name;
                        corpId = item.id;
                        return;
                    }
                });

                let flag = false;
                //此时为添加
                this.list.forEach(item => {
                    if (item.corpName == corpNameTemp) {
                        flag = true;
                        return;
                    }
                });

                if (flag) {
                    this.$message.error('“' + corpNameTemp + '”' + " 已经关联");
                    return;
                }

            } else {
                let corpNameTemp = null;
                this.corpNamesList.forEach(item => {
                    if (item.name == this.editLogin.corpName) {
                        corpNameTemp = item.name;
                        corpId = item.id;
                        return;
                    }
                });
            }

            this.$refs["editLogin"].validate((valid) => {
                if (valid) {
                    this.editLogin.id = corpId;
                    linkPlatform(this.editLogin)
                        .then((response) => {
                            if (response.code == 20000) {
                                this.getList();
                                this.$message({
                                    type: "success",
                                    message: "关联成功"
                                });
                                this.cancelDialog();
                            } else {
                                this.$message.error(response.message);
                            }
                        })
                        .catch(() => {
                        });
                }
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleCurrentChange(val) {
            this.query.page = val;
            this.getList();
        },
        locInvChange() {
            this.getTargetSubInv();
        },

        locSubInvChange() {
            this.getTargetActions();
        },
    },
    mounted() {
    },
    created() {
        this.getList();
        this.getPlatformList();
    }
};
</script>

<style>

</style>
