<!-- eslint-disable vue/valid-v-slot -->
<template>
    <div class="outer">
        <!-- 查询 -->
        <div class="inquire" style="display: inline-block; margin-right: 20px">
            <span class="demonstration">地区:</span>
            <el-select v-model="searchValues.partitionId" placeholder="请选择">
                <el-option
                v-for="(item, i) in partitionInfos"
                :key="i"
                :label="item.desc"
                :value="item.id"
                >
                </el-option>
            </el-select>
        </div>
        <!-- 按钮 -->
        <div class="buttonBox">
            <el-button @click="addClick()" class="primary" type="primary" size="default"
                style="margin-right: 10px">新增</el-button>
            <el-button @click="getData()" class="primary" type="primary" size="default"
                style="margin-right: 10px">查询</el-button>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData" border style="width: 100%; margin-top: 25px">
            <el-table-column align="center" prop="id" label="资源位ID" />
            <el-table-column align="center" prop="name" label="入口名称" />
            <el-table-column align="center" prop="partitionId" label="地区">
                <template v-slot="scope">
                    <span>{{ getPartitionInfo(scope.row.partitionId) }}</span>
                </template> 
            </el-table-column>
            <el-table-column align="center" prop="icon" label="入口icon">
                <template v-slot="scope">
                    <el-image style="width: 100px; height: 100px" :src="scope.row.icon" :zoom-rate="1.1"
                        :preview-src-list="[scope.row.icon]" fit="scale-down" preview-teleported="true"
                        hide-on-click-modal="true" />
                </template>
            </el-table-column>
            <el-table-column align="center" prop="skipType" label="跳转">
                <template v-slot="scope">
                    <span>{{ scope.row.skipType == 1 ? "native" : (scope.row.skipType == 2 ? "房间" : scope.row.skipType == 3
                        ? "H5" : "") }}</span>
                    <br />
                    <span>{{ scope.row.skipContent }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="生效时间">
                <template v-slot="scope">
                    <span>{{ scope.row.startTime == null && scope.row.endTime ? "不限" : (scope.row.startTime + "~" +
                        (scope.row.endTime == null ? "不限" : scope.row.endTime)) }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="生效开关">
                <template v-slot="scope">
                    <el-switch v-model="scope.row.enabled" @click="switchClick(scope.row.id)" />
                </template>
            </el-table-column>
            <el-table-column align="center" prop="seqNo" label="排序" />
            <el-table-column align="center" prop="USER_LEVEL" label="可见等级" :formatter="ruleJsonFormatter" />
            <el-table-column align="center" prop="PLATFORM" label="生效平台" :formatter="ruleJsonFormatter" />
            <el-table-column align="center" prop="IOS" label="iOS版本号" :formatter="ruleJsonFormatter" />
            <el-table-column align="center" prop="ANDROID" label="安卓版本号" :formatter="ruleJsonFormatter" />
            <el-table-column align="center" prop="NOT_CHANNELS" label="不展示渠道" :formatter="ruleJsonFormatter" />
            <el-table-column align="center" label="操作" width="200">
                <template v-slot="scope">
                    <el-button @click="editClick(scope.row)" class="primary" type="primary" size="default">编辑</el-button>
                    <el-button @click="delClick(scope.row)" class="danger" type="danger" size="default"
                        v-if="scope.row.skipType != 1">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination style="margin-top: 10px" class="paginationClass" v-model:current-page="currentPage"
            v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500]" :small="small"
            :disabled="disabled" :background="background" layout="sizes, prev, pager, next" :total="totals"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        <!-- 编辑弹窗 -->
        <el-dialog v-model="editDialog" title="房间内角标入口配置" width="50%" center>
            <div style="margin-bottom: 25px">
                <span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">入口名称</span>
                <el-input v-model="resource.name" style="width: 75%" class="input" placeholder="请输入入口名称"
                    :disabled="resource.skipType == 1"></el-input>
            </div>
            <div style="margin-bottom: 25px;margin-top: 70px;">
                <span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">选择地区</span>
                <el-select v-model="resource.partitionId" style="width: 75%" placeholder="请选择">
                    <el-option v-for="item in partitionInfos" :key="item.id" :label="item.desc"
                        :value="item.id"></el-option>
                </el-select>
            </div>
            <div style="margin-bottom: 25px">
                <span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">icon</span>
                <input type="hidden" class="form-control" name="icon" v-model="resource.icon" />
                <img :src="resource.icon" style="width:120px;" />
                <input type="file" style="width: 26%; display: inline-block;" id="iconFile" name="uploadFile" />
            </div>
            <div style="margin-bottom: 25px">
                <span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label"></span>
                <button class="btn btn-success col-sm-4" type="button" id="iconUploadBtn" @click="uploadIcon()">上传</button>
                <span class="btn col-sm-4" id="iconUploadInfo" style="color:red;"></span>
            </div>
            <div style="margin-bottom: 25px;margin-top: 70px;">
                <span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">跳转位置</span>
                <el-select v-model="resource.skipType" style="width: 75%" placeholder="请选择" :disabled="resource.id != null && resource.skipType == 1">
                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </div>
            <div style="margin-bottom: 25px" v-if="resource.skipType == 1 || resource.skipType == 3">
                <span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">资源编码</span>
                <el-input v-model="resource.code" style="width: 75%" class="input" :placeholder="请输入资源编码"></el-input>
            </div>
            <div style="margin-bottom: 25px" v-if="resource.skipType == 3">
                <span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">展示方式</span>
                <el-select v-model="resource.showType" style="width: 75%" placeholder="请选择">
                    <el-option v-for="item in showTypeOptions" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </div>
            <div style="margin-bottom: 25px" v-if="resource.skipType == 2 || resource.skipType == 3">
                <span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">{{ resource.skipType
                    == 3 ? "跳转链接" :
                    (resource.skipType == 2 ? "跳转房间" : "") }}</span>
                <el-input v-model="resource.skipContent" style="width: 75%" class="input"
                    :placeholder="[resource.skipType == 3 ? '请输入跳转链接' : (resource.skipType == 2 ? '请输入房间ID' : '')]"></el-input>
            </div>
            <div style="margin-bottom: 25px;margin-top: 70px;">
                <span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">生效时间</span>
                <el-date-picker v-model="resource.startTime" type="datetime" placeholder="选择日期时间">
                </el-date-picker>
            </div>
            <div style="margin-bottom: 25px">
                <span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">失效时间</span>
                <el-date-picker v-model="resource.endTime" type="datetime" placeholder="选择日期时间">
                </el-date-picker>
            </div>
            <div style="margin-bottom: 25px">
                <span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label">排序</span>
                <el-input v-model="resource.seqNo" style="width: 75%" class="input" placeholder="请输入排序"></el-input>
            </div>
            <div style="margin-bottom: 25px" v-for="(rule, index) in rules" :key="rule" :index="index">
                <span style="display: inline-block; margin-right: 20px" class="col-sm-2 control-label" v-if="(rule.ruleCode == 'NOT_CHANNELS' || rule.ruleCode == 'PLATFORM' || rule.ruleCode == 'USER_LEVEL') || (!resource.ruleValue['PLATFORM'] || resource.ruleValue['PLATFORM'] == '' || resource.ruleValue['PLATFORM'] == 'null') || ((rule.ruleCode == 'IOS_LOW_VERSION' && resource.ruleValue['PLATFORM'] == 'ios') || (rule.ruleCode == 'IOS_HIGH_VERSION' && resource.ruleValue['PLATFORM'] == 'ios') || (rule.ruleCode == 'ANDROID_LOW_VERSION' && resource.ruleValue['PLATFORM'] == 'android') || (rule.ruleCode == 'ANDROID_HIGH_VERSION' && resource.ruleValue['PLATFORM'] == 'android'))">{{ rule.ruleName
                }}</span>
                <el-input v-model="resource.ruleValue[rule.ruleCode]" style="width: 75%" class="input"
                    :placeholder="rule.description" v-if="rule.ruleKind != 'IN' && rule.ruleKind != 'LEFT_LIKE' && ((rule.ruleCode == 'NOT_CHANNELS' || rule.ruleCode == 'PLATFORM' || rule.ruleCode == 'USER_LEVEL') || (!resource.ruleValue['PLATFORM'] || resource.ruleValue['PLATFORM'] == '' || resource.ruleValue['PLATFORM'] == 'null' || (rule.ruleCode == 'IOS_LOW_VERSION' && resource.ruleValue['PLATFORM'] == 'ios') || (rule.ruleCode == 'IOS_HIGH_VERSION' && resource.ruleValue['PLATFORM'] == 'ios') || (rule.ruleCode == 'ANDROID_LOW_VERSION' && resource.ruleValue['PLATFORM'] == 'android') || (rule.ruleCode == 'ANDROID_HIGH_VERSION' && resource.ruleValue['PLATFORM'] == 'android')))"></el-input>
                <el-select v-model="resource.ruleValue[rule.ruleCode]" style="width: 75%" placeholder="请选择"
                    v-if="rule.ruleKind == 'IN'">
                    <el-option label="全部" :value="''"></el-option>
                    <el-option v-for="value in rule.ruleValue.split(',')" :key="value" :label="value"
                        :value="value"></el-option>
                </el-select>
                <el-select v-model="resource.ruleValue[rule.ruleCode]" style="width: 75%" placeholder="请选择"
                    v-if="rule.ruleKind == 'LEFT_LIKE'">
                    <el-option v-for="value in rule.ruleValue.split(',')" :key="value" :label="value"
                        :value="value"></el-option>
                </el-select>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editDialog = false">取消</el-button>
                    <el-button type="primary" @click="editDialogClick()"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 公共二次确认删除弹窗 -->
        <el-dialog v-model="delDialog" title="提示" width="30%" center>
            <span> {{ delDialogText }}</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="delDialog = false">取消</el-button>
                    <el-button type="primary" @click="delClick()"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
  
<script>

import { getResourcePage, delResource, saveResource, effective } from "@/api/resource/resource";
import { getResourceRuleList } from '@/api/resource/resourceRule';
import { uploadFile } from '@/api/common/upload';
import { hideLoading, showLoading } from "@/utils/maintainer";
import { getPartitionInfoList } from '@/api/partition/partitionInfo';
import { ElMessage } from "element-plus";

export default {
    name: "GamePlayView",
    data() {
        return {
            totals: 100, //总页数
            currentPage: 1, //页码
            pageSize: 10, //条数
            delDialog: false,
            delDialogText: "确认要删除资源位吗?",
            editDialog: false,
            options: [
                {
                    value: 0,
                    label: "无"
                },
                {
                    value: 1,
                    label: "NATIVE自定义"
                },
                {
                    value: 3,
                    label: "H5"
                },
            ],
            showTypeOptions: [
                {
                    value: 1,
                    label: "全屏"
                },
                {
                    value: 2,
                    label: "半屏"
                },
            ],
            tableData: [], //表单数据存放
            rules: [],
            resource: {
                id: null,
                code: '',
                name: '',
                icon: '',
                skipType: 0,
                showType: 1,
                skipContent: '',
                url: '',
                startTime: null,
                endTime: null,
                seqNo: 0,
                ruleValue: {},
                partitionId: null,
            },
            imageUrl: '',
            partitionInfos: [],
            searchValues: {
                partitionId: null,
            },
        };
    },
    setup() {
        return {};
    },
    created() {
        this.initPartition();
        this.getRule();
        this.getData();
    },
    methods: {
        uploadIcon() {
            let $this = this;
            let file = $('#iconFile').val();
            if (file && file.length > 0) {
                showLoading();
                uploadFile('iconFile').then(res => {
                    if (res.path) {
                        $this.resource.icon = res.path;
                        $('#iconUploadInfo').html('上传成功');
                    }
                }).finally(() => {
                    hideLoading();
                });
            }
        },
        uploadUrl() {
            let $this = this;
            let file = $('#urlFile').val();
            if (file && file.length > 0) {
                showLoading();
                uploadFile('urlFile').then(res => {
                    if (res.path) {
                        $this.resource.url = res.path;
                        $('#urlUploadInfo').html('上传成功');
                    }
                }).finally(() => {
                    hideLoading();
                });
            }
        },
        getRule() {
            getResourceRuleList({
                ruleType: 3
            }).then(res => {
                this.rules = res.data;
            });
        },
        ruleJsonFormatter(row, col, cell, index) {
            let value = '';
            let key = col.property;
            let ruleValue = row.ruleValue;
            if (!ruleValue) {
                return value;
            }
            let ruleObj = JSON.parse(ruleValue);
            value = ruleObj[key];
            if (!value) {
                if (key == 'NOT_CHANNELS') {
                    value = '-';
                } else {
                    value = '全部';
                }
            }
            if (key == 'IOS') {
                value = ruleObj['IOS_LOW_VERSION'] + '~' + ruleObj['IOS_HIGH_VERSION'];
            } else if (key == 'ANDROID') {
                value = ruleObj['ANDROID_LOW_VERSION'] + '~' + ruleObj['ANDROID_HIGH_VERSION'];
            }
            return value;
        },
        getData() {
            getResourcePage({
                type: 3,
                partitionId: this.searchValues.partitionId,
                page: this.currentPage,
                pageSize: this.pageSize,
            }).then(res => {
                let data = res.data;
                this.totals = data.total;
                this.tableData = data.records.map(v => {
                    v['enabled'] = (v.isEnabled == 1);
                    let startTime = v.startTime;
                    let endTime = v.endTime;
                    if (startTime) {
                        v['startTime'] = new Date(startTime).format("yyyy-MM-dd hh:mm:ss");
                    }
                    if (endTime) {
                        v['endTime'] = new Date(endTime).format("yyyy-MM-dd hh:mm:ss");
                    }
                    return v;
                });
                console.log(this.tableData);
            });
        },
        switchClick(id) {
            effective({
                id: id
            }).then(res => {
                this.getData();
            });
        },
        addClick() {
            this.resource.id = null;
            this.resource.code = '';
            this.resource.name = '';
            this.resource.icon = '';
            this.resource.skipType = 0;
            this.resource.showType = 1;
            this.resource.skipContent = '';
            this.resource.url = '';
            this.resource.startTime = null;
            this.resource.endTime = null;
            this.resource.seqNo = 0;
            this.resource.ruleValue = {};
            for (let i = 0, len = this.rules.length; i < len; i++) {
                let rule = this.rules[i];
                this.resource.ruleValue[rule.ruleCode] = '';
            }
            this.partitionId = null;
            this.editDialog = true;
        },
        editClick(row) {
            this.resource.id = row.id;
            this.resource.code = row.code;
            this.resource.name = row.name;
            this.resource.icon = row.icon;
            this.resource.skipType = row.skipType;
            this.resource.showType = row.showType;
            this.resource.skipContent = row.skipContent;
            this.resource.url = row.url;
            this.resource.startTime = row.startTime;
            this.resource.endTime = row.endTime;
            this.resource.seqNo = row.seqNo;
            let ruleValue = row.ruleValue;
            for (let i = 0, len = this.rules.length; i < len; i++) {
                let ruleCode = this.rules[i].ruleCode;
                let rule = null;
                if (ruleValue) {
                    let ruleObj = JSON.parse(ruleValue);
                    rule = ruleObj[ruleCode];
                }
                this.resource.ruleValue[ruleCode] = rule;
            }
            this.resource.partitionId = row.partitionId;
            this.editDialog = true;
        },
        editDialogClick() {
            let startTime = this.resource.startTime;
            if (startTime) {
                this.resource.startTime = new Date(startTime).format("yyyy-MM-dd hh:mm:ss");
            }
            let endTime = this.resource.endTime;
            if (endTime) {
                this.resource.endTime = new Date(endTime).format("yyyy-MM-dd hh:mm:ss");
            }
            let id = this.resource.id;
            let skipType = this.resource.skipType;
            if (!id && skipType == 1) {
                ElMessage({
                    showClose: true,
                    message: 'APP NATIVE不允许新增',
                    type: "error",
                });
                return;
            }
            saveResource({
                id: this.resource.id,
                code: this.resource.code,
                name: this.resource.name,
                icon: this.resource.icon,
                type: 3,
                skipType: skipType,
                showType: this.resource.showType,
                skipContent: this.resource.skipContent,
                url: this.resource.url,
                startTime: this.resource.startTime,
                endTime: this.resource.endTime,
                seqNo: this.resource.seqNo,
                ruleValue: JSON.stringify(this.resource.ruleValue),
                partitionId: this.resource.partitionId,
            }).then(res => {
                this.getData();
                this.editDialog = false;
            });
        },
        delClick(row) {
            delResource({
                id: row.id,
            }).then((res) => {
                this.getData();
                this.delDialog = false;
            });
        },
        // 分页导航
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        initPartition() {
            getPartitionInfoList().then(res => {
                this.partitionInfos = res.data;
            });
        },
        getPartitionInfo(partitionId) {
            let partitions = this.partitionInfos.filter(v => v.id == partitionId);
            if (!partitions || partitions.length <= 0) {
                return '';
            }
            return partitions[0].desc;
        },
    },
};
</script>
  
<style lang="less" scoped>
.outer {
    padding-top: 20px;
    background: #ecf0f5;
    border-top: 3px solid #d2d6de;
    .inquire {
        display: flex;
        justify-content: space-between;
    }
}</style>
