<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
            @submit.native.prevent
        >
            <el-form-item label="桩号" prop="pileSn">
                <el-input
                    v-model="queryParams.pileSn"
                    placeholder="请输入桩号"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >搜索</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>
        <!-- 切换运营商按钮 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    v-hasPermi="['pile:station:add']"
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="click"
                    >批量修改站点</el-button
                >
            </el-col>
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['pile:basic:batchAdd']"
          >批量新增</el-button
          >
        </el-row>

        <el-table
            v-loading="loading"
            :data="pileList"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="桩号" align="center" prop="sn">
                <template slot-scope="scope">
                    <router-link
                        :to="'/pile/detail/index/' + scope.row.pileId"
                        class="link-type"
                    >
                        <span>{{ scope.row.pileSn }}</span>
                    </router-link>
                </template>
            </el-table-column>
            <el-table-column label="运营类型" align="center" prop="businessType">
                <template slot-scope="scope">
                    <dict-tag
                        :options="dict.type.pile_business_type"
                        :value="scope.row.businessType"
                    />
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="status">
                <template slot-scope="scope">
                    <dict-tag
                        :options="dict.type.pile_status"
                        :value="scope.row.status"
                    />
                </template>
            </el-table-column>
            <el-table-column label="接口数量" align="center" prop="gunNum" />
            <el-table-column label="密钥" align="center" prop="secretKey" />
            <el-table-column label="电桩类型" align="center" prop="pileType">
                <template slot-scope="scope">
                    <dict-tag
                        :options="dict.type.connector_type"
                        :value="scope.row.pileType"
                    />
                </template>
            </el-table-column>
            <el-table-column
                label="运营商"
                align="center"
                prop="merchantName"
            />
            <el-table-column label="充电站" align="center" prop="stationName" />
            <el-table-column
                label="注册时间"
                align="center"
                prop="registrationTime"
            />
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getPileList"
        />

        <!-- 修改充电桩站点 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="45%"
            append-to-body
            :before-close="handleClose"
        >
            <el-form ref="form" :model="updateData" label-width="120px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="已选择的桩">
                            <el-tag
                                v-for="tag in updateData.pileSnList"
                                :key="tag"
                            >
                                {{ tag }}
                            </el-tag>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="运营商">
                            <el-select
                                v-model="updateData.merchantId"
                                placeholder="请选择运营商"
                                @change="
                                    changeSelectMerchant(updateData.merchantId)
                                "
                            >
                                <el-option
                                    v-for="item in merchantList"
                                    :key="item.merchantName"
                                    :label="item.merchantName"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="站点" prop="stationId">
                            <el-select
                                v-model="updateData.stationId"
                                placeholder="请选择站点"
                                filterable
                            >
                                <el-option
                                    v-for="item in stationList"
                                    :key="item.id"
                                    :label="item.stationName"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="产品型号" prop="modelId">
                            <el-select
                                v-model="updateData.modelId"
                                filterable
                                placeholder="请选择产品型号"
                                v-selectLoadMore="selectLoadMore"
                            >
                                <el-option
                                    v-for="item in modelList"
                                    :key="item.modelName"
                                    :label="item.modelName"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="枪口数量" prop="connectorNum">
                            <el-input
                                v-model="updateData.connectorNum"
                                placeholder="请输入枪口数量"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="batchUpdate">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { batchUpdatePileList, listBasic } from "@/api/pile/basic";
import { getMerchantList } from "@/api/pile/merchant";
import { getStationListByMerchantId } from "@/api/pile/station";
import { listModel } from "@/api/pile/model";

export default {
    name: "PileList",
    dicts: ["pile_status", "software_protocol", "connector_type", "pile_business_type"],
    props: {
        stationId: "",
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 总条数
            total: 0,
            // 显示搜索条件
            showSearch: true,
            // 查询参数
            queryParams: {
                stationId: null,
                pageNum: 1,
                pageSize: 10,
                pileSn: null,
            },
            pileList: [],
            // 选中数组
            ids: [],
            // 是否显示弹出层
            open: false,
            // 弹出层标题
            title: "",
            // 运营商列表
            merchantList: [],
            // 站点列表
            stationList: [],
            // 更新站点参数
            updateData: {
                merchantId: null,
                stationId: null,
                pileIdList: [],
                pileSnList: [],
                connectorNum: null,
                modelId: null,
            },
            // 型号列表
            modelList: [],
            modelTotal: 0,
            loadMoreFlag: true,
            searchModelParam: {
                name: "",
                pageNo: 1,
                pageSize: 10,
            },
        };
    },
    created() {
        // this.getPileList();
    },
    methods: {
        // 下拉加载更多
        selectLoadMore() {
            console.log("触底了 ", this.searchModelParam.pageSize);
            if (this.loadMoreFlag === false) {
                return;
            }
            this.searchModelParam.pageSize =
                this.searchModelParam.pageSize + 10;
            console.log("触底了执行查询", this.searchModelParam);
            this.getModelList();
        },

        // 远程搜索
        // remoteMethod(val) {
        //     console.log("输入了", val);
        //     this.loading = true;
        //     this.search.name = val;
        //     this.search.start = 1;
        //     this.list = [];
        //     setTimeout(() => {
        //         this.loading = false;
        //         this.getModelList();
        //     }, 500);
        // },

        // 分页查询
        getModelList() {
            listModel(this.searchModelParam).then((response) => {
                console.log("分页查询response", response);
                this.modelTotal = response.total;
                this.modelList = response.rows;
                this.loadMoreFlag =
                    this.searchModelParam.pageSize <= this.modelTotal;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getPileList();
        },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.getMerchantList();
        this.title = "批量添加设备";
        this.open = true;
        this.getModelList();
      },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
            };
            // this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 查询充电桩列表 */
        getPileList() {
            this.loading = true;
            this.queryParams.stationId = this.stationId;
            listBasic(this.queryParams).then((response) => {
                this.pileList = response.rows;
                this.total = response.total;
                this.loading = false;
                // console.log(this.pileList);
            });
        },
        getMerchantList() {
            getMerchantList().then((response) => {
                this.merchantList = response.rows;
            });
        },
        changeSelectMerchant(value) {
            console.log(value);
            // 通过接口查
            getStationListByMerchantId(value).then((response) => {
                this.stationList = response.data;
            });
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            // console.log(selection);
            this.updateData.pileSnList = selection.map((item) => item.pileSn);
            this.updateData.pileIdList = selection.map((item) => item.pileId);
            // console.log(this.updateData.pileIdList);
        },
        /** 按钮操作 */
        click() {
            if (this.updateData.pileIdList.length === 0) {
                return this.$message({
                    message: "请选择充电桩",
                    type: "warning",
                });
            }
            this.getMerchantList();
            this.getModelList();
            this.reset();
            this.open = true;
            this.title = "更换站点";
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
            this.stationList = [];
        },
        // 点击弹框右上角×
        handleClose() {
            this.open = false;
            this.reset();
            this.stationList = [];
        },
        reset() {
            this.updateData.merchantId = null;
            this.updateData.stationId = null;
            this.updateData.modelId = null;
            this.updateData.connectorNum = null;
        },
        batchUpdate() {
            if (this.updateData.merchantId === null) {
                return this.$message({
                    message: "请选择运营商",
                    type: "warning",
                });
            }
            if (this.updateData.stationId === null) {
                return this.$message({
                    message: "请选择站点",
                    type: "warning",
                });
            }
            console.log("点击批量更新", this.updateData);
            this.loading = true;
            batchUpdatePileList(this.updateData)
                .then((response) => {
                    this.loading = false;
                    this.$message({
                        message: "操作成功",
                        type: "success",
                    });
                    this.open = false;
                    this.getPileList();
                    this.stationList = [];
                })
                .catch((error) => {
                    this.loading = false;
                    console.log(error);
                });
        },
    },
};
</script>

<style>
.el-tag {
    margin-left: 10px;
}
</style>
