<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="800px"
    @close="close"
  >
    <h1>{{ __('订单详情') }}</h1>
    <div>
      <el-row :gutter="20">
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <span>{{ __('订单号') }}:</span>
            <span>{{ pram.mo_id }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-button type="info" @click="dialogVisible = true">
              {{ __('发货\指派骑手') }}
            </el-button>
          </div>
        </el-col>
      </el-row>

      <hr />
      <h2 style="color: #8c939d">{{ __('店铺已接单') }}</h2>
      <el-progress :percentage="50" />
      <br />
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form ref="form" :model="form">
              <el-form-item prop="mo_item_images">
                <el-upload
                  ref="article_image"
                  :action="action"
                  :before-upload="BeforeUpload"
                  class="avatar-uploader"
                  :on-success="
                    (value) => handleAvatarSuccess('mo_item_images', value)
                  "
                  :show-file-list="false"
                >
                  <img
                    v-if="form.mo_item_images"
                    class="avatar"
                    :src="form.mo_item_images"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content bg-purple">
            {{ pram.mo_item_desc }}
            <span>{{ __('总价') }}:</span>
            {{ pram.order_item_amount }}
            <span>{{ __('元') }}</span>
            &nbsp;
            <span>{{ __('数量') }}:</span>
            <span>{{ pram.order_item_quantity }}</span>
          </div>
        </el-col>
      </el-row>

      <hr />

      <h2 style="color: #8c939d">{{ __('收货信息') }}</h2>
      <span>{{ __('收货人姓名') }}:</span>
      &nbsp;
      <span>{{ pram.mo_receive_name }}</span>
      <br />
      <br />

      <span>{{ __('联系电话') }}:</span>
      &nbsp;
      <span>{{ pram.mo_receive_tel }}</span>
      <br />
      <br />

      <span>{{ __('收货地址') }}:</span>
      &nbsp;
      <span>{{ pram.mo_receive_address }}</span>
      <hr />

      <h2 style="color: #8c939d">{{ __('送货时间') }}</h2>
      <span>{{ __('支付方式') }}:</span>
      &nbsp;
      <span>{{ pram.mo_receive_name }}</span>
      <br />
      <br />
      <span>{{ __('送货时间') }}:</span>
      &nbsp;
      <span>{{ pram.mo_receive_date }}</span>
      <br />
      <br />
      <span>{{ __('买家备注') }}:</span>
      &nbsp;
      <span>{{ pram.mo_receive_remark }}</span>
      <hr />
      <el-row>
        <el-col :span="24">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <h1 style="margin-left: 250px">{{__('总金额：</h1>
            </div>
            ')}}
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <h1 style="color: red">{{ pram.mo_amount }} 元</h1>
            </div>
          </el-col>
        </el-col>
      </el-row>
      <el-dialog
        append-to-body
        :before-close="handleClose"
        :title="__('提示')"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-form ref="form" label-width="120px" :model="form">
          <el-form-item prop="category_id">
            <el-select v-model="value" :placeholder="__('选择状态')">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">
            {{ __('取 消') }}
          </el-button>
          <el-button type="primary" @click="dialogVisible = false">
            {{ __('确 定') }}
          </el-button>
        </span>
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { URL } from '@/config'

  export default {
    name: 'MarketOrderBaseEdit',
    data() {
      return {
        action: URL.action,
        form: {},
        options: [
          {
            value: 0,
            label: this.__('是'),
          },
          {
            value: 1,
            label: this.__('否'),
          },
        ],
        value: '',
        list: [],
        pram: {},
        title: '',
        dialogFormVisible: false,
        dialogVisible: false,
      }
    },
    created() {},
    mounted() {
      this.$forceUpdate()
    },
    methods: {
      __,
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then((_) => {
            done()
          })
          .catch((_) => {})
      },

      showEdit(row) {
        this.pram = Object.assign({}, row)
        this.form = Object.assign({}, row)

        this.dialogFormVisible = true
      },
      handleAvatarSuccess(name, res) {
        this.form[name] = res.data
      },
      BeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        return isRightSize
      },
      close() {
        this.dialogFormVisible = false
      },
    },
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
