<template>
    <fullscreen v-if="isViewer"  :fullscreen.sync="fullscreen" class="container">
        <div class="container-box">
            <toolList @iconCli='iconCli' :tooltit='tooltit'></toolList>
            <div class="search">
                <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
                <el-button class="btn-check" size="medium" type="primary" @click="dialogCheck(1)"
                v-if="isAuthor">新建</el-button>
            </div>
            <div class="tabbox">
                <el-table height="calc(100% - 40px)" class="com-table" ref="multipleTable" :data="tableData"
                          tooltip-effect="dark" size="small" border style="width: 100%" v-loading="loading">
                    <el-table-column prop="recordName" label="备案名称" width="250">
                    </el-table-column>
                    <el-table-column prop="eventType"
                     :formatter="formatter"
                     label="事件类型" width="100">
                    </el-table-column>
                    <el-table-column prop="fileFrom" label="来文公司" >
                    </el-table-column>
                    <el-table-column prop="createTime" label="备案时间"  width="140">
                    </el-table-column>
                    <el-table-column prop="updateTime" label="最后一次修改时间"  width="140">
                    </el-table-column>
                    <el-table-column label="操作" width="160px" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" plain @click="dialogCheck(2,scope.row)">
                                查看
                            </el-button>
                            <el-button v-if="isAuthor" size="mini" type="warning" plain @click="dialogCheck(3,scope.row)">
                                修改
                            </el-button>
                            <el-button v-if="isAuthor" size="mini" type="danger" plain @click="delLine(scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="pageBox" @current-change="currchange" layout="total,prev, pager, next" background
                               :total="total">
                </el-pagination>
            </div>
            <!---------------------------------------------  新建/浏览表单 -------------------------------------->
            <el-dialog :title="titname + '备案'"
                       :visible.sync="dialogStatus" width="70%" top="50px"
                       :show-close="true"
                       :before-close="closedia"
                       :destroy-on-close="true"
                       :modal-append-to-body="false"
                       :close-on-click-modal="false">
                <div v-loading="loading">
                    <el-form :model="infolist" ref="infolist" :rules="rules" style="height: 60vh;overflow-y: scroll;" >
                        <div class="info-line">
                            <span><i>*</i>备案名称</span>
                            <el-form-item prop="recordName" class="form-item">

                                <el-input v-if="!disableStatus"  v-model.trim="infolist.recordName" placeholder="请输入备案名称"
                                          :disabled="disableStatus"  maxlength="60" >
                                </el-input>
                                <div v-if="disableStatus" class="el-descriptions">{{infolist.recordName}}</div>
                            </el-form-item>
                        </div>

                        <div class="info-line">
                            <span><i>*</i>事件类型</span>
                            <el-form-item prop="eventType" class="form-item">
                                <el-select
                                    v-if="!disableStatus"
                                    v-model="infolist.eventType" :disabled="disableStatus"
                                    placeholder="请选择事件类型">
                                    <el-option v-for="item in eventTypeList" :key="item.orderNumber" :label="item.dataName"
                                               :value="item.dataCode">
                                    </el-option>
                                </el-select>
                                <div v-if="disableStatus" class="el-descriptions">{{viewFormatter(infolist.eventType)}}</div>
                            </el-form-item>
                        </div>

                        <div class="info-line">
                            <span>来文公司</span>
                            <el-form-item prop="fileFrom" class="form-item">

                                <el-input  v-model="infolist.fileFrom"
                                v-if="!disableStatus" placeholder="请输入来文公司" maxlength="60"></el-input>
                                <div v-if="disableStatus" class="el-descriptions">{{infolist.fileFrom}}</div>
                            </el-form-item>
                        </div>

                        <div class="info-line">
                            <span>来函时间以及形式</span>
                            <el-form-item prop="fileTime" class="form-item">

                                <el-input v-if="!disableStatus" v-model="infolist.fileTime"
                                :disabled="disableStatus" placeholder="请输入来函时间以及形式"  maxlength="120"></el-input>
                                <div v-if="disableStatus" class="el-descriptions">{{infolist.fileTime}}</div>
                            </el-form-item>
                        </div>

                        <div class="info-line">
                            <span>来函诉求</span>
                            <el-form-item prop="fileAppeal" class="form-item">

                                <el-input v-if="!disableStatus" v-model="infolist.fileAppeal"
                                :disabled="disableStatus" placeholder="请输入来函诉求" maxlength="500"></el-input>
                                <div v-if="disableStatus" class="el-descriptions">{{infolist.fileAppeal}}</div>
                            </el-form-item>
                        </div>

                        <div class="info-line">
                            <span>涉及内容提供方</span>
                            <el-form-item prop="contentProvider" class="form-item">

                                <el-input v-if="!disableStatus" v-model="infolist.contentProvider"
                                :disabled="disableStatus" placeholder="请输入涉及内容提供方"  maxlength="120" ></el-input>
                                <div v-if="disableStatus" class="el-descriptions">{{infolist.contentProvider}}</div>
                            </el-form-item>
                        </div>

                        <div class="info-line">
                            <span>转派文件编号</span>
                            <el-form-item prop="docNumber" class="form-item">

                                <el-input v-if="!disableStatus" v-model="infolist.docNumber"
                                :disabled="disableStatus" placeholder="请输入转派文件编号"  maxlength="60"></el-input>
                                <div v-if="disableStatus" class="el-descriptions">{{infolist.docNumber}}</div>
                            </el-form-item>
                        </div>

                        <div class="info-line">
                            <span>内容方处理情况<br/>以及回复的时间</span>
                            <el-form-item prop="providerReplytime" class="form-item">

                                <el-input  v-if="!disableStatus" v-model="infolist.providerReplytime"
                                :disabled="disableStatus" placeholder="请输入内容方处理情况以及回复时间"   maxlength="500"></el-input>
                                <div v-if="disableStatus" class="el-descriptions">{{infolist.providerReplytime}}</div>
                            </el-form-item>
                        </div>
                        <div class="info-line">
                            <span>附件</span>
                            <div class="el-descriptions" v-if="!disableStatus">
                                <myUpload @uploadBack="uploadBack" :fileInfo="fileInfo"
                                        :fileList="fileInfo.fileList"></myUpload>
                            </div>
                            <div style="width: calc(100% - 140px)" v-if="disableStatus && datalist.attList.length>0">
                                <uploadDown :datalist="datalist" :dialogStatus="uploadstatus"></uploadDown>
                            </div>
                            <div style="width: calc(100% - 140px)" v-if="disableStatus  && datalist.attList.length===0 "
                                    class="el-descriptions">---- 无附件 ----</div>
                        </div>
                    </el-form>
                    <div slot="footer" class="dialog-footer myfooter">
                        <el-button type="primary" @click="dialogCli(formStatus)" v-if="!disableStatus">保 存</el-button>
                        <el-button v-if="!disableStatus" @click="dialogCli(2)">取 消</el-button>
                        <el-button v-if="disableStatus" @click="dialogCli(2)">关 闭</el-button>
                    </div>
                </div>
            </el-dialog>

        </div>
        <myMessage :messTit='messTit' @closeMessage="closeMessage" :centerDialogVisible="centerDialogVisible"
                   v-if="centerDialogVisible"></myMessage>
    </fullscreen>
</template>
<script>
import myUpload from '../../../components/upload'
import uploadDown from './uploadDown'
import mySearch from './search'
import toolList from '../../../components/toolList'
import myMessage from "../../../components/myMessage.vue"

export default {
    components: {
        myUpload,
        uploadDown,
        mySearch,
        toolList,
        myMessage
    },
    data() {
        const recordNameRule = (rule, value, callback) => {
            if (!this.infolist.recordName) {
                callback(new Error('不能为空'))
            } else {
                if (value.length>=60){
                    callback(new Error('不能超过60个字'))
                }
                callback()
            }
        }
        const eventTypeRule = (rule, value, callback) => {
            if (!this.infolist.eventType) {
                callback(new Error('不能为空'))
            } else {
                callback()
            }
        }
        const fileFromRule = (rule, value, callback) => {
            if (!this.infolist.fileFrom) {
                callback(new Error('不能为空'))
            } else {
                if (value.length>=60){
                    callback(new Error('不能超过60个字'))
                }
                callback()
            }
        }
        const fileTimeRule = (rule, value, callback) => {
            if (!this.infolist.fileTime) {
                callback(new Error('不能为空'))
            } else {
                if (value.length>=120){
                    callback(new Error('不能超过120个字'))
                }
                callback()
            }
        }
        const fileAppealRule = (rule, value, callback) => {
            if (!this.infolist.fileAppeal) {
                callback(new Error('不能为空'))
            } else {
                if (value.length>=500){
                    callback(new Error('不能超过500个字'))
                }
                callback()
            }
        }
        const contentProviderRule = (rule, value, callback) => {
            if (!this.infolist.contentProvider) {
                callback(new Error('不能为空'))
            } else {
                if (value.length>=120){
                    callback(new Error('不能超过120个字'))
                }
                callback()
            }
        }
        const docNumberRule = (rule, value, callback) => {
            if (!this.infolist.docNumber) {
                callback(new Error('不能为空'))
            } else {
                if (value.length>=60){
                    callback(new Error('不能超过60个字'))
                }
                callback()
            }
        }
        const providerReplytimeRule = (rule, value, callback) => {
            if (!this.infolist.providerReplytime) {
                callback(new Error('不能为空'))
            } else {
                if (value.length>=500){
                    callback(new Error('不能超过500个字'))
                }
                callback()
            }
        }
        const urls = {
            uploadUrl:'/market/iptv/upload',
            downfileUrl:'/market/iptv/downfile'
        }

        return {
            tooltit: '备案列表',
            queryListUrl:'/market/iptv/queryPage',
            queryInfoUrl:'/market/iptv/query',
            addUrl:'/market/iptv/add',
            updateUrl:'/market/iptv/update',
            delUrl: "/market/iptv/delByid",
            getPermUrl:"/market/iptv/getPermissions",
            fullscreen: false,
            total: 0,
            pageSize: 1,
            tableData: [{}],
            dialogStatus: false,
            infolist: {},
            typeOptions: [],
            titname: '',
            disableStatus: false,
            fileList: [],
            visibleList: [],
            attList: [],
            searchList: [
                {
                    type: "input",
                    tit: "备案名称",
                    value: "",
                    width: "48%"
                },
                {
                    type: "sel",
                    tit: "事件类型",
                    value: "",
                    width: "48%",
                    options: []
                }
            ],
            rules: {
                recordName: [{
                    required: true,
                    trigger: 'change',
                    validator: recordNameRule
                }],
                eventType: [{
                    required: true,
                    trigger: 'change',
                    validator: eventTypeRule
                }],
                fileFrom: [{
                    required: true,
                    trigger: 'change',
                    validator: fileFromRule
                }],
                fileTime: [{
                    required: true,
                    trigger: 'change',
                    validator: fileTimeRule
                }],
                fileAppeal: [{
                    required: true,
                    trigger: 'change',
                    validator: fileAppealRule
                }],
                contentProvider: [{
                    required: true,
                    trigger: 'change',
                    validator: contentProviderRule
                }],
                docNumber: [{
                    required: true,
                    trigger: 'change',
                    validator: docNumberRule
                }],
                providerReplytime: [{
                    required: true,
                    trigger: 'change',
                    validator: providerReplytimeRule
                }]
            },
            fileInfo: {
                limit: 10,
                url: urls.uploadUrl,
                fileList: []
            },
            datalist: {
                url: urls.downfileUrl,
                type: 2,
                attList: []
            },
            uploadstatus: false,
            userInfo: {},
            params: {},
            centerDialogVisible: false,
            messTit: '',
            delid: '',
            loading: false,
            eventTypeList: [],
            eventTypeMap: new Map(),
            isAuthor: false,
            isViewer: false,
            formStatus:1,   //页面状态1:添加,2:浏览,3:修改
            msg:""
        }
    },
    methods: {
        //获取当前用户权限
        getPermissions(){
            this.$http({
                url: this.getPermUrl,
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {},
            }).then((res) => {
                this.isAuthor = res.data.isAuthor;
                if(res.data.isAuthor){
                    this.isViewer = true;
                }else{
                    this.isViewer = res.data.isViewer;
                }
                if(!this.isViewer){
                    this.msg = "权限错误！";
                    this.popupMsg();
                }
            });
        },
        //从字典表获取‘事件类型’
         getEventType() {
            this.$http({
                url: "/market/cfgDataDict/queryList",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    dictCode: 'eventType'
                },
            }).then((res) => {
                this.eventTypeList = res.data;
                this.searchList[1].options = res.data;
                 res.data.forEach(item => {
                        this.eventTypeMap.set(item.dataCode,item.dataName);
                    })
            });
        },
        //关闭主对话框
        closedia() {
            this.infolist = {};
            this.dialogCli(2);
            this.dialogStatus = false;
        },
        //提交搜索数据
        searchInfo(v) {
            this.params = {};
            v[0] ? this.params.recordName = v[0] : '';
            v[1] ? this.params.eventType = v[1] : '';
            this.getList(this.params, this.pageSize);
        },

        /************
        * @description: 获取分页列表
        * @param  v 查询参数
        * @param  n 要展示页码
        * @return void
        *************/
        getList(p, n) {
            this.pageSize = n;
            let _this = this;
            this.tableData = [];
            this.loading = true;
            this.$http({
                url: _this.queryListUrl,
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    "page": '{"pageNo":"' + n + '","pageSize":"10"}'
                },
                data: p,
            }).then((res) => {
                this.tableData = res.data.data;
                this.total = res.data.totalRecord;
                this.loading = false;
            });
        },
         /************
        * @description: 列表页翻页查询
        * @param  n 要展示的页码
        * @return void
        *************/
        currchange(n) {
            this.pageSize = n;
            this.getList(this.params, this.pageSize);
        },

        /************
        * @description: 展示不同状态(增、查、改)的主表单
        * @param  v 状态标识（1:增;2:查,3:改）
        * @param  row 列表行对象
        * @return void
        *************/
        dialogCheck(v, row) {
            this.infolist = {};
            this.formStatus = v;
            if (v === 1) {
                this.titname = '新建';
                this.getUser();
                this.dialogStatus = true;
                this.disableStatus = false;
                this.fileInfo.fileList = [];
                this.attList = [];
                return
            } else if (v === 2) {
                this.titname = '查看';
                this.disableStatus = true;
                this.dialogStatus = true;
                this.loading = true;
            } else if (v === 3) {
                this.dialogStatus = true;
                this.disableStatus = false;
                this.titname = '修改';
                this.loading = true;
            }

           // this.infolist = Object.assign({}, row); //拷贝

            this.$http({
                url: this.queryInfoUrl,
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: row
            }).then((res) => {
                this.datalist.attList = res.data.attList;
                this.uploadstatus = true;
               // this.infolist.attList = res.data.attList;
                this.infolist = res.data;
                this.fileInfo.fileList = [];
                this.attList = [];


                if (res.data.attList) {
                    res.data.attList.forEach(item => {
                        this.fileInfo.fileList.push({
                            name: item.fileName,
                            url: '',
                            id: item.id,
                            fileName: item.fileName
                        });
                        this.attList.push({
                            name: item.fileName,
                            url: '',
                            id: item.id,
                            fileName: item.fileName
                        });
                    })
                }

                this.loading = false;
            });
        },


        /************
        * @description: 主页面按钮操作
        * @param  v 状态标识（1:新增保存;2:页面关闭,3:记录修改）
        * @return void
        *************/
        dialogCli(v) {
            this.datalist.attList = [];
            this.uploadstatus = false;
            if (v === 2) {
                this.fileInfo.fileList = [];
                this.infolist = {};
                this.dialogStatus = false;
                this.defaultList = [];
                return
            }
            if (v === 1) {
                this.submitInfo(this.addUrl, v);
            } else if (v === 3) {
                this.submitInfo(this.updateUrl, v);
            }
        },

        /************
        * @description: 主页面数据提交
        * @param  u 提交请求地址
        * @param  v 状态标识（1:新增保存;3:记录修改）
        * @return void
        *************/
        submitInfo(u, v) {
            let _this = this;
            this.$refs.infolist.validate(valid => {
                if (valid) {
                    let attList = [];
                    for (let i = 0; i < this.attList.length; i++) {
                        attList.push({
                            id: this.attList[i].id,
                            fileCode: this.attList[i].fileCode,
                            fileName: this.attList[i].fileName,
                            opName: this.attList[i].opName,
                            opNo: this.attList[i].opNo,
                            opTime: this.attList[i].opTime
                        });
                    }
                    this.infolist.attList = attList;
                    this.$http({
                        url: u,
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        data: this.infolist
                    }).then((res) => {
                        if (res.data.result === 1) {
                            _this.$message({
                                message: res.data.desc,
                                type: 'error'
                            });
                        } else {
                            _this.$message({
                                message: '保存成功',
                                type: 'success'
                            });
                            _this.fileInfo.fileList = [];
                            _this.infolist = {};
                            _this.dialogStatus = false;
                            _this.getList(this.params, this.pageSize);
                            _this.defaultList = [];
                        }

                    });
                }
            })
        },
        //记录删除提示框
        closeMessage(v) {
            this.centerDialogVisible = false;
            let _this = this;
            if (v === 1) {
                _this.$http({
                    url: _this.delUrl,
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                            id: _this.delid
                    }
                }).then((res) => {
                    if (res.data.result === 1) {
                        _this.$message({
                            message: res.data.desc,
                            type: 'error'
                        });
                    } else {
                        _this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        _this.getList(this.params, this.pageSize);
                    }
                });
            }
        },
        //删除
        delLine(v) {
            this.centerDialogVisible = true;
            this.messTit = '即将删除此条数据, 是否删除?';
            this.delid = v.id;
        },
        //文件返回值
        uploadBack(v) {
            this.attList = v;
        },
        //功能栏
        iconCli(v) {
            if (v === 1) {
                this.getList(this.params, this.pageSize);
            }
            if (v === 2) {
                this.fullscreen = !this.fullscreen
            }
        },
        getUser() {
            this.userInfo = JSON.parse(window.sessionStorage.userInfo);
            this.infolist = {};
            this.infolist.opNo = this.userInfo.loginNo;
            this.infolist.opName = this.userInfo.loginName;
        },
        //弹出提示框
        popupMsg() {
            this.$notify.error({
            title: '错误',
            message: this.msg
            });
        },
        formatter(row, column) {
            return this.eventTypeMap.get(row.eventType);
        },

        viewFormatter(v) {
            return this.eventTypeMap.get(v);
        }

    },
    mounted() {
        this.getEventType();
        this.getPermissions();
        this.getList(this.params, this.pageSize);
        this.getUser();
    },
    created() {

    }
}
</script>
<style scoped lang="scss">
@import "../../../assets/style";

.titbox {
    div {
        float: right;

        i {
            font-size: 22px;
            margin-left: 20px;
            cursor: pointer;
        }
    }
}

.el-table__row.to-do {
    background: rgb(248, 207, 133);
}

.el-table .success-row {
    background: #f0f9eb;
}

.tabbox {
    margin-top: 16px;
}

.pageBox {
    text-align: right;
    margin-top: 10px;
}

.info-line {
    width: 100%;
    display: block;
    padding-left: 20px;

    div {
        width: 100%;
        display: inline-block;
    }

    span {
        width: 120px;
        display: inline-block;
        padding-top: 10px;
        text-align: left;
        line-height:15px;
        vertical-align: top;

        i {
            color: red;
            display: inline-block;
            padding-right: 5px;

        }
    }

    .form-item{
        width: calc(100% - 140px);
    }

    .el-select,.el-textarea,
    .el-input {
        width: 100%;
    }


    .tree
    {
        width: calc(100% - 100px);
    }

    .el-descriptions{
        border: 1px solid #ddd;
        background-color: #f5f7fa;
        color: rgb(2, 30, 58);
        padding-top: 5px;
        padding-left: 10px;
        height: 100%;
        line-height:30px;
        width: 100%;
        border-radius: 5px;
        min-height:35px;

    }

    .el-radio-group{
        border: 1px solid #ddd;
        padding-top: 12px;
        padding-left: 20px;
        height: 100%;
        line-height:30px;
        width: 100%;
        border-radius: 5px;
    }

}

.online {
    width: 100%;

    .el-select {
        width: calc(100% - 100px);
    }

    span {
        vertical-align: top;
    }

    .el-textarea {
        width: calc(100% - 100px);
    }
}

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}

</style>
