<template>
    <div>
        <lj-win-common title="出运订单详情">
            <template slot="body">
                <lj-detail-status-header :value="mainObject.flagstr">
                    {{mainObject.taskcode}}
                    <svg v-if="mainObject.ifnew" class="icon" aria-hidden="true">
                        <use xlink:href="#icon-notify-new"></use>
                    </svg>
                </lj-detail-status-header>
                <div class="lj-detail-content">
                    <div class="lj-card-item lj-detail-content-top">
                        <div class="lj-card-secondary-title" style="text-align: left;">
                            <i class="iconfont icon-account lj-card-summary-icon"></i>
                            {{mainObject.cusname}}
                        </div>
                        <template v-if="mainObject.rel_rep || mainObject.cus_tele">
                            <div class="lj-card-secondary-title" style="text-align: left;">
                                <i class="iconfont icon-location lj-card-summary-icon"></i>
                                <span
                                    v-if="mainObject.rel_rep">{{mainObject.rel_rep}}&nbsp;&nbsp;&nbsp;&nbsp;</span>{{mainObject.cus_tele}}
                            </div>
                        </template>
                        <template v-if="mainObject.cus_address">
                            <div class="lj-card-quaternary-content" style="margin-left: 20px;">
                                地址：{{mainObject.cus_address}}
                            </div>
                        </template>
                    </div>
                    <div class="lj-card-item">
                        <mu-row style="padding:5px 0 0 0;">
                            <mu-col>
                                <span class="lj-taskinfo-title">业务员：</span>
                                <span class="lj-taskinfo-content">{{mainObject.assign_emp}}</span>
                            </mu-col>
                            <mu-col>
                                <span class="lj-taskinfo-title">相关号码：</span>
                                <span class="lj-taskinfo-content">{{mainObject.relcode}}</span>
                            </mu-col>
                        </mu-row>
                        <mu-row style="padding:5px 0 0 0;">
                            <mu-col>
                                <span class="lj-taskinfo-title">装柜日期：</span>
                                <span class="lj-taskinfo-content">{{mainObject.taskdate | dateFilter}}</span>
                            </mu-col>
                            <mu-col>
                                <span class="lj-taskinfo-title">收款日期：</span>
                                <span class="lj-taskinfo-content">{{mainObject.viewdate | dateFilter}}</span>
                            </mu-col>
                        </mu-row>
                        <mu-row style="padding:5px 0 0 0;" v-if="hasPower122">
                            <mu-col>
                                <span class="lj-taskinfo-title">已收金额：</span>
                                <span class="lj-sharp-red-text">{{mainObject.moneysign}}{{mainObject.takeamt}}</span>
                            </mu-col>
                            <mu-col>
                                <span class="lj-taskinfo-title">发货金额：</span>
                                <span class="lj-sharp-red-text">{{mainObject.moneysign}}{{mainObject.outamt}}</span>
                            </mu-col>
                        </mu-row>
                        <mu-row style="padding:5px 0 0 0;">
                            <mu-col>
                                <span class="lj-taskinfo-title">结算方式：</span>
                                <span class="lj-taskinfo-content">{{mainObject.banktypestr}}</span>
                            </mu-col>
                        </mu-row>

                        <template v-if="mainObject.freight ||mainObject.freight_tele ||mainObject.station_address">
                            <template v-if="mainObject.freight ||mainObject.freight_tele">
                                <mu-row style="margin-top: 10px;">
                                    <template v-if="mainObject.freight">
                                        <mu-col span="3" class="lj-card-secondary-title">货运部：</mu-col>
                                        <mu-col span="9" class="lj-card-secondary-content">{{mainObject.freight}}
                                        </mu-col>
                                    </template>
                                    <template v-if="mainObject.freight_tele">
                                        <mu-col span="3" class="lj-card-secondary-title">货运电话：</mu-col>
                                        <mu-col span="9" class="lj-card-secondary-content">{{mainObject.freight_tele}}
                                        </mu-col>
                                    </template>
                                </mu-row>
                            </template>
                            <template v-if="mainObject.station_address">
                                <div class="lj-card-tag-text lj-card-summary-light-text" style="margin-left: 5px;">
                                    货运部地址：{{mainObject.station_address}}
                                </div>
                            </template>
                        </template>
                        <!-- 订单备注 -->
                        <div v-if="mainObject.dscrp" class="lj-card-summary lj-card-summary-light-text">
                            <i class="iconfont icon-edit lj-card-summary-icon"></i>
                            <span class="lj-card-tertiary-content">
                                {{mainObject.dscrp}}
                            </span>
                        </div>
                        <!-- 生产备注 -->
                        <div v-if="mainObject.dscrp2" class="lj-card-summary lj-card-summary-light-text">
                            <i class="iconfont icon-edit lj-card-summary-icon"></i>
                            <span class="lj-card-tertiary-content">
                                {{mainObject.dscrp2}}
                            </span>
                        </div>

                        <div class="lj-card-item">
                            <div>
                                <span class="taskedit_pzbtn" style="color:red;" @click="ClickAddFile">
                                    <i class="iconfont icon-fujian" style="font-size: 14px;"></i>
                                    添加附件[{{mainObject.fjcnt}}]
                                </span>
                            </div>
                        </div>

                        <div class="lj-card-item" v-if="filedatasList.length > 0">
                            <div style="padding: 2px; color: gray; font-size: 14px;">
                                单据附件
                            </div>
                            <van-cell class="lj-file-show_and_update" v-if="picFjFilter(filedatasList).length > 0">
                                <template v-for="(file, index) in picFjFilter(filedatasList)">
                                    <lj-img-pro
                                        :key="file.fileid"
                                        class="file-rel-item"
                                        v-if="file.filemd5"
                                        :md5="file.filemd5"
                                        @image-click="photoBrowser(index, picFjFilter(filedatasList))"
                                    />
                                </template>
                            </van-cell>
                            <div class="lj-card-item" v-for="(file, index) in docFjFilter(filedatasList)" :key="index">
                                <lj-fj :fileName="file.fileName" :fileType="file.fileType" :fileSize = file.filekb  :md5="file.filemd5"  :fileid="file.fileid"/>
                            </div>
                        </div>
                    </div>

                    <div class="lj-card-item">
                        <div class="lj-detail-are-title">
                            订单明细
                        </div>
                        <div class="lj-detail-mx-list-content">
                            <div v-for="item in mxList">
                                <mu-row style="margin-left:-10px">
                                    <mu-col span="1" style="text-align: right;">
                                        <li></li>
                                    </mu-col>
                                    <mu-col>
                                        <div class="lj-taskinfo-content">
                                            {{item.mtrlname}}{{item.mtrlmode !== "" ? ","+item.mtrlmode : ""}}
                                            <template v-if="item.status"><br />{{item.status}}</template>
                                            <template v-if="item.woodcode"><br />{{item.woodcode}}</template>
                                            <template v-if="item.pcode"><br />{{item.pcode}}</template>
                                            <template v-if="item.mtrlcuscode"><br />{{item.mtrlcuscode}}</template>
                                            <span class="taskedit_pzbtn" style="color:red;" @click="ClickAddFileMx(item)">
                                                <i class="iconfont icon-fujian" style="font-size: 14px;"></i>
                                                [{{item.filedatas.length}}]
                                            </span>
                                        </div>
                                        <div class="lj-card-secondary-content lj-card-summary-light-text">
                                            数量：{{item.saleqty}}<span v-if="hasPower122">,
                                                单价：￥{{item.enprice | moneyFilter}}<br />
                                                金额：￥{{item.enprice * item.saleqty | moneyFilter}} </span>
                                        </div>
                                        <div class="lj-card-secondary-content lj-card-summary-light-text">
                                            明细备注：{{item.mxdscrp}}
                                        </div>
                                    </mu-col>
                                </mu-row>
                                <van-cell class="lj-file-show_and_update" v-if="picFjFilter(item.filedatas).length > 0">
                                    <template v-for="(file, index) in picFjFilter(item.filedatas)">
                                        <lj-img-pro
                                            :key="file.fileid"
                                            class="file-rel-item"
                                            v-if="file.filemd5"
                                            :md5="file.filemd5"
                                            @image-click="photoMxBrowser(item,index)"
                                        />
                                    </template>
                                </van-cell>
                                <div class="lj-card-item" v-for="(file, index) in docFjFilter(item.filedatas)" :key="index">
                                    <lj-fj :fileName="file.fileName" :fileType="file.fileType" :fileSize = file.filekb  :md5="file.filemd5"  :fileid="file.fileid"/>
                                </div>
                                <div class="lj-divider"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template slot="footer">
                <mu-row>
                    <mu-col tag="mu-button" color="error" v-if="option668 == 0 && (mainObject.flag == 0 || mainObject.flag == 4)" @click="handleSaleTaskAudit(1)">审核</mu-col>
                    <mu-col tag="mu-button" color="error" v-if="option668 == 1 && mainObject.flag == 4" @click="handleSaleTaskAudit(1)">终审</mu-col>
                    <mu-col tag="mu-button" color="error" v-if="option668 == 1 && mainObject.flag == 0" @click="handleSaleTaskAudit(1)">初审</mu-col>
                    <!-- <mu-col tag="mu-button" color="error" v-if="mainObject.flag == 1" @click="handleSaleTaskAudit(2)">撤审</mu-col> -->
                </mu-row>
            </template>
        </lj-win-common>
    </div>
</template>

<script>
    import LjWinCommon from "components/lj-win-common";
    import LjDetailStatusHeader from "components/lj-detail-status-header";
    import LjFj from "components/lj-fj";
    import LjImgPro from "components/lj-img-pro";

    export default {
        name: "saletask-detail",
        components: {
            LjDetailStatusHeader,
            LjWinCommon,
            LjFj,
            LjImgPro
        },
        data() {
            return {
                mainObject: {},
                userFunids: [],
                mxList: [],
                jdmxList: [],
                currentFlowsort: "",
                showUrgeButton: false,
                durationTime: null,
                shwoProcess: false,
                base64Temp:"",
                fileDatas: [],
                fileClassList: [],
                fileClassListmx: [],
                fileClassid:0,
                fileClassidmx:0,
                relidPrintid:0,
                Listroadmodel:0,
                loadindex: 0,
                loadClassid: 0,
                filedatasList: [],
                option668: 0
            }
        },
        created() {
            this.userFunids = $lj.getStorage('user').rsltFunids;
            let pageParam = $lj.getPageParam();
            if (pageParam.mainObject) {
                this.mainObject = pageParam.mainObject;
            }
            this.reloadData();

            let self = this;
            $lj.removeEventListener("saletask_mx_refresh");
            $lj.addEventListener("saletask_mx_refresh",function(){
                self.reloadData();
            })

            this.option668 = $lj.getOptionValue(668);
        },
        methods: {
            photoBrowser(index, arr) {
                var images = [];
                for (const picture of arr) {
                    let url = "";
                    if (picture.hasOwnProperty("thumbPath")) {
                        url = picture.thumbPath
                    } else {
                        url = $lj.constant.cacheDir + "/" + picture.filemd5;
                    }
                    images.push(url);
                }
                $lj.photoBrowser(images, index);
            },
            docFjFilter(data) {
                if (!data || !data.length) return []
                let picArr = ["jpg","jpeg","png","gif","bmp"]
                return data.filter((item) => {
                    return picArr.indexOf(item.fileType.trim().toLowerCase()) == -1
                })
            },
            picFjFilter(data) {
                if (!data || !data.length) return []
                let picArr = ["jpg","jpeg","png","gif","bmp"]
                return data.filter((item) => {
                    return picArr.indexOf(item.fileType.trim().toLowerCase()) > -1
                })
            },
            reloadData() {
                if (!this.mainObject.taskid) {
                    return;
                }
                this.getFileClass();
                this.fillData();
            },
            fillData() {
                let self = this;
                let requestBody = {
                    token: $lj.getStorage("token"),
                    scid: this.mainObject.scid,
                    taskid: this.mainObject.taskid
                };
                $lj.postLJRequest('GetL1SaleOutCCMxList', requestBody, function (ret) {
                    if (ret) {

                        if(ret.saletask) {
                            var saletask = self.mainObject;
                            var saletask_temp = ret.saletask;
                            Object.keys(saletask_temp).forEach(key=>{saletask[key]=saletask_temp[key]})
                        }

                        self.mxList = ret.saletaskmxList;

                        if(ret.filedatas){
                            self.filedatasList = ret.filedatas;
                        }
                    }
                })
            },
            cleanFile(){

            },
            ClickAddFile(){
                this.Listroadmodel = 0;
                this.relidPrintid = 0;
                this.loadClassid = this.fileClassid;
                this.handleAddFile();
            },
            ClickAddFileMx(item){
                this.Listroadmodel = 1;
                this.relidPrintid = item.printid;
                this.loadClassid = this.fileClassidmx;
                this.handleAddFile();          
                this.loadindex = this.mxList.indexOf(item);
            },
            handleAddFile(){
                let self = this;
                var UIAlbumBrowser = api.require('UIAlbumBrowser');
                UIAlbumBrowser.imagePicker({
                    max: 9,
                    showCamera: true,
                    animation: true,
                    styles: {
                        bg: '#000000',
                        mark: {
                            icon: '',
                            position: 'top_right',
                            size: 20
                        },
                        nav: {
                            bg: '#000000',
                            cancelColor: '#fff',
                            cancelSize: 16,
                            nextStepColor: '#fff',
                            nextStepSize: 16,
                            finishText: '确定'
                        },
                        thumbnail: { //（可选项）返回的缩略图配置，**建议本图片不要设置过大** 若已有缩略图，则使用已有的缩略图。若要重新生成缩略图，可先调用清除缓存接口api.clearCache()。  
                            w: 100, //（可选项）数字类型；返回的缩略图的宽；默认：原图的宽度
                            h: 100 //（可选项）数字类型；返回的缩略图的宽；默认：原图的高度
                        }
                    },
                }, function (ret) {
                    if (ret.eventType == 'nextStep') {
                        var UIAlbumBrowser = api.require('UIAlbumBrowser');
                        UIAlbumBrowser.closePicker();
                        if (ret.list.length > 0) {
                            self.DealImg(ret.list)
                        }
                    } else if (ret.eventType == 'clickCamera' || ret.eventType == "") {
                        let List = [];
                        List.push({
                            path: ret.originalPath
                        })
                        self.DealImg(List);                      
                    }
                });
            },
            DealImg(List){
                let self = this;
                api.showProgress({
                    title: '处理图片中',
                    text: '请稍候...',
                    modal: false
                });
                List.forEach(el => {
                    let path = el.path
                    
                    self.base64Temp = '';
                    var trans = api.require('trans');
                    var UIAlbumBrowser = api.require('UIAlbumBrowser');
                    UIAlbumBrowser.transPath({
                        path: path
                    }, function(ret, err) {
                        if (ret) {
                            let name = ret.path.substring(ret.path.lastIndexOf("\/") + 1, ret.path.length);
                            trans.decodeImgToBase64({
                                imgPath: ret.path
                            }, function (ret, err) {
                                if (ret.status) {
                                    let self2 = self;
                                    $lj.compressBase64('data:image/jpeg;base64,' + ret.base64Str, {quality:0.8}, function (ret) {                            
                                        if (ret) {

                                            var List = [];
                                            List.push({
                                                base64: ret,
                                                fileType: name.substring(name.lastIndexOf("\.") + 1, name.length),
                                                fileName: name,
                                                billtype: self2.Listroadmodel > 0 ? 92027 : 2027,
                                                ClassID: self2.loadClassid,
                                                relid: self2.mainObject.taskid,
                                                relidmx: self2.relidPrintid,
                                                relcode: self2.mainObject.taskcode
                                            }); 

                                            $lj.postLJRequest("UploadL1File", {
                                                token: $lj.getStorage("token"),
                                                fileList: List
                                            }, function (ret) {
                                                if (ret) {
                                                    if(self2.Listroadmodel == 0){
                                                        self2.mainObject.fjcnt += 1
                                                    }
                                                    else{
                                                        self2.mxList[self2.loadindex].fjcnt += 1
                                                    }
                                                    //$lj.toast("上传成功!");
                                                }
                                            });                                       
                                            api.hideProgress();                                                                                
                                        }                                                                             
                                    });
                                } else {
                                    alert(JSON.stringify(err));
                                    api.hideProgress();
                                    return;
                                }
                            });
                        } else {
                            alert(JSON.stringify(err));
                            return;
                        }
                    });
                });

            },
            getFileClass() {
                let self = this;
                $lj.postLJRequest("GetFileClass", {
                    token: $lj.getStorage("token"),
                    billtype: 2027
                }, function (ret) {
                    if (ret) {
                        self.fileClassList = ret.list;
                        if (ret.list.length > 0) {
                            self.fileClassid = ret.list[0].classId;
                        }
                    }
                });
                $lj.postLJRequest("GetFileClass", {
                    token: $lj.getStorage("token"),
                    billtype: 92027
                }, function (ret) {
                    if (ret) {
                        self.fileClassListmx = ret.list;
                        if (ret.list.length > 0) {
                            self.fileClassidmx = ret.list[0].classId;
                        }
                    }
                });
            },
            handleSaleTaskAudit(type) {
                let self = this;
                $lj.postLJRequest("AuditL1APPSaleOut", {
                    token: $lj.getStorage("token"),
                    scid: this.mainObject.scid,
                    taskid: this.mainObject.taskid,
                    type: type
                }, function (ret) {
                    if (ret) {
                        var toastText = type == 1 ? "审核" : "撤审";
                        toastText += "成功";
                        $lj.toast(toastText);
                        self.reloadData();
                    }
                });
            },
            photoBrowser(index) {
                var images = [];
                for (const picture of this.filedatasList) {
                    var url = $lj.constant.cacheDir + "/" + picture.filemd5;
                    images.push(url);
                }
                $lj.photoBrowser(images, index);
            },
            photoMxBrowser(item,index) {
                var images = [];
                for (const picture of item.filedatas) {
                    var url = $lj.constant.cacheDir + "/" + picture.filemd5;
                    images.push(url);
                }
                $lj.photoBrowser(images, index);
            },
        },
        computed: {
            hasPower122() {
                var empid = $lj.getStorage("userInfo").empid;
                return empid == 0 || this.userFunids.indexOf(122) < 0;
            }
        }
    }
</script>