<template>
    <lj-win-common title="任务">
        <template slot="body">
            <lj-oa-detail-status-header :statusDic="statusDic" :value="mainObject.statusStr">
                <div style="float: left;">{{mainObject.kindStr}}</div>

                <div style="float: right;">{{mainObject.statusStr}}</div>
                <div style="float: right;margin-right: 12px;" class="tag_top_delay" v-if="isDelay">超期</div>
            </lj-oa-detail-status-header>
            <div v-if="mainObject.kind === 2">
                <div class="lj-card-item">
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">设备编号</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.EquipCode}}</div>
                    </mu-flex>
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">设备名称</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.EquipName}}</div>
                    </mu-flex>
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">设备种类</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.typename}}</div>
                    </mu-flex>
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">所属工段</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.workgroupname}}</div>
                    </mu-flex>
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">计划摘要</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.dscrp}}</div>
                    </mu-flex>
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">维护标准</div>
                    </mu-flex>
                    <mu-flex>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.standard}}</div>
                    </mu-flex>
                </div>
                <div class="lj-card-item">
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">任务人</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.empname}}</div>
                    </mu-flex>
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">时间</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.stime | dateRangeFilter(mainObject.stime, mainObject.etime)}}</div>
                    </mu-flex>
                </div>
                <div v-if="mainObject.status === 2" class="lj-card-item">
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">验收人</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.check_empname}}</div>
                    </mu-flex>
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">评分</div>
                        <div class="property-value" style="font-size: 22px;">
                            <template v-for="i in 5">
                                <svg class="icon" aria-hidden="true">
                                    <use :xlink:href="mainObject.score >= i ?'#icon-xing1':'#icon-xing'"></use>
                                </svg>
                            </template>
                        </div>
                    </mu-flex>
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">评语</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.evaluation}}</div>
                    </mu-flex>
                </div>
            </div>
            
            <div v-else>
                <div class="lj-card-item">
                    <div class="lj-card-secondary-content" style="font-size: 16px;padding: 15px 20px 5px 20px;">
                        {{mainObject.content}}
                    </div>
                    <!--附件-->
                    <div v-if="file.filetype === 0" v-for="(file,index) in mainObject.fileList" style="margin-top:10px;">
                        <lj-fj :fileName="file.filename" :fileType="file.extname" :fileSize = file.filekb :md5="file.filemd5" :fileid="file.fileid"/>
                    </div>
                    <div v-if="mainObject.reworkplanid">
                        <div style="color:#fc4f4f;font-size:14px;margin-top:20px;font-weight:bold">
                            <i class="iconfont icon-jinggao" style="font-size:14px;"></i>
                            本任务为返工任务，请认真对待。
                        </div>
                        <div style="font-size:14px;color:#6495ed;margin-top:10px;text-align: center;">查看原任务详细信息</div>
                    </div>
                </div>
                <div v-if="mainObject.kind === 1" class="lj-card-item">
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">客户</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.custname}}</div>
                    </mu-flex>
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">联系人</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.relrep}}</div>
                    </mu-flex>
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">电话</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.reltele}}</div>
                        <i class="iconfont icon-dianhua lj-card-summary-light-text lj-card-summary-icon"
                           style="margin-left: 20px;" v-if="mainObject.reltele"></i>
                    </mu-flex>
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">地址</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.address}}</div>
                        <i class="iconfont icon-icon_daohang-copy lj-card-summary-light-text lj-card-summary-icon"
                           style="margin-left: 20px;" v-if="mainObject.address"></i>
                    </mu-flex>
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">走访类型</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.interviewform}}</div>
                    </mu-flex>
                </div>
                <div v-if="mainObject.kind === 4" class="lj-card-item">
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">相关单据</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.relbillcode}}</div>
                    </mu-flex>
                    <mu-flex v-if="mainObject.checktype === 1 || mainObject.checktype === 2">
                        <div class="lj-card-tertiary-title property-label">生产批号</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.taskrelcode}}</div>
                    </mu-flex>
                    <mu-flex v-if="mainObject.checktype === 1 || mainObject.checktype === 2">
                        <div class="lj-card-tertiary-title property-label">产品名称</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.mtrlname}}</div>
                    </mu-flex>
                    <mu-flex v-if="mainObject.checktype === 1 || mainObject.checktype === 2">
                        <div class="lj-card-tertiary-title property-label">计划数</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.orderqty}}</div>
                    </mu-flex>
                    <mu-flex v-if="mainObject.checktype === 1 || mainObject.checktype === 2">
                        <div class="lj-card-tertiary-title property-label">未进仓数</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.nocmpqty}}</div>
                    </mu-flex>
                    <mu-flex v-if="mainObject.checktype === 1 || mainObject.checktype === 2">
                        <div class="lj-card-tertiary-title property-label">末工段</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.wrkgrpname}}</div>
                    </mu-flex>
                    <mu-flex v-if="mainObject.checktype === 1 || mainObject.checktype === 2">
                        <div class="lj-card-tertiary-title property-label">配置</div>
                        <div class="lj-card-tertiary-content property-value">
                            <template v-if="mainObject.status_config !== ''">{{userInfo.statusname}}:{{mainObject.status_config}}<br/></template>
                            <template v-if="mainObject.woodcode_config !== ''">{{userInfo.woodcodename}}:{{mainObject.woodcode_config}}<br/></template>
                            <template v-if="mainObject.pcode_config !== ''">{{userInfo.pcodename}}:{{mainObject.pcode_config}}</template>
                        </div>
                    </mu-flex>
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">稽核类型</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.checktypeStr}}</div>
                    </mu-flex>
                </div>
                <div class="lj-card-item">
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">任务人</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.empname}}</div>
                    </mu-flex>
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">时间</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.stime |
                            dateRangeFilter(mainObject.etime)}}
                        </div>
                    </mu-flex>
                    <mu-flex align-items="center">
                        <div class="lj-card-tertiary-title property-label">完成时间</div>
                        <div class="lj-card-tertiary-content property-value">
                            {{mainObject.finishtime | dateRangeFilter}}
                        </div>
                        <div class="tag_finish_delay" v-if="isFinishDelay">
                            超期
                        </div>
                    </mu-flex>
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">任务汇报</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.finishreport}}</div>
                    </mu-flex>
                    <!--todo:图片、附件-->
                    <template v-if="file.filetype === 1" v-for="(file,index) in mainObject.fileList">
                        <lj-fj :fileName="file.filename" :fileType="file.extname" :fileSize = file.filekb :md5="file.filemd5" :fileid="file.fileid"/>
                    </template>
                </div>
                <div v-if="mainObject.status === 2" class="lj-card-item">
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">验收人</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.check_empname}}</div>
                    </mu-flex>
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">评分</div>
                        <div class="property-value" style="font-size: 22px;">
                            <template v-for="i in 5">
                                <svg class="icon" aria-hidden="true">
                                    <use :xlink:href="mainObject.score >= i ?'#icon-xing1':'#icon-xing'"></use>
                                </svg>
                            </template>
                        </div>
                    </mu-flex>
                    <mu-flex>
                        <div class="lj-card-tertiary-title property-label">评语</div>
                        <div class="lj-card-tertiary-content property-value">{{mainObject.evaluation}}</div>
                    </mu-flex>
                </div>
            </div>
            <mu-bottom-sheet
                    :open.sync="planCheckSheetOpen"
                    :overlay-close="false"
                    class="lj-bottom-sheet">
                <div style="display:flex;">
                    <div style="font-size:15px;color:#888">任务验收</div>
                    <i class="iconfont icon-guanbi lj-card-summary-icon"
                       style="position: absolute;right: 20px;color: #ccc;font-size: 12px;"
                       @click="planCheckSheetOpen = false"></i>
                </div>
                <mu-flex style="margin-top: 15px;">
                    <div class="lj-card-tertiary-title property-label">评分</div>
                    <div class="property-value" style="font-size: 22px;">
                        <template v-for="i in 5">
                            <svg class="icon" aria-hidden="true" @click="mainObject.score = i">
                                <use :xlink:href="mainObject.score >= i ?'#icon-xing1':'#icon-xing'"></use>
                            </svg>
                        </template>
                    </div>
                </mu-flex>
                <div style="text-align: center;">
                    <textarea
                            name="banreason"
                            rows="5"
                            placeholder="请填写评语"
                            v-model="mainObject.evaluation"
                            class="lj-textarea-border">
                    </textarea>
                </div>
                <div style="display: flex;height: 45px;">
                    <span style="line-height: 32px;">需要返工</span>
                    <inline-x-switch style="margin-left: 10px;" v-model="needRework"></inline-x-switch>
                </div>
                <div class="lj-bottom-sheet-button" @click="acceptCheck">验收</div>
            </mu-bottom-sheet>
            <mu-bottom-sheet
                    :open.sync="finishSheetOpen"
                    :overlay-close="false"
                    class="lj-bottom-sheet">
                <div style="display:flex;">
                    <div style="font-size:15px;color:#888">完成任务</div>
                    <i class="iconfont icon-guanbi lj-card-summary-icon"
                       style="position: absolute;right: 20px;color: #ccc;font-size: 12px;"
                       @click="finishSheetOpen = false"></i>
                </div>
                <div style="text-align: center;">
                    <textarea
                            name="banreason"
                            rows="5"
                            placeholder="请填写任务汇报"
                            v-model="mainObject.finishreport"
                            class="lj-textarea-border">
                    </textarea>
                </div>
                <!-- <template v-for="(file,index) in finishFileList">
                    <lj-fj :fileFj="file" deletable @on-delete="finishFileList.splice(index,1)"></lj-fj>
                </template> -->
                <div style="font-size:14px;padding: 20px 0;color:#666">
                    <i class="iconfont icon-fujian" style="font-size: 14px;"></i>
                    添加附件
                </div>
                <input v-show="false" id="fileinput" type="file" multiple="multiple"
                       @change="tirggerFile($event)">
                <div style="display: flex;">
                    <div class="icon_addpic" onclick="document.getElementById('fileinput').click()">
                        <i class="iconfont icon-tianjiatupian"></i>
                    </div>
                </div>
                <div class="lj-card-item" v-if="finishFileList.length > 0">
                    <van-cell class="lj-file-show_and_update" v-if="picFjFilter(finishFileList).length > 0">
                        <template v-for="(file, index) in picFjFilter(finishFileList)">
                            <lj-img-pro
                                :key="file.fileid"
                                class="file-rel-item"
                                v-if="file.filemd5"
                                :md5="file.filemd5"
                                @image-click="photoBrowser(index, picFjFilter(finishFileList))"
                            />
                        </template>
                    </van-cell>
                    <div class="lj-card-item" v-for="(file, index) in docFjFilter(finishFileList)" :key="index">
                        <lj-fj :fileFj="file" :clickEventDefault="false" deletable @on-delete="finishFileList.splice(index,1)"></lj-fj>                    
                    </div>
                </div>
                <div class="lj-bottom-sheet-button" @click="finishPlan">完成</div>
            </mu-bottom-sheet>
        </template>
        <template slot="footer">
            <div v-if="mainObject.status === 0 && (mainObject.empid === empid || mainObject.plangroup_empid.indexOf(empid) >= 0)" class="lj-bottom-sheet-button"
                 @click="finishSheetOpen = true">
                完成
            </div>
            <div v-if="mainObject.status === 1 && mainObject.check_empid === empid" class="lj-bottom-sheet-button"
                 @click="planCheckSheetOpen = true">
                验收
            </div>
        </template>
    </lj-win-common>
</template>

<script>
    import LjWinCommon from "components/lj-win-common";
    import LjOaDetailStatusHeader from "components/UI/lj-oa-detail-status-header";
    import {InlineXSwitch} from 'vux'
    import LjFj from "components/lj-fj";
    import LjImgPro from "components/lj-img-pro"

    export default {
        components: {LjFj, LjWinCommon, LjOaDetailStatusHeader, InlineXSwitch,LjImgPro},
        data() {
            return {
                empid: 0,
                statusDic: {
                    "未完成": {color: "Alert"},
                    "已完成": {color: "Pass"},
                    "待验收": {color: "Normal"},
                    "已验收": {color: "Pass"}
                },
                needRework: false,
                mainObject: {},
                planCheckSheetOpen: false,
                finishSheetOpen: false,
                finishFileList: [],
                userInfo: {}
            }
        },
        created() {
            this.userInfo = $lj.getStorage("userInfo");
            this.empid = this.userInfo.empid;
            let pageParam = $lj.getPageParam();
            if (pageParam.mainObject) {
                this.mainObject = pageParam.mainObject;
            }
            this.reloadData();

            let self = this;
            /**监听安卓返回按键 */
            api.addEventListener({
                name: 'keyback'
            }, function(ret, err) {
                $lj.closeWin();
                if (self.mainObject.statusStr == "已完成" || self.mainObject.statusStr == "已验收") {
                    $lj.sendEvent("timespace_refresh");
                }
            });
        },
        methods: {
            reloadData() {
                this.planCheckSheetOpen = false;
                this.finishSheetOpen = false;
                this.finishFileList = [];
                let self = this;
                let requestBody = {
                    token: $lj.getStorage("token"),
                    planid: this.mainObject.planid
                };
                $lj.postLJRequest('GetL1OaWorkPlan', requestBody, function (ret) {
                    if (ret) {
                        self.mainObject = ret.oaworkplan;
                        if (self.mainObject.fileList) {
                            for (let file of self.mainObject.fileList) {
                                file.fileName = file.filename;
                                file.fileType = file.extname;
                            }
                        }
                    }
                });
            },
            tirggerFile(event) {
                let self = this;
                var reader = new FileReader();
                var file = event.target.files[0];
                reader.readAsDataURL(file);
                reader.onloadend = function () {
                    self.finishFileList.push({
                        base64: reader.result,
                        fileName: file.name,
                        fileType: file.name.substring(file.name.lastIndexOf('.')),
                        fileSize: file.size
                    });
                };
            },
            acceptCheck() {
                let self = this;
                let oaworkplan = {
                    planid: this.mainObject.planid,
                    score: this.mainObject.score,
                    evaluation: this.mainObject.evaluation
                };
                let requestBody = {
                    token: $lj.getStorage("token"),
                    oaworkplan: oaworkplan,
                    needRework: this.needRework?1:0
                };
                $lj.postLJRequest('AcceptcheckL1OaWorkPlan', requestBody, function (ret) {
                    if (ret) {
                        self.reloadData();
                    }
                });
            },
            finishPlan() {
                let self = this;
                if (!this.mainObject.finishreport) {
                    alert("请输入任务汇报");
                    return;
                }
                let oaworkplan = {};
                if (this.mainObject.kind == 4) {
                    oaworkplan = {
                        planid: this.mainObject.planid,
                        finishreport: this.mainObject.finishreport,
                        kind: this.mainObject.kind,
                        checktype: this.mainObject.checktype,
                        relbillcode: this.mainObject.relbillcode
                    };
                }
                else {
                    oaworkplan = {
                        planid: this.mainObject.planid,
                        finishreport: this.mainObject.finishreport
                    };
                }
                let fileList = [];
                for (let item of this.finishFileList) {
                    let file = {
                        base64:item.base64,
                        filename: item.fileName,
                        extname: item.fileType,
                    };
                    fileList.push(file);
                }
                let requestBody = {
                    token: $lj.getStorage("token"),
                    oaworkplan: oaworkplan,
                    fileList: fileList
                };
                $lj.postLJRequest('FinishL1OaWorkPlan', requestBody, function (ret) {
                    if (ret) {
                        self.reloadData();
                    }
                });
            },
            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
                })
            },
        },
        computed: {
            isDelay() {
                var dateNow = new Date();
                var etime = new Date();
                if (this.mainObject.etime) {
                    etime = new Date(this.mainObject.etime.replace(/-/g, '/'));
                }
                return this.mainObject.statusStr === '未完成' &&  dateNow > etime;
            },
            isFinishDelay() {
                var dateNow = new Date();
                var finishtime = new Date();
                if (this.mainObject.finishtime) {
                    finishtime = new Date(this.mainObject.finishtime.replace(/-/g, '/'));
                }
                return this.mainObject.statusStr === '未完成' &&  dateNow > finishtime;
            }
        }
    }
</script>

<style scoped>
    .lj-card-item {
        padding: 5px 20px !important;
    }

    .property-label {
        line-height: 25px;
        flex: 0 0 60px;
        text-align-last: justify;
    }

    .property-value {
        line-height: 25px;
        margin-left: 10px;
        color: #777;
    }

    .tag_top_delay {
        margin-top: 1px;
        font-size: 12px;
        height: 24px;
        line-height: 24px;
        background-color: #fdd1cd;
        color: #ff6f61;
        width: 45px;
        border-radius: 15px;
        text-align: center;
    }

    .tag_finish_delay {
        margin: 0 0 0 10px;
        font-size: 12px;
        height: 18px;
        line-height: 18px;
        background-color: #fdd1cd;
        color: #ff6f61;
        width: 40px;
        border-radius: 15px;
        text-align: center;
    }

    .icon_addpic {
        background-color: #f6f6f6;
        color: #bbb;
        height: 100px;
        flex: 0 0 100px;
        text-align: center;
        line-height: 100px;
        font-size: 30px;
    }
</style>