<template>
    <div class="app-container data-sim-card">
        <el-card class="main-card">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
                <el-form-item label="卡号" prop="iccId">
                    <el-input v-model="queryParams.iccId" placeholder="请输入所查询的卡号" clearable
                        @keyup.enter.native="handleQuery" />
                </el-form-item>

                <el-form-item label="套餐名称" prop="iratePlanName">
                    <el-input v-model="queryParams.iratePlanName" placeholder="请输入套餐名称" clearable
                        @keyup.enter.native="handleQuery" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search')
                        }}</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset')
                    }}</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="main-card" v-if="showType == 'list'">
            <div class="card-toolbar">
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
                            v-hasPermi="['snCard:dataSimCard:add']">{{ $t('add') }}</el-button>
                    </el-col>
                    <el-col :span="8">
                        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple"
                            @click="handleDelete" v-hasPermi="['snCard:dataSimCard:remove']">删除</el-button>
                    </el-col>
                    <el-col :span="8">
                        <el-dropdown @command="(command) => handleCommand1(command)">
                            <el-button size="mini" type="primary" v-hasPermi="['iot:zutai:assignment']">
                                分配
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="handleSelectAllot"
                                    v-hasPermi="['iot:zutai:assignment']">选择分配</el-dropdown-item>
                                <!--                    <el-dropdown-item command="handleImportAllot">导入分配</el-dropdown-item>-->
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>

                <div style="display: flex" class="right-toolbar">
                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
                    <el-radio-group class="mr20" plain size="mini" v-model="showType">
                        <el-radio-button label="card"><i class="el-icon-menu"></i></el-radio-button>
                        <el-radio-button label="list"><i class="el-icon-s-fold"></i></el-radio-button>
                    </el-radio-group>
                </div>
            </div>
            <el-table class="base-table" v-loading="loading" :data="cardList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="主键ID" align="center" prop="id" v-if="false" />
                <el-table-column label="卡号" align="center" prop="iccId" width="180px" />
                <!-- <el-table-column label="msisdn" align="center" prop="msisdn" width="180px" />
                <el-table-column label="imsi" align="center" prop="imsi" width="180px" /> -->
                <el-table-column label="卡状态" align="center" prop="status">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status === 'testing'">测试中</span>
                        <span v-if="scope.row.status === 'inventory'">库存</span>
                        <span v-if="scope.row.status === 'pending-activation'">待激活</span>
                        <span v-if="scope.row.status === 'activation'">已激活</span>
                        <span v-if="scope.row.status === 'deactivation'">已停卡</span>
                        <span v-if="scope.row.status === 'retired'">已销卡</span>
                    </template>
                </el-table-column>

                <el-table-column label="套餐名称" align="center" prop="iratePlanName" />
                <el-table-column label="卡本月用量(MB)" align="center" prop="dataUsage" />
                <el-table-column label="卡套餐大小(MB)" align="center" prop="totalDataVolume" />
                <el-table-column label="卡套餐用量(MB)" align="center" prop="usedDataVolume" />
                <el-table-column label="运营商" align="center" prop="carrier" />
                <!-- <el-table-column label="创建时间" align="center" prop="createTime">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                    </template>
                </el-table-column> -->

                <el-table-column label="操作" align="center" width="240">
                    <template slot-scope="scope">
                        <el-button plain size="small" type="primary" style="padding: 5px; margin: 0" icon="el-icon-edit"
                            @click="stop(scope.row)" v-hasPermi="['snCard:dataSimCard:stop']">停卡</el-button>
                        <el-button plain size="small" type="primary" style="padding: 5px; margin: 0" icon="el-icon-edit"
                            @click="openCard(scope.row)" v-hasPermi="['snCard:dataSimCard:stop']">激活</el-button>
                        <el-button plain size="small" type="primary" style="padding: 5px; margin: 0" icon="el-icon-edit"
                            @click="handleDetail(scope.row)" v-hasPermi="['snCard:dataSimCard:query']">查看</el-button>
                        <el-button plain size="small" type="danger" style="padding: 5px; margin: 0"
                            icon="el-icon-delete" @click="handleDelete(scope.row)"
                            v-hasPermi="['snCard:dataSimCard:remove']">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
        </el-card>
        <el-card class="main-card" v-else>
            <div class="card-toolbar">
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
                            v-hasPermi="['snCard:dataSimCard:add']">{{ $t('add') }}</el-button>
                    </el-col>
                    <el-col :span="8">
                        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple"
                            @click="handleDelete" v-hasPermi="['snCard:dataSimCard:remove']">删除</el-button>
                    </el-col>
                    <el-col :span="8">
                        <el-dropdown @command="(command) => handleCommand1(command)">
                            <el-button size="mini" type="primary" v-hasPermi="['iot:zutai:assignment']">
                                分配
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="handleSelectAllot"
                                    v-hasPermi="['iot:zutai:assignment']">选择分配</el-dropdown-item>
                                <!--                    <el-dropdown-item command="handleImportAllot">导入分配</el-dropdown-item>-->
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>

                <div style="display: flex" class="right-toolbar">
                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
                    <el-radio-group class="mr20" plain size="mini" v-model="showType">
                        <el-radio-button label="card"><i class="el-icon-menu"></i></el-radio-button>
                        <el-radio-button label="list"><i class="el-icon-s-fold"></i></el-radio-button>
                    </el-radio-group>
                </div>
            </div>
            <el-row :gutter="30" v-loading="loading">
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" v-for="(item, index) in cardList" :key="index"
                    style="margin-bottom: 30px; text-align: center">
                    <el-card :body-style="{ padding: '20px' }" shadow="always" class="card-item">
                        <el-row type="flex" :gutter="10" justify="space-between">
                            <el-descriptions :column="1" size="mini" style="white-space: nowrap"
                                :contentStyle="{ background: 'none' }">
                                <el-descriptions-item label="卡号">
                                    {{ item.iccId }}
                                </el-descriptions-item>
                                <el-descriptions-item label="运营商">
                                    {{ item.carrier }}
                                </el-descriptions-item>
                                <el-descriptions-item label="套餐名称">
                                    {{ item.iratePlanName }}
                                </el-descriptions-item>
                                <el-descriptions-item label="套餐大小（M）">
                                    {{ item.totalDataVolume === '' || item.totalDataVolume === null ? 0 :
                                        item.totalDataVolume
                                    }}
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-row>
                        <el-button-group style="margin-top: 15px">
                            <el-button class="detail-btn" icon="el-icon-view" size="mini" @click="stop(item)"
                                v-hasPermi="['snCard:dataSimCard:stop']">停卡</el-button>
                            <el-button class="success-btn" icon="el-icon-view" size="mini" @click="openCard(item)"
                                v-hasPermi="['snCard:dataSimCard:stop']">激活</el-button>
                            <el-button class="delete-btn" icon="el-icon-delete" size="mini"
                                @click="handleDelete(scope.row)"
                                v-hasPermi="['snCard:dataSimCard:remove']">删除</el-button>
                            <el-button class="detail-btn" icon="el-icon-view" size="mini" @click="handleDetail(item)"
                                v-hasPermi="['snCard:dataSimCard:query']">查看</el-button>
                        </el-button-group>
                    </el-card>
                </el-col>
            </el-row>
            <el-empty description="暂无数据，请添加" v-if="total == 0"></el-empty>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" :pageSizes="[12, 24, 36, 60]" @pagination="getList" />
        </el-card>

        <!-- 查看流量卡详细信息对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" disabled>
                <el-form-item label="所查询的iccid" prop="iccId">
                    <el-input v-model="form.iccId" />
                </el-form-item>
                <el-form-item label="所查询的imsi" prop="imsi">
                    <el-input v-model="form.imsi" />
                </el-form-item>
                <el-form-item label="所查询的msisdn" prop="msisdn">
                    <el-input v-model="form.msisdn" />
                </el-form-item>
                <el-form-item label="卡当前套餐名称" prop="iratePlanName">
                    <el-input v-model="form.iratePlanName" />
                </el-form-item>
                <!--                <el-form-item label="卡当前套餐ID" prop="ratePlanId">
                    <el-input v-model="form.ratePlanId" />
                </el-form-item>-->
                <el-form-item label="卡本月用量" prop="dataUsage">
                    <el-input v-model="form.dataUsage" />
                </el-form-item>
                <el-form-item label="卡套餐大小" prop="totalDataVolume">
                    <el-input v-model="form.totalDataVolume" />
                </el-form-item>
                <el-form-item label="卡套餐用量" prop="usedDataVolume">
                    <el-input v-model="form.usedDataVolume" />
                </el-form-item>
                <el-form-item label="卡套餐单位" prop="useCountAsVolume">
                    <el-input v-model="form.useCountAsVolume" />
                </el-form-item>
                <!--                <el-form-item label="卡实名信息" prop="realName">
                    <el-input v-model="form.realName" />
                </el-form-item>
                <el-form-item label="卡实名需求" prop="realNameRequired">
                    <el-input v-model="form.realNameRequired" />
                </el-form-item>-->
                <el-form-item label="运营商" prop="carrier">
                    <el-input v-model="form.carrier" />
                </el-form-item>
                <el-form-item label="出库时间" prop="openDate">
                    <el-date-picker clearable v-model="form.openDate" type="date"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="激活宽限期" prop="activeDuration">
                    <el-input v-model="form.activeDuration" />
                </el-form-item>
                <el-form-item label="流量池id" prop="cardPoolid">
                    <el-input v-model="form.cardPoolid" />
                </el-form-item>
                <el-form-item label="测试期结束时间" prop="testingExpireDate">
                    <el-date-picker clearable v-model="form.testingExpireDate" type="date"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="套餐生效时间" prop="ratePlanEffetiveDate">
                    <el-date-picker clearable v-model="form.ratePlanEffetiveDate" type="date"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="套餐过期时间" prop="ratePlanExpirationDate">
                    <el-date-picker clearable v-model="form.ratePlanExpirationDate" type="date"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="是否NB卡" prop="nbCard">
                    <el-input v-model="form.nbCard" />
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 新增流量卡对话框 -->
        <el-dialog :title="title" :visible.sync="add" width="500px" append-to-body>
            <el-form ref="form2" :model="form2" :rules="addRules" label-width="100px">
                <el-form-item label="appsecret" prop="appSecret">
                    <el-input v-model="form2.appSecret" />
                </el-form-item>
                <el-form-item label="appid" prop="appId">
                    <el-input v-model="form2.appId" />
                </el-form-item>

                <el-form-item label="iccId" prop="iccId">
                    <el-input v-model="form2.iccId" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { selectDataSimCardFpList, stopCard, addCard, delCard, getInfoCard } from '@/api/snCard/dataSimCard';

export default {
    name: 'Card',
    data() {
        return {
            showType: 'list',
            //
            add: false,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 流量卡表格数据
            cardList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                iccId: null,
                imsi: null,
                msisdn: null,
                type: null,
                status: null,
                iratePlanName: null,
                ratePlanId: null,
                dataUsage: null,
                totalDataVolume: null,
                usedDataVolume: null,
                useCountAsVolume: null,
                realName: null,
                realNameCertifyStatus: null,
                realNameRequired: null,
                carrier: null,
                functions: null,
                deviceStatus: null,
                openDate: null,
                activeDuration: null,
                cardPoolid: null,
                testingExpireDate: null,
                ratePlanEffetiveDate: null,
                ratePlanExpirationDate: null,
                nbCard: null,
            },
            // 表单参数
            form: {},

            // 表单参数
            form2: {},
            // 表单校验
            rules: {},
            addRules: {
                appSecret: [
                    {
                        required: true,
                        message: 'appSecret不能为空',
                        trigger: 'blur',
                    },
                ],
                appId: [
                    {
                        required: true,
                        message: 'appId不能为空',
                        trigger: 'blur',
                    },
                ],
                iccId: [
                    {
                        required: true,
                        message: 'iccId不能为空',
                        trigger: 'blur',
                    },
                ],
            },
        };
    },
    created() {
        this.getList();
    },
    methods: {
        /** 查询流量卡列表 */
        getList() {
            this.loading = true;
            selectDataSimCardFpList(this.queryParams).then((response) => {
                this.cardList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.add = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                iccId: null,
                imsi: null,
                msisdn: null,
                type: null,
                status: null,
                iratePlanName: null,
                ratePlanId: null,
                dataUsage: null,
                totalDataVolume: null,
                usedDataVolume: null,
                useCountAsVolume: null,
                realName: null,
                realNameCertifyStatus: null,
                realNameRequired: null,
                carrier: null,
                functions: null,
                deviceStatus: null,
                openDate: null,
                activeDuration: null,
                cardPoolid: null,
                testingExpireDate: null,
                ratePlanEffetiveDate: null,
                ratePlanExpirationDate: null,
                nbCard: null,
                createTime: null,
            };
            this.resetForm('form');

            this.form2 = {
                id: null,
                appSecret: null,
                appId: null,
                iccId: null,
            };
            this.resetForm('form2');
        },
        /** 切换显示方式 */
        handleChangeShowType() {
            this.showType = this.showType == 'card' ? 'list' : 'card';
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm');
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.add = true;
            this.title = '添加流量卡';
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal
                .confirm('是否确认删除流量卡编号为"' + ids + '"的数据项？')
                .then(function () {
                    return delCard(ids);
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess('删除成功');
                })
                .catch(() => { });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs['form2'].validate((valid) => {
                if (valid) {
                    if (this.form2.id != null) {
                    } else {
                        addCard(this.form2).then((response) => {
                            console.log(response.success);
                            if (response.success) {
                                this.$modal.msgSuccess('新增成功');
                                this.open = false;
                                this.getList();
                            } else {
                                this.$modal.msg('此流量卡已存在');
                            }
                        });
                    }
                }
            });
        },

        /**
         * 停卡按钮操作
         * @param row
         */
        stop(row) {
            this.reset();
            const id = row.id || this.ids;
            stopCard(id, 'DEACTIVATED_NAME').then((response) => {
                this.$modal.msgSuccess('停卡成功');
                this.getList();
            });
        },
        openCard(row) {
            this.reset();
            const id = row.id || this.ids;
            stopCard(id, 'ACTIVATED_NAME').then((response) => {
                this.$modal.msgSuccess('卡激活成功');
                this.getList();
            });
        },

        /** 查看按钮操作 */
        handleDetail(row) {
            /**
             * 查看逻辑 每次获取最新的数据
             */
            this.reset();
            const id = row.id || this.ids;
            // 请求流量卡新增接口 添加一条数据

            getInfoCard(id).then((response) => {
                this.form = response.data;
                this.open = true;
                this.title = '查看流量卡详细信息';
                this.getList();
            });
        },
        // 分配组态更多操作触发
        handleCommand1(command) {
            switch (command) {
                case 'handleSelectAllot':
                    this.handleSelectAllot();
                    break;
                case 'handleImportAllot':
                    alert('开发中!!!');
                    break;
                default:
                    break;
            }
        },
        //跳转选择分配设备页面
        handleSelectAllot() {
            const obj = {
                path: '/iotdev/snCard/dataSimCardAllot',
            };
            console.log(obj);
            this.$tab.closeOpenPage(obj);
        },
    },
};
</script>
<style lang="scss">
.data-sim-card {
    .card-item {
        background-image: linear-gradient(rgb(233, 241, 252), rgb(254, 254, 254));
        border: 0px;
        --font-grey: #606266;
        --success-color: #67c23b;
        --primary-color: #0147eb;

        .el-descriptions__body {
            background: none;
        }

        .el-button {
            background: #f5f7fa;
            border-color: #f5f7fa;
            color: #333;
            font-weight: bold;
            margin-left: 3px;

            &.detail-btn {
                color: var(--primary-color);
            }

            &.delete-btn {
                color: #ff6363;
            }

            &.success-btn {
                color: var(--success-color);
            }

            &:hover {
                border-color: var(--primary-color);
                color: var(--primary-color);
            }
        }
    }

    .right-toolbar .top-right-btn {
        float: none;
    }
}
</style>