<template>
    <div class="common-container">
        <TitleBar></TitleBar>
        <div class="main-container">
            <div class="search-container TableSelectMain">
                <el-form
                    class="table-select-main widthAuto"
                    :model="searchForm"
                    label-position="left"
                >
                    <el-row :gutter="15">
                        <el-col :span="4">
                            <el-form-item>
                                <el-input placeholder="请输入发起人" v-model="searchForm.userName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-select placeholder="屏蔽会话" v-model="searchForm.statuz" clearable>
                                    <el-option label="是" :value="1"></el-option>
                                    <el-option label="否" :value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-form-item>
                                <el-date-picker
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    v-model="time"
                                    format="yyyy-MM-dd"
                                    value-format="timestamp"
                                    class="time"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-button type="primary" plain round @click="query">查询</el-button>
                                <el-button type="primary" plain round @click="reset">重置</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item>
                                <!-- <el-button type="primary" round icon="el-icon-plus">新建</el-button> -->
                                <el-button type="primary" plain round @click="showBatch(1)">批量显示</el-button>
                                <el-button type="primary" plain round @click="showBatch(0)">批量屏蔽</el-button>
                                <!-- <el-button type="primary" plain round>批量删除</el-button> -->
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <div class="SearchTitle">
                已选择
                <span class="subject-color">{{ ids.length }}</span> 项
            </div>

            <div class="MaintenanceTable">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="selectionChange"
                    class="OutTable"
                    border
                    v-loading="listLoading"
                >
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column label="类型" min-width="100px;">
                        <template slot-scope="scope">
                            <span v-show="scope.row.dataTable == 1">问诊</span>
                            <span v-show="scope.row.dataTable == 2">出诊</span>
                            <span v-show="scope.row.dataTable == 3">私聊</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="expression" label="诊单标题" min-width="200px;"></el-table-column>
                    <el-table-column prop="sessionid" label="会话id" min-width="100px;"></el-table-column>
                    <el-table-column prop="userName" label="发起人" min-width="200px;"></el-table-column>
                    <el-table-column label="发起时间" min-width="120px;" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.createTime | formatTimePipe }}</template>
                    </el-table-column>
                    <el-table-column prop="statuz" label="是否展示" min-width="110px;">
                        <template slot-scope="scope">
                            <el-switch
                                v-model="scope.row.statuz"
                                active-text="是"
                                inactive-text="否"
                                :active-value="1"
                                :inactive-value="0"
                                @change="statuzChange(scope.row.id, scope.row.statuz)"
                            ></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="220px;">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="chatShow(scope.row.sessionid, scope.row.createTime)"
                            >详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagenation">
                    <PageComponent
                        :total="total"
                        @pagination="handlePagination"
                        :pageSize.sync="page.pageSize"
                        :pageNum.sync="page.pageNum"
                    ></PageComponent>
                </div>
            </div>
        </div>
        <!-- 详情弹框 -->
        <ChatDialog ref="chatDialog"></ChatDialog>
    </div>
</template>
<script>
import TitleBar from '@/apps/mobile/components/common/TitleBar';
import ChatDialog from '@/apps/mobile/components/ViewChat/chat';
import { queryPage, removeData, editData, useBath } from '@/apps/mobile/api/dialogue/index';
export default {
    components: {
        TitleBar,
        ChatDialog,
    },
    data() {
        return {
            searchForm: {},
            tableData: [],
            page: {
                pageNum: 1,
                pageSize: 5,
            },
            total: 5,
            listLoading: false,
            time: [],
            ids: [],
            // sessionidList:[], //选中的会话ID
        };
    },
    methods: {
        // 页码变化时
        handlePagination(val) {
            this.page = val;
            this.queryListData();
        },
        selectionChange(data) {
            this.ids = data.map(item => {
                return item.id;
            });
        },
        chatShow(id, time) {
            this.$refs.chatDialog.open(id, time);
        },
        queryListData() {
            this.listLoading = true;
            let obj = {
                ...this.page,
                ...this.searchForm,
                sort: {
                    order: 'desc',
                    orderBy: 't.create_time',
                },
            };
            if (this.time && this.time.length >= 2) {
                obj.starDate = this.time[0];
                obj.endDate = this.time[1];
            }
            queryPage(obj)
                .then(res => {
                    console.log(res);
                    if(res.statusCode == "10"){
                        this.$router.replace("/login");
                    }
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        // 查询
        query() {
            for (let k in this.searchForm) {
                if (this.searchForm[k] === '') {
                    delete this.searchForm[k];
                }
            }
            this.page.pageNum = 1;
            this.queryListData();
        },
        // 重置
        reset() {
            this.searchForm = {};
            this.time = [];
            this.page.pageNum = 1;
            this.queryListData();
        },
        statuzChange(id, statuz) {
            let obj = {
                ids: [id],
                status: statuz
            };
            useBath(obj)
                .then(() => {
                    this.$message.success('操作成功');
                    this.queryListData();
                })
                .catch(err => err);
        },
        // 编辑
        editformData(data) {
            editData(data)
                .then(() => {
                    this.$message.success('编辑成功');
                    this.queryListData();
                })
                .catch(err => err);
        },
        showBatch(status) {
            let obj = {
                ids: this.ids,
                status,
            };
            console.log(obj, 'sasaasas');
            useBath(obj)
                .then(() => {
                    this.$message.success('操作成功');
                    this.queryListData();
                })
                .catch(err => err);
        },
    },
    created() {
        this.queryListData();
    },
};
</script>
<style lang="stylus" scoped>
.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: 95%;
}

::v-deep .el-date-editor .el-range-separator {
    width: auto;
}
</style>
