<template>
    <div>
        <el-card style="margin: 10px">
            <el-row :gutter="10">
                <i class="el-icon-arrow-left" @click="goBack()"></i>
                <el-divider direction="vertical"></el-divider>
                <span>分配流量卡</span>
            </el-row>
            <el-divider></el-divider>
            <div style="width: 70%">
                <el-row>
                    <el-form ref="queryForm" :model="queryParams">
                        <el-col :span="6">
                            <el-form-item prop="iccId">
                                <el-input v-model="queryParams.iccId" :placeholder="'请输入所查询的卡号'" clearable
                                    style="width: 95%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button icon="el-icon-search" type="primary" @click="handleQuery">查询</el-button>
                        </el-col>
                        <el-button icon="el-icon-refresh-left" style="margin-left: 5px" @click="resetQuery">{{
                            $t('reset') }}</el-button>
                    </el-form>
                </el-row>
            </div>
            <div class="general">
                <div class="topLeft">
                    <div style="padding: 10px 10px; background-color: #f8f8f9">
                        <span style="font-size: 15px; font-weight: bold">所有流量卡</span>
                        <span style="font-size: 15px; font-weight: bold; float: right">{{ selectedCount }}/{{ this.count
                            }}</span>
                    </div>
                    <el-row>
                        <el-table :border="false" ref="leftTableData" :data="menuTableData" max-height="373"
                            style="width: 100%" @selection-change="changeCheckBoxValueLeft">
                            <template slot="empty">
                                <el-empty :image-size="100" description="暂无数据"></el-empty>
                            </template>
                            <el-table-column :selectable="checkSelectable" type="selection"
                                width="55"></el-table-column>
                            <el-table-column v-if="false" align="center" label="主键ID" prop="id" />
                            <el-table-column align="center" label="卡号" prop="iccId" />
                            <el-table-column align="center" label="msisdn" prop="msisdn" />
                            <el-table-column align="center" label="imsi" prop="imsi" />
                            <el-table-column align="center" label="卡状态" 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 align="center" label="套餐名称" prop="iratePlanName" />
                            <el-table-column align="center" label="卡本月用量(MB)" prop="dataUsage" />
                            <el-table-column align="center" label="卡套餐大小(MB)" prop="totalDataVolume" />
                            <el-table-column align="center" label="卡套餐用量(MB)" prop="usedDataVolume" />
                            <el-table-column align="center" label="运营商" prop="carrier" />
                            <el-table-column align="center" label="创建时间" prop="createTime" width="180">
                                <template slot-scope="scope">
                                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                </div>
                <div class="topCenter">
                    <el-button :disabled="add" type="primary" @click="rightAdd"><i
                            class="el-icon-arrow-right el-icon--right"></i></el-button>
                    <el-button :disabled="del" type="primary" @click="leftDelete"><i
                            class="el-icon-arrow-left el-icon--left"></i></el-button>
                </div>
                <div class="topRight">
                    <div style="padding: 10px 10px; background-color: #f8f8f9">
                        <span style="font-size: 15px; font-weight: bold">已选流量卡</span>
                        <span style="font-size: 15px; font-weight: bold; float: right">{{ selectedCount1 }}/500</span>
                    </div>
                    <el-row>
                        <el-table :border="false" ref="rightTableData" :data="rightTableData" max-height="373"
                            style="width: 100%" @selection-change="changeCheckBoxValueRight">
                            <template slot="empty">
                                <el-empty :image-size="100" description="暂无数据"></el-empty>
                            </template>
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column v-if="false" align="center" label="主键ID" prop="id" />
                            <el-table-column align="center" label="卡号" prop="iccId" />
                            <el-table-column align="center" label="msisdn" prop="msisdn" />
                            <el-table-column align="center" label="imsi" prop="imsi" />
                            <el-table-column align="center" label="卡状态" 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 align="center" label="套餐名称" prop="iratePlanName" />
                            <el-table-column align="center" label="卡本月用量(MB)" prop="dataUsage" />
                            <el-table-column align="center" label="卡套餐大小(MB)" prop="totalDataVolume" />
                            <el-table-column align="center" label="卡套餐用量(MB)" prop="usedDataVolume" />
                            <el-table-column align="center" label="运营商" prop="carrier" />
                            <el-table-column align="center" label="创建时间" prop="createTime" width="180">
                                <template slot-scope="scope">
                                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                </div>
            </div>
            <div class="pagination-container">
                <pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum"
                    :pageSizes="[10, 20, 30, 40]" :pager-count="5" :total="total" @pagination="getlist" />
            </div>
            <div style="width: 100%">
                <el-form ref="allotForm" :model="allotForm" :rules="allotRules" label-position="top">
                    <div style="width: 45%; margin: 60px 0">
                        <el-form-item label="目标机构" prop="deptId">
                            <treeselect v-model="allotForm.deptId" :appendToBody="true" :options="deptOptions"
                                :show-count="true" placeholder="请选择目标机构" z-index="9000" />
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </el-card>
        <div class="footer">
            <el-button type="primary" @click="confirmDistribution">确定分配</el-button>
        </div>
    </div>
</template>
<script type="text/javascript">
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import { deptsTreeSelect } from '@/api/system/user';
import { selectDataSimCardFpList, distributionDataSimCard } from '@/api/snCard/dataSimCard';

export default {
    components: {
        Treeselect,
    },
    data() {
        return {
            total: 0,
            queryParams: {
                iccId: null,
                pageNum: 1,
                pageSize: 10,
            },
            count: 0,
            //导入表单
            allotForm: {
                deptId: 0,
            },
            dataSimCardIds: {},
            selectedCount: 0,
            // 机构树选项
            deptOptions: [],
            selectedRow: null,
            add: true,
            del: true,
            leftTableData: [],
            rightTableData: [],
            selectedListLeft: [], //点击左边选中的组态
            selectedListRight: [], //点击右边选中的组态
            menuTableData: [],
            //导入分配表单校验
            allotRules: {
                deptId: [{ required: true, message: '目标机构不能为空', trigger: 'change' }],
            },
        };
    },
    created() {
        this.getDeptTree();
        this.getlist();
    },
    computed: {
        selectedCount1() {
            return this.rightTableData.length;
        },
    },
    watch: {
        selectedListLeft: function (val) {
            if (val.length) {
                this.add = false;
            } else {
                this.add = true;
            }
        },
        selectedListRight: function (val) {
            if (val.length) {
                this.del = false;
            } else {
                this.del = true;
            }
        },
    },
    methods: {
        //获取
        getlist() {
            this.loading = true;
            console.log(this);
            selectDataSimCardFpList(this.queryParams).then((response) => {
                this.menuTableData = response.rows;
                //isSelect用于判断是否可选
                this.menuTableData.map((item) => {
                    this.leftTableData.push(
                        Object.assign(item, {
                            isSelect: 0,
                        })
                    );
                });
                //分页后保持已选中状态
                if (this.rightTableData.length != 0) {
                    this.menuTableData.forEach((item, index) => {
                        this.rightTableData.forEach((item1) => {
                            if (item1.id == item.id) {
                                item.isSelect = 1;
                            }
                        });
                    });
                }
                this.total = response.total;
                if (this.count === 0) {
                    this.count = this.total;
                }
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getlist();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.rightTableData = [];
            this.resetForm('queryForm');
            this.handleQuery();
        },
        /** 查询机构下拉树结构 */
        getDeptTree() {
            this.allotForm.deptId = null;
            deptsTreeSelect().then((response) => {
                this.deptOptions = response.data;
            });
        },
        /** 返回按钮 */
        goBack() {
            const obj = {
                path: '/iotdev/snCard/dataSimCard',
            };
            this.$tab.closeOpenPage(obj);
        },
        //右边增加的数据
        rightAdd() {
            let leftTableData = JSON.parse(JSON.stringify(this.menuTableData));
            leftTableData.forEach((item, index) => {
                this.selectedListLeft.forEach((item1) => {
                    if (item.id == item1.id) {
                        this.rightTableData = this.rightTableData.concat(item).sort((a, b) => {
                            return a.id - b.id;
                        });
                        item.isSelect = 1;
                    }
                });
            });
            if (this.selectedCount1 != 0) {
                this.count = this.count - this.selectedListLeft.length;
            }
            leftTableData = leftTableData.filter((val) => {
                return val;
            });
            this.menuTableData = leftTableData;
            this.selectedListLeft = [];
        },
        //删除的数据
        leftDelete() {
            let rightTableData = JSON.parse(JSON.stringify(this.rightTableData));
            rightTableData.forEach((item, index) => {
                this.selectedListRight.forEach((item1) => {
                    this.menuTableData.forEach((item2) => {
                        if (item2.id == item1.id) {
                            item2.isSelect = 0;
                        }
                        if (item1.id == item.id) {
                            delete rightTableData[index];
                        }
                    });
                });
            });
            if (this.selectedCount1 != 0) {
                this.count = this.count + this.selectedListRight.length;
            }
            rightTableData = rightTableData.filter((val) => {
                return val;
            });
            this.rightTableData = rightTableData;
            this.selectedListRight = [];
        },
        checkSelectable(row) {
            let flag = true;
            if (row.isSelect === 0) {
                flag = true;
            } else {
                flag = false;
            }
            return flag;
        },
        //左边数据
        changeCheckBoxValueLeft(val) {
            this.selectedListLeft = val;
            this.selectedCount = val.length;
        },
        //右边
        changeCheckBoxValueRight(val) {
            this.selectedListRight = val;
        },
        //确定分配操作
        confirmDistribution() {
            this.$refs['allotForm'].validate((valid) => {
                if (valid) {
                    this.dataSimCardIds = this.rightTableData.map((item) => item.id);
                    const dataSimCardId = this.dataSimCardIds.join(',');
                    const deptId = this.allotForm.deptId;
                    distributionDataSimCard(deptId, dataSimCardId).then((response) => {
                        if (response.code == 200) {
                            this.$modal.msgSuccess(response.msg);
                            this.resetQuery();
                        } else {
                            this.$modal.msgError(response.msg);
                        }
                    });
                }
            });
        },
    },
};
</script>
<style lang="scss">
.topCenter {
    .el-button+.el-button {
        margin-left: 0px;
        margin-top: 10px;
    }
}

.vue-treeselect__label {
    font-weight: normal;
    font-size: 14px;
    /* 取消加粗 */
}

.general {
    display: flex;
    align-items: center;
}

.topLeft {
    width: 45%;
    height: 373px;
}

.topCenter {
    width: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.topRight {
    width: 45%;
    height: 373px;
}

.footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    padding: 20px 50px 20px 360px;
    margin-bottom: 0 !important;
    color: #fff;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
}

.pagination-container {
    text-align: left;
    width: 45%;
    margin-left: 200px;
    margin-top: 20px;
}
</style>
