<template>
  <!-- 常见问题配置 -->
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
       <div class="filter">
            <label>模块：</label>
            <Select
                v-model="modularid"
                label-in-value
                clearable
                class="searchSelect"
            >
                <Option
                    v-for="(item,index) in modularlist"
                    :value="item.id"
                    :key="index"
                >{{ item.title }}</Option>
            </Select>
        </div>
        <div class="filter">
            <label>问题：</label>
            <Input class="searchInput" type="text" v-model="question" />
        </div>
        <div class="searchBtn">
            <Button type="primary" class="twoWord" icon="ios-search" @click="tosearch()">{{$t('1001')}}</Button>
            <Button type="success" class="twoWord" icon="md-add-circle" @click="add()">{{$t('1002')}}</Button>
            <Button type="warning" class="twoWord" icon="ios-create-outline" @click="edit()">{{$t('1003')}}</Button>
            <Button type="error" class="twoWord intervalRight" icon="md-close-circle" @click="dele()">{{$t('1004')}}</Button>
            <Button type="primary" class="fourWord" icon="md-download" @click="loadexcel()">{{$t('1005')}}</Button>
            <Upload
                style="display:inline-block"
                ref="upload"
                :action="action"
                name="excel-file"
                :headers="headers"
                :show-upload-list="false"
                :on-format-error="handleFormatError"
                :on-success="handleSuccess"
                :on-error="handleError"
                :format="['xlsx','xls']"
            >
                <Button type="primary" class="fourWord" icon="md-cloud-upload">{{$t('1006')}}</Button>
            </Upload>
            <Button type="primary" class="fourWord" icon="ios-cloud-download" @click="downexcel()">{{$t('1007')}}</Button>
        </div>
    </div>

    <div class="divborder newTableDiv">
        <Table
            @on-current-change="handleRowChange"
            @on-selection-change="handleSelectRow"
            highlight-row
            :data="tableData1"
            :columns="tableColumns1"
            class="tableClass"
        ></Table>
        <div class="pageDiv">
            <div class="pageDirection">
                <Page
                    :total="total"
                    :current="page"
                    @on-change="changePage"
                    show-elevator
                    show-sizer
                    show-total
                    @on-page-size-change="handlePageSize"
                    :page-size-opts="[10,20,30,40,100]"
                ></Page>
            </div>
        </div>
    </div>

    <!-- 添加 -->
    <Modal class="newModalClass" :title="title1" v-model="addmodal" :styles="{width:'1080px'}">
        <div class="modal_body">
            <div>
                <div class="filter">
                    <label><i>*</i>模块：</label>
                    <Select
                        v-model="addmodularid"
                        label-in-value
                        clearable
                        class="searchSelect"
                    >
                        <Option
                            v-for="(item,index) in modularlist"
                            :value="item.id"
                            :key="index"
                        >{{ item.title }}</Option>
                    </Select>
                </div>
                <div class="filter">
                    <label><i>*</i>问题类型：</label>
                    <Select
                        v-model="typeid"
                        label-in-value
                        clearable
                        class="searchSelect"
                    >
                        <Option
                            v-for="(item,index) in typelist"
                            :value="item.id"
                            :key="index"
                        >{{ item.title }}</Option>
                    </Select>
                </div>
            </div>
            <div>
                <div class="filter">
                    <label>问题：</label>
                    <Input class="searchInput MaxWidth" type="text" v-model="addquestion" />
                </div>
            </div>
            <div>
                <label>答案：</label>
                <div class="editor_wangeditor">
                    <editor-wangeditor :editorInfo="editorContent" @seteditorInfo="geteditorContent"></editor-wangeditor>
                </div>
            </div>
        </div>
        <div slot="footer">
            <Button type="text" size="large" @click="addmodal = false">{{$t('1033')}}</Button>
            <Button type="primary" size="large" @click="addPost">{{$t('1003')}}</Button>
        </div>
    </Modal>
    
  </div>
</template>
<script>
import axios from '@/libs/api.request';
export default {
    data () {
        return {
            modularid:'',
            modularlist:[],
            question:'',
            headers: {
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            action:
                this.axios.publicPath +
                'config/upload/submit?templateName=userlist',
            page:1,
            pagesize:10,
            total:0,
            tableData1:[],
            tableColumns1:[
                {
                    type: 'selection',
                    width: 80
                },
                {
                    type: 'index2',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                    width: 80
                },
                {
                    title:'模块',
                    key:''
                },
                {
                    title:'问题类型',
                    key:''
                },
                {
                    title:'问题',
                    key:''
                },
                {
                    title:'答案',
                    key:''
                },
                {
                    title:'维护人',
                    key:''
                },
                {
                    title:'维护时间',
                    key:''
                }
            ],
            title1:this.$t('1002'),
            addmodal:false,
            addmodularid:'',
            typeid:'',
            typelist:[],
            addquestion:'',
            editorContent:'',//编辑器内容
            methodType:'add',//添加或者编辑方法
        }
    },
    created () {
       
    },
    mounted(){

    },
    methods: {
        //获取富文本编辑器内容
        geteditorContent(value){
            this.editorContent = value
        },
        tosearch(){

        },
        add(){
            this.addmodularid = '';
            this.typeid = '';
            this.addquestion = '';
            this.editorContent = ''; //编辑器数据
            this.methodType = 'add'; //添加方法
            this.addmodal = true;
        },
        addPost(){
            
        },
        edit(){

        },
        dele(){

        },
        loadexcel(){

        },
        downexcel(){

        },
        handleFormatError (file) {
            this.$Message.error(this.$t('920162') +
                    ' ' +
                    file.name +
                    ' ' +
                    this.$t('2010005'))
        },
        handleSuccess (res, file) {
            if (res.ret == 1) {
                this.search();
                this.$Message.success(this.$t('950398'));
            } else {
                if (('' + res.msg).indexOf(',') != -1) {
                    inittip(res.msg);
                } else {
                    this.$Message.error(this.$t('' + res.msg));
                }
            }
        },
        handleError () {
            this.$Message.error(this.$t('2010006') + '!');
        },
        handlePageSize (value) {
            this.pagesize = value;
            this.tableData1 = this.search();
        },
        changePage (value) {
            this.page = value;
            // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
            this.tableData1 = this.search();
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.obj = currentRow;
        },
        handleSelectRow: function (data) {
            this.selectids = [];
            for (var i in data) {
                if (this.selectids.indexOf(data[i].id) < 0) {
                    this.selectids.push(data[i].id);
                }
            }
        },
        //富文本编辑器
        
    }
}
</script>
<style lang="less" scoped>
    .editor_wangeditor{
        width:800px;
        display:inline-block;
        vertical-align: top;
        margin-left:5px;
    }
</style>
