<template>
  <a-form :form="form">
		<a-descriptions bordered size="small" :column="2" class="data_view">
      <a-descriptions-item label="资产类型">{{ propertyTypeText }}</a-descriptions-item>
      <a-descriptions-item label="订单类型">{{ modalData.order_type | order_type }}</a-descriptions-item>
      <a-descriptions-item label="用户ID">{{ modalData.login_id }}</a-descriptions-item>
      <a-descriptions-item label="用户名">{{ modalData.real_name }}</a-descriptions-item>
      <a-descriptions-item label="手机号">{{ modalData.phone }}</a-descriptions-item>
      <a-descriptions-item label="邮箱号">{{ modalData.email }}</a-descriptions-item>
      <a-descriptions-item label="产品内容">
				<div class="domain_box">
					<span v-for="(item, i) in split_text(modalData.product_content)" :key="i" :class="{'suffix': i === 1}">{{ item }}</span>
				</div>
			</a-descriptions-item>
      <a-descriptions-item label="创建/更新时间">
				<div class="multi_line">
					<span>{{ modalData.created_date | moment }}</span>
					<span>{{ modalData.updated_date | moment }}</span>
				</div>
			</a-descriptions-item>
      <a-descriptions-item label="提交执行时间">{{ modalData.post_date | moment }}</a-descriptions-item>
      <a-descriptions-item label="状态">
				<a-form-item v-if="isEdit" class="m_0">
          <a-select
            placeholder="请设置状态"
						style="max-width: 300px"
						dropdownClassName="hide_disabled_option"
						v-model="isReview"
            v-decorator="[
              'status',
              { initialValue: modalData.status }
            ]"
            :options="order_detail_status_options.map(v => ({ label: v.label, value: v.value, ...(![3, 4].includes(v.value) && { disabled: true }) }))"
          />
				</a-form-item>
				<template v-else>{{ modalData.status | order_detail_status }}</template>
			</a-descriptions-item>
      <a-descriptions-item label="成本总金额">{{ modalData.cost_amount | setZero }}</a-descriptions-item>
      <a-descriptions-item label="出售总金额">{{ modalData.sell_amount | setZero }}</a-descriptions-item>
      <a-descriptions-item label="备注" :span="2">{{ modalData.memo }}</a-descriptions-item>
			<a-descriptions-item label="系统备注">
				<a-form-item class="m_0" v-if="isEdit">
	      	<a-textarea v-decorator="[
						'system_memo',
						{
							initialValue: modalData.system_memo,
							rules: [{ required: true, message: '请输入系统备注' }]
						}
					]" :maxLength="36" />
				</a-form-item>
				<template v-else>{{ modalData.system_memo }}</template>
			</a-descriptions-item>
    </a-descriptions>
  </a-form>
</template>
<script>
import mix from './mixins'
import finance from '../mixins/finance'
import common from '../mixins/common'
import mixProperty from './mixin.property'
const panes = [
	{ key: 'order_detail', tab: '订单详情' },
	{ key: 'domain_detail', tab: '域名信息' },
	{ key: 'domain_info', tab: '域名详情' },
	{ key: 'whois', tab: 'WHOIS' },
	{ key: 'order_list', tab: '相关订单列表' },
	{ key: 'contact', tab: '联系人模板映射' }
]
export default {
  mixins: [mix, common, finance(), mixProperty],
  computed: {
    // 是否可编辑
    isEdit() {
      return this.allow.includes('financeOrderStatus') && [5, 8].includes(this.modalData.status)
    },
    successMessage() { return '操作成功' }
	},
	data () {
		return {
			isReview: this.modalData.status,
			panes: panes,
			activeKey: 'order_detail',
			domainDetail: {},
			loading: false
		}
	},
  methods: {
		beforeOk(next, done) {
			const status = this.form.getFieldValue('status')
			if (![3, 4].includes(status) || !this.isEdit) return done()
			next()
		},
    async submit(values) {
			const res = await this.request_api.finance_order_detial.edit({
				uuid: this.modalData.uuid,
				version: this.modalData.version,
				status: values.status,
				system_memo: values.system_memo
			})
      return res
    }
  }
}
</script>