<template>
    <!-- 业务办理审核 -- 领料审核 -->
    <div class="app-container">
        <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline>
            <el-form-item label="申请日期" prop="timeRange">
                <el-date-picker
                    v-model="queryParams.timeRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    clearable
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                />
            </el-form-item>
            <el-form-item label="关键字" prop="keyWord">
                <el-input
                    v-model="queryParams.keyWord"
                    placeholder="请输入关键字"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="审核状态" prop="taskStatus">
                <el-select v-model="queryParams.taskStatus" placeholder="请选择审核状态" clearable>
                    <el-option
                        v-for="item in statusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>

            <!-- 表单按钮 -->
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                <el-button icon="el-icon-refresh" @click="handleReset">重置</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">领料申请</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">
                    导出数据
                </el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
        </el-row>

        <el-table :data="tableList" fit highlight-current-row style="width: 100%">
            <!-- 多选 -->
            <el-table-column type="selection" width="55" align="center" @selection-change="selectionChange" />
            <el-table-column
                type="index"
                width="55"
                label="序号"
                align="center"
                :index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
            />
            <el-table-column
                v-for="(column, index) in tableColumns"
                show-overflow-tooltip
                :key="column.prop"
                :label="column.label"
                :prop="column.prop"
                align="center"
            >
                <!-- 插槽 -->
                <template v-slot="scope" v-if="column.prop == 'taskStatus'">
                    <el-tag v-if="scope.row.taskStatus == '0'" type="warning" size="mini">待审核</el-tag>
                    <el-tag v-else-if="scope.row.taskStatus == '1'" size="mini">审核中</el-tag>
                    <el-tag v-else-if="scope.row.taskStatus == '2'" type="success" size="mini">已完成</el-tag>
                </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column label="操作" align="center" width="180">
                <template slot-scope="scope">
                    <el-button
                        v-if="scope.row.taskStatus != 2"
                        type="text"
                        size="mini"
                        icon="el-icon-edit"
                        @click="handleAuditing(scope.row, 1)"
                    >
                        审核
                    </el-button>
                    <el-button
                        v-if="scope.row.taskStatus == 2"
                        type="text"
                        size="mini"
                        icon="el-icon-search"
                        @click="handleAuditing(scope.row, 2)"
                    >
                        查看
                    </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"
        />
    </div>
</template>

<script>
import { getLeaseTaskList, deleteLeaseTask } from '@/api/business/index'
import { getReceiveApplyApi } from '@/api/receive-apply/index.js'

export default {
    data() {
        return {
            showSearch: true,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                keyWord: '', // 关键字
                taskStatus: '', // 审核状态
                timeRange: [] // 日期范围
            },
            // 考勤状态
            statusOptions: [
                { label: '待审核', value: '1' },
                { label: '审核中', value: '2' },
                { label: '已完成', value: '3' }
            ],
            total: 0, // 总条数
            // 表头
            tableColumns: [
                { label: '申请时间', prop: 'createTime' },
                { label: '申请人', prop: 'createBy' },
                { label: '领用单位', prop: 'leaseUnit' },
                { label: '领用工程', prop: 'leaseProject' },
                { label: '领料物资类型', prop: 'maTypeNames' },
                { label: '协议号', prop: 'agreementCode' },
                { label: '采购申请单号', prop: 'applyCode' },
                { label: '领料人', prop: 'leasePerson' },
                { label: '领料人电话', prop: 'phone' },
                { label: '状态', prop: 'taskStatus' }
            ],
            // 表格数据
            tableList: []
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 查询
        handleQuery() {
            this.getList()
        },
        // 重置
        handleReset() {
            this.queryParams.pageNum = 1
            this.queryParams.pageSize = 10
            this.$refs.queryForm.resetFields()
            this.getList()
        },
        // 获取列表
        async getList() {
            console.log('列表-查询', this.queryParams)
            try {
                const params = {
                    ...this.queryParams,
                    startTime: this.queryParams.timeRange[0] || '',
                    endTime: this.queryParams.timeRange[1] || ''
                }
                const res = await getReceiveApplyApi(params)
                console.log('🚀 ~ 获取列表 ~ res:', res)
                this.tableList = res.data.rows
                // this.tableList = [
                //   {
                //     createBy: '张麻子'
                //   },
                //   {
                //     createBy: '张麻子'
                //   },
                //   {
                //     createBy: '张麻子'
                //   }
                // ]
                this.total = res.data.total || 0
            } catch (error) {
                console.log('🚀 ~ 获取列表 ~ error:', error)
                this.tableList = []
                this.total = 0
            }
        },
        // 多选
        selectionChange(val) {
            console.log('selectionChange', val)
        },
        handleAdd() {
            console.log('领料申请')
            this.$router.push({ path: '/business/businessHandling/index' })
        },
        // 审核按钮
        handleAuditing(row, type) {
            // console.log('编辑', row)
            // let params = {}
            // if (type === 1) {
            //     params = { type: 'detail', id: row.id }
            // } else {
            //     params = { type: 'edit', id: row.id }
            // }
            // this.$router.push({ path: '/business/businessHandling/index', query: params })
            this.$router.push({
                name: 'receive-apply-details',
                query: {
                    id: row.id,
                    taskId: row.taskId,
                    type
                }
            }) // 跳转审核详情页面
        },
        // 删除
        handleDelete(row) {
            console.log('删除', row)
            this.$confirm('是否删除该数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await deleteLeaseTask(row.id)
                console.log('🚀 ~ 删除 ~ res:', res)
                this.getList()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                })
            })
        },
        // 导出数据
        handleExport() {
            try {
                let fileName = `数据_${new Date().getTime()}.xLsx`
                let url = ''
                const params = { ...this.queryParams }
                console.log('🚀 ~ 导出 ~ params:', params)
                // this.derive(url, params, fileName)
            } catch (error) {
                console.log('导出数据失败', error)
            }
        }
    }
}
</script>

<style lang="scss" scoped></style>
