<template>
    <div class="state common-container">
        <TitleBar></TitleBar>
        <div class="main-container">
            <div class="search-container TableSelectMain">
                <el-form class="table-select-main" :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-input placeholder="请输入专家" v-model="searchForm.expertName"></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="2"></el-option>
                                    <el-option label="已结束" :value="3"></el-option>
                                    <el-option label="已退款" :value="4"></el-option>
                                </el-select>
                            </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-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
                        prop="userName"
                        label="申述人"
                        min-width="100px;"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                        prop="expertName"
                        label="专家"
                        min-width="100px;"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column label="诊单类型" prop="dataTable">
                        <template slot-scope="scope">
                            <span v-if="scope.row.dataTable ==1">问诊</span>
                            <span v-if="scope.row.dataTable ==2">出诊</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="expression"
                        label="问题描述"
                        min-width="200px;"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column label="维修前视频" prop="beforeRepair" min-width="110px;">
                        <template slot-scope="scope">
                            <a
                                :href="scope.row.beforeRepair"
                                v-if="scope.row.beforeRepair"
                                target="_blank"
                            >点击查看</a>
                        </template>
                    </el-table-column>
                    <el-table-column label="维修后视频" prop="afterRepair" min-width="110px;">
                        <template slot-scope="scope">
                            <a
                                :href="scope.row.afterRepair"
                                v-if="scope.row.afterRepair"
                                target="_blank"
                            >点击查看</a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="imgs" label="申述图片">
                        <template slot-scope="scope">
                            <span v-if="scope.row.imgs && scope.row.imgs.length > 0" @click="imgOpen(scope.row.imgs[0])">
                            <el-image
                                :src="scope.row.imgs[0] | pathPipe"
                                style="width:40px;height:40px;cursor:pointer"
                            ></el-image>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="content"
                        label="申述内容"
                        min-width="200px;"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <!-- <el-table-column prop="planDate" 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="200px;" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span class="warn" v-show="scope.row.statuz == 1">未结束</span>
                            <RejectReason
                                :content="scope.row.cancelSeason"
                                v-show="scope.row.statuz == 2"
                            ></RejectReason>
                            <span class="success" v-show="scope.row.statuz == 3">已结束</span>
                            <span class="warn" v-show="scope.row.statuz == 4">已退款</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="300px;">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="chatShow(scope.row.sessionid, scope.row.createTime)"
                            >查看聊天</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                :disabled="scope.row.statuz != 1"
                                @click="reimburse(scope.row)"
                            >退款</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="regectShow(scope.row.id)"
                                :disabled="scope.row.statuz != 1"
                            >驳回</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="showDetailDialog(scope.row)"
                            >详情</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>
        <!-- 驳回弹窗 -->
        <RejectDialog @isReject="isReject" ref="regectDialog"></RejectDialog>
        <!-- 查看聊天弹框 -->
        <ChatDialog ref="chatDialog"></ChatDialog>
        <!-- 详情 -->
        <DetailsDialog ref="detailsDialog"></DetailsDialog>
    </div>
</template>
<script>
import TitleBar from '@/apps/mobile/components/common/TitleBar';
import RejectDialog from '@/apps/mobile/components/reject';
import ChatDialog from '@/apps/mobile/components/ViewChat/chat';
import { queryPage, removeData, editData, cancel, refund } from '@/apps/mobile/api/state/index';
import RejectReason from '@/apps/mobile/components/ReasonForRejection/index';
import DetailsDialog from './components/detailsDialog';
export default {
    components: {
        TitleBar,
        RejectDialog,
        ChatDialog,
        RejectReason,
        DetailsDialog,
    },
    data() {
        return {
            searchForm: {},
            page: {
                pageNum: 1,
                pageSize: 5,
            },
            total: 5,
            tableData: [],
            listLoading: false,
            rejectDialogVisible: false,
            chatDialogVisible: false,
            ids: [],
        };
    },
    created() {
        this.queryListData();
    },
    methods: {
        selectionChange(data) {
            this.ids = data.map(item => {
                return item.id;
            });
        },
        handlePagination(val) {
            this.page = val;
            this.queryListData();
        },
        closeDialog(dialogVisibleName) {
            console.log(dialogVisibleName);

            this[dialogVisibleName] = false;
        },
        regectShow(id) {
            this.$refs.regectDialog.open(id);
        },
        chatShow(id, time) {
            this.$refs.chatDialog.open(id, time);
        },
        queryListData() {
            this.listLoading = true;
            let obj = {
                ...this.page,
                ...this.searchForm,
                sort: {
                    order: 'asc',
                    orderBy: 'createTime',
                },
            };
            queryPage(obj)
                .then(res => {
                    if(res.statusCode == "10"){
                        this.$router.replace("/login");
                    }
                    this.tableData = res.data.records;
                    this.tableData.forEach(item => {
                        if (item.imgs) {
                            item.imgs = item.imgs.split(',');
                        }
                    });
                    this.total = res.data.total;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        query() {
            for (let k in this.searchForm) {
                if (this.searchForm[k] === '' || this.searchForm[k] === null || this.searchForm[k] === undefined) {
                    delete this.searchForm[k];
                }
            }
            this.page.pageNum = 1;
            this.queryListData();
        },
        // 重置
        reset() {
            this.searchForm = {};
            this.page.pageNum = 1;
            this.queryListData();
        },
        // statuzChange(id, statuz) {
        //     let obj = {
        //         id,
        //         statuz,
        //     };
        //     this.editformData(obj);
        // },
        // 编辑
        editformData(data) {
            editData(data)
                .then(() => {
                    this.$message.success('编辑成功');
                    this.queryListData();
                })
                .catch(err => err);
        },
        // 驳回
        isReject(data) {
            // console.log(data, 'isreject');
            let obj = {
                id: data.id,
                cancelSeason: data.checkComment,
            };
            cancel(obj)
                .then(() => {
                    this.queryListData();
                })
                .catch(err => err);
        },
        // 退款
        reimburse(data) {
            this.$confirm('是否确定退款?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    console.log();
                    let obj = {
                        id: data.id,
                        userId: data.appealerId,
                        // id:1,
                        // userId:1001101100000,
                    };
                    refund(obj)
                        .then(() => {
                            this.$message.success('操作成功');
                            this.queryListData();
                        })
                        .catch(err => err);
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消',
                    });
                });
        },
        showDetailDialog(data) {
            this.$refs.detailsDialog.open(data);
        },
        imgOpen(imgs){
            window.open(imgs);
        }
    },
};
</script>

<style lang="stylus" scoped>
a:link {
    font-size: 16px;
    color: #0000CC;
    text-decoration: none;
}
a:visited {
    font-size: 16px;
    color: #0000CC;
    text-decoration: none;
}
</style>
