<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="搜索"></el-input>
                </el-form-item>
                <el-form-item class="query-form-item">
                    <el-select v-model="query.corpType" placeholder="往来单位类型">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="客户" value="1"></el-option>
                        <el-option label="供应商" value="2"></el-option>
                        <el-option label="特殊往来" value="4"></el-option>
                    </el-select>
                </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="name" fixed></el-table-column>
            <el-table-column label="往来单位类型" prop="coryType" fixed>
                <template slot-scope="scope">
                    <span>{{ coryTypeArr[scope.row.corpType] }}</span>
                </template>
            </el-table-column>
            <el-table-column label="拼音码" prop="pinyinCode" fixed></el-table-column>
            <el-table-column label="社会信用号" prop="creditNo" fixed></el-table-column>
            <el-table-column label="第三方系统编码" prop="thirdId" 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="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"
            :current-page="query.page"
        ></el-pagination>

        <el-dialog
            :title="editTypeMap[editType]"
            :visible.sync="editDialogVisible"
            width="65%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <el-form :model="editQuery" ref="editQuery">
                <el-row :gutter="20" class="el-row">
                    <el-col :span="10">
                        <div class="text item">
                            <div class="itemTag">
                                <span>往来单位名称&nbsp;</span>
                            </div>
                            <el-form-item prop="name">
                                <el-input v-model="editQuery.name"
                                          size="small"
                                          style="width: 80%"
                                          auto-complete="off"
                                          @input="change()"
                                          splaceholder="请输入内容"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="10" class="el-col" type="flex">
                        <div class="text item">
                            <div class="itemTag">
                                <span>企业自定义ID&nbsp;</span>
                            </div>
                            <el-form-item prop="thirdId">
                                <el-input v-model="editQuery.thirdId" style="width: 80%" auto-complete="off"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="el-row">
                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>社会信用号&nbsp;</span>
                            </div>
                            <el-form-item prop="creditNo">
                                <el-input v-model="editQuery.creditNo" style="width: 80%"
                                          auto-complete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>联系人&nbsp;</span>
                            </div>
                            <el-form-item prop="contact">
                                <el-input v-model="editQuery.contact" style="width: 80%" auto-complete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="el-row">
                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>地址&nbsp;</span>
                            </div>
                            <el-form-item prop="addr">
                                <el-input type="" v-model="editQuery.addr" style="width: 80%"
                                          auto-complete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>


                    <el-col :span="10" class="el-col" type="flex">
                        <div class="text item">
                            <div class="itemTag">
                                <span>联系电话&nbsp;</span>
                            </div>
                            <el-form-item prop="mobile">
                                <el-input v-model="editQuery.mobile" auto-complete="off" style="width: 80%"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="el-row">
                    <el-col :span="10" class="el-col" type="flex">
                        <div class="text item">
                            <div class="itemTag">
                                <span>往来单位类型&nbsp;</span>
                            </div>
                            <el-form-item class="query-form-item">
                                <el-select v-model="editQuery.corpType" placeholder="往来单位类型">
                                    <el-option
                                        v-for="item in corpTypeList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>

                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="10" class="el-col" type="flex">
                        <div class="text item">
                            <div class="itemTag">
                                <span>拼音码&nbsp;</span>
                            </div>
                            <el-form-item prop="pinyinCode">
                                <el-input v-model="editQuery.pinyinCode" auto-complete="off"
                                          style="width: 80%"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDialog" size="small">取消</el-button>
                <el-button type="primary" size="small" @click="formSubmit()"
                >提交
                </el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

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

export default {
    data() {
        return {
            query: {
                key: "",
                customerId: this.$store.getters.customerId,
                page: 1,
                limit: 20
            },

            editQuery: {
                unitId: null,
                thirdId: null,
                name: null,
                creditNo: null,
                pinyinCode: null,
                contact: null,
                mobile: null,
                corpType: null
            },
            editLogin: {
                platformId: null,
                platformUsername: null,
                platformPassword: null,
                appid: null,
                appKey: null,
                sceretKey: null
            },
            editPlatfromQuery: {
                id: null,
                name: null,
                host: null
            },
            spellUpdate: true,
            platformVisible: false,
            checked: false,
            editDialogVisible: false,
            list: [],
            platformList: [],
            total: 0,
            multipleSelection: [],
            editType: 0,
            editTypeMap: {
                0: "新增往来单位",
                1: "编辑往来单位",
                2: "关联自助平台"
            },
            corpTypeList: [
                {
                    value: 1,
                    label: "客户"
                },
                {
                    value: 2,
                    label: "供应商"
                },
                {
                    value: 4,
                    label: "特殊往来"
                }
            ],
            coryTypeArr: {
                1: "客户",
                2: "供应商",
                4: "特殊往来"
            }
        };
    },

    methods: {
        onReset() {
            this.$router.push({
                path: ""
            });
            this.query = {
                key: "",
                customerId: this.$store.getters.customerId,
                page: 1,
                limit: 20
            };
            this.getList();
        },
        // 刷新表单
        resetForm() {
            this.$nextTick(() => {
                this.$refs['editQuery'].resetFields();
            });
        },
        search() {
            this.query.page = 1;
            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.getList();
        },

        handleModifyClick(row) {
            this.editType = 1;
            this.editDialogVisible = true;
            this.editQuery = row;
        },
        handleAddClick() {
            this.editType = 0;
            this.editDialogVisible = true;
            this.resetForm();
            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.pinyinCode = 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(() => {
                });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleCurrentChange(val) {
            this.query.page = val;
            this.getList();
        }
    },
    mounted() {
    },
    created() {
        this.getList();
        this.getPlatformList();
    }
};
</script>

<style scoped>
.itemTag {
    float: left;
    text-align: left;
    width: 19%;
    margin-top: 10px;
}

</style>
