<template>
    <div>
        <div style="height: 50vh;overflow-y: scroll;">
            <div class="info-line add" v-if="!cdisable" style="margin-bottom: 15px;">
                <span>添加终端</span>
                <el-select clearable v-model="oneterminal" placeholder="添加申请终端" multiple>
                    <el-option v-for="item in terminList" :key="item.id" :label="item.terminalTypeName+'-'+item.brandName+'-'+item.modelType+'-'+item.terminalNo"
                        :value="item.id">
                    </el-option>
                </el-select>
                <el-button style="width: 80px;" type="primary" @click="addtermin">添加</el-button>
            </div>

            <div class="onetab">
                <el-table class="com-table" ref="multipleTable" :data="infoApply" tooltip-effect="dark" size="small"
                    border style="width: 100%">
                    <el-table-column prop="terminalTypeName" label="类别">
                    </el-table-column>
                    <el-table-column prop="brandName" label="品牌">
                    </el-table-column>
                    <el-table-column prop="modelType" label="型号">
                    </el-table-column>
                    <el-table-column prop="terminalNo" label="终端编码">
                    </el-table-column>
                    <el-table-column label="操作" align="center" v-if="!cdisable">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" @click="deltermain(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <el-form :model="infolist" ref="infolist">
                <div class="info-line">
                    <el-form-item>
                        <span>工单标题</span>
                        <el-input v-model="infolist.params.woTitle" placeholder="申请数量" :disabled="cdisable"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <span>归还时间</span>
                        <el-date-picker v-model="reqBackTime" type="date" :disabled="cdisable" placeholder="归还时间">
                        </el-date-picker>
                    </el-form-item>
                </div>
                <div class="info-line">
                    <el-form-item>
                        <span>申请时间</span>
                        <el-input v-model="infolist.createTime" placeholder="申请时间" disabled></el-input>
                    </el-form-item>
                    <el-form-item>
                        <span>申请人</span>
                        <el-input v-model="infolist.assigneeName" placeholder="申请人" disabled></el-input>
                    </el-form-item>
                </div>
                <div v-if="changeinfo">
                    <el-form-item class="info-line online">
                        <span>备注</span>
                        <el-input v-model="infolist.remark" placeholder="备注"></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <div style="margin-bottom: 20px;padding: 0 20px;">
                <el-table class="com-table" ref="multipleTable" :data="rovaList" tooltip-effect="dark" size="small"
                    border style="width: 100%">
                    <el-table-column prop="procId" label="编号">
                    </el-table-column>
                    <el-table-column prop="taskName" label="环节">
                    </el-table-column>
                    <el-table-column prop="opName" label="处理人">
                    </el-table-column>
                    <el-table-column prop="opNo" label="处理人工号">
                    </el-table-column>
                    <el-table-column prop="createTime" label="处理时间">
                    </el-table-column>
                    <el-table-column prop="remark" label="备注">
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button v-if="changeinfo" type="primary" @click="dialogCli(2)">同 意</el-button>
            <el-button v-if="changeinfo" type="primary" @click="dialogCli(1)">驳 回</el-button>
            <el-button v-if="!changeinfo" @click="dialogCli(3)">确 定</el-button>
            <el-button @click="dialogCli(3)">取 消</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        props: ["componentInfo", "componentStatus","changeinfo"],
        components: {

        },
        data() {
            return {
                cdisable: true,
                dialogStatus: false,
                infolist: {},
                rovaList: [],
                infoApply: [],
                reqBackTime: '',
                userInfo: {},
                terminList: [],
                oneterminal: '',
            }
        },
        methods: {
            //处理申请
            dialogCheck() {
                this.userInfo = JSON.parse(window.sessionStorage.userInfo);
                this.$http({
                    url: '/bpm/api/taskInit',
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        taskId: this.componentInfo.taskId,
                        woNo: this.componentInfo.woNo
                    },
                }).then((res) => {
                    this.rovaList = res.data.taskList;
                    this.infolist = Object.assign({}, res.data);
                    if (res.data.assigneeNo === this.userInfo.loginName && '工单起草' === res.data.taskName && this.changeinfo) {
                        this.cdisable = false;
                        this.TerList();
                    } else {
                        this.cdisable = true;
                    }

                    this.infoApply = JSON.parse(this.infolist.params.terminalRes);
                    this.reqBackTime = this.infolist.params.reqBackTime;

                    this.infolist.assigneeName = this.infolist.taskList[0].opName;
                    this.infolist.opNo = this.userInfo.loginNo;
                    this.infolist.opName = this.userInfo.loginName;
                });
            },
            //添加
            dialogCli(v) {
                if (v === 3) {
                    this.closeInfo();
                    return
                }
                let _this = this;
                this.infolist.opTime = _this.$formatDate(new Date(), "YYYY-MM-DD")
                // return
                if (v === 1) {
                    let params = {
                        dealType: '1',
                        dealTypeDesc: '打回',
                        procId: this.infolist.procId,
                        procVersion: this.infolist.procVersion,
                        remark: this.infolist.remark,
                        stepId: this.infolist.stepId,
                        taskId: this.infolist.taskId,
                        taskName: this.infolist.taskName,
                        opName: this.infolist.opName,
                        opNo: this.infolist.opNo,
                        opTime: this.infolist.opTime,
                        params: {
                            procExeCondiVal: '不同意',
                            terminalRes: JSON.stringify(this.infoApply)
                        },
                        woNo: this.infolist.woNo,
                    }
                    this.submitInfo("/bpm/api/submitTask", params);
                } else if (v === 2) {
                    let param = {
                        dealType: '0',
                        dealTypeDesc: '提交',
                        procId: this.infolist.procId,
                        procVersion: this.infolist.procVersion,
                        remark: this.infolist.remark,
                        stepId: this.infolist.stepId,
                        taskId: this.infolist.taskId,
                        taskName: this.infolist.taskName,
                        opName: this.infolist.opName,
                        opNo: this.infolist.opNo,
                        opTime: this.infolist.opTime,
                        params: this.infolist.params,
                        // params:{
                        //     procExeCondiVal:'同意'
                        // },
                        woNo: this.infolist.woNo,
                    }
                    if (!this.cdisable) {
                        param.params = {};
                        param.params.terminalRes = [];
                        for (let i = 0; i < this.infoApply.length; i++) {
                            let terminal = {
                                terminalNo: this.infoApply[i].terminalNo,
                                terminalTypeName: this.infoApply[i].terminalTypeName,
                                brandName: this.infoApply[i].brandName,
                                modelType: this.infoApply[i].modelType,
                                id: this.infoApply[i].id,
                            }
                            param.params.terminalRes.push(terminal)
                        }
                        param.params.reqBackTime = _this.reqBackTime?_this.$formatDate(_this.reqBackTime, "YYYY-MM-DD"):'';
                        param.params.procName = this.infolist.procName;
                        param.params.terminalRes = JSON.stringify(param.params.terminalRes);
                    }
                    // console.log(param)
                    this.submitInfo("/bpm/api/submitTask", param);
                }
            },
            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 {
                        _this.$message({
                            message: '成功',
                            type: 'success'
                        });
                        _this.closeInfo();
                    }

                });
            },
            closeInfo() {
                this.infolist = {};
                this.rovaList = [];
                this.infoApply = [];
                this.reqBackTime = '';
                this.userInfo = {};
                this.terminList = [];
                this.oneterminal = '';
                this.cdisable = false;
                this.$emit("closeEdio")
            },
            //获取列表
            TerList() {
                let _this = this;
                this.$http({
                    url: "/market/terminal/terminalrepo/queryPage",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                        "page": '{"pageNo":"' + 1 + '","pageSize":"1000"}'
                    },
                    data: {
                        sts: '0'
                    },
                }).then((res) => {
                    this.terminList = res.data.data;
                });
            },
            addtermin() {
                let list = [];
                for (let j = 0; j < this.oneterminal.length; j++) {
                    for (let i = 0; i < this.terminList.length; i++) {
                        if (this.terminList[i].id === this.oneterminal[j]) {
                            list.push({
                                terminalTypeName: this.terminList[i].terminalTypeName,
                                brandName: this.terminList[i].brandName,
                                modelType: this.terminList[i].modelType,
                                terminalNo: this.terminList[i].terminalNo,
                                id: this.terminList[i].id,
                            })
                        }
                    }
                }
                for (let j = 0; j < list.length; j++) {
                    let sts = true;
                    for (let i = 0; i < this.infoApply.length; i++) {
                        if (this.infoApply[i].id === list[j].id) {
                            sts = false;
                        }
                    }
                    sts ? this.infoApply.push(list[j]) : '';
                }
            },
            deltermain(v) {
                for (let i = 0; i < this.infoApply.length; i++) {
                    if (this.infoApply[i].id === v.id) {
                        this.infoApply.splice(i, 1)
                    }
                }
            },
        },
        mounted() {

        },
        created() {
            if (this.componentStatus) {
                this.dialogCheck();
            }
        },
        watch: {
            componentStatus(v) {
                if (v) {
                    this.dialogCheck();
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .onetab {
        margin-bottom: 20px;
        padding: 0 20px;
    }

    .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 {
            width: calc(100% - 100px);
        }

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

    .add {
        .el-select {
            width: calc(100% - 200px);
            margin-right: 20px;
        }
    }

    .online {
        width: 100%;

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

        span {
            vertical-align: top;
        }

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

    .dialog-footer {
        text-align: right;
        padding: 15px 20px;
    }
</style>
