<template>
    <div>
        <div style="height: 50vh;overflow-y: scroll;">
            <el-form :model="infoApply" ref="infoApply">
                <el-form-item class="info-line online">
                    <span>工单标题</span>
                    <el-input disabled v-model="infoApply.tit" placeholder="工单标题"></el-input>
                </el-form-item>
                <el-form-item class="info-line online">
                    <span>需求类型</span>
                    <el-radio-group disabled v-model="infoApply.mbhxqlx">
                        <el-radio v-for="items in mbhxqlxopt" :key="items.dataCode" :label="items.dataName"
                            :value="items.dataCode"></el-radio>
                      </el-radio-group>
                </el-form-item>
                <el-form-item class="info-line online">
                    <span>投放位置</span>
                    <el-checkbox-group disabled v-model="infoApply.mbhtfwz">
                        <el-checkbox v-for="items in mbhtfwzopt" :key="items.dataCode" :label="items.dataName"
                            :value="items.dataCode"></el-checkbox>
                      </el-checkbox-group>
                </el-form-item>
                <div class="info-line">
                    <el-form-item>
                        <span>开始时间</span>
                        <el-date-picker disabled v-model="infoApply.mbhkssj" type="date" format="yyyy-MM-dd" placeholder="开始时间">
                        </el-date-picker>
                    </el-form-item>
                </div>
                <div class="info-line">
                    <el-form-item>
                        <span>结束时间</span>
                        <el-date-picker disabled v-model="infoApply.mbhjssj" type="date" format="yyyy-MM-dd" placeholder="结束时间">
                        </el-date-picker>
                    </el-form-item>
                </div>
                <el-form-item class="info-line online">
                    <span>投放区域</span>
                    <el-input disabled v-model="infoApply.mbhtfqy" placeholder="省-市-县"></el-input>
                </el-form-item>
                <el-form-item class="info-line online">
                    <span>投放定向（提供附件必须一致）</span>
                    <el-checkbox-group disabled v-model="infoApply.mbhtfdx">
                        <el-checkbox v-for="items in mbhtfdxopt" :key="items.dataCode" :label="items.dataName"
                            :value="items.dataCode"></el-checkbox>
                      </el-checkbox-group>
                </el-form-item>
                <el-form-item class="info-line online">
                    <span>素材名称</span>
                    <el-input disabled v-model="infoApply.mbhscmc" placeholder="素材名称"></el-input>
                </el-form-item>
                <div class="info-line">
                    <el-form-item>
                        <span>素材时长（提供附件必须一致）</span>
                        <el-input disabled v-model="infoApply.mbhscsc" placeholder="5秒/10秒/15秒"></el-input>
                    </el-form-item>
                </div>
                <el-form-item class="info-line online">
                    <span>素材类型（提供附件必须一致）</span>
                    <el-radio-group disabled v-model="infoApply.mbhsclx">
                        <el-radio v-for="items in mbhsclxopt" :key="items.dataCode" :label="items.dataName"
                            :value="items.dataCode"></el-radio>
                      </el-radio-group>
                </el-form-item>
                <el-form-item class="info-line online">
                    <span>播测要求（基地）</span>
                    <el-checkbox-group disabled v-model="infoApply.mbhbcyq">
                        <el-checkbox v-for="items in mbhbcyqopt" :key="items.dataCode" :label="items.dataName"
                            :value="items.dataCode"></el-checkbox>
                      </el-checkbox-group>
                </el-form-item>
                <div style="padding:0 20px 0 220px;margin-bottom: 20px;">
                    <uploadDown :datalist="datalist" :dialogStatus="uploadstatus"></uploadDown>
                </div>
                <el-form-item class="info-line online" v-if="changeinfo">
                    <span>审批意见</span>
                    <el-input v-model="infolist.remark" placeholder="审批意见"></el-input>
                </el-form-item>
                <el-form-item class="info-line online" v-if="changeinfo && changeinfo1">
                    <span>下一步审批人</span>
                    <el-select clearable v-model="infoApply.approver" placeholder="下一步审批人" ref="nextDealMan" @change="testchange">
                        <el-option 
                            v-for="items in approveropt" 
                            :key="items.loginNoStr" 
                            :label="items.loginNameStr"
                            :value="items.loginNoStr">
                        </el-option>
                    </el-select>
                </el-form-item>
            </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>
    import uploadDown from '../../../../components/uploadDown.vue'
    export default {
        props: ["componentInfo", "componentStatus", "changeinfo"],
        components: {
            uploadDown
        },
        data() {
            return {
                infolist: {},
                rovaList: [],
                infoApply: {
                    tit: '',
                    terminal: '',
                    opName: '',
                    time: '',
                    phone: '',
                    mbhkssj: '',
                    mbhjssj: '',
                    mbhtfqy: '',
                    mbhscmc: '',
                    mbhscsc: '',
                    mbhxqlx: [],
                    mbhtfwz: [],
                    mbhtfdx: [],
                    mbhsclx: [],
                    mbhbcyq: [],
                    approver: [],
                },
                userInfo: {},
                terminalopt: [],
                datalist: {
                    url: '/bpm/api/download',
                    //url: '/market/compatt/downfile',
                    type: 1
                },
                mbhxqlxopt: [],
                mbhtfwzopt: [],
                mbhtfdxopt: [],
                mbhsclxopt: [],
                mbhbcyqopt: [],
                mbhfqrjsopt: [],
                approveropt: [],
                uploadstatus: false,
                changeinfo1: false,
                finishFlag: '',
                selLoginNoStr:'',
                selLoginNoName:''
            }
        },
        methods: {
            //处理申请
            dialogCheck() {
                this.userInfo = JSON.parse(window.sessionStorage.userInfo);
                this.getinfolist();
                this.getDepot();
                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;
                    // let attlist = JSON.parse(res.data.params.attList);
                    for (let i = 0; i < res.data.attachList.length; i++) {
                        res.data.attachList[i].id = res.data.attachList[i].attchFileId;
                    }
                    this.datalist.attList = res.data.attachList;
                    console.log(this.datalist.attList)
                    this.infolist = Object.assign({}, res.data);
                    this.infoApply = JSON.parse(this.infolist.params.terminalRes);
                    this.uploadstatus = true;
                });
            },
            testchange(val){
                this.selLoginNoStr = val
                //this.$nextTick(()=>{this.selLoginNoName = this.$refs.nextDealMan.selected.currentLabel})
                //console.log(this.selLoginNoStr,this.selLoginNoName);
            },
            //添加
            dialogCli(v) {
                this.datalist.attList = [];
                this.uploadstatus = false;
                if (v === 3) {
                    this.closeInfo();
                    return;
                }
                let _this = this;
                this.infolist.opTime = _this.$formatDate(new Date(), "YYYY-MM-DD HH:mm:ss")
                // 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 paramsInfo = {}
                    paramsInfo.terminalRes = JSON.stringify(this.infoApply);
                    paramsInfo.finishFlag = this.finishFlag;

                    //
                    /*
                    if ( this.changeinfo1 ) {
                        paramsInfo.assigneeNo = this.infoApply.approver.loginNoStr;
                        paramsInfo.assigneeName = this.infoApply.approver.loginNameStr;
                        //alert(paramsInfo.assigneeNo + "," + paramsInfo.assigneeName);
                    }
                    */

                    this.checkNextStep(paramsInfo);

                    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: paramsInfo,
                        woNo: this.infolist.woNo,
                    }
                    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 = {
                    tit: '',
                    terminal: '',
                    opName: '',
                    time: '',
                    phone: '',
                    mbhkssj: '',
                    mbhjssj: '',
                    mbhtfqy: '',
                    mbhscmc: '',
                    mbhscsc: '',
                    mbhxqlx: [],
                    mbhtfwz: [],
                    mbhtfdx: [],
                    mbhsclx: [],
                    mbhbcyq: [],
                };
                this.userInfo = {};
                this.$emit("closeEdio")
            },
            getinfolist() {
                this.$http({
                    url: "/sysmgr/cfgDataDicts/queryMap",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                        "page": '{"pageNo":"' + 1 + '","pageSize":"100"}'
                    },
                    data: {
                        dictCodePks: 'mbhfqrjs,mbhxqlx,mbhtfwz,mbhtfdx,mbhsclx,mbhbcyq'
                    },
                }).then((res) => {
                    this.mbhfqrjsopt = res.data.body.mbhfqrjs;
                    this.mbhxqlxopt = res.data.body.mbhxqlx;
                    this.mbhtfwzopt = res.data.body.mbhtfwz;
                    this.mbhtfdxopt = res.data.body.mbhtfdx;
                    this.mbhsclxopt = res.data.body.mbhsclx;
                    this.mbhbcyqopt = res.data.body.mbhbcyq;
                });

            },
            //获取部门
            getDepot() {
                this.$http({
                    url: "/sysmgr/sysdept/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {},
                }).then((res) => {
                    this.terminalopt = res.data;
                });
            },
            uploadBack(v) {
                this.attList = v;
            },
            getApprover() {
                this.userInfo = JSON.parse(window.sessionStorage.userInfo);
                this.$http({
                    url: "/market/api/user/info/leader?loginNoStr=" + this.userInfo.loginNoStr + "&level=1&type=1",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    data: {
                    },
                }).then((res) => {
                    this.approveropt = res.data.body;

                    if ( this.approveropt.length > 0) {
                        let params = {};
                        params.loginNo = this.userInfo.loginNo;
                        params.taskId = this.componentInfo.taskId;
                        this.$http({
                            url: "/market/mbAudit/queryBpmDispatchType",
                            method: "post",
                            headers: {
                              "Content-Type": "application/json",
                            },
                            data: params,
                        }).then((res) => {
                            if ( res.data == '3') {
                                //自选工号派单
                                this.changeinfo1 = true;
                            }
                        });
                    }
                });
            },
            //查询需求审核会审并行完成标识
            getFinishFlag() {
              let params = {};
              params.woNo = this.componentInfo.woNo;
              this.$http({
                url: "/market/mbAudit/queryAllFinishFlag",
                method: "post",
                headers: {
                  "Content-Type": "application/json",
                },
                data: params,
              }).then((res) => {
                this.finishFlag = res.data;
              });
            },
            //检查获取下一步处理人信息
            checkNextStep(params){
                let taskName = this.componentInfo.taskName;
                if(taskName === "其他部门科室主任审批"){
                        //Next Step
                        //其他部门部门领导审批
                        //todo 根据当前工号查找 部门领导
                        params.assigneeNo ="admin";
                        params.assigneeName="admin";

                }else if (taskName==="地市公司科室主任审批"){
                        //NextStep
                        //地市公司部门领导审批
                        //todo 根据当前工号，查找地市公司部门领导
                        params.assigneeNo ="admin";
                        params.assigneeName="admin";

                }else if (taskName==="地市公司部门领导审批"){
                        //NextStep
                        //地市公司主管副总,
                        //todo 根据当前工号，地市公司副总
                        params.assigneeNo ="admin";
                        params.assigneeName="admin";
                }
            }
        },
        mounted() {
            this.getApprover();
            this.getFinishFlag();
        },
        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: 200px;
            display: inline-block;
            text-align: left;

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

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

        .el-input {
            width: calc(100% - 220px);
        }
        .el-radio-group{
            border: 1px solid #ddd;
                padding-top: 12px;
                padding-left: 20px;
                height: 40px;
                width: calc(100% - 220px);
                border-radius: 5px;
        }
        .el-checkbox-group{
            border: 1px solid #ddd;
                padding-left: 20px;
                height: 40px;
                width: calc(100% - 220px);
                border-radius: 5px;
        }
    }

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

    .online {
        width: 100%;

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

        span {
            vertical-align: top;
        }

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

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