<template>
    <div style="overflow-y: auto;">
        <div class="common-card">
            <h3>审批进度</h3>
            <yl-step></yl-step>
        </div>
        <div class="common-card">
            <h3>退货信息</h3>
            <el-form :model="listForm" ref="listform" label-width="237px" class="grid-form-class">
            <div class="form-body">
            <div class="flex-css">
                <el-form-item label="退货订单号" prop="aa">
                    <div class="content">
                        {{ listForm.aa }}
                    </div>
                </el-form-item>
                <el-form-item label="采购订单号" prop="bb">
                    <div class="content">
                        {{ listForm.bb }}
                    </div>
                </el-form-item>
                <el-form-item label="订单类型" prop="cc">
                    <div class="content">
                        {{ listForm.cc }}
                    </div>
                </el-form-item>
            </div>
            <div class="flex-css">
                <el-form-item label="供应商" prop="dd">
                    <div class="content">
                        {{ listForm.dd }}
                    </div>
                </el-form-item>
                <el-form-item label="业务员" prop="ee">
                    <div class="content">
                        {{ listForm.ee }}
                    </div>
                </el-form-item>
                <el-form-item label="明细条数" prop="ff">
                    <div class="content">
                        {{ listForm.ff }}
                    </div>
                </el-form-item>
            </div>
            <div class="flex-css">
                <el-form-item label="金额" prop="ii">
                    <div class="content">
                        {{ listForm.ii }}
                    </div>
                </el-form-item>
                <el-form-item label="制单人" prop="gg">
                    <div class="content">
                        {{ listForm.gg }}
                    </div>
                </el-form-item>
                <el-form-item label="制单时间" prop="hh">
                    <div class="content">
                        {{ listForm.hh }}
                    </div>
                </el-form-item>
            </div>
            <div class="flex-css">
                <el-form-item label="当前状态" prop="jj">
                    <div class="content">
                        {{ listForm.jj }}
                    </div>
                </el-form-item>
            </div>
            </div>
            </el-form>
        </div>
        <div class="common-card">
            <h3>退货明细</h3>
            <el-form :model="tableData" ref="tabledata">
            <el-table
                v-loading="tableLoading"
                element-loading-text="加载中"
                :data="tableData"
                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="drugListId" />
                <el-table-column label="药品信息" prop="" width="300">
                    <template slot-scope="scope">
                        <div class="drug-name">
                            <el-tag>{{ scope.row.drugName }}</el-tag>{{ "【" + scope.row.dosformName + "】" }}
                            <el-tag>{{ scope.row.essdrugType }}</el-tag
                            ><br />
                            {{ "生产厂家 【" + scope.row.prodentpName + "】" }}<br />
                            {{ "药品规格 【" + scope.row.specName + "】" }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="采购价" prop="delvPric" />
                <el-table-column label="采购金额" prop="delvAmt" />
                <el-table-column label="验收数量" prop="shppCnt" />
                <el-table-column label="可退数量" prop="toRetnCnt" />
                <el-table-column label="退货数量" prop="retnCnt" width="120">
                    <template slot-scope="scope">
                        <el-form-item
                            label-width="0"
                            class="item"
                            :prop="scope.$index + '.retnCnt'"
                            :rules="[
                            {
                                required: true,
                                pattern: /^[1-9]\d*$/,
                                message: '请输入正整数',
                                trigger: 'blur',
                            },
                            ]"
                        >
                            <el-input placeholder="请输入" v-model="scope.row.retnCnt" maxlength="10" :readonly="!isShow"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="退货金额" prop="returnPrice" />
                <el-table-column label="退货原因" prop="retnRea" />
            </el-table>
            </el-form>
            <div class="foot-button" style="margin:30px 0 20px;" v-if="isShow">
                <el-button type="primary" @click="handlePass" :loading="ppLoad">通过</el-button>
                <el-button type="danger" @click="handleNoPass" :loading="nnLoad">驳回</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import ylStep from "@/components/yl-step";
import { getDetlListWithRetnCnt } from "@/api/purchasing-management/return-report.js";
import { getRetnOrdDetlList } from "@/api/returnOrderAccept/index";
import { apprRetnOrd } from "@/api/approve/index";
    export default {
        components:{
            ylStep
        },
        data() {
            return {
                listForm: {
                    aa: "信息",
                    bb: "信息",
                    cc: "信息",
                    dd: "信息",
                    ee: "信息",
                    ff: "信息",
                    gg: "信息",
                    hh: "信息",
                    ii: "信息",
                    jj: "信息",
                },
                tableLoading: false,
                tableData: [],
                nnLoad: false,
                ppLoad: false,
                isShow: false,
                stasOptions: [
                    {value: 'A', lable: "未受理"},
                    {value: 'B', lable: "已受理"},
                    {value: 'R', lable: "被驳回"},
                    {value: 'C', lable: "已出库"},
                    {value: 'D', lable: "部分出库"},
                    {value: 'Y', lable: "已入库"},
                    {value: 'P', lable: "部分入库"}
                ],
                essdrugOptions: ["非基药","基药"],
            }
        },
        created () {
            if(this.$route.query.stas == "待审核"){
                this.isShow = true;
            }else{
                this.isShow = false;
            }
        },
        mounted () {
            this.getData();
        },
        methods: {
            getData(){
                // this.tableData = [{aa:"11",bb:"32",a:"注射用比阿培南",b:"注射剂-冻干粉针剂",c:"基药",d:"国药长治",e:"0.3g1支/支*10瓶/盒"},
                // {aa:"22",bb:"34",a:"注射用比阿培南",b:"注射剂-冻干粉针剂",c:"基药",d:"国药长治",e:"0.3g1支/支*10瓶/盒"}]
                this.tableLoading = true;
                getRetnOrdDetlList({ id: this.$route.query.sourceId }).then((res) => {
                    this.tableData = res.data;
                    this.tableData.forEach((item)=>{
                        item.essdrugType = this.essdrugOptions[item.essdrugType*1]
                    })
                    this.tableLoading = false;
                }).catch((err) => {
                    this.tableLoading = false;
                });
            },
            // 通过
            handlePass() {
                this.$refs.tabledata.validate((valid)=>{
                    if(valid){
                        this.$confirm("确认通过", "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning"
                        }).then(() => {
                            this.ppLoad = true;
                            console.log(this.tableData,'tableData')
                            let data = {
                                apprStas: "Y",
                                retnId: []
                            }
                            apprRetnOrd(data).then((res) => {
                                this.ppLoad = false;
                                this.$router.push('approveA')
                            })
                            .catch((err) => {
                                this.ppLoad = false;
                            });
                        })
                    }else{
                        this.$message({
                            type: "warning",
                            message: "请填写必填项信息",
                        });
                    }
                })
            },
            // 驳回
            handleNoPass() {
                this.$prompt("请输入驳回原因", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                    inputValidator: (value) => {
                    if (!value) {
                        return "驳回原因不能为空";
                    } else {
                        // this.conAddAForm.prodReject = value;
                    }
                    },
                }).then(() => {
                    this.nnLoad = true;
                    let data = {
                        apprStas: "R",
                        retnId: []
                    }
                    apprRetnOrd(data).then((res) => {
                        this.nnLoad = false;
                        this.$router.push('approveA')
                    })
                    .catch((err) => {
                        this.nnLoad = false;
                    });
                })
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>