<template>
    <div class="common-box">
        <el-form :model="listQuery" ref="queryForm" :inline="true">
            <el-form-item label="单据编号" prop="id">
                <el-input v-model="listQuery.id" placeholder="请输入单据编号"></el-input>
            </el-form-item>
            <el-form-item label="提交时间" prop="sbmtDate">
                <el-date-picker
                v-model="listQuery.sbmtDate"
                type="daterange"
                range-separator="至"
                :editable="false"
                value-format="yyyy-MM-dd"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="width: 230px"
                />
            </el-form-item>
            <el-form-item label="单据状态" prop="stas">
                <el-select
                    v-model="listQuery.stas"
                    placeholder="全部"
                    clearable
                >
                    <el-option
                        v-for="item in stasOptions"
                        :key="item.value"
                        :label="item.lable"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData('search')">查询 </el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="right-button">
            <el-button
                class="lake-Blue"
                type="primary"
                icon="el-icon-plus"
                @click="handleApply"
            >发起申领
            </el-button>
        </div>
        <el-table
            v-loading="listLoading"
            element-loading-text="加载中"
            :data="list"
            fit
            stripe
            border
        >
            <template slot="empty">
                <img src="@/assets/nopage.png" alt />
                <p>暂无数据</p>
            </template>
            <el-table-column fixed type="index" label="序号" width="60"/>
            <el-table-column label="单据编号" prop="id" />
            <el-table-column label="单据状态" prop="stas" >
                <template #default="{ row }">
                    <span v-if="row.stas == 'Y'">通过</span>
                    <span v-if="row.stas == 'R'">驳回</span>
                    <span v-if="row.stas == 'B'||row.stas == '0'">待审核</span>
                    <span v-if="row.stas == 'A'">待提交</span>
                </template>
            </el-table-column>
            <el-table-column label="明细条数" prop="detlCnt" />
            <el-table-column label="制单人" prop="docmker" />
            <el-table-column label="制单时间" prop="docmkDate" />
            <el-table-column label="提交时间" prop="sbmtDate" />
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <div v-if="scope.row.stas == 'A'||scope.row.stas == 'R'">
                        <el-button
                            class="cyan"
                            type="text"
                            @click="handleEdit(scope.row)"
                            >编辑</el-button
                        >
                        <el-button
                            class="red"
                            type="text"
                            @click="handleDelete(scope.row)"
                            :disabled="del"
                            >删除</el-button
                        >
                    </div>
                    <div v-else>
                        <el-button
                            type="text"
                            @click="handleDetail(scope.row)"
                            >详情</el-button
                        >
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <yl-pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.current"
            :limit.sync="listQuery.size"
            @pagination="getData"
        />
    </div>
</template>

<script>
import ylPagination from "@/components/yl-pagination";
import { getPageByOrg,delAppy } from "@/api/applyManage/index";
    export default {
        components: {
            ylPagination
        },
        data() {
            return {
                listQuery:{
                    current: 1,
                    size: 10,
                    id: "",
                    stas: "",
                    sbmtDateStart: "",
                    sbmtkDateEnd: "",
                    sbmtDate: []
                },
                stasOptions: [
                    {value: 'A', lable: "待提交"},
                    {value: 'B', lable: "待审核"},
                    {value: 'Y', lable: "通过"},
                    {value: 'R', lable: "驳回"},
                ],
                listLoading: false,
                list: [],
                total: 0,
                del: false
            }
        },
        methods: {
            getData(type) {
                if (type == "search") {
                    this.listQuery.current = 1;
                }
                this.listLoading = true;
                this.listQuery.sbmtDateStart = this.listQuery.sbmtDate[0];
                this.listQuery.sbmtkDateEnd = this.listQuery.sbmtDate[1];
                getPageByOrg(this.listQuery).then((res) => {
                    this.list = res.data.records;
                    this.total = res.data.total;
                    this.listLoading = false;
                })
                .catch((err) => {
                    this.listLoading = false;
                });
            },
            reset(){
                this.$refs.queryForm.resetFields();
                this.getData();
            },
            // 发起申领
            handleApply(){
                this.$router.push({
                    name: 'drugDetail',
                    query: {type: "add"}
                });
            },
            // 编辑
            handleEdit(row){
                this.$router.push({
                    name: 'drugDetail',
                    query: {id: row.id}
                });
            },
            // 删除
            handleDelete(row){
                this.$confirm("确认删除", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.del = true;
                    delAppy({id:row.id}).then((res) => {
                        this.del = false;
                        this.getData();
                    }).catch(()=>{
                        this.del = false;
                    })
                })
            },
            // 详情
            handleDetail(row){
                this.$router.push({
                    name: 'orderDetail',
                    query: {id: row.id,stas:row.stas}
                });
            },
        },
        mounted () {
            this.getData();
        },
    }
</script>

<style lang="scss" scoped>

</style>