<template>
  <el-dialog v-dialogDrag :title="this.$t('orderAuthor.orderDetails')" :visible.sync="show" width="500px" :before-do-close="doClose" :close-on-click-modal="false">
    <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 400px">
      <data-form ref="dataform" :form="form" :form-model="formModel" class="data-box" />
    </el-scrollbar>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="doClose">{{ $t('global.close') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
    name: 'RouteDetail',
    data() {
        return {
            show: false,
            formModel: {
                organizationName: '',
                userName: '',
                goodsName: '',
                amount: '',
                forever: '',
                startTime: '',
                monthAmount: '',
                totalPrice: '',
                payWays: '',
                createTime: '',
                orderType: '',
                contractNo: '',
                bizType: '',
                payStatusZh: '',
                sellerName: ''
            }
        };
    },
    computed: {
        form() {
            const form = {
                labelWidth: '120px',
                items: [
                    { prop: 'organizationName', label: `${this.$t('orderAuthor.organizationOrEnterprise')}:`, type: 'text', disabled: true },
                    { prop: 'userName', label: `${this.$t('orderAuthor.userName')}:`, type: 'text', disabled: true },
                    { prop: 'goodsName', label: `${this.$t('orderAuthor.commodityName')}:`, type: 'text', disabled: true },
                    { prop: 'amount', label: `${this.$t('orderAuthor.permissionNumber')}:`, type: 'text', disabled: true },
                    { prop: 'forever', label: `${this.$t('orderAuthor.permanenceOrNot')}:`, type: 'radio', disabled: true, required: false, options: this.$ConstSelect.Whether },
                    { prop: 'startTime', label: `${this.$t('orderAuthor.startDate')}:`, type: 'text', disabled: true },
                    { prop: 'monthAmount', label: `${this.$t('orderAuthor.purchaseMonths')}:`, type: 'text', disabled: true },
                    { prop: 'totalPrice', label: `${this.$t('orderAuthor.totalPrice')}:`, type: 'text', disabled: true },
                    { prop: 'payWays', label: `${this.$t('orderAuthor.paymentMethod')}:`, type: 'text', disabled: true },
                    { prop: 'createTime', label: `${this.$t('orderAuthor.creationDate')}:`, type: 'text', disabled: true },
                    { prop: 'orderType', label: `${this.$t('orderAuthor.orderType')}:`, type: 'text', disabled: true },
                    { prop: 'contractNo', label: `${this.$t('orderAuthor.contractNumber')}:`, type: 'text', disabled: true },
                    { prop: 'bizType', label: `${this.$t('orderAuthor.businessType')}:`, type: 'text', disabled: true },
                    { prop: 'payStatusZh', label: `${this.$t('orderAuthor.paymentStatus')}:`, type: 'text', disabled: true },
                    { prop: 'sellerName', label: `${this.$t('orderAuthor.salesman')}:`, type: 'text', disabled: true }
                ]

            };
            return form;
        }
    },
    methods: {
        doShow(data) {
            this.show = true;
            this.formModel = {
                organizationName: data.organizationName,
                userName: data.userName,
                goodsName: data.goodsName,
                amount: data.amount,
                forever: data.forever,
                startTime: data.startTime,
                monthAmount: data.monthAmount,
                totalPrice: data.totalPrice,
                payWays: data.payWays,
                createTime: data.createTime,
                orderType: data.orderType,
                contractNo: data.contractNo,
                bizType: data.bizType,
                payStatusZh: data.payStatusZh,
                sellerName: data.sellerName
            };
        },
        doClose() {
            this.show = false;
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.draft {
        width: 400px;
        text-align: center;
        margin: 20px auto;
    }
	/deep/{
		.data-box .el-form-item {
			margin-bottom: 12px;
		}
	}

</style>
