<template>
    <div class="common-box">
        <el-form :model="listQuery" ref="queryForm" :inline="true">
            <el-form-item label="供应商" prop="splerName">
                <el-input v-model="listQuery.splerName" placeholder="请输入供应商名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData('search')">查询 </el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table
            v-loading="listLoading"
            element-loading-text="加载中"
            :data="list"
            fit
            stripe
            border
        >
            <template slot="empty">
                <img src="@/assets/nopage.png" alt />
                <p>暂无数据</p>
            </template>
            <el-table-column fixed type="index" label="序号" width="60"/>
            <el-table-column label="编码" prop="id" />
            <el-table-column label="供应商名称" prop="splerName" />
            <el-table-column label="通讯地址" prop="addr" />
            <el-table-column label="联系人" prop="conerName" />
            <el-table-column label="联系电话" prop="tel" />
            <el-table-column label="资质管理" prop="quaMgtFlg" >
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.quaMgtFlg"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="业务状态" prop="bizFlg" >
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.bizFlg"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="160">
                <template slot-scope="scope">
                    <el-popconfirm
                        title="是否年审？"
                        @confirm="handleAudit(scope.row)"
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        icon="el-icon-info"
                        icon-color="red"
                    >
                        <el-button
                            type="text"
                            slot="reference"
                            :disabled="audit"
                            >年审</el-button
                        >
                    </el-popconfirm>
                    <el-popconfirm
                        title="是否更新？"
                        @confirm="handleUpdate(scope.row)"
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        icon="el-icon-info"
                        icon-color="red"
                    >
                        <el-button
                            type="text"
                            slot="reference"
                            :disabled="update"
                            >更新</el-button
                        >
                    </el-popconfirm>
                    <el-button
                        type="text"
                        @click="handleDetail(scope.row)"
                        >详情</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <yl-pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.current"
            :limit.sync="listQuery.size"
            @pagination="getData"
        />
    </div>
</template>

<script>
import ylPagination from "@/components/yl-pagination";
import { getSplerList } from "@/api/supplierManage/index";
    export default {
        components: {
            ylPagination
        },
        data() {
            return {
                listQuery:{
                    current: 1,
                    size: 10,
                    splerName: "",
                },
                listLoading: false,
                list: [],
                total: 0,
                audit: false,
                update: false,
            }
        },
        mounted () {
            this.getData();
        },
        methods: {
            getData(type) {
                if (type == "search") {
                    this.listQuery.current = 1;
                }
                // this.list = [{aa:"11",bb:false,cc:true}];
                // this.total = 1;
                this.listLoading = true;
                getSplerList(this.listQuery).then((res) => {
                    this.list = res.data.records;
                    this.total = res.data.total;
                    this.listLoading = false;
                })
                .catch((err) => {
                    this.listLoading = false;
                });
            },
            reset(){
                this.$refs.queryForm.resetFields();
                this.getData();
            },
            // 年审
            handleAudit(row){
                this.audit = true;
            },
            // 更新
            handleUpdate(row){
                this.update = true;
            },
            // 详情
            handleDetail(row){
                this.$router.push({
                    name: 'supplierMaDetail',
                    query: { splerId: row.id },
                });
            },
        },
    }
</script>

<style lang="scss" scoped>
.el-table__cell:last-of-type span{
    margin-right: 10px;
}
</style>