<template>
    <div class="container">
        <md-scroll-view
                :scrolling-x="false"
                :bouncing="false"
                :auto-reflow="true"
        >
            <div class="task-title">
                <h3>{{$route.query.formName}}</h3>
            </div>

            <div class="info-group">
                <template v-if="!displayStatus.status">
                    <div class="info-item" v-for="(item,index) in formData" :key="index"
                         v-if="index < displayStatus.size">
                        <div class="title">
                            {{item.title}}
                        </div>
                        <div class="content">
                            {{item.userVal|userValFilter}}
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="info-item" v-for="(item,index) in formData" :key="index">
                        <div class="title">
                            {{item.title}}
                        </div>
                        <div class="content">
                            {{item.userVal|userValFilter}}
                        </div>
                    </div>
                </template>
                <div class="arrow-btn" @click="updateDisplayStatus">
                    <md-icon name="arrow-up" slot="left" v-if="displayStatus.status"></md-icon>
                    <md-icon name="arrow-down" slot="left" v-else></md-icon>
                </div>
            </div>
            <div class="steps-info" v-if="steps.length > 0">
                <div class="task-title">
                    <h3>进度</h3>
                </div>

                <md-steps
                        direction="vertical"
                        :steps="steps"
                        :current="stepsCurrent"
                >
                    <template slot="reached">
                        <md-icon name="checked"></md-icon>
                    </template>
                    <div
                            class="steps-info-item"
                            slot="content"
                            slot-scope="{ index, step }"
                    >
                        <template v-if="index === stepsCurrent">
                            <div class="active">
                                <div class="title">
                                    {{step.title}} <span class="user">{{step.user}}</span>
                                </div>
                                <div class="content">
                                    {{step.content}}
                                </div>
                                <div class="time">
                                    {{step.time}}
                                </div>
                            </div>
                        </template>
                        <template v-else>
                            <div>
                                <div class="title">
                                    {{step.title}} <span class="user">{{step.user}}</span>
                                </div>
                                <div class="content">
                                    {{step.content}}
                                </div>
                                <div class="time">
                                    {{step.time}}
                                </div>
                            </div>
                        </template>

                    </div>
                </md-steps>
            </div>
            <template v-if="!$route.query.isLog">
                <div class="form-group">
                    <div class="form-item"
                         v-if="(reqData && reqData.taskName === '部门领导审批') || (reqData && reqData.taskName === '人事审批')">
                        <p class="title">审批意见</p>
                        <md-textarea-item
                                class="textarea"
                                v-model="approvalComments"
                                placeholder="请输入"
                                :max-height="300"
                        />
                    </div>

                    <div class="form-item" v-if="reqData && reqData.taskName === '部门领导审批'">
                        <p class="title">人事审批</p>
                        <md-field-item
                                placeholder="请选择"
                                :content="deptLeaderName"
                                @click="companyUserIsDatePickerShow = true"
                                arrow
                        />
                    </div>
                </div>
            </template>
            <template v-if="!$route.query.isLog">
                <div class="filling"></div>
            </template>
        </md-scroll-view>

        <md-picker
                okText="确认"
                cancelText="取消"
                v-model="companyUserIsDatePickerShow"
                :data="[companyUserList]"
                :title="companyUserTitle"
                large-radius
                @confirm="onPickerCompanyUserConfirm"
        ></md-picker>
        <template v-if="!$route.query.isLog">
            <div class="btn-group-wrap"
                 v-if="reqData && job_ticket_aId == reqData.handleUserId && reqData.status === 1 && reqData.taskName !== '调整申请'">
                <div class="btn-group" v-if="reqData.taskName === '部门领导审批' || reqData.taskName === '人事审批' ">
                    <md-button class="disagree" type="warning" @click="submissionProcessing(0)">不同意</md-button>
                    <md-button class="agree" type="primary" @click="submissionProcessing(1)">同意</md-button>
                </div>
                <div class="btn-group2" v-if="reqData.taskName === '销假'">
                    <md-button class="agree" type="primary" @click="submissionProcessing(2)">销假</md-button>
                </div>
            </div>
        </template>

    </div>
</template>

<script>
    import {
        TabBar,
        Swiper,
        SwiperItem,
        ScrollView,
        ScrollViewRefresh,
        ScrollViewMore,
        Button,
        InputItem,
        Icon,
        Tag,
        Toast,
        TextareaItem,
        Steps,
        Picker,
        Field, FieldItem
    } from 'mand-mobile'

    import {getApplyDetail, getCompanyUserList, processingTask, getApprovedList} from '@/api/job_ticket'

    import {mapGetters} from 'vuex'

    export default {
        name: "job_ticket_detail",
        components: {
            [TabBar.name]: TabBar,
            [Swiper.name]: Swiper,
            [SwiperItem.name]: SwiperItem,
            [ScrollView.name]: ScrollView,
            [ScrollViewRefresh.name]: ScrollViewRefresh,
            [ScrollViewMore.name]: ScrollViewMore,
            [Button.name]: Button,
            [InputItem.name]: InputItem,
            [Icon.name]: Icon,
            [Tag.name]: Tag,
            [Steps.name]: Steps,
            [TextareaItem.name]: TextareaItem,
            [Picker.name]: Picker,
            [Field.name]: Field,
            [FieldItem.name]: FieldItem,
        },
        data() {
            return {
                displayStatus: { // 显示状态
                    size: 3,
                    status: false,  // false=>不显示, true=>显示
                },
                steps: [
                    // {
                    //     title: '部门领导审批',
                    //     content: '未开始',
                    //     time: '2019.8.6 09:25',
                    //     user: '庄俊'
                    // },
                ],
                stepsCurrent: 1,

                companyUserTitle: '企业用户',
                companyUserList: [],// 企业用户列表
                companyUserIsDatePickerShow: false,// 企业用户列表

                reqData: null,  // 请求数据
                formData: [],
                approvalComments: '',    // 审批意见
                deptLeader: '', // 下一步审批人 (id#name)
                deptLeaderName: '', // 下一步审批人 (id#name)

            }
        },
        filters:{
            userValFilter(value){
                let result
                if(typeof value === 'object'){
                    result = value.join(',')
                }else{
                    result = value
                }

                return result;
            }
        },
        mounted() {
            this.loadData()
            this.getCompanyUserList()
            this.getApplyLogList()
        },
        computed: {
            ...mapGetters([
                'job_ticket_aId',
                'job_ticket_cId',
            ])
        },
        methods: {
            /**
             * @Author: NanKeYang
             * @Description: 申请列表
             * @Data: 2020/1/2 19:02
             */
            getApplyLogList() {
                getApprovedList({
                    aId: this.job_ticket_aId,
                    cId: this.job_ticket_cId,
                    formId: this.$route.query.id,
                }).then(res => {
                    const {code, data, count, limit, page} = res;
                    if (code === 200) {
                        let tempSteps = []
                        data.forEach((item) => {
                            tempSteps.push({
                                title: item.taskName,
                                content: item.taskMessage,
                                time: item.handleTime,
                                user: item.handleUserName
                            })
                        })
                        this.steps = tempSteps;
                        this.stepsCurrent = tempSteps.length - 1;
                    }
                }).catch(err => {
                })
            },
            /**
             * @Author: NanKeYang
             * @Description: 重置表单
             * @Data: 2020/1/2 18:13
             */
            resetForm() {
                this.approvalComments = '';
                this.deptLeader = '';
                this.deptLeaderName = '';
            },
            /**
             * @Author: NanKeYang
             * @Description:提交处理
             * @param flag 0=>不同意  1=>同意
             * @Data: 2020/1/2 17:59
             */
            submissionProcessing(flag) {
                let reqData;
                if (this.reqData.taskName === '部门领导审批') {
                    reqData = {
                        aId: this.job_ticket_aId,
                        cId: this.job_ticket_cId,
                        taskId: this.reqData.taskId,
                        p_B_deptLeaderApproved: flag === 1 ? true : false,
                        p_S_hr: this.deptLeader,
                        message: this.approvalComments
                    }
                    if (flag === 0) {
                        delete reqData['p_S_hr'];
                    } else {
                        if (this.deptLeader === '') {
                            Toast.info('请选择审批人');
                            return false;
                        }
                    }
                } else if (this.reqData.taskName === '人事审批') {
                    reqData = {
                        aId: this.job_ticket_aId,
                        cId: this.job_ticket_cId,
                        taskId: this.reqData.taskId,
                        p_B_hrApproved: flag === 1 ? true : false,
                        message: this.approvalComments,
                        p_S_applyUserId: this.reqData.createdBy + '#自己'
                    }
                } else if (this.reqData.taskName === '销假') {
                    reqData = {
                        aId: this.job_ticket_aId,
                        cId: this.job_ticket_cId,
                        taskId: this.reqData.taskId,
                    }
                }

                Toast.loading('处理中...')
                processingTask(reqData).then(res => {
                    const {code, msg, data} = res;
                    if (code === 1) {
                        Toast.info(msg)
                        this.$router.back();
                        // this.resetForm()
                        // this.loadData()
                        // this.getApplyLogList()
                    }
                    Toast.hide()
                }).catch(err => {
                    Toast.hide()
                })
            },
            /**
             * @Author: NanKeYang
             * @Description: 显示下拉框
             * @Data: 2019/12/28 17:44
             */
            onPickerCompanyUserConfirm(data) {
                this.deptLeader = data[0].value + '#' + data[0].label;
                this.deptLeaderName = data[0].label;
            },
            /**
             * @Author: NanKeYang
             * @Description: 获取用户列表
             * @Data: 2020/1/2 14:24
             */
            getCompanyUserList() {
                Toast.loading('加载中...')
                getCompanyUserList({
                    aId: this.job_ticket_aId,
                    cId: this.job_ticket_cId
                }).then(res => {
                    const {code, data} = res;
                    if (code === 1) {
                        data.forEach((item) => {
                            item.value = item.aId;
                            item.label = item.accountRealName;
                        })
                        this.companyUserList = data;
                    }
                    Toast.hide()
                }).catch(err => {
                    Toast.hide()
                })
            },
            /**
             * @Author: NanKeYang
             * @Description: 加载数据
             * @Data: 2020/1/2 17:42
             */
            loadData: function () {
                Toast.loading('加载中...')
                getApplyDetail({
                    id: this.$route.query.id,
                    aId: this.job_ticket_aId,
                    cId: this.job_ticket_cId
                }).then(res => {
                    const {code, data} = res;
                    if (code === 1) {
                        let formData = JSON.parse(data.formJson)
                        this.formData = formData;
                        this.reqData = data;
                    }
                    Toast.hide()
                }).catch(err => {
                    Toast.hide()
                })
            },
            /**
             * @Author: NanKeYang
             * @Description: 更新显示状态
             * @Data: 2019/12/28 15:13
             */
            updateDisplayStatus: function () {
                this.displayStatus.status = !this.displayStatus.status;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        height: 100vh;
        background: #F2F2F2;
        overflow: hidden;

        .md-scroll-view {
            height: 100%;
            .filling {
                height: 160px;
            }

            .form-group {
                margin-bottom: 80px;
                .form-item {
                    margin: 15px;
                    background: #FFF;
                    padding: 0 15px;
                    overflow: hidden;

                    .title {
                        background: #fff;
                        font-size: 32px;
                        margin: 30px 0 0 0;
                        padding: 0;
                        color: #999999;
                    }
                }

            }

            .task-title {
                font-size: 36px;
                margin: 0 15px;
                height: 100px;
                line-height: 100px;
            }

            .info-group {
                background: #FFF;
                border-radius: 50px 50px 0 0;
                padding: 30px 0;
                margin-bottom: 30px;
                .info-item {
                    position: relative;
                    padding: 30px;
                    overflow: hidden;
                    &:last-child {
                        &:after {
                            content: "";
                            display: block;
                            position: absolute;
                            height: 1px;
                            width: 100%;
                            background: #FFF;
                            left: 30px;
                            margin-top: 20px;
                        }
                    }
                    &:after {
                        content: "";
                        display: block;
                        position: absolute;
                        height: 1px;
                        width: 100%;
                        background: #E6E6E6;
                        left: 30px;
                        margin-top: 20px;
                    }
                    .title, .content {
                        font-size: 32px;
                    }
                    .title {
                        color: #999999;
                        margin-bottom: 15px;
                    }
                    .content {
                        color: #000000;
                        margin-top: 15px;
                    }
                }

                .arrow-btn {
                    height: 100px;
                    position: relative;
                    text-align: center;
                    .md-icon {
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
            }

            .steps-info {
                background: #FFF;
                padding: 30px 0;
                margin-bottom: 30px;
                .md-steps {
                    .steps-info-item {
                        width: 600px;
                        .active {
                            .content {
                                color: #0CBE88;
                            }
                        }

                        .title {
                            font-size: 32px;
                            width: 100%;
                            color: #000000;
                            .user {
                                float: right;
                                font-size: 28px;
                                color: #909090;
                            }
                        }

                        .content {
                            font-size: 28px;
                            margin: 15px 0;
                            color: #909090;
                        }

                        .time {
                            margin: 30px 0 0;
                            font-size: 28px;
                            color: #909090;
                        }
                    }
                }
            }
        }

        .btn-group-wrap {
            background: #FFF;
            width: 100%;
            position: fixed;
            bottom: 0;
            z-index: 99;
            box-shadow: 0 0 9px #7D7D7D;
            height: 160px;
            .btn-group {
                padding: 0 50px 30px;
                .disagree, .agree {
                    width: 50%;
                    display: inline-block;
                    &:after {
                        border: 0;
                    }
                }
                .disagree {
                    border-radius: 50px 0 0 50px;
                }

                .agree {
                    border-radius: 0 50px 50px 0;
                }
            }

            .btn-group2 {
                padding: 0 50px 30px;
                .agree {
                    width: 100%;
                    display: inline-block;
                    &:after {
                        border: 0;
                    }
                }

                .agree {
                    border-radius: 50px;
                }
            }
        }

    }
</style>