<template>
    <fullscreen :fullscreen.sync="fullscreen" class="container">
        <div class="container-box">
            <div class="section2">
                <el-button
                    type="primary"
                    @click="dialogApplication(1)"
                    style="width: 100px;margin-right: 20px;margin-bottom: 20px;"
                    v-if="companyFlag == 0"
                    >审批</el-button
                >
                <el-button
                    type="primary"
                    @click="dialogApplication(2)"
                    style="width: 100px;margin-right: 20px;margin-bottom: 20px;"
                    v-if="companyFlag == 1 && isSubmitBtnShow"
                    >提交</el-button
                >
                <el-button
                    type="primary"
                    @click="dialogApplication(3)"
                    style="width: 100px;margin-right: 20px;margin-bottom: 20px;"
                    v-if="companyFlag == 1"
                    >发货回执</el-button
                >
            </div>
            <div class="tabbox">
                <el-table
                    height="calc(100% - 40px)"
                    class="com-table"
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    size="small"
                    border
                    style="width: 100%"
                    v-loading="loading"
                    @selection-change="tableSelectionChange"
                >

                    <!-- <el-table-column type="selection" width="55" v-if="companyFlag == 0" :selectable="selectable">
                    </el-table-column> -->
                    <el-table-column prop="countryName" label="区县名称">
                    </el-table-column>
                    <el-table-column prop="nextOpName" label="验收人">
                    </el-table-column>
                    <el-table-column prop="optime" label="验收时间">
                    </el-table-column>
                    <el-table-column prop="remark" label="验收说明">
                    </el-table-column>
                    
                    <el-table-column label="附件" align="center">
                        <template slot-scope="scope">
                            <a
                                style="width: 70px; display: inline-block; color:#169BD5; cursor:pointer"
                                @click="applicationCli(1, scope.row)"
                                >导出</a
                            >
                            <a
                                style="width: 70px; display: inline-block; color:#169BD5; cursor:pointer"
                                @click="applicationCli(2, scope.row)"
                                v-if="companyFlag == 1 && scope.row.sts == 3"
                                >打回</a
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <el-pagination
                    class="pageBox"
                    @current-change="currchange"
                    layout="prev, pager, next"
                    background
                    :total="total"
                >
                </el-pagination> -->
            </div>
        </div>
        <el-dialog
            :title="titname"
            :visible.sync="approvalDialogStatus"
            width="30%"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :before-close="closedia"
        >
            <div v-loading="loadinged">
                <el-form
                    :model="approvalinfolist"
                    ref="approvalinfolist"
                    :rules="rules"
                >
                    <el-form-item
                        class="info-line online"
                        style="margin-left: 10%"
                    >
                        <el-radio-group v-model="approvalinfolist.opinionradio">
                            <el-radio :label="1">同意</el-radio>
                            <el-radio :label="2">打回</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- <el-form-item
                        class="info-line online"
                        style="text-align: center"
                    >
                        <el-input
                            v-model="approvalinfolist.opinion"
                            placeholder="审批意见"
                            type="textarea"
                            :rows="2"
                        ></el-input>
                    </el-form-item> -->
                </el-form>

                <div slot="footer" class="dialog-footer myfooter">
                    <el-button @click="closedia">取 消</el-button>
                    <el-button type="primary" @click="dialogCli(1)"
                        >确 定</el-button
                    >
                </div>
            </div>
        </el-dialog>
        
        <el-dialog
            title="发货回执"
            :visible.sync="feedbackDialogStatus"
            width="30%"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :before-close="closedia"
        >
            <div v-loading="loadinged">
                <el-form
                    :model="approvalinfolist"
                    ref="approvalinfolist"
                    :rules="rules"
                >
                    <el-form-item class="info-line online" style="text-align: center">
                        <span>发货回执</span>
                        <el-input
                            v-model="feedbackInfo"
                            placeholder="发货回执"
                            type="textarea"
                            :rows="2"
                        ></el-input>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer myfooter">
                    <el-button @click="closedia">取 消</el-button>
                    <el-button type="primary" @click="dialogCli(3)">确 定</el-button>
                    
                </div>
            </div>
        </el-dialog>
        <el-dialog
            title="附件"
            :visible.sync="attStatus"
            width="50%"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :before-close="closedia"
        >
            <div slot="title">
                <div>
                    附件
                    <i
                        class="el-icon-full-screen"
                        style="float: right; margin-right: 30px"
                        @click="
                            () => {
                                fullscreen = !fullscreen;
                            }
                        "
                    ></i>
                </div>
            </div>
            <div v-loading="loadinged">
                <div style="margin: 10px 0">
                    <uploadDown :datalist="datalist"></uploadDown>
                </div>
                <div class="dialog-footer myfooter">
                    <el-button @click="attStatus = false">取 消</el-button>
                </div>
            </div>
        </el-dialog>
        <myMessage
            :messTit="messTit"
            @closeMessage="closeMessage"
            :centerDialogVisible="centerDialogVisible"
            v-if="centerDialogVisible"
        ></myMessage>
    </fullscreen>
</template>
<script>
import mySearch from "../../../components/search.vue";
import myMessage from "../../../components/myMessage.vue";
import toolList from "../../../components/toolList";
import myUpload from "../../../components/upload";
import uploadDown from "../../../components/uploadDown";
import { MessageBox } from "element-ui";

export default {
    components: {
        mySearch,
        myMessage,
        toolList,
        myUpload,
        uploadDown,
        MessageBox
    },
    data() {
        const regionName = (rule, value, callback) => {
            if (!this.infolist.regionName) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        const advTypeDesc = (rule, value, callback) => {
            if (!this.infolist.advTypeDesc) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        return {
            loginNo: JSON.parse(sessionStorage.userInfo).loginNo,
            rules: {
                regionName: [
                    {
                        required: true,
                        trigger: "change",
                        validator: regionName
                    }
                ],
                advTypeDesc: [
                    {
                        required: true,
                        trigger: "change",
                        validator: advTypeDesc
                    }
                ]
            },
            searchList: [
                // {
                //     type: 'input',
                //     tit: '物料名称',
                //     value: '',
                //     width: '48%',
                // },
                {
                    type: "sel",
                    tit: "物料类别",
                    value: "",
                    width: "98%",
                    options: []
                }
                // {
                //     type: 'input',
                //     tit: '地市名称',
                //     value: '',
                //     width: '98%',
                // },
            ],
            tooltit: "物料申请审核",
            fullscreen: false,
            total: 0,
            pageSize: 1,
            tableData: [],
            dialogStatus: false,
            disableStatus: false,
            applicationDialogStatus: false,
            titname: "",
            infolist: {},
            approvalinfolist: {
                opinionradio: 1
            },
            userInfo: {},
            params: {},
            centerDialogVisible: false,
            messTit: "",
            delid: "",
            loading: false,
            loadinged: false,
            fileInfo: {
                limit: 10,
                url: "/market/cwo/upload",
                fileList: []
            },
            infoApply: {},
            rovaList: [],
            woNoArr: [],
            feedbackDialogStatus: false,
            feedbackInfo: "",
            datalist: {
                url: "/market/cadvBusiMetirialWo/checkExport",
                type: 2
            },
            attStatus: false,
            companyFlag: "",
            isSubmitBtnShow: false,
            step: {},
            passedList:[],
            approvalDialogStatus: false,
            yzInfo:{}
        };
    },
    methods: {
        tableSelectionChange(val, row) {
            this.multipleSelection = val;
        },
        selectable(row, index){
            if(row.sts == 4){
                return false
            }else{
                return true
            }
        },
        closedia() {
            this.infolist = {};
            this.dialogStatus = false;
            this.applicationDialogStatus = false;
            this.approvalinfolist = {};
            this.feedbackDialogStatus = false;
            this.approvalDialogStatus = false;
            this.approvalinfolist.opinionradio = "1";
            this.attStatus = false;
        },
        //获取列表
        getList(v, n) {
            this.pageSize = n;
            let _this = this;
            // this.loading = true;
            this.tableData = [];
            // v.assigneeNo = this.loginNo;
            this.$http({
                url:
                    "/market/advSubtask/queryCountry",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    page: '{"pageNo":"' + n + '","pageSize":"10"}'
                },
                data: v
            }).then(res => {
                this.tableData = res.data.body.pageList;
                this.companyFlag = res.data.body.companyFlag
                // this.total = res.data.totalRecord;
                this.loading = false;
                // this.tableData.forEach(item => {
                //     if(item.sts == 3){

                //     }
                // });
                let finishData = []
                finishData = this.tableData.filter(item=>{
                    // if(this.params.pcId == 1 && this.companyFlag == 1){
                    //     return item.sts == 3
                    // }else if(this.params.pcId == 2 || this.params.pcId == 3){
                    //     return item.sts == 4
                    // } 
                    return item.sts == 3    
                })

                if(this.tableData.length == finishData.length){
                    this.isSubmitBtnShow = true
                }

            }); 
        },
        // 分页
        currchange(v) {
            this.pageSize = v;
            this.getList(this.params, this.pageSize);
        },
        // 审批/提交
        dialogApplication(v){
            if(v === 1){

                //批量,复选框提示
                // if (this.multipleSelection == undefined ||this.multipleSelection == "") 
                // {

                //     MessageBox.alert("请至少选择一条进行审批", "温馨提示", {
                //         confirmButtonText: "确定"
                //     });
                // } else 
                // {
                //     this.titname = "审批";
                //     this.approvalDialogStatus = true;
                // }

                this.titname = "审批";
                this.approvalDialogStatus = true;

            }else if(v === 2){
                let info = {};
                // info.id = this.params.countyWoId;
                info.id = this.params.cityWoId;
                info.woId = this.params.woId;
                this.submitInfo("/market/cadvBusiMetirialWo/ystj", info);

            }else if(v===3){
                this.feedbackDialogStatus = true;
            }
        },
        // 导出/打回
        applicationCli(v, n){
            if(v === 1){
                this.attStatus = true;
                this.datalist.attList = JSON.parse(n.attList);
            }else if(v === 2){
                let info = {};
                // info.id = this.params.countyWoId;
                info.id = n.id;
                info.woId = this.params.woId;
                this.submitInfo("/market/cadvBusiMetirialWo/dh", info);
            }
        },
        //省审批验收
        dialogCli(v) {
            if(v === 1){
                // this.yzInfo.mkAdvBusiMetirialWoCountryList = this.multipleSelection;

                    this.yzInfo.mkAdvBusiMetirialWoCountryList = this.tableData;
                    this.yzInfo.woId = this.params.woId;
                
                //同意
                if (this.approvalinfolist.opinionradio == 1) {
                    this.yzInfo.sts = "1";
                    
                    this.submitInfo(
                        "/market/cadvBusiMetirialWo/provYsdh",this.yzInfo
                        );
                    this.approvalDialogStatus = false;

                } //驳回
                else if (this.approvalinfolist.opinionradio == 2) {
                    
                    this.yzInfo.sts = "2";
                    this.submitInfo(
                        "/market/cadvBusiMetirialWo/provYsdh",this.yzInfo
                        );
                    this.approvalDialogStatus = false;
                }
            }else if (v === 3) {
                this.feedbackDialogStatus = false;
                let feedback = {};
                feedback.receipt = this.feedbackInfo;
                feedback.id = this.params.cityWoId;

                this.submitInfo("market/advSubtask/deliveryReceipt", feedback);
            }
        },
        submitInfo(u, v) {
            let _this = this;
            this.$http({
                url: u,
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                data: v
            }).then(res => {
                if (res.data.result === 1) {
                    _this.$message({
                        message: res.data.desc,
                        type: "error"
                    });
                } else if (res.data.result === 2) {
                    _this.$message({
                        message: res.data.desc,
                        type: "error"
                    });
                } else {
                    _this.$message({
                        message: "成功",
                        type: "success"
                    });
                    _this.getList(this.params, this.pageSize);
                    _this.$router.push("/materialApplication");
                    // this.isSubmitBtnShow = false;
                }
            });
        },
        closeMessage(v) {
            this.centerDialogVisible = false;
            let _this = this;
            if (v === 1) {
                _this
                    .$http({
                        url: "/bpm/api/deleteBpmPrePlugin",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        data: {
                            id: this.delid
                        }
                    })
                    .then(res => {
                        if (res.data.result === 1) {
                            _this.$message({
                                message: res.data.desc,
                                type: "error"
                            });
                        } else {
                            _this.$message({
                                message: "删除成功",
                                type: "success"
                            });
                            _this.getList(this.params, this.pageSize);
                        }
                    });
            }
        },
        //删除
        delLine(v) {
            this.centerDialogVisible = true;
            this.messTit = "即将删除此条数据, 是否删除?";
            this.delid = v.id;
        },
        //文件返回值
        uploadBack(v) {
        },
        //功能栏
        iconCli(v) {
            if (v === 1) {
                this.getList(this.params, this.pageSize);
            }
            if (v === 2) {
                this.fullscreen = !this.fullscreen;
            }
        },
        getUser() {
            this.userInfo = JSON.parse(window.sessionStorage.userInfo);
        }
    },
    mounted() {
        //地址栏不带参
        // if (JSON.stringify(this.$route.params) != "{}") {
        //     this.params.cityWoId = this.$route.params.cityWoId;
        //     this.params.countyWoId = this.$route.params.countyWoId;
        //     this.params.woId = this.$route.params.woId;
        //     this.params.pcId = this.$route.params.pcId;
        // }
        //地址栏带参
        // if (JSON.stringify(this.$route.query) != "{}") {
        //     this.params.cityWoId = this.$route.query.cityWoId;
        //     this.params.countyWoId = this.$route.query.countyWoId;
        //     this.params.woId = this.$route.query.woId;
        //     this.params.pcId = this.$route.query.pcId;
        // }
        
        this.getUser();
        let jumpParams = JSON.parse(sessionStorage.getItem("jumpParams"))
        this.params.cityWoId = jumpParams.cityWoId;
        this.params.countyWoId = jumpParams.countyWoId;
        this.params.woId = jumpParams.woId;
        this.params.pcId = jumpParams.pcId;
        // console.log(this.companyFlag);
        if(this.userInfo.cityName == null && this.userInfo.countyName == null){
            
            this.params.woCityId = this.$route.query.cityWoId;

        }else if(this.userInfo.cityName!=null && this.userInfo.countyName == null){
            
            this.params.woCityId = jumpParams.cityWoId;
            this.params.id = jumpParams.countyWoId;
           

        }
        

        this.getList(this.params, 1);
        
    },
    watch: {
        $route() {
            this.getList(this.params, 1);
        }
    },
    created() {}
};
</script>
<style scoped lang="scss">
.onetab {
    margin-bottom: 20px;
    padding: 0 20px;
}

.titbox {
    div {
        float: right;

        i {
            font-size: 22px;
            margin-left: 20px;
            cursor: pointer;
        }
    }
}

.tabbox {
    margin-top: 15px;
}

.pageBox {
    text-align: right;
    margin-top: 10px;
}

.info-line {
    width: 100%;
    display: block;
    padding-left: 20px;

    div {
        width: 50%;
        display: inline-block;
    }

    span {
        width: 80px;
        display: inline-block;
        text-align: left;

        i {
            color: red;
            display: inline-block;
            padding-right: 5px;
        }
    }

    .el-select,
    .el-input {
        width: calc(100% - 100px);
    }
}

.online {
    width: 100%;

    .el-select {
        width: calc(100% - 100px);
    }

    span {
        vertical-align: top;
    }

    .el-textarea {
        width: calc(100% - 100px);
    }
}
.adv-type {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    // border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    div {
        width: 33%;
        text-align: center;
        height: 80px;
        overflow: hidden;
        min-width: 100px;
        cursor: pointer;
        padding-top: 10px;
        margin: 10px 0;
    }
    div:hover {
        background: #cfe8fc;
        border-radius: 5px;
    }
    span {
        width: 100%;
        display: inline-block;
        height: 40px;
        // line-height: 40px;
        i {
            color: #0074d9;
            font-size: 36px;
        }
    }
}
.section2 {
    display: flex;
    align-items: center;
    margin: 40px 0;
    button {
        margin-bottom: 0 !important;
    }
    h3 {
        margin-right: 40px;
    }
}
</style>
