<template>
    <div>
        <!-- 产业标签 -->
        <!-- 表单查询项 -->
        <div class="headerbox">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                label-width="200">
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="企业名称" style="width: 100%;">
                            <el-input v-model="queryParams.name" placeholder="请输入企业名称" clearable
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="标签代码" style="width: 100%;">
                            <el-input v-model="queryParams.bqdm" placeholder="请输入标签代码" clearable
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="标签状态" style="width: 100%;">
                            <el-input v-model="queryParams.bqzt" placeholder="请输入标签状态" clearable
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="用户类型">
                            <el-input v-model="queryParams.yhlx" placeholder="请输入用户类型" clearable
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 表格内容区 -->
        <div class="tablebox">
            <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange" stripe>
                <el-table-column label="序号" align="center">
                    <template slot-scope="scope">
                        {{ (scope.$index + 1) + (queryParams.current - 1) * queryParams.size }}
                    </template>
                </el-table-column>
                <el-table-column label="企业名称" align="center" prop="name" width="200" />
                <el-table-column label="统一信用代码" align="center" prop="tyshxydm" width="200" />
                <el-table-column label="标签代码" align="center" prop="bqdm" />
                <el-table-column label="有效状态" align="center" prop="state" width="200" />
                <el-table-column label="用户类型" align="center" width="130" prop="yhlx" />
                <el-table-column label="标签注释" align="center" width="180" prop="bqzs" />
                <el-table-column label="标签状态" align="center" prop="bqzt" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" @click="getAdd(scope.row, 'detail')">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.current"
                :limit.sync="queryParams.size" @pagination="getList" />
        </div>

        <!-- 详情弹窗 -->
        <el-dialog title="详情" :visible.sync="dialogVisible" width="50%">
            <el-form :model="detailData" label-width="200px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="企业名称:">
                            <span>{{ detailData.name }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="统一信用代码:">
                            <span>{{ detailData.tyshxydm }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="标签标记场景代码:">
                            <span>{{ detailData.bqdm }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="标签代码:">
                            <span>{{ detailData.state }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="标签值编码：">
                            <span>{{ detailData.bqzbm }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="有效状态：">
                            <span>{{ detailData.state }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="标签注释：">
                            <span>{{ detailData.bqzs }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户类型：">
                            <span>{{ detailData.yhlx }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="标签标记用户：">
                            <span>{{ detailData.bqzt }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="标签标记单位：">
                            <span>{{ detailData.bqbjdw }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="标签状态：">
                            <span>{{ detailData.bqzt }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="数据来源名称：">
                            <span>{{ detailData.sjlymc }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getCybqInformationPage, getSpanById } from "@/api/ManageApi/index";
import { checkPermi, checkRole } from "@/utils/permission";

export default {
    dicts: ["xzfl"],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 项目表格数据
            postList: [],
            // 查询参数
            queryParams: {
                current: 1,
                size: 10,
                bqdm: undefined,
                bqzt: undefined,
                yhlx: undefined,
                name: undefined,
                startTime: undefined,
                endTime: undefined,
                status: undefined,
            },
            // 弹窗显示控制
            dialogVisible: false,
            // 详情数据
            detailData: {}
        };
    },
    created() {
        this.getList();
    },
    methods: {
        checkPermi,
        checkRole,
        /** 查询项目列表 */
        getList() {
            this.loading = true;

            //api
            getCybqInformationPage(this.queryParams).then((response) => {
                this.postList = [...response.data.records];
                this.total = response.data.total;
                this.loading = false;
            }).catch();
        },

        // 当选择项发生变化时会触发该事件
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },

        /** 详情按钮操作 */
        /** 详情按钮操作 */
        getAdd(row) {
            this.loading = true;
            getSpanById(row.id).then((response) => {
                this.detailData = response.data;
                this.dialogVisible = true;
                this.loading = false;
            }).catch((error) => {
                this.$message.error("获取详情失败：" + error.message);
                this.loading = false;
            });
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                current: 1,
                size: 10,
                bqdm: undefined,
                bqzt: undefined,
                yhlx: undefined,
                name: undefined,
                startTime: undefined,
                endTime: undefined,
                status: undefined,
            };
            this.getList();
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.current = 1;
            this.getList();
        }
    }
};
</script>

<style scoped>
.headerbox {
    background-color: #fff;
    border-radius: .5rem;
    padding: 1rem;
    margin: .5rem;
    border: 1px solid #eee;
}

.tablebox {
    background-color: #fff;
    border-radius: .5rem;
    padding: 1rem;
    margin: .5rem;
    border: 1px solid #eee;
}

.tablehead {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.headbtn {
    display: flex;
}

.tablebtntwo {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
</style>