<template>
  <div class="d-container">
      <div class="d-outter">
          <div class="d-inner">
              <v-label-div title="主题数据">
                  <v-btn @click="handlerBack">返回主题分析</v-btn>
              </v-label-div>
                <div class="d-inner-d1">
                    <span class="s1">时间：{{setStartTime}} — {{setEndTime}} </span>
                    <span class="s2">自定义：</span>
                    <!-- <v-tab-group :value="tValue" :style="{ background: 'transparent' }" :btns="buttonTime" @change="handlerTime"></v-tab-group> -->
                    <a-range-picker show-time v-model="selTime" :disabled-date="disabledDate" @calendarChange="calendarPriceRangeChange" :size="$vuiSize" valueFormat="YYYY-MM-DD HH:mm:ss" @ok="handlerChangeTime">
                        <a-icon slot="suffixIcon" type="calendar" />
                    </a-range-picker>
                </div>
                <div class="d-inner-d1">
                    <span class="s1">渠道：</span>
                    <a-checkbox :disabled="noClick" :indeterminate="qdIndeterminate" :checked="qdCheckAll" @change="onCheckAllChangeQd">
                        {{quDaoAll}}
                    </a-checkbox>
                    <a-checkbox-group v-model="quDao" :disabled="noClick" :options="plainOptions" @change="(val) => onChange(val, 'quDao')" />
                </div>    
                <div class="d-inner-d1">
                    <span class="s1">调性：</span>
                    <a-checkbox :disabled="noClick" :indeterminate="dxIndeterminate" :checked="dxCheckAll" @change="onCheckAllChangeDx">
                        全部
                    </a-checkbox>
                    <!-- <a-checkbox-group v-model="diaoXing" :disabled="noClick" :options="plainOptions1" @change="(val) => onChange(val, 'diaoXing')" /> -->
                    <a-checkbox-group v-model="diaoXing" :disabled="noClick" :options="plainOptions5" @change="(val) => onChange(val, 'diaoXing')" />
                </div>
                <div class="d-inner-d1">
                    <span class="s3">关键词：</span>
                    <a-select v-model="form.sTitleType"  style="width: 80px" @change="handlerSearchMode">
                        <a-select-option :style="{ color: '#fff' }" v-for="item in plainOptions2" :value="item.key" :key="item.key">
                            {{ item.value }}
                        </a-select-option>
                    </a-select>
                    <a-input-search style="width: 250px" placeholder="请输入关键词" enter-button v-model="searchTitle" @search="onSearch"></a-input-search>
                    <span class="s4">时间排序：</span>
                    <v-tab-group :value="gValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerSxTime"></v-tab-group>
                    <span class="s4">去重筛选：</span>
                    <v-tab-group :value="gValue2" :style="{ background: 'transparent' }" :btns="btnTimes2" @change="handlerTime2"></v-tab-group>
                </div>
                <div class="d-inner-d2">
                    <span class="s1">共计<span class="ss1">{{totalNum}}</span>条数据，已选中<span class="ss1">{{tableAll ? totalNum : sk.length}}</span>条数据</span>
                    <div>
                        <a-button type="primary" @click="goOutput">导出数据</a-button>
                        <a-button type="primary" @click="goThemeBoard" style="margin-left: 12px">数据看板</a-button>
                    </div>
                </div>
                <v-table ref="rtable" :row-selection="rowSelection" :columns="columns" :data="tbData" :loading="tableLoading" :pagination="pagination" @change="handlerPage">
                    <template slot="titlex" slot-scope="text, record">
                        <a :href="record.url" style="color: #fff" target="_blank"><span v-html="text"></span></a>
                        <a-tag color="#108ee9" v-if="record.affections === 1" style="margin-left: 0.6rem;margin-right: 0px;">正面</a-tag>
                        <a-tag color="#fece42" v-if="record.affections === 3" style="margin-left: 0.6rem;margin-right: 0px">中性</a-tag>
                        <a-tag color="#cb7632" v-if="record.affections === 2" style="margin-left: 0.6rem;margin-right: 0px">负面</a-tag>
                        <a-tag color="#d48c44" v-if="record.crisis === 1" style="margin-left: 0.6rem;margin-right: 0px;">低级危机</a-tag>
                        <a-tag color="#d46a46" v-if="record.crisis === 2" style="margin-left: 0.6rem;margin-right: 0px;">中级危机</a-tag>
                        <a-tag color="#d81c33" v-if="record.crisis === 3" style="margin-left: 0.6rem;margin-right: 0px;">高级危机</a-tag>
                    </template>
                </v-table>
          </div>
      </div>
      <v-modal :title="modalObj.title" :visible.sync="modalObj.visible" :eleStyle="{ width: '60rem', height: '36rem'}">
            <div slot="body" style="padding: 1rem 1rem 1rem 1rem">
                <a-form :form="execlForm" :label-col="{ span: 3 }" :wrapper-col="{ span: 8 }">
                    <a-form-item label="文件名称">
                        <a-input v-model="execlForm.sFileName" disabled placeholder="请输入文件名称"></a-input>
                    </a-form-item>
                    <a-form-item label="导出格式">
                        <span style="color: #63aecc; font-size: 14px">xlsx</span>
                    </a-form-item>
                    <a-form-item label="导出字段" :wrapper-col="{ span: 21 }">
                        <a-checkbox-group v-model="checkedIds" :options="plainOptions4" @change="fileTypeChange" />
                    </a-form-item>
                    <a-form-item label="导出条数">
                        <span style="color: #63aecc; font-size: 14px">{{execlForm.iNum}}条</span>
                    </a-form-item>
                </a-form>
            </div>
            <div slot="footer">
                <div class="epor" align="center">
                    <div class="epor-btn" @click="exportExcel">确定</div>
                </div>
            </div>
        </v-modal>
  </div>
</template>

<script>
import tableEvent from "./tableEvent";
import getApi from "./getApi";
import {rowSelection} from "./tableEvent";
export default {
    name: "ThemeData",
    computed: {
       rowSelection 
    },
    data() {
        return {
            //-数据导出-//
            plainOptions4: [],
            modalObj: {
                title: "导出选项",
                visible: false,
            },
            execlForm: {
                action: "toExcel",
                sFileName: "",
                sCheckedIds: "",
                iNum: 0,
                sField: "",
            },
            checkedIds: [],
            //
            noClick: false,
            tableAll: false,
            totalNum: 0,
            form: {
                action: 'getList',
                sTimeType: '',
                sStartTime: '',
                sEndTime: '',
                sQuDao: '',
                sQingGan: '',
                sCrisis: '',
                iPageIndex: 1,
                iPageSize: 20,
                sTitle: "",
                token: "",
                sType: "ZhuTiFenXiBl",
                sGuid: '',
                iGroupBy: '', //去重筛选 0不去重 1相似度去重
                isSourcetype: '', //1 返回渠道 0 不返回
                listType: '', //0默认 1影响力倒序 eventList事件脉络
                sTitleType: -1,
                website: '',
                iTimeType: '' //时间筛选 0发布时间 1入库时间
            },
            //时间
            // tValue: 0,
            selVal: 4,
            selTime: [],
            timesSel: [],
            // buttonTime: [],
            selectPriceDate: "",
            setStartTime: '',
            setEndTime: '',
            //渠道
            quDao: [],
            quDaoAll: '全部',
            plainOptions: [],
            qdIndeterminate: true,
            qdCheckAll: false,
            //调性
            diaoXing: [],
            plainOptions1: [],
            dxIndeterminate: true,
            dxCheckAll: false,
            //时间筛选
            gValue: 0,
            btnTimes:['发布时间','入库时间'],
            //去重筛选
            gValue2: 0,
            btnTimes2:['不去重','相似度去重'],
            //搜索框
            plainOptions2:[],
            plainOptions3: [],
            plainOptions5: [],
            searchTitle: '',
            //表格
            columns: [
                {
                    title: "标题及内容",
                    dataIndex: "title",
                    key: "title",
                    scopedSlots: { customRender: "titlex" },
                },
                {
                    title: "关键字",
                    dataIndex: "keywords",
                    key: "keywords",
                },
                {
                    title: "来源",
                    dataIndex: "source",
                    key: "source",
                },
                {
                    title: "作者",
                    dataIndex: "user_author",
                    key: "user_author",
                },
                {
                    title: "发布时间",
                    dataIndex: "sourcetime",
                    key: "sourcetime",
                    width: 200,
                },
            ],
            pagination: {
                total: 0,
                current: 1,
                pageSize: 20,
            },
            tbData: [],
            tableLoading: false,
            selectedRows: [],
            sk: [],
            selectedRowKeys: "",
            secIds: [],
        }
    },
    created() {
        this.initData();
    },
    methods: {
        ...tableEvent,
        ...getApi
    },
    filters: {
        keyStr(str) {
            
        }
    }
}
</script>

<style lang="less">
.d-outter {
    padding: 0px 16px 16px 16px;
}
.d-inner {
    width: 100%;
    height: 960px;
    border: 2px solid #0f2a4d;
    background: #091e36;
    .d-inner-d1 {
        width: 100%;
        margin-top: 22px;
        margin-left: 20px;
        display: flex;
        .s1 {
            font-size: 14px;
            color: #fff;
        }
        .s2 {
            font-size: 14px;
            color: #fff;
            margin-left: 24px;
        }
        .s3 {
            font-size: 14px;
            color: #fff;
            margin-top: 6px;
        }
        .s4 {
            font-size: 14px;
            color: #fff;
            margin-left: 24px;
            margin-top: 6px;
        }
    }
    .d-inner-d2 {
        display: flex;
        justify-content: space-between;
        padding: 24px 20px 10px 20px;
        align-items: flex-end;
        .s1 {
            font-size: 14px;
            color: #fff;
        }
    }
}
.epor {
    width: 100%;
    height: 80px;
    .epor-btn {
        width: 480px;
        height: 80px;
        background-image: url("../../assets/images/comm/img_bbut.png");
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        line-height: 80px;
        color: #63aecc;
        font-size: 28px;
        cursor: pointer;
    }
}
</style>