<template>
    <div>
        <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="id">
                    <div class="content">
                        {{ listForm.id }}
                    </div>
                </el-form-item>
                <el-form-item label="退货品种" prop="bb">
                    <div class="content">
                        {{ listForm.bb }}
                    </div>
                </el-form-item>
            </div>
            <div class="flex-css">
                <el-form-item label="退货总数" prop="orgName">
                    <div class="content">
                        {{ listForm.orgName }}
                    </div>
                </el-form-item>
                <el-form-item label="退货金额" prop="dd">
                    <div class="content">
                        {{ listForm.dd }}
                    </div>
                </el-form-item>
            </div>
            <div class="flex-css">
                <el-form-item label="发起人" prop="amt">
                    <div class="content">
                        {{ listForm.amt }}
                    </div>
                </el-form-item>
                <el-form-item label="发起时间" prop="retnDate">
                    <div class="content">
                        {{ listForm.retnDate }}
                    </div>
                </el-form-item>
            </div>
            <div class="flex-css">
                <el-form-item label="当前状态" prop="stas">
                    <div class="content">
                        {{ listForm.stas }}
                    </div>
                </el-form-item>
            </div>
            </div>
            </el-form>
        </div>
        <div class="common-card">
            <h3>退货明细</h3>
            <el-form :model="list" ref="listRef">
            <el-table
                v-loading="listLoading"
                element-loading-text="加载中"
                :data="list"
                fit
                stripe
                border
                @selection-change="handleSelectionChange"
            >
                <template slot="empty">
                    <img src="@/assets/nopage.png" alt />
                    <p>暂无数据</p>
                </template>
                <el-table-column type="selection" width="60" />
                <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 +"*" +scope.row.convrat +scope.row.prepunt +"/" +scope.row.pacUnt +"】"}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="商品类别" prop="" />
                <el-table-column label="规格" prop="" />
                <el-table-column label="型号" prop="" />
                <el-table-column label="材质" prop="shppCnt" />
                <el-table-column label="耗材名称" prop="retnCnt" />
                <el-table-column label="申请数量" prop="retnAmt" />
                <el-table-column label="价格" prop="retnAmt" />
                <el-table-column label="金额" prop="retnAmt" />
                <!-- <el-table-column label="驳回原因" prop="rejtRea" width="200">
                    <template slot-scope="scope">
                        <el-form-item
                            label-width="0"
                            class="item"
                            :prop="scope.$index + '.rejtRea'"
                            :rules="[
                            {
                                required: true,
                                message: '请输入',
                                trigger: 'blur',
                            },
                            ]"
                            v-if="isShow"
                        >
                            <el-input placeholder="请输入" v-model="scope.row.rejtRea"></el-input>
                        </el-form-item>
                        <el-form-item
                            label-width="0"
                            class="item"
                            :prop="scope.$index + '.rejtRea'"
                            v-else
                        >
                            <el-input placeholder="请输入" v-model="scope.row.rejtRea" readonly></el-input>
                        </el-form-item>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column fixed="right" label="是否驳回" width="100">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.flag" @change="handleSwitch(scope.$index,scope.row)" :disabled="!isShow"></el-switch>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-popconfirm
                            title="是否取消驳回？"
                            @confirm="handleNoReject(scope.row)"
                            confirm-button-text="确定"
                            cancel-button-text="取消"
                            icon="el-icon-info"
                            icon-color="red"
                            v-if="scope.row.rejtRea"
                        >
                            <el-button
                                class="red"
                                type="text"
                                slot="reference"
                                >取消驳回</el-button
                            >
                        </el-popconfirm>
                        <el-popconfirm
                            title="是否驳回？"
                            @confirm="handleReject(scope.row)"
                            confirm-button-text="确定"
                            cancel-button-text="取消"
                            icon="el-icon-info"
                            icon-color="red"
                            v-else
                        >
                            <el-button
                                class="red"
                                type="text"
                                slot="reference"
                                >驳回</el-button
                            >
                        </el-popconfirm>
                    </template>
                </el-table-column> -->
            </el-table>
            <p class="price-css">
                合计数量：{{ amount.num }} <span></span>合计金额： {{ amount.price }}
            </p>
            </el-form>

            <div class="foot-button">
                <el-button type="primary" @click="handleAccept" :loading="aaLoad" v-if="isShow">受理</el-button>
            </div>
        </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="stas">
                    <div class="content">
                        {{ listForm.stas }}
                    </div>
                </el-form-item>
            </div>
            <div class="flex-css">
                <el-form-item label="拒绝原因" prop="stas">
                    <div class="content">
                        {{ listForm.stas }}
                    </div>
                </el-form-item>
            </div>
            </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import ylStep from "@/components/yl-step";
import ylPagination from "@/components/yl-pagination";
import { getRetnOrdDetlList,acpRetnOrd } from "@/api/returnOrderAccept/index";
    export default {
        components:{
            ylStep,ylPagination
        },
        data() {
            return {
                listForm: {
                    id: "",
                    bb: "信息",
                    orgName: "",
                    dd: "信息",
                    amt: "",
                    retnDate: "",
                    delvDate: "",
                    stas: "",
                },
                stasOptions: [
                    {value: 'A', lable: "未受理"},
                    {value: 'B', lable: "已受理"},
                    {value: 'R', lable: "被驳回"},
                    {value: 'C', lable: "已出库"},
                    {value: 'D', lable: "部分出库"},
                    {value: 'Y', lable: "已入库"},
                    {value: 'P', lable: "部分入库"}
                ],
                essdrugOptions: ["非基药","基药"],
                listLoading: false,
                list:[],
                aaLoad: false,
                selectData: [],
                isShow: false,
            }
        },
        created() {
            if(this.$route.query.stas == 'A'){
                this.isShow = true;
            }else{
                this.isShow = false;
            }
            this.listForm.id = this.$route.query.id;
            this.listForm.orgName = this.$route.query.orgName;
            this.listForm.amt = this.$route.query.amt;
            this.listForm.retnDate = this.$route.query.retnDate;
            this.listForm.delvDate = this.$route.query.delvDate;
            this.stasOptions.forEach((i)=>{
                if(i.value == this.$route.query.stas){
                    this.listForm.stas = i.lable
                }
            })
        },
        mounted () {
            this.getData();
        },
        methods: {
            getData() {
                this.listLoading = true;
                getRetnOrdDetlList({ id: this.$route.query.id }).then((res) => {
                    this.list = res.data;
                    this.list.forEach((i)=>{
                        if(i.rejtRea){
                            i.flag = true;
                        }
                        item.essdrugType = this.essdrugOptions[item.essdrugType*1]
                    })
                    this.listLoading = false;
                }).catch((err) => {
                    this.listLoading = false;
                });
            },
            // 是否驳回开关
            handleSwitch(index,row){
                if(row.flag == false){
                    row.rejtRea = ""
                }
            },
            // 驳回
            handleReject(row){
                this.$refs.listRef.validate((valid)=>{
                    if(valid){
                        
                    }
                })
            },
            // 取消驳回
            handleNoReject(row){
                
            },
            // 多选
            handleSelectionChange(e){
                this.selectData = e;
            },
            // 受理
            handleAccept(){
                if(this.selectData.length == 0){
                    this.$message({
                        message: '请选择明细信息',
                        type: 'warning'
                    });
                    throw new Error("请选择明细信息");
                }
                this.selectData.forEach((e)=>{
                    if(e.flag == true && !e.rejtRea){
                        this.$message({
                            message: "选择是否驳回后请填写驳回原因",
                            type: "warning",
                        });
                        throw new Error("选择是否驳回后请填写驳回原因");
                    }
                })
                this.$confirm("确认受理", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    console.log(this.selectData,'selectData')
                    // let data = this.list.filter((i)=>{
                    //     if(i.flag == true){ return i }
                    // })
                    // let data2 = data.map((i)=>{
                    //     return {"id":i.id,"rejtRea":i.rejtRea}
                    // })

                    let data2 = this.selectData.map((i)=>{
                        return {"id":i.id,"rejtRea":i.rejtRea}
                    })
                    let data3 = {
                        id: this.$route.query.id,
                        detlList: data2
                    }
                    console.log(data3,'data3')
                    this.aaLoad = true;
                    acpRetnOrd(data3).then((res) => {
                        this.aaLoad = false;
                        this.$router.push('returnOrderAccept')
                    }).catch((err) => {
                        this.aaLoad = false;
                    });
                })
            },
        },
    }
</script>

<style lang="scss" scoped>

</style>