<template>
    <!-- 首页 -->
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
        >
            <el-form-item label="关键字" prop="keyWord">
                <el-input
                    v-model="queryParams.keyWord"
                    placeholder="请输入关键字"
                    clearable
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="待办单号" prop="taskCode">
                <el-input
                    v-model="queryParams.taskCode"
                    placeholder="请输入待办单号"
                    clearable
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="待办事件" prop="taskTypeId">
                <el-select
                    v-model="queryParams.taskTypeId"
                    placeholder="待办事件"
                    clearable
                    filterable
                    style="width: 240px"
                >
                    <el-option
                        v-for="types in taskTypeList"
                        :key="types.taskTypeId"
                        :label="types.taskType"
                        :value="types.taskTypeId"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker
                    v-model="dateRange"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >查询</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <!--    <el-row :gutter="10" class="mb8">-->
        <!--      <el-col :span="1.5">-->
        <!--        <el-button-->
        <!--          type="primary"-->
        <!--          plain-->
        <!--          icon="el-icon-plus"-->
        <!--          size="mini"-->
        <!--          @click="handleAdd"-->
        <!--          v-hasPermi="['system:dict:add']"-->
        <!--        >新增</el-button>-->
        <!--      </el-col>-->
        <!--      <el-col :span="1.5">-->
        <!--        <el-button-->
        <!--          type="success"-->
        <!--          plain-->
        <!--          icon="el-icon-edit"-->
        <!--          size="mini"-->
        <!--          :disabled="single"-->
        <!--          @click="handleUpdate"-->
        <!--          v-hasPermi="['system:dict:edit']"-->
        <!--        >修改</el-button>-->
        <!--      </el-col>-->
        <!--      <el-col :span="1.5">-->
        <!--        <el-button-->
        <!--          type="danger"-->
        <!--          plain-->
        <!--          icon="el-icon-delete"-->
        <!--          size="mini"-->
        <!--          :disabled="multiple"-->
        <!--          @click="handleDelete"-->
        <!--          v-hasPermi="['system:dict:remove']"-->
        <!--        >删除</el-button>-->
        <!--      </el-col>-->
        <!--      <el-col :span="1.5">-->
        <!--        <el-button-->
        <!--          type="warning"-->
        <!--          plain-->
        <!--          icon="el-icon-download"-->
        <!--          size="mini"-->
        <!--          @click="handleExport"-->
        <!--          v-hasPermi="['system:dict:export']"-->
        <!--        >导出</el-button>-->
        <!--      </el-col>-->
        <!--      <el-col :span="1.5">-->
        <!--        <el-button-->
        <!--          type="danger"-->
        <!--          plain-->
        <!--          icon="el-icon-refresh"-->
        <!--          size="mini"-->
        <!--          @click="handleRefreshCache"-->
        <!--          v-hasPermi="['system:dict:remove']"-->
        <!--        >刷新缓存</el-button>-->
        <!--      </el-col>-->
        <!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
        <!--    </el-row>-->

        <el-table v-loading="loading" :data="typeList" border>
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column
                label="序号"
                align="center"
                width="80"
                type="index"
                :index="
                    indexContinuation(queryParams.pageNum, queryParams.pageSize)
                "
            >
                <!-- <template slot-scope="scope">
                    <span>{{
                        (queryParams.pageNum - 1) * 10 + scope.$index + 1
                    }}</span>
                </template> -->
            </el-table-column>
            <el-table-column
                label="任务单号"
                align="center"
                prop="taskCode"
                show-overflow-tooltip
            />
            <el-table-column
                label="待办任务"
                align="center"
                prop="taskType"
                show-overflow-tooltip
            />
            <el-table-column
                label="待办事件"
                align="center"
                prop="taskEvent"
            ></el-table-column>
            <el-table-column
                label="任务创建人"
                align="center"
                prop="createName"
                show-overflow-tooltip
            />
            <el-table-column
                label="创建时间"
                align="center"
                prop="createTime"
                width="180"
            >
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) || '-' }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="{ row }">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handlePreview(row.taskTypeId, row.taskCode)"
                    >
                        查 看
                    </el-button>

                    <!-- 代办事件为领料任务时显示催办按钮 -->
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit-outline"
                        style="color: #e6a23c"
                        v-if="row.taskTypeId == 29"
                        @click="
                            handleUrging(
                                row.taskTypeId,
                                row.taskCode,
                                row.taskEvent,
                                row.taskId,
                            )
                        "
                    >
                        催 办
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 催办弹框 -->
        <el-dialog
            title="催办"
            :visible.sync="urgingDialogVisible"
            width="60%"
            append-to-body
            :before-close="handleCloseUrgingDialog"
        >
            <el-form label-width="120px" label-position="right">
                <el-form-item label="待办人：">
                    <el-row>
                        <el-tag
                            class="addressee"
                            :closable="toPersonInfo.length > 1"
                            type="info"
                            v-for="(item, v) in toPersonInfo"
                            :key="v.noticeUser"
                            @close="handleDeleteToPerson(v)"
                        >
                            {{ item.v_name }}
                        </el-tag>
                    </el-row>
                </el-form-item>
                <el-form-item label="通知内容：">
                    <div
                        class="message-info"
                        v-html="sendMessageParams.message"
                    ></div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    icon="el-icon-position"
                    size="medium"
                    type="primary"
                    @click="submitForm"
                    >发 送</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getToDoList,
    getTaskTypeList,
    getToPersonInfoAp,
    sendUrgingMessageApi,
} from '@/api/index'
export default {
    name: 'myIndex',
    data() {
        return {
            // 遮罩层
            loading: false,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 字典表格数据
            typeList: [],
            // 日期范围
            dateRange: [],
            taskTypeList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                keyWord: '',
                taskCode: '',
                taskTypeId: '',
            },

            /* 列表查看跳转的路由地址 */
            previewRouterList: [
                /* 新购任务 */
                {
                    taskTypeId: 23,
                    routerPath: 'store/newPurchase/tools',
                },
                /* 领料任务 */
                {
                    taskTypeId: 29,
                    routerPath: 'claimAndRefund/picking/apply',
                },
                /* 退料任务 */
                {
                    taskTypeId: 36,
                    routerPath: 'claimAndRefund/return/apply',
                },
                /* 维修任务 */
                {
                    taskTypeId: 41,
                    routerPath: 'repairTest/repairTest/repair',
                },
                /* 维修审核 */
                {
                    taskTypeId: 45,
                    routerPath: 'repairTest/repairTest/testExamine',
                },
                /* 修试入库任务 */
                {
                    taskTypeId: 50,
                    routerPath: 'store/warehousing/repair',
                },
                /* 报废任务 */
                {
                    taskTypeId: 57,
                    routerPath: 'repairTest/repairTest/brokenExamine',
                },
                /* 新购配件任务 */
                {
                    taskTypeId: 67,
                    routerPath: 'store/warehousing/newParts',
                },
            ],

            /* 催办弹框 */
            urgingDialogVisible: false,
            /* 待办人信息 */
            toPersonInfo: [],
            /* 发送参数 */
            sendMessageParams: {
                taskId: '',
                message: '',
                // 接收人
                bmNoticeInfoList: [],
            },
        }
    },
    created() {
        this.getList()
        this.getTaskTypeList()
    },
    methods: {
        getTaskTypeList() {
            getTaskTypeList().then((response) => {
                this.taskTypeList = response.data
            })
        },
        /** 查询字典类型列表 */
        getList() {
            this.loading = true
            console.log(this.dateRange)
            if (this.dateRange && this.dateRange.length > 0) {
                this.queryParams.startTime = this.dateRange[0]
                this.queryParams.endTime = this.dateRange[1]
            } else {
                this.queryParams.startTime = ''
                this.queryParams.endTime = ''
            }
            getToDoList(this.queryParams).then((response) => {
                this.typeList = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = []
            this.resetForm('queryForm')
            this.handleQuery()
        },

        /**
         * 列表查看操作===========================================================
         */
        handlePreview(id, key) {
            const [routerInfo] = this.previewRouterList.filter(
                (e) => e.taskTypeId == id,
            )
            this.$router.push({
                path: routerInfo.routerPath,
                query: {
                    keyWord: key,
                },
            })
        },

        /* 催办按钮 */
        async handleUrging(id, taskCode, taskStatus, taskId) {
            /* 先获取催办人信息 */
            const { data: res } = await getToPersonInfoAp({
                taskStatus,
            })
            res.map((e) => {
                this.toPersonInfo.push({
                    noticeUser: e.userId,
                    phone: e.phonenumber,
                    modelName: '领料催办',
                    companyId: e.companyId,
                    v_name: e.nickName,
                })
            })

            this.sendMessageParams.message = `重庆送变电工程有限公司提示：您有一条任务单号为 <span style="color:#529b2e">${taskCode}</span> 的待办任务未处理，请及时处理。`
            this.sendMessageParams.taskId = taskId

            this.urgingDialogVisible = true
        },

        /* 取消其中某一个待办人 */
        handleDeleteToPerson(v) {
            this.toPersonInfo.splice(v, 1)
        },

        /* 催办发送 */
        async submitForm() {
            this.sendMessageParams.bmNoticeInfoList = this.toPersonInfo
            const res = await sendUrgingMessageApi(this.sendMessageParams)
            if (res.code == 200) {
                this.$message.success('发送成功！')
                this.toPersonInfo = []
                this.urgingDialogVisible = false
            } else {
                this.$message.error(res.msg)
            }
        },
        /* 弹框右上角关闭按钮 */
        handleCloseUrgingDialog() {
            this.toPersonInfo = []
            this.urgingDialogVisible = false
        },
    },
}
</script>

<style scoped>
.message-info {
    height: 100px;
    padding: 0 10px;
    border: 1px solid #ccc;
    letter-spacing: 1px;
    border-radius: 3px;
    font-size: 16px;
    font-weight: bold;
}

.addressee {
    margin-left: 3px;
}
</style>
