<template>
    <div>
        <div style="height: 50vh;overflow-y: scroll;">
            <el-form :model="infoApply" ref="infoApply">
                <div class="info-line">
                    <el-form-item prop="terminalTypeName">
                        <span>申请标题</span>
                        <el-input disabled v-model="infoApply.tit" placeholder="申请标题"></el-input>
                    </el-form-item>
                    <el-form-item prop="brandName">
                        <span>申请流程</span>
                        <el-input disabled v-model="infoApply.procName" placeholder="广告申请"></el-input>
                    </el-form-item>
                </div>
                <div class="info-line">
                    <el-form-item prop="opNo">
                        <span>申请部门</span>
                        <el-input disabled v-model="infoApply.dept" placeholder="申请部门"></el-input>
                       <!-- <el-select disabled clearable v-model="infoApply.dept" placeholder="申请部门">
                            <el-option v-for="items in terminalopt" :key="items.id" :label="items.ou" :value="items.id">
                            </el-option>
                        </el-select> -->
                    </el-form-item>
                    <el-form-item prop="opNo">
                        <span>申请人</span>
                        <el-input disabled v-model="infoApply.opName" placeholder="申请人"></el-input>
                    </el-form-item>
                </div>
                <div class="info-line">
                    <el-form-item>
                        <span>申请时间</span>
                        <el-date-picker disabled v-model="infoApply.time" type="date" placeholder="申请时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item prop="opNo">
                        <span>联系电话</span>
                        <el-input disabled v-model="infoApply.phone" placeholder="联系电话"></el-input>
                    </el-form-item>
                </div>
                <div class="info-line">
                    <el-form-item>
                        <span>完成时间</span>
                        <el-date-picker disabled v-model="infoApply.overtime" type="date"
                            placeholder="完成时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <span>紧急程度</span>
                        <el-select disabled clearable v-model="infoApply.urgent" placeholder="紧急程度">
                            <el-option v-for="items in fireopt" :key="items.dataCode" :label="items.dataName"
                                :value="items.dataCode">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>

                <div class="info-line">
                    <el-form-item>
                        <span>素材类型</span>
                        <el-select disabled clearable v-model="infoApply.materType" placeholder="素材类型">
                            <el-option v-for="items in materTypeopt" :key="items.dataCode" :label="items.dataName"
                                :value="items.dataCode">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>


                <!-- <el-form-item class="info-line online">
                    <span>自有渠道</span>
                    <el-input disabled v-model="infoApply.checkList"></el-input>
                </el-form-item>
                <el-form-item class="info-line online">
                    <span>外部渠道</span>
                    <el-input disabled v-model="infoApply.checkList2"></el-input>
                </el-form-item>
                <el-form-item class="info-line online">
                    <span>其他</span>
                    <el-input disabled v-model="infoApply.checkList3"></el-input>
                </el-form-item> -->


                <el-form-item class="info-line online">
                    <span>宣传内容</span>
                    <el-input disabled v-model="infoApply.propaganda" placeholder="广告宣传内容"
                        type="textarea" :rows="3"></el-input>
                </el-form-item>
                <el-form-item class="info-line online">
                    <span>其他说明</span>
                    <el-input disabled v-model="infoApply.explain" placeholder="设计稿内容描述" type="textarea"
                        :rows="3"></el-input>
                </el-form-item>
                <div style="padding:0 20px 0 100px;margin-bottom: 20px;">
                    <uploadDown :datalist="datalist" :dialogStatus="uploadstatus"></uploadDown>
                </div>
                <div style="padding:0 20px 0 100px;margin-bottom: 20px;" v-if="uploadsts">
                    <myUpload @uploadBack="uploadBack" :fileInfo="fileInfo" :fileList="fileInfo.fileList">
                    </myUpload>
                </div>
                <el-form-item class="info-line online" v-if="changeinfo">
                    <span>备注</span>
                    <el-input :disabled="!changeinfo" v-model="infolist.remark" placeholder="备注"></el-input>
                </el-form-item>
            </el-form>

            <div v-if="suppSts" class="supp-box">
                <span style="padding-left: 20px;padding-top: 8px;">简易设计</span>
                <div v-for="item in gys" class="suppdiv">
                    <el-checkbox :disabled="!changeinfo||!suppdis" v-model="item.sts" @change="cancel(item)"><span>{{item.type}}</span></el-checkbox>
                    <div class='box'>
                        <div v-for="one in item.list"  class="supp-list">
                            <el-select :disabled="!changeinfo||!suppdis" v-model="one.cho" placeholder="请选择供应商" @change="priceone(one,item)">
                                 <el-option v-for="items in item.supplier" :key="items.name" :label="items.name" :value="items.name">
                                 </el-option>
                            </el-select>
                            <el-input :disabled="!changeinfo||!suppdis" v-model="one.num" placeholder="数量" @input="numChange(one)"></el-input>
                        </div>
                    </div>
                    <el-button @click="item.list.push({})"type="text" v-if="suppdis">继续添加</el-button>
                </div>
            </div>

            <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="opTime" 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'
    import myUpload from "../../../../components/upload.vue";
    export default {
        props: ["componentInfo", "componentStatus", "changeinfo"],
        components: {
            uploadDown,
            myUpload
        },
        data() {
            return {
                cdisable: true,
                dialogStatus: false,
                infolist: {},
                rovaList: [],
                infoApply: {
                    esay: [],
                    picter: [],
                    medium: [],
                    product: [],
                    copywriting: [],
                    video: [],
                    all: [],
                    testing: [],
                    esaystr: '',
                    picterstr: '',
                    mediumstr: '',
                    productstr: '',
                    copywritingstr: '',
                    videostr: '',
                    allstr: '',
                    testingstr: '',
                },
                userInfo: {},
                terminList: [],
                oneterminal: '',
                options: [],
                fireopt: [],
                typeopt: [],
                esayopt: [],
                picteropt: [],
                mediumopt: [],
                productopt: [],
                copywritingopt: [],
                videoopt: [],
                allopt: [],
                testingopt: [],
                otheropt: [],
                extensionopt: [],
                terminalopt: [],
                materTypeopt: [],
                datalist: {
                    url: '/bpm/api/download',
                    type: 1
                },
                fileInfo: {
                    type: 'img',
                    limit: 50,
                    url: '/bpm/api/upload',
                    fileList: []
                },
                uploadstatus:false,
                suppSts:false,
                suppdis:false,
                uploadsts:false,
                attList:[],
                gys:[
                // {
                //     type:'设计类型1',
                //     supplier:[
                //         {
                //             name:'供应商1',
                //             price:100
                //         },
                //         {
                //             name:'供应商2',
                //             price:200
                //         },
                //     ],
                //     list:[{}]
                // },
                // {
                //     type:'设计类型2',
                //     supplier:[
                //         {
                //             name:'供应商3',
                //             price:100
                //         },
                //         {
                //             name:'供应商4',
                //             price:200
                //         },
                //     ],
                //     list:[{}]
                // },
            ]
            }
        },
        methods: {
            //取消勾选时清空后边对应的供应商数据
            cancel(item){
                let chexeboxSts = item.sts;
                //如果页面取消勾选那么将清空复选框后的内容
                if(!chexeboxSts){
                    item.list  = [{}];
                }
            },
            uploadBack(v) {
                this.attList = v;
            },
            priceone(v,item){
                for(let i=0;i<item.supplier.length;i++){
                    if(v.cho==item.supplier[i].name){
                        v.price = item.supplier[i].price
                    }
                }
                v.cho=v.cho+' '+(v.price*(v.num||1))+'元';
            },
            numChange(v){
                if(!v.cho)return;
                v.cho = v.cho.split(' ')[0]+' '+(v.price*v.num)+'元';
            },
            //处理申请
            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;
                    this.infolist = Object.assign({}, res.data);
                    this.infoApply = JSON.parse(this.infolist.params.terminalRes);
                    if(this.infoApply.price){
                        this.gys = this.infoApply.gys;
                        this.suppSts = true;
                        this.suppdis = false;
                    }
                    if(this.rovaList[this.rovaList.length-1].taskName == '宣传负责人'){
                        this.suppSts = true;
                        this.suppdis = true;
                        this.getSupp();
                    }
                    if(this.rovaList[this.rovaList.length-1].taskName == '宣传负责人上传'){
                        this.uploadsts = true;
                    }
                    this.uploadstatus = true;
                });
            },
            changeArr(v) {
                let list = '';
                for (let i = 0; i < v.length; i++) {
                    list += v[i] + ' ';
                }
                return list
            },
            //添加
            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")
                if(this.suppSts){
                    let gys = [];
                    let price = 0;
                    for (let i = 0; i < this.gys.length; i++) {
                        if(this.gys[i].sts){
                            gys.push(JSON.parse(JSON.stringify(this.gys[i])))
                           // if(gys[i])
                            
                            // {
                            //     for (let j = 0; j < gys[i].list.length; j++) {
                            //         price+=gys[i].list[j].num*gys[i].list[j].price;
                            //     }
                            // }
 
                        }
                    }
                    gys.forEach(n=>{
                        for (let j = 0; j < n.list.length; j++) {
                            price+=n.list[j].num*n.list[j].price;
                        }
                    });
                    this.infoApply.gys=gys;
                    this.infoApply.price=price;
                }
                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 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,
                        });
                    }
                    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: {
                            terminalRes: JSON.stringify(this.infoApply)
                        },
                        woNo: this.infolist.woNo,
                    }
                    param.params.attList = JSON.stringify(attList);
                    if(this.rovaList[this.rovaList.length-1].taskName == '市场经营部'){
                        param.params.assigneeNo = this.infolist.opNo;
                        param.params.assigneeName = this.infolist.opName;
                    }
                    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 = {
                    esay: [],
                    picter: [],
                    medium: [],
                    product: [],
                    copywriting: [],
                    video: [],
                    all: [],
                    testing: [],
                };
                this.userInfo = {};
                this.cdisable = true;
                this.$emit("closeEdio")
            },
            getinfolist() {
                this.$http({
                    url: "/sysmgr/cfgDataDicts/queryMap",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                        "page": '{"pageNo":"' + 1 + '","pageSize":"100"}'
                    },
                    data: {
                        dictCodePks: 'materType,jjcd,ggfl,jysj,xchm,mj,cp,wal,spdhzz,qa,jkfw,tgqd'
                    },
                }).then((res) => {
                    this.materTypeopt = res.data.body.materType;
                    this.fireopt = res.data.body.jjcd;
                    this.typeopt = res.data.body.ggfl;
                    this.esayopt = res.data.body.jysj;
                    this.picteropt = res.data.body.xchm;
                    this.mediumopt = res.data.body.mj;
                    this.productopt = res.data.body.cp;
                    this.copywritingopt = res.data.body.wal;
                    this.videoopt = res.data.body.spdhzz;
                    this.allopt = res.data.body.qa;
                    this.testingopt = res.data.body.jkfw;
                    this.extensionopt = res.data.body.tgqd;
                });

            },
            //获取部门
            getDepot() {
                this.$http({
                    url: "/sysmgr/sysdept/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {},
                }).then((res) => {
                    this.terminalopt = res.data;
                });
            },
            getSupp() {
                this.$http({
                    url: "/market/cDesignSupplier/getSupplier",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {},
                }).then((res) => {
                    res.data.forEach(item=>{
                        item.list = [{}];
                    })
                    
                    this.gys = res.data;
                });
            },
        },
        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;
    }
    .supp-box{
        span{
            width: 100px;
            display: inline-block;
        }
        .suppdiv{
            width: calc(100% - 110px);
            float: right;
            .el-checkbox{
                vertical-align: top;
                padding-top: 10px;
            }
        }
        .box{
            width: calc(100% - 200px);
            display: inline-block;
            // float: right;
        }
        .supp-list{
            margin-bottom: 20px;
            .el-select{
                width: 45%;
                margin-right:5%;
            }
            .el-input{
                width: 45%;
                margin-right:5%;
            }
        }
    }
</style>
