<template>
    <div>
        <div class="container">
            <el-form :model="infolist" ref="infolist" :rules="rules" class="container-box">
                <h2 style="display: block;margin-bottom: 20px;">发起需求</h2>
                <div style="height: calc(100% - 160px);overflow-y: scroll;">
                    <el-form-item prop="tit" class="info-line online">
                        <span>工单标题</span>
                        <el-input v-model="infolist.tit" placeholder="工单标题"></el-input>
                    </el-form-item>
                    <el-form-item prop="mbhxqlx" class="info-line online">
                        <span>需求类型</span>
                        <el-radio-group v-model="infolist.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" prop="mbhtfwz">
                        <span>投放位置</span>
                        <el-checkbox-group v-model="infolist.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 prop="mbhkssj">
                            <span>开始时间</span>
                            <el-date-picker 
                                v-model="infolist.mbhkssj" 
                                type="date"
                                placeholder="开始时间"
                                format="yyyy 年 MM 月 dd 日" 
                                value-format="yyyy-MM-dd" >
                            </el-date-picker>
                        </el-form-item>
                    </div>
                    <div class="info-line">
                        <el-form-item  prop="mbhjssj">
                            <span>结束时间</span>
                            <el-date-picker 
                                v-model="infolist.mbhjssj" 
                                type="date" 
                                placeholder="结束时间"
                                format="yyyy 年 MM 月 dd 日" 
                                value-format="yyyy-MM-dd" 
                                >
                            </el-date-picker>
                        </el-form-item>
                    </div>
                    <el-form-item class="info-line online" prop="mbhtfqy">
                        <span>投放区域</span>
                        <el-input v-model="infolist.mbhtfqy" placeholder="省-市-县"></el-input>
                    </el-form-item>
                    <el-form-item class="info-line online" prop="mbhtfdx">
                        <span>投放定向（提供附件必须一致）</span>
                        <el-checkbox-group v-model="infolist.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" prop="mbhscmc">
                        <span>素材名称</span>
                        <el-input v-model="infolist.mbhscmc" placeholder="素材名称"></el-input>
                    </el-form-item>
                    <div class="info-line">
                        <el-form-item prop="mbhscsc">
                            <span>素材时长（提供附件必须一致）</span>
                            <el-input v-model="infolist.mbhscsc" placeholder="5秒/10秒/15秒"></el-input>
                        </el-form-item>
                    </div>
                    <el-form-item class="info-line online" prop="mbhsclx">
                        <span>素材类型（提供附件必须一致）</span>
                        <el-radio-group v-model="infolist.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" prop="mbhbcyq">
                        <span>播测要求（基地）</span>
                        <el-checkbox-group v-model="infolist.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>
                    
                     <el-form-item class="info-line online">
                        <span>审批人</span>
                        <div>
                            <el-input type="input" placeholder="请选择审批人" v-model="assigneeName"/>
                              <el-button icon="el-icon-search" type="info" plain @click="showUserTreeDlg"></el-button>
                            <el-input type="hidden" placeholder="请选择教师" v-model="assigneeNo"/>
                        </div>
                     </el-form-item>

                    <div style="padding-left: 80px">
                        <myUpload @handleResult="uploadBack" :fList="fileInfo.fileList"></myUpload>
                    </div>

                </div>
                <div class="t-footer">
                    <el-button type="primary" @click="dialogCli(2)">确 定</el-button>
                    <el-button @click="dialogCli(1)">取 消</el-button>
                </div>
            </el-form>
        </div>


            <el-dialog
                title="请选择"
                :visible.sync="userDlgVisual"
                width="30%"
                :modal-append-to-body="false"
                :close-on-click-modal="false"
                :before-close="handleClose">
            <div>
                <el-radio  v-for="user in userList " v-model="assigneeNo" :key="user.loginNoStr" :label="user.loginNoStr">{{user.loginNameStr}}</el-radio>
             </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="userDlgVisual = false">取 消</el-button>
                <el-button type="primary" @click="checkSelectUser">确 定</el-button>
            </span>
            </el-dialog>


            <userDlg :visible="userTreeDlgVisual" @handleSelect="handleUserSelect" @close="closeUserSelect"/>
    </div>
</template>
<script>
    // import mySearch from "../../../../components/search.vue";
    import myUpload from "../../../../components/uploadMbh.vue";
    import userDlg from "../userDlg"

    export default {
        components: {myUpload,userDlg},
        data() {
            return {
                userTreeDlgVisual:false,
                treeListonly: [],
                rules: {
                    tit: [{required: true, message: '请输入工单标题', trigger: 'blur' }],
                    mbhxqlx: [{ required: true, message: '请选择需求类型', trigger: 'change'}],
                    mbhtfwz:[{ type: 'array', required: true, message: '请至少选择一个投放位置', trigger: 'change' }],
                    mbhkssj:[{  required: true, message: '请选择开始时间', trigger: 'change' }],
                    mbhjssj:[{  required: true, message: '请选择结束时间', trigger: 'change' }],
                    mbhtfqy: [{ required: true, message: '请填写投放区域', trigger: 'blur'}],
                    mbhscmc: [{ required: true, message: '请填写素材名称', trigger: 'blur'}],
                    mbhtfdx:[{ type: 'array', required: true, message: '请至少选择一个投放定向', trigger: 'change' }],
                    mbhscsc: [{ required: true, message: '请填写素材时长', trigger: 'blur'}],
                    mbhsclx: [{ required: true, message: '请选择素材类型', trigger: 'change'}],
                    mbhbcyq: [{ required: true, message: '请至少选择一个拨测要求', trigger: 'change'}],
                },
                fullscreen: false,
                total: 0,
                pageSize: 1,
                tableData: [{}],
                disableStatus: false,
                infolist: {
                    tit: '',
                    dept: '',
                    opName: '',
                    time: '',
                    phone: '',
                    mbhkssj: '',
                    mbhjssj: '',
                    mbhtfqy: '',
                    mbhscmc: '',
                    mbhscsc: '',
                    mbhxqlx: [],
                    mbhtfwz: [],
                    mbhtfdx: [],
                    mbhsclx: [],
                    mbhbcyq: [],
                },
                terminal:'739521990425317376',
                userInfo: {},
                params: {},
                infoApply: [],
                options: [],
                mbhxqlxopt: [],
                mbhtfwzopt: [],
                mbhtfdxopt: [],
                mbhsclxopt: [],
                mbhbcyqopt: [],
                mbhfqrjsopt: [],
                attList: [],
                fileInfo: {
                    fileList: ""
                },
                deptType: '',
                userList:[],

                // 
                userDlgVisual:false,
                assigneeNo:'',
                assigneeName:''
            }
        },
        methods: {

            saveData(v){
                if (v === 1) {
                    this.fileInfo.fileList = [];
                    this.infolist = {
                        mbhxqlx: [],
                        mbhtfwz: [],
                        mbhtfdx: [],
                        mbhsclx: [],
                        mbhbcyq: [],
                    };
                    return
                }

                let _this = this;
                let info = {};
                info.opTime = _this.$formatDate(new Date(), "YYYY-MM-DD HH:mm:ss");
                info.opNo = this.userInfo.loginNo;
                info.opName = this.userInfo.loginName;
                info.woTitle = this.infolist.tit;
                this.infolist.dept = '1000';
                this.infolist.time =  info.opTime;
                this.infolist.phone = '15804612345';
                info.params = {};
                info.params.deptType = this.deptType;
                info.params.terminalRes = this.infolist;
                info.procId = this.terminal;
                //info.attList = this.attList;
                //
                //					if (this.options[i].procName=="互联网电视引入流程") {

                for (let i = 0; i < this.options.length; i++) {
                    //if (this.terminal == this.options[i].procId) {
                    if(this.options[i].procName=="魔百和大屏广告自有业务承载审批流程"){
                        info.procName = this.options[i].procName;
                        info.procVersion = this.options[i].procVersion;
                    }
                }
                // let attList = [];
                // for (let i = 0; i < this.attList.length; i++) {
                //     attList.push({
                //         id: this.attList[i].id,
                //         fileCode: this.attList[i].fileCode,
                //         fileName: this.attList[i].fileName,
                //         opName: this.attList[i].opName,
                //         opNo: this.attList[i].opNo,
                //         opTime: this.attList[i].opTime,
                //         woNo: this.infolist.woNo,
                //         attchFileId: this.attList[i].attchFileId,
                //     });
                // }
                info.params.attList = JSON.stringify(this.attList)
                info.params.terminalRes = JSON.stringify(info.params.terminalRes)
                return info;
            },
            //添加
            dialogCli(v) {
               
                let info = {}
                info = this.saveData(v)
                if(this.assigneeNo===''){
                    this.$message.error('请选择审批人');
                    return
                }
                if(this.assigneeName===''){
                    this.$message.error('请选择审批人');
                    return
                }
                info.params.assigneeNo = this.assigneeNo
                info.params.assigneeName = this.assigneeName
                this.submitInfo("/bpm/api/startProc", info);

                //科室领导审批
                /*
                let userInfo = window.sessionStorage.userInfo;
                if(null === userInfo){
                        this.$message({ showClose: true, message: "数据异常",type: 'error'});
                        return 
                }
                userInfo = JSON.parse(userInfo);
                let loginNoStr = userInfo.loginNoStr;
                this.$http({
                    url: "/market/api/user/info/leader2",
                    method: "post",
                    headers: {"Content-Type": "application/json"},
                    data:{"loginNoStr":loginNoStr,"level":"1","type":"1"}//科室领导
                }).then((res) => {
                    if(res.data.result==0){
                    let user = res.data.body
                    if(null==user || user.length==0){
                        this.$message({ showClose: true, message: "获取科室领导异常",type: 'error'});
                    }else{
                        if(user.length==1){
                            info.params.assigneeNo = user[0].loginNoStr
                            info.params.assigneeName = user[0].loginNameStr
                            this.submitInfo("/bpm/api/startProc", info);
                        }else{
                            this.userList = user;
                            this.userDlgVisual = true;
                        }
                    }
                    }else{
                        this.$message({ showClose: true, message: res.data.desc,type: 'error'});
                    }
                });
                */
            },
            submitInfo(u, v) {
                let _this = this;
                this.$refs.infolist.validate(valid => {
                    if (valid) {
                        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.infoApply = [];
                                _this.getUser();
                                _this.dialogCli(1);
                                _this.$router.push({	path: '/magicboxAudit'});
                            }

                        });
                    }
                })
            },
            //流程
            getTermianl() {
                this.$http({
                    url: "/bpm/api/queryBpmProcList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                        "page": '{"pageNo":"' + 1 + '","pageSize":"100"}'
                    },
                    data: {},
                }).then((res) => {
                    this.options = res.data.data;
                });
            },
            getlist() {
                this.$http({
                    url: "/sysmgr/cfgDataDicts/queryMap",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    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;
                });
            },
            getUser() {
                this.userInfo = JSON.parse(window.sessionStorage.userInfo);
            },
            uploadBack(v) {
                this.attList = v.files
            },
            //根据工号查询组织机构归属信息
            getDeptType() {
              let params = {};
              params.loginNo = this.userInfo.loginNo;
              this.$http({
                url: "/market/mbAudit/queryDeptInfoByLoginNo",
                method: "post",
                headers: {
                  "Content-Type": "application/json",
                },
                data: params,
              }).then((res) => {
                this.deptType = res.data;
              });
            },
            handleClose(){

            },
            
            checkSelectUser(){
                if(this.assigneeNo===''){
                    this.$message.error('请选择下一步处理人');
                    return
                }
                //
                this.userList.forEach((e)=>{
                    if(e.loginNoStr === this.assigneeNo){
                        this.assigneeName = e.loginNameStr
                    }
                });
                //
                this.userDlgVisual = false
                //
                let info = this.saveData(2)
                info.params.assigneeNo = this.assigneeNo
                info.params.assigneeName = this.assigneeName
                this.submitInfo("/bpm/api/startProc", info);

            },
            showUserTreeDlg(){
                this.userTreeDlgVisual = true
            },

            handleUserSelect(v){
                this.assigneeNo = v.leaderAuditNo
                this.assigneeName = v.leaderAuditName
                this.closeUserSelect()
            },
            closeUserSelect(){
                this.userTreeDlgVisual = false
            }
        },
        mounted() {
            this.getTermianl();
            this.getUser();
            this.getlist();
            this.getDeptType();
        },
        created() {

        }
    }
</script>
<style scoped lang="scss">
    .t-footer {
        text-align: right;
        padding-right: 20px;
        margin-top: 20px;
    }

    .onetab {
        padding: 20px;
        height: calc(100% - 180px);
    }

    .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: 200px;
            display: inline-block;
            text-align: left;

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

        .el-select,
        .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;
        }
    }

    .online {
        width: 100%;

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

        span {
            vertical-align: top;
        }

        .el-textarea {
            width: calc(100% - 100px);
        }
    }
</style>
