<template>
    <div>
        <Head :headText='headText'></Head>
        <div class='nav-right'>
            <el-button type='info' plain size='mini' @click='back'>返回</el-button>
            <el-button type='primary' v-if='type==1' @click='submission' size='mini'>提交</el-button>
        </div>
        <div class='detailContainer' v-if='Object.keys(detailObj).length>0'>
            <div class='title Micbold'>未执行申诉单</div>
            <div class='nav MicrYaHei'>
                <span>项目名称：{{localName}}</span>
                <span>申请人：{{ $store.state.userInfo.username}}</span>
                <span>申请时间：{{dateNow||'--'}}</span>
            </div>
            <div
                class='cont1 MicrYaHei'
            >申诉未执行指令：{{formatterStr(detailObj.recommend.date)}} {{formatterStr1(detailObj.recommend.time)}} {{detailObj.title||'--'}}</div>
            <div class='cont2'>
                <audit-table :tableList='tableList'></audit-table>
            </div>
            <div class='cont3'>
                <span class='Micbold'>策略评价</span>
                <span class='MicrYaHei'>{{detailObj.recommend.evaluateStrategy||detailObj.recommend.remarks||'--'}}</span>
            </div>
            <div class='cont4'>
                <span class='Micbold'>申请原因</span>
                <span>
                    <el-select size='mini' v-model='detailObj.reasonType' placeholder='请选择'>
                        <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.label'></el-option>
                    </el-select>
                </span>
                <span>
                    <textarea placeholder='填写申请原因' v-model='detailObj.reason'></textarea>
                </span>
            </div>
            <div class='foot'>
                <upload-img :souseArr='detailObj.pics'></upload-img>
            </div>
        </div>
    </div>
</template>
<script>
var moment = require('moment')
import 'moment/locale/zh-cn'
import Head from '../main/index'
import AuditTable from '../audit/auditTable'
import UploadImg from '../../components/uploadImg'
import { queryWorkflow, querySimpleInfo, queryChillerExecuteInfo } from '@/api/appeal/appeal.js'
import { updateWorkflow } from '@/api/audit/audit.js'
export default {
    data() {
        return {
            headText: '申诉审核',
            reason: '',
            options: [
                {
                    value: '0',
                    label: '策略原因'
                },
                {
                    value: '1',
                    label: '设备原因'
                },
                {
                    value: '2',
                    label: '其他'
                }
            ],
            value: '',
            detailObj: {},
            souseArr: [],
            appealId: '',
            commandId: '',
            tableList: [],
            dateNow: '',
            applyUser: '',
            localName: '',
            type: ''
        }
    },
    components: {
        Head,
        AuditTable,
        UploadImg
    },
    methods: {
        formatterStr(str) {
            if (str) {
                return str.substring(0, 4) + '.' + str.substring(4, 6) + '.' + str.substring(6, 8)
            }
        },
        formatterStr1(str) {
            if (str) {
                return str.substring(0, 2) + ':' + str.substring(2, 4)
            }
        },
        quertName(id) {
            querySimpleInfo(id, {}).then(res => {
                this.applyUser = res.realname
            })
        },
        back() {
            this.$router.push('/appeal')
        },
        queryDetail(commandId) {
            let params = {
                postParams: {
                    criteria: {
                        id: commandId
                    }
                }
            }
            queryChillerExecuteInfo(params).then(res => {
                const list = res.data || [{}, {}, {}]
                this.tableList = Object.values(list[0]).map(i => i || {})
                this.tableList[0].title = '当前运行状态'
                this.tableList[1].title = '推送策略'
                this.tableList[2].title = '执行策略'
            })
        },
        submission() {
            // this.detailObj.applyUser
            let params = {
                postParams: {
                    id: this.detailObj.id,
                    commit: 'apply',
                    updateUser: this.$store.state.userInfo.userId, //申请人
                    applyUser: this.$store.state.userInfo.userId, //申请人
                    // judgement:
                    //   this.detailObj.recommend.evaluateStrategy ||
                    //   this.detailObj.recommend.remarks ||
                    //   "", //策略评价
                    reasonType: this.detailObj.reasonType, //申诉原因类型：策略原因;设备原因;其他
                    reason: this.detailObj.reason, //具体申诉原因
                    pics: this.detailObj.souseArr
                }
            }
            // console.log(params);
            // return;
            updateWorkflow(params).then(res => {
                if (res.result == 'success') {
                    this.$message.success('申诉成功')
                } else {
                    this.$message.error('申诉失败: ' + res.message)
                }
                this.$router.push('/appeal')
            })
        }
    },
    mounted() {
        this.detailObj = JSON.parse(this.$route.query.item)
        this.type = this.$route.query.type
        this.dateNow = moment()
            .locale('zh-cn')
            .format('YYYY.MM.DD')
        if (Object.keys(this.detailObj).length > 0) {
            console.log(this.detailObj)
            // return;
            this.quertName(this.detailObj.applyUser)
            let projects = this.$store.state.projects.projects
            projects.forEach(el => {
                if (this.detailObj.projectId == el.id) {
                    this.localName = el.localName
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.nav-right {
    height: 48px;
    position: fixed;
    right: 24px;
    top: 53px;
    z-index: 1;
    display: flex;
    align-items: center;
}
.detailContainer {
    max-width: 762px;
    width: 60%;
    margin: 0 auto;
    padding-top: 36px;
    padding-bottom: 24px;
    .title {
        height: 32px;
        font-size: 24px;
        color: rgba(31, 36, 41, 1);
        line-height: 32px;
        text-align: center;
    }
    .nav {
        display: flex;
        justify-content: space-between;
        margin-top: 40px;
        margin-bottom: 12px;
        span {
            height: 22px;
            font-size: 14px;
            color: rgba(31, 36, 41, 1);
            line-height: 19px;
        }
    }
    .cont1 {
        height: 22px;
        font-size: 14px;
        color: rgba(31, 36, 41, 1);
        line-height: 19px;
        margin-bottom: 16px;
    }
    .cont2 {
        margin-bottom: 24px;
        height: 180px;
    }
    .cont3 {
        margin-bottom: 24px;
        span {
            display: block;
        }
        span:nth-of-type(1) {
            height: 24px;
            font-size: 16px;
            color: rgba(31, 36, 41, 1);
            line-height: 21px;
            margin-bottom: 8px;
        }
        span:nth-of-type(2) {
            height: 22px;
            font-size: 14px;
            color: rgba(100, 108, 115, 1);
            line-height: 19px;
        }
    }
    .cont4 {
        margin-bottom: 8px;
        span {
            display: block;
        }
        span:nth-of-type(1) {
            height: 24px;
            font-size: 16px;
            color: rgba(31, 36, 41, 1);
            line-height: 21px;
        }
        span:nth-of-type(2) {
            margin: 8px 0;
        }
        span:nth-of-type(3) {
            textarea {
                width: 100%;
                // max-width: 762px;
                height: 64px;
                border-radius: 4px;
                border: 1px solid rgba(195, 199, 203, 1);
                color: rgba(195, 199, 203, 1);
            }
        }
    }
    .foot {
        // width: 112px;
        // height: 112px;
        // background: rgba(248, 249, 250, 1);
        // border: 1px solid red;
    }
}
</style>
<style lang="scss">
.detailContainer {
    .el-input--mini .el-input__inner {
        height: 32px;
        border: 1px solid rgba(195, 199, 203, 1);
    }
}
</style>