<template>
    <div class="container">
        <md-scroll-view
                :scrolling-x="false"
                :bouncing="false"
                :auto-reflow="true"
        >
            <template v-for="(formItem,formItemIndex) in formData">
                <div class="form-item" v-if="formItem.type !== 'label'">
                    <p class="title">{{formItem.title}}</p>
                    <!--单行输入-->
                    <template v-if="formItem.type === 'text'">
                        <md-input-item
                                class="input-item"
                                v-model="formItem.value"
                                placeholder="请输入"></md-input-item>
                    </template>

                    <!-- 多行输入 -->
                    <template v-else-if="formItem.type === 'textarea'">
                        <md-textarea-item
                                class="textarea"
                                v-model="formItem.value"
                                placeholder="请输入"
                                :max-height="300"
                        />
                    </template>

                    <!-- 密码 -->
                    <template v-else-if="formItem.type === 'password'">
                        <md-input-item
                                type="password"
                                class="input-item"
                                v-model="formItem.value"
                                placeholder="请输入"></md-input-item>
                    </template>

                    <!-- 下拉 -->
                    <template v-else-if="formItem.type === 'select-search'">
                        <md-field-item
                                placeholder="请选择"
                                :content="formItem.value"
                                @click="showSelector(formItem.title,formItem.options,formItemIndex)"
                                arrow
                        />
                    </template>

                    <!-- 纯文本 -->
                    <!--<template v-else-if="formItem.type === 'label'">-->

                    <!--</template>-->

                    <!-- 复选 -->
                    <template v-else-if="formItem.type === 'checkbox'">
                        <md-check-list
                                class="check-list"
                                v-model="formItem.value"
                                :options="formItem.options"
                                :icon-svg="false"/>
                    </template>

                    <!-- 单选 -->
                    <template v-else-if="formItem.type === 'radio'">
                        <md-radio-list
                                v-model="formItem.value"
                                :options="formItem.options"
                                :icon-svg="false"
                                icon-position="right"/>

                    </template>

                    <!-- 日期 -->
                    <template v-else-if="formItem.type === 'date'">
                        <md-field-item
                                placeholder="请选择"
                                :content="formItem.value"
                                @click="showDatePicker(formItem.title,formItemIndex)"
                                arrow
                        />
                    </template>
                </div>
            </template>

            <template v-if="$route.query.type === 2 && steps.length > 0">
                <div class="steps-info">
                    <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>

            <div class="form-item">
                <p class="title">审批人</p>
                <md-field-item
                        placeholder="请选择"
                        :content="deptLeaderName"
                        @click="companyUserIsDatePickerShow = true"
                        arrow
                />
            </div>

            <div class="filling"></div>
        </md-scroll-view>

        <div class="btn-group-wrap">
            <div class="btn-group">
                <md-button class="btn" type="primary" @click="submitForm">提交申请</md-button>
            </div>
        </div>


        <md-picker
                okText="确认"
                cancelText="取消"
                v-model="companyUserIsDatePickerShow"
                :data="[companyUserList]"
                :title="companyUserTitle"
                large-radius
                @confirm="onPickerCompanyUserConfirm"
        ></md-picker>

        <md-picker
                okText="确认"
                cancelText="取消"
                v-model="selectorConfigData.isSelectorShow"
                :data="[selectorConfigData.data]"
                :title="selectorConfigData.title"
                large-radius
                @confirm="onPickerConfirm"
        ></md-picker>

        <md-date-picker
                ref="datePicker"
                v-model="datePickerConfigData.isDatePickerShow"
                type="custom"
                :title="datePickerConfigData.title"
                large-radius
                :text-render="textRender"
                :custom-types="['yyyy', 'MM','dd', 'hh', 'mm']"
                :default-date="currentDate"
                @confirm="onDatePickerConfirm"
        ></md-date-picker>
    </div>
</template>

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

    import {
        getTypeFormItem,
        applyForm,
        updateApplyForm,
        processingTask,
        getCompanyUserList,
        submitApproval,
        getApplyDetail,
        getApprovedList
    } from '@/api/job_ticket'

    import {mapGetters} from 'vuex'

    export default {
        name: "add_job_ticket",
        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,
            [CheckList.name]: CheckList,
            [RadioList.name]: RadioList,
            [DatePicker.name]: DatePicker,
            [Field.name]: Field,
            [FieldItem.name]: FieldItem,
            [Selector.name]: Selector,
            [Picker.name]: Picker,
        },
        data() {
            return {
                value: '',
                currentDate: new Date(),
                datePickerValue: '',


                // 使用数据
                companyUserTitle: '企业用户',
                companyUserList: [],// 企业用户列表
                companyUserIsDatePickerShow: false,// 企业用户列表
                reqData: null,  // 请求数据
                formData: [],
                deptLeader: '', // 下一步审批人 (id#name)
                deptLeaderName: '', // 下一步审批人 (id#name)
                selectorConfigData: {
                    title: '',  // 标题
                    data: [],   // 数据
                    isSelectorShow: false,  // 展示状态
                    changeValIndex: '', // 修改数据的下标
                },
                datePickerConfigData: {
                    title: '',  // 标题
                    isDatePickerShow: false,
                    changeValIndex: '', // 修改数据的下标
                },


                steps: [
                    // {
                    //     title: '部门领导审批',
                    //     content: '未开始',
                    //     time: '2019.8.6 09:25',
                    //     user: '庄俊'
                    // },
                ],
                stepsCurrent: 1,
            }
        },
        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: 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() {
                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: 2019/12/30 10:58
             */
            loadData: function () {
                Toast.loading('加载中...')
                if (this.$route.query.type === 1) {
                    getTypeFormItem({
                        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)
                            let tempLabelArr, tempOptions;
                            formData.forEach(function (item, index) {
                                tempLabelArr = [], tempOptions = [];
                                if (item.type === 'select-search' || item.type === 'radio') {  // 下拉 || 单选
                                    tempLabelArr = item.label.split(',');
                                    tempLabelArr.forEach(function (labelItem, index) {
                                        tempOptions.push({
                                            value: labelItem,
                                            text: labelItem,
                                        },)
                                    })
                                    item.options = tempOptions;
                                } else if (item.type === 'checkbox') { // 复选
                                    tempLabelArr = item.label.split(',');
                                    tempLabelArr.forEach(function (labelItem, index) {
                                        tempOptions.push({
                                            value: labelItem,
                                            label: labelItem,
                                        },)
                                    })
                                    item.options = tempOptions;
                                    if (item.type === 'checkbox') {
                                        item.value = [];
                                    }
                                }
                            })

                            this.formData = formData;
                            this.reqData = data;
                        }
                        Toast.hide()
                    }).catch(err => {
                        Toast.hide()
                    })
                } else {
                    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 18:35
             */
            submitForm() {
                if (this.deptLeader === '') {
                    Toast.info('请选择审批人');
                    return false;
                }
                Toast.loading('提交中...')
                this.formData.forEach(function (item, index) {
                    item.userVal = item.value;
                })
                if (this.$route.query.type === 1) {
                    applyForm({
                        formId: this.reqData.id,
                        formJson: JSON.stringify(this.formData),
                        aId: this.job_ticket_aId,
                        cId: this.job_ticket_cId,
                        deptLeader: this.deptLeader
                    }).then(res => {
                        const {code, data, msg} = res;
                        if (code === 1) {
                            submitApproval({
                                aId: this.job_ticket_aId,
                                cId: this.job_ticket_cId,
                                userFormId: data.userFormId
                            }).then((res) => {
                                const {code, msg} = res;
                                if (code === 1) {
                                    // this.resetForm()
                                    Toast.info(msg)
                                    this.$router.back()
                                }
                                Toast.hide()
                            }).catch(err => {
                                Toast.hide()
                            })
                        }

                    }).catch(err => {
                        Toast.hide()
                    })
                } else {
                    updateApplyForm({
                        userFormId: this.reqData.id,
                        formId: this.reqData.formId,
                        formJson: JSON.stringify(this.formData),
                        aId: this.job_ticket_aId,
                        cId: this.job_ticket_cId,
                        deptLeader: this.deptLeader
                    }).then(res => {
                        const {code, data, msg} = res;
                        if (code === 1) {
                            processingTask({
                                aId: this.job_ticket_aId,
                                cId: this.job_ticket_cId,
                                userFormId: this.reqData.id,
                                taskId: this.reqData.taskId,
                                deptLeader: this.deptLeader,
                                p_B_reApply: true
                            }).then((res) => {
                                const {code, msg} = res;
                                if (code === 1) {
                                    // this.resetForm()
                                    Toast.info(msg)
                                    this.$router.back()
                                }
                                Toast.hide()
                            }).catch(err => {
                                Toast.hide()
                            })
                        }

                    }).catch(err => {
                        Toast.hide()
                    })
                }
            },
            /**
             * @Author: NanKeYang
             * @Description: 重置表单值
             * @Data: 2019/12/30 12:04
             */
            resetForm() {
                this.formData.forEach(function (item, index) {
                    item.value = '';
                    item.userVal = item.value;
                })
                this.deptLeader = '';
                this.deptLeaderName = '';
            },
            /**
             * @Author: NanKeYang
             * @Description: 显示时间选择器
             * @Data: 2019/12/28 18:26
             */
            showDatePicker(title, changeValIndex) {
                this.datePickerConfigData.isDatePickerShow = true;
                this.datePickerConfigData.title = title;
                this.datePickerConfigData.changeValIndex = changeValIndex;
            },
            /**
             * @Author: NanKeYang
             * @Description: 显示下拉框
             * @Data: 2019/12/28 17:44
             */
            showSelector(title, data, changeValIndex) {
                this.selectorConfigData.isSelectorShow = true;
                this.selectorConfigData.title = title;
                this.selectorConfigData.data = data;
                this.selectorConfigData.changeValIndex = changeValIndex;
            },

            /**
             * @Author: NanKeYang
             * @Description: 下拉选择
             * @Data: 2019/12/28 17:48
             */
            onPickerConfirm(data) {
                this.formData[this.selectorConfigData.changeValIndex].value = data[0].value
            },
            /**
             * @Author: NanKeYang
             * @Description: 文字渲染
             * @Data: 2019/12/28 18:28
             */
            textRender() {
                const args = Array.prototype.slice.call(arguments)
                const typeFormat = args[0] // 类型
                // const column0Value = args[1] // 第1列选中值
                // const column1Value = args[2] // 第2列选中值
                const column2Value = args[3] // 第3列选中值
                if (typeFormat === 'dd') {
                    return `${column2Value}日`
                }
            },
            onDatePickerConfirm(columnsValue) {
                this.formData[this.datePickerConfigData.changeValIndex].value = this.$refs.datePicker.getFormatDate('yyyy-MM-dd hh:mm')
            },
        }
    }
</script>

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

            .filling {
                height: 220px;
            }

            .textarea, .input-item, .check-list, .md-field-item, .md-radio-list {
                font-size: 22px;
            }

            .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;
                }
            }

            .steps-info {
                background: #FFF;
                padding: 30px 0;
                margin-bottom: 30px;

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

                .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;
                .btn {
                    border-radius: 50px;
                    display: inline-block;
                    &:after {
                        border: 0;
                    }
                }
            }
        }
    }
</style>