<template>
    <el-dialog
            :title="fullTitle"
            :fullscreen="false"
            width="80%"
            :close-on-click-modal="false"
            :visible.sync="dialogFormVisible"
            @close="close"
    >
        <el-form
                ref="form"
                :model="form"
                size="medium"
                :label-width="formLabelWidth"
                v-loading="loading"
        >
            <el-card header="订单信息" shadow="hover">
                <el-col :span="12">
                    <el-form-item label="订单名称">
                        {{ form.order.name }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="客户名称">
                        {{ form.order.client }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="订单编号">
                        {{ form.order.order_number }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="业务单元">
                        {{ form.order.business_module }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="订单金额">
                        {{ form.order.money }}
                    </el-form-item>
                </el-col>
            </el-card>
            <el-card shadow="hover" header="任务信息" style="margin-top: 20px">
                <div class="department-container">
                    <el-row class="department-info">
                        <el-avatar src="../../assets/logo.png" class="department-avatar"/>
                        <span class="department-name">
              营销中心
            </span>
                    </el-row>

                    <el-form-item label="任务金额">
                      <span>{{form.task_money}}</span>
                       <!-- <el-input-number :disabled="viewList" v-model=""/>-->
                    </el-form-item>

                    <el-divider/>

                    <el-row class="media-container">
            <span class="media-info">
              HI苏州 - 抖音号
            </span>
                    </el-row>
                    <el-form-item label="刊例价">
                        <span>￥</span> {{ form.price }}
                    </el-form-item>
                    <el-form-item label="任务名称" >
                        <el-input v-model="form.name" :disabled="!viewList"/>
                    </el-form-item>
                    <el-form-item label="发布时间">
                        <el-date-picker v-model="form.start_time" :disabled="!viewList"/>
                    </el-form-item>
                </div>
            </el-card>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <template v-if="approveMode">
            <el-button @click="reject('task',{status:-1})">审核退回</el-button>
            <el-button type="primary" @click="approve('task',{status:1})">审核通过</el-button>
          </template>
            <template v-if="viewMode">
                <el-button @click="close">关 闭</el-button>
            </template>
            <template v-else>
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
            </template>
        </div>
    </el-dialog>
</template>
<script>
    import EditableTag from "@/component/form/EditableTag";
    import {AddEditDialogMixin} from "@/component/dialog/AddEditDialogMixin";
    import {getAction} from "@/api";
    const defaultForm = {
        order: {
            name: null,
            client: null,
            order_number: null,
            business_module: null,
            money: null

        },
        id: null,
        name: null,
        price: null,
        task_money: null,
        start_time: null
    };
    export default {
        name: "TaskDialog",
        props: {},
        mixins: [AddEditDialogMixin],
        components: {EditableTag},
        data() {
            return {
              disabled:false,
                form: defaultForm,
                defaultForm: defaultForm,
                formLabelWidth: "160px",
                viewMode: false,
                approveMode: false,

                url: {
                    view: '/task',
                    edit: '/task'
                }
            };
        },
        computed: {
            fullTitle() {
                return "修改任务";
            }
        },
        methods: {
            list(id) {
                getAction(this.url.view + '/' + id).then(res => {
                    this.form = {
                        order: {
                            name: res.data.order_name,
                            client: res.data.client,
                            order_number: res.data.order_number,
                            business_module: res.data.business_module,
                            money: res.data.money
                        },
                        id: res.data.id,
                        name: res.data.name,
                        price: res.data.account_price,
                        task_money: res.data.task_money,
                        start_time: res.data.start_time
                    }
                })
            },
            edit(id) {
                this.viewMode = false;
              this.viewList = true;
                this.list(id);
                this.add();
            },
            view(id) {
                this.viewMode = true;
                this.list(id);
                this.add();
            },
            openApprove(id) {
                this.approveMode = true;
                this.viewMode = true;
                this.add();
                this.ListId=id
              this.$emit("ok")
            },

        }
    };
</script>

<style lang="scss" scoped>
    .department-container {
        margin: 20px;
        padding: 20px;
        border: 1px dashed #dcdfe6;

        .department-info {
            padding: 20px 25px;

            .department-avatar {
                vertical-align: middle;
            }

            .department-name {
                vertical-align: middle;
                color: #707070;
                font-size: 18px;
                margin-left: 20px;
            }
        }

        .media-container {
            margin-bottom: 20px;

            .media-info {
                display: inline-block;
                margin: 10px 50px;
                padding: 20px 25px;
                border: 1px dashed #dcdfe6;
                border-radius: 4px;
            }
        }
    }
</style>

运行结果