<template>
    <div>
        <el-card>
            <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
                <el-row>
                    <el-form-item class="query-form-item">
                        <el-input
                            v-model="filterQuery.companyName"
                            placeholder="企业名称"
                        ></el-input>
                    </el-form-item>
                    <el-form-item class="query-form-item">
                        <el-input
                            v-model="filterQuery.creditNum"
                            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="onSubmit"
                            >查询
                            </el-button
                            >


                        </el-button-group>
                    </el-form-item>
                </el-row>
            </el-form>

            <el-table v-loading="loading" :data="list" style="width: 100%">
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column
                    label="企业名称"
                    prop="companyName"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="社会信用号"
                    prop="creditNum"
                ></el-table-column>
                <el-table-column
                    label="企业法人"
                    prop="contacts"
                ></el-table-column>
                <el-table-column label="所属地区" prop="area">
                </el-table-column>
                <el-table-column
                    label="详细地址"
                    prop="detailAddr"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>

                <el-table-column label="审核状态" prop="auditStatus" width="120">
                    <template slot-scope="scope">

                        <el-tag :type="(scope.row.auditStatus) | statusFilterType">
                            {{ checkFlag[scope.row.auditStatus] }}
                        </el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="操作" fixed="right" width="120">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            :disabled="scope.row.auditStatus !=6"
                            @click.native.stop="editCompany(scope.row)"
                        >审核
                        </el-button>


                        <el-button
                            type="text"
                            size="small"
                            :disabled="scope.row.auditStatus !=6"
                            @click.native.stop="editCompany(scope.row)"
                        >详情
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                :page-size="filterQuery.limit"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="total"
            ></el-pagination>
        </el-card>

        <el-dialog
            :title="formMap[formName]"
            :visible.sync="supCompanyVisible"
            width="80%"
            v-if="supCompanyVisible"
            @close='closeDialog'
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <supCompanyEditAdudit
                :closeDialog="closeDialog"
                :inputQuery="inputQuery"
                :editType="editType"
            ></supCompanyEditAdudit>
        </el-dialog>

    </div>
</template>

<script>
import {getSupComapnys, delSupComapnys} from "@/api/purchase/supCompany";
import supCompanyEditAdudit from "./supCompanyAduditDialog";

export default {
    data() {
        return {
            filterQuery: {
                companyName: "",
                checkType: "",
                creditNum: "",
                auditStatus: "21",
                page: 1,
                limit: 20,
            },
            loading: false,
            list: [],
            total: 0,
            formName: "add",
            formMap: {
                1: "供应商企业资质详情",
                2: "供应商企业资质审核",
            },


            checkFlag: {
                0: "未提交",
                1: "已通过",
                2: "已拒绝",
                6: "未审核",
            },

            supCompanyVisible: false,
            inputQuery: {},
            editType: 0,            //0:新增，1：编辑

        };
    },
    filters: {


        statusFilterType(status) {
            const statusMap = {
                0: "warning",
                1: "success",
                2: "danger",
                6: "warning",
            };
            return statusMap[status];
        },
        statusFilterName(status) {
            const statusMap = {
                0: "禁用",
                1: "正常",
                2: "未验证",
            };
            return statusMap[status];
        },
    },
    methods: {
        onReset() {
            this.$router.push({
                path: "",
            });
            this.filterQuery = {
                companyName: "",
                creditNum: "",
                auditStatus: "21",
                page: 1,
                limit: 20,
            };
            this.getList();
            this.productList = [];
            this.salesmanList = [];
        },
        getList() {
            this.loading = true;
            getSupComapnys(this.filterQuery)
                .then((response) => {
                    console.log(response)
                    this.loading = false;
                    this.list = response.data.list || [];
                    this.total = response.data.total || 0;
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.total = 0;
                });
        },

        onSubmit() {
            this.getList();
        },


        editCompany(row) {
            this.supCompanyVisible = true;
            this.formName = "edit";
            this.editType = 2;
            this.inputQuery = row;
        },

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

        deleteDialog(row) {
            this.$confirm("删除后将清空该供应商以及所有关联信息?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let tQuery = {
                        id: row.customerId,
                    };
                    delSupComapnys(tQuery).then(() => {
                        this.getList();
                    });
                })
                .catch(() => {
                });
        },

        closeDialog() {
            this.supCompanyVisible = false;
        },

    },
    components: {
        supCompanyEditAdudit,
    }
    ,

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