<template>
    <!-- 新购验收绑定主页列表 -->
    <div>
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="100px"
        >
            <el-form-item prop="startTime">
                <el-date-picker
                v-model="queryParams.startTime"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="开始日期"
                @change="() => queryParams.endTime = ''"
                style="width: 130px"
                />
            </el-form-item>
            <el-form-item>-</el-form-item>
            <el-form-item prop="endTime">
                <el-date-picker
                v-model="queryParams.endTime"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="结束日期"
                :picker-options="{ disabledDate: (t) => t.getTime() < new Date(queryParams.startTime).getTime() - 86400000}"
                style="width: 130px"
                />
            </el-form-item>

            <!-- <el-form-item label="设备状态" prop="status">
                <el-select
                    clearable
                    filterable
                    style="width: 240px"
                    placeholder="请选择设备状态"
                    v-model="queryParams.status"
                >
                    <el-option
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                        v-for="dict in dict.type.purchase_task_status"
                    />
                </el-select>
            </el-form-item> -->

            <el-form-item prop="keyWord">
                <el-input
                    v-model="queryParams.keyWord"
                    placeholder="请输入关键字"
                    clearable
                    maxlength="50"
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item  prop="isFinish">
                <el-select
                    clearable
                    filterable
                    style="width: 240px"
                    placeholder="状态筛选"
                    v-model="queryParams.isFinish"
                >
                    <el-option
                        :key="dict.id"
                        :label="dict.name"
                        :value="dict.id"
                        v-for="dict in taskStatusList"
                    />
                </el-select>
            </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="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
            border
            :data="bindList"
            v-loading="loading"
            @selection-change="handleSelectionChange"
        >
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column align="center" label="序号" type="index" :index="indexContinuation(queryParams.pageNum, queryParams.pageSize)" />
            <el-table-column
                align="center"
                label="到货日期"
                prop="arrivalTime" width="180"
                show-overflow-tooltip
            />
            <el-table-column
                label="采购单号"
                align="center"
                prop="code" width="160"
                show-overflow-tooltip
            />
            <el-table-column
                label="采购物资"
                align="center" width="200"
                prop="purchaseMaTypeName"
                show-overflow-tooltip
            />
            <el-table-column
                label="采购数量"
                align="center"
                prop="purchaseMaNumber"
                show-overflow-tooltip
            />
            <el-table-column
                label="创建人"
                align="center"
                prop="createBy"
                show-overflow-tooltip
            />
            <el-table-column
                label="创建时间"
                align="center"
                prop="createTime" width="180"
                show-overflow-tooltip
            />
            <el-table-column label="状态" align="center" prop="taskStatusName" show-overflow-tooltip>
<!--                <template slot-scope="{ row }">-->
<!--                    <dict-tag-->
<!--                        :value="row.taskStatus"-->
<!--                        :options="dict.type.purchase_task_status"-->
<!--                    />-->
<!--                </template>-->
            </el-table-column>

            <el-table-column
                label="备注"
                align="center"
                prop="remark"
                show-overflow-tooltip
            />

            <el-table-column label="操作" align="center" width="250" >
                <template slot-scope="{ row }">
                    <el-button
                        plain
                        size="mini"
                        type="primary"
                        icon="el-icon-zoom-in"
                        @click="handleView(row)"
                        >查看</el-button
                    >
                    <el-button
                        plain
                        size="mini"
                        type="warning" v-if="row.taskStatusName=='未完成'"
                        @click="handleBind(row)"
                    >
                        <svg-icon icon-class="bind-icon" />
                        编码绑定
                    </el-button>
                    <!-- <el-button
                        plain
                        size="mini"
                        type="danger" v-if="row.taskStatusName=='未完成'"
                        icon="el-icon-close"
                        @click="handleReject(row)"
                        >驳回</el-button
                    > -->
                </template>
            </el-table-column>
        </el-table>

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

<script>
import { getNewBuyBindListApi,rejectBind } from '@/api/purchase/goodsBind'

export default {
    name: 'Home',
    dicts: ['purchase_task_status'],
    data() {
        return {
            total: 0, //                总条数
            loading: true, //           遮罩层
            showSearch: true, //        显示搜索条件
            bindList: [], //            列表数据源
            queryTime: [], //           日期数据源
            selectList: [], //          列表选中数据
            taskStatusList:[{id:'0',name:'未完成'},{id:'1',name:'已完成'}],
            // 列表查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                isFinish: '',
                endTime: '',
                keyWord: '',
                startTime: '',
                // taskStatus: 3,
            },
        }
    },
    created() {
        // 设置默认状态为第一个选项（未完成）
        if (this.taskStatusList.length > 0) {
            this.queryParams.isFinish = this.taskStatusList[0].id
        }
        this.initDefaultDate()
        this.getList()
    },
    methods: {
        // 日期change
        onTimeChange(val) {
            if (val.length > 0) {
                const [time_1, time_2] = val
                this.queryParams.startTime = time_1
                this.queryParams.endTime = time_2
            } else {
                this.queryParams.startTime = ''
                this.queryParams.endTime = ''
            }
        },
        initDefaultDate() {
          const now = new Date();
          this.queryParams.endTime = this.formatDate(now);
          const oneMonthAgo= new Date(now);
          oneMonthAgo.setMonth(oneMonthAgo.getMonth()-1);
          this.queryParams.startTime=this.formatDate(oneMonthAgo);
        },

        formatDate(date) {
          const year = date.getFullYear();
          const month=String(date.getMonth()+1).padStart(2, '0');
          const day=String(date.getDate()).padStart(2, '0');
          return `${year}-${month}-${day}`
        },

        // 获取列表
        async getList() {
            // this.queryParams.startTime = this.queryTime ? this.queryTime[0] : ''
            // this.queryParams.endTime = this.queryTime ? this.queryTime[1] : ''
            this.loading = true
            this.queryParams.taskStage = 3
            const res = await getNewBuyBindListApi(this.queryParams)
            this.bindList = res.data.rows
            this.total = res.data.total
            this.loading = false
        },
        // 搜索按钮
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        // 重置按钮
        resetQuery() {
            this.queryTime = []
            this.resetForm('queryForm')
            this.queryParams.pageNum = 1

            this.queryParams.pageSize = 10

            this.getList()
        },
        // 查看
        handleView(row) {
            this.$emit('openBindTools', row.taskId, row.id, 1)
        },
        // 绑定
        handleBind(row) {
            this.$emit('openBindTools', row.taskId, row.id, 2)
        },
        // 驳回
        handleReject(row) {
            this.$modal
                .confirm("是否确定驳回？")
                .then(function () {
                return rejectBind({"taskId":row.taskId})
                })
                .then(() => {
                this.getList();
                this.$modal.msgSuccess("驳回成功");
                })
                .catch(() => {});
        },
        // 下载二维码
        onDownloadQr() {
            console.log('二维码下载')
        },
        // 导出数据
        handleExport() {
            console.log('数据导出')
          const formatTime = (date) => {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}${month}${day}_${hours}${minutes}${seconds}`;
          };

          const currentTime = formatTime(new Date());
            this.download(
                "/material/purchase_check_info/export",
                { ...this.queryParams,taskStage:3 },
                `新购到货绑定_${currentTime}.xlsx`
            );
        },
        // 列表复选框
        handleSelectionChange(list) {
            this.selectList = list
        },
    },
}
</script>
