<template>
  <div id="order_examine" class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <el-tabs v-model="tabIndex">
      <el-tab-pane label="订单详情" name="1">
        <div class="info">
          <div class="fixed_controls">
            <div v-if="orderDetail.is_deleted === 1">
              <el-button icon="el-icon-download" @click="toExport">导出</el-button>
              <el-button icon="el-icon-document-copy" @click="ycn_coryOrder">复制</el-button>
            </div>
            <div v-else class="flex">
              <div v-if="isRoot || roles.indexOf(0) !== -1" class="flex">
                <div v-if="orderDetail && orderDetail.status === 0">
                  <el-button icon="el-icon-download" @click="toExport">导出</el-button>
                  <el-button icon="el-icon-edit-outline" @click="ycn_changGoodList_dialog = true">修改</el-button>
                  <el-button icon="el-icon-document-copy" @click="ycn_coryOrder">复制</el-button>
                  <el-button icon="el-icon-delete-solid" @click="dialog.void = true">作废</el-button>
                  <el-button type="primary" @click="orderAdopt">通过</el-button>
                </div>
                <div v-else>
                  <el-button icon="el-icon-download" @click="toExport">导出</el-button>
                  <el-button icon="el-icon-document-copy" @click="ycn_coryOrder">复制</el-button>
                </div>
              </div>
              <div v-if="isRoot || roles.indexOf(1) !== -1">
                <div v-if="orderDetail && orderDetail.status === 1">
                  <el-button icon="el-icon-refresh" @click="dialog.back = true">退回</el-button>
                  <el-button type="primary" @click="orderAdopt">通过</el-button>
                </div>
              </div>
              <div v-if="isRoot || roles.indexOf(2) !== -1">
                <div v-if="orderDetail && orderDetail.status === 2">
                  <el-button icon="el-icon-refresh" @click="dialog.back = true">退回</el-button>
                  <el-button type="primary" @click="dialog.spending = true">发货</el-button>
                  <el-button type="primary" @click="editWLInfo">修改物流信息</el-button>
                </div>
                <div v-else-if="orderDetail && orderDetail.status === 3">
                  <el-button icon="el-icon-refresh" @click="dialog.back = true">退回</el-button>
                  <el-button type="primary" @click="editWLInfo">修改物流信息</el-button>
                </div>
              </div>
            </div>
          </div>
          <div class="head">
            <p class="info_status">{{ orderExamineStatus(orderDetail && orderDetail.status) }}</p>
            <p>订单号: {{ orderDetail && orderDetail.order_num }}</p>
            <p v-if="orderDetail && orderDetail.order_type" class="tag sub-tag">代下单</p>
            <p v-if="orderDetail && orderDetail.is_back" class="tag return-tag">退回</p>
            <p class="nickname">代理名称 : {{ orderDetail.get_user && orderDetail.get_user.nickname }}【{{ levelStatus(orderDetail.get_user && orderDetail.get_user.level).name }}】</p>
          </div>
          <!-- 表格 -->
          <el-table
            border
            stripe
            :header-cell-style="{ background: '#eef1f9' }"
            class="table nomgb"
            :data="orderDetail && orderDetail.goods_detail"
          >
            <el-table-column
              type="index"
              width="60"
              align="center"
            />
            <el-table-column
              prop
              label="主图"
            >
              <template slot-scope="{ row }">
                <el-image
                  style="width: 60px; height: 60px"
                  :src="row.main_img"
                  fit="fill"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="商品名称"
            />
            <el-table-column
              prop="size"
              label="商品规格"
            />
            <el-table-column
              prop="num"
              label="数量"
            />
            <el-table-column
              prop="unit"
              label="单位"
            />
            <el-table-column
              prop="goods_price"
              label="单价"
            />
            <el-table-column
              prop="money"
              label="金额小计"
            />
          </el-table>
          <!-- 合计 -->
          <div class="order_total">
            <div class="left">
              <span>合计数量: <i class="red">{{ orderDetail.total }}</i></span>
              <span>合计金额: <i class="red">{{ parseMoney(orderDetail && orderDetail.money) }}</i></span>
            </div>
            <div class="right">
              <span>已付金额: <i class="red">{{ parseMoney(orderDetail && orderDetail.pay_money) }}</i></span>
              <span>应付金额: <i class="red">{{ parseMoney(orderDetail && orderDetail.money) }}</i></span>
            </div>
          </div>
          <!-- 其他 -->
          <div class="other">
            <el-form label-width="100px">
              <el-form-item label="收货信息" class="other_address">
                <i class="el-icon-edit-outline cur" @click="getUserAddress" />
                <!-- <span>代理名称: {{ orderDetail.get_user && orderDetail.get_user.nickname }}</span> -->
                <span>
                  收货人: {{ orderDetail.get_address && orderDetail.get_address.username }}
                </span>
                <span>联系方式: {{ orderDetail.get_address && orderDetail.get_address.mobile }}</span>
                <span>收货地址: {{ orderDetail.get_address && `${orderDetail.get_address.province}${orderDetail.get_address.city}${orderDetail.get_address.town}${orderDetail.get_address.address}` }}</span>
              </el-form-item>
              <el-form-item label="所属信息">
                <template v-if="orderDetail.belong_user">
                  <i class="el-icon-edit-outline cur" @click="edit = true; getBelongUser()" />
                  <span>昵称: {{ orderDetail.belong_user && orderDetail.belong_user.nickname }}</span>
                  <span>姓名: {{ orderDetail.belong_user && orderDetail.belong_user.realname }}</span>
                  <span>手机号: {{ orderDetail.belong_user && orderDetail.belong_user.mobile }}</span>
                </template>
                <span v-else>该订单暂无所属者</span>
              </el-form-item>
              <!-- <el-form-item
                v-if="orderDetail.get_address && (orderDetail.get_address.nickname || orderDetail.get_address.level)"
                label=""
                class="other_address"
              >
                <span>收货人昵称: <span style="color:red">{{ orderDetail.get_address && orderDetail.get_address.nickname }}</span></span>
                <span>收货人等级: <span style="color:red">{{ (orderDetail.get_address && orderDetail.get_address.level) | levelName }}</span></span>
              </el-form-item> -->
              <el-form-item label="备注说明">
                <div class="remark_container">
                  <i class="el-icon-edit-outline cur" @click="dialog.remark = true" />
                  <div v-if="orderDetail.get_order_remark && orderDetail.get_order_remark.length > 0" class="remark_list">
                    <span v-for="item in orderDetail.get_order_remark.slice(0, toggleRemarkNum)" :key="item.id">{{ item.remark }} ({{ `${item.name} ${item.created_at}` }} )</span>
                    <div v-if="orderDetail.get_order_remark.length > 3">
                      <span v-if="orderDetail.get_order_remark.length > toggleRemarkNum" class="toggle" @click="toggleRemarkNum = orderDetail.get_order_remark.length">更多<i class="el-icon-arrow-down" /></span>
                      <span v-else class="toggle" @click="toggleRemarkNum = 3">收起<i class="el-icon-arrow-up" /></span>
                    </div>
                  </div>
                  <div v-else>无</div>
                </div>
              </el-form-item>
              <el-form-item label="赠品信息">
                <ul class="zengpin_list">
                  <li v-for="item in orderDetail.get_order_gift" v-show="item.pivot && item.pivot.num > 0" :key="item.id">
                    <el-image
                      style="width: 38px; height: 38px;margin-right:10px;"
                      :src="item.img"
                      fit="fill"
                    />
                    <p>{{ item.name }} - {{ item.pivot.num || 0 }}</p>
                  </li>
                </ul>
              </el-form-item>
              <el-form-item label="操作日志">
                <div slot="label" class="cursor" @click="toggle.log = !toggle.log">操作日志<i :class="toggle.log ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /></div>
              </el-form-item>
              <el-table
                v-if="toggle.log"
                :header-cell-style="{ background: '#eef1f9' }"
                class="table"
                :data="orderDetail && orderDetail.get_order_log"
              >
                <el-table-column
                  prop="log_name"
                  label="操作人"
                />
                <el-table-column
                  prop="created_at"
                  label="时间"
                />
                <el-table-column
                  prop="log_title"
                  label="操作类别"
                />
                <el-table-column
                  prop="log_text"
                  label="操作日志"
                />
              </el-table>
            </el-form>
          </div>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="出库发货记录" name="2">
        <div class="info">
          <div class="head">
            <p class="info_status">待审核订单</p>
            <p>订单号: DH-O-20200505-511603</p>
            <p class="tag sub-tag">代下单</p>
            <p class="tag return-tag">退回</p>
            <p class="nickname">代理名称 : 大可乐【普通】</p>
            <p>收货信息：大可乐，看看，18888888888，</p>
          </div>
          <div class="out_of_stock">
            <div class="table_toggle">
              <i class="el-icon-s-order" />
              <span>待出库商品清单</span>
              <i v-if="toggle.cktable" class="arrow el-icon-arrow-down" @click="toggle.cktable = false" />
              <i v-else class="arrow el-icon-arrow-up" @click="toggle.cktable = true" />
            </div>
            <div v-if="toggle.cktable" class="controls">
              <span class="span" @click="dialog.spending = true"><i class="el-icon-edit" />修改物流</span>
              <span class="span"><i class="el-icon-download" />导出</span>
              <span class="span"><i class="el-icon-delete-solid" />作废</span>
              <el-button type="primary" size="small" @click="dialog.outStock = true">出库</el-button>
              <el-button type="primary" size="small" @click="dialog.spending = true">发货</el-button>
            </div>
            <el-table
              v-if="toggle.cktable"
              border
              stripe
            >
              <el-table-column
                prop
                width="60"
              />
              <el-table-column
                prop
                label="主图"
              />
              <el-table-column
                prop
                label="商品规格"
              />
              <el-table-column
                prop
                label="商品编码"
              />
              <el-table-column
                prop
                label="库存数量"
              />
              <el-table-column
                prop
                label="订购数"
              />
              <el-table-column
                prop
                label="已出库数"
              />
              <el-table-column
                prop
                label="本次出库数"
              />
            </el-table>
          </div>
        </div>
      </el-tab-pane> -->
      <el-tab-pane v-if="roles.indexOf(1) !== -1 || $store.getters.role === 'root'" label="收款记录" name="3">
        <div class="receive info">
          <div class="head">
            <div class="left">
              <div>
                <span>订单号: {{ orderDetail && orderDetail.order_num }}</span>
                <span v-if="orderDetail && orderDetail.order_type" class="tag sub-tag">代下单</span>
                <span v-if="orderDetail && orderDetail.is_back" class="tag return-tag">退回</span>
              </div>
              <div v-if="orderDetail && (orderDetail.pay_status === 0 || orderDetail.pay_status === 1)" class="bottom">
                <span>订单金额：<i>{{ parseMoney(orderDetail && orderDetail.money) }}</i></span>
                <span>已付收款：<i>{{ parseMoney(orderDetail && orderDetail.pay_money) }}</i></span>
                <span>未付金额：<i>{{ parseMoney(orderDetail && orderDetail.no_pay_money) }}</i></span>
              </div>
              <div v-else-if="orderDetail && orderDetail.pay_status === 3" class="bottom">
                <span>订单金额：<i>{{ parseMoney(orderDetail && orderDetail.money) }}</i></span>
                <span>已付收款：<i>{{ parseMoney(orderDetail && orderDetail.pay_money) }}</i></span>
                <span>待退金额<i>{{ parseMoney(orderDetail && orderDetail.wait_back_money) }}</i></span>
              </div>
              <div v-else class="bottom">
                <span>已支付完成</span>
              </div>
            </div>
            <el-button v-if="orderDetail && (orderDetail.pay_status === 0 || orderDetail.pay_status === 1)" size="small" type="primary" @click="accountBalance">添加收款记录</el-button>
          </div>
          <el-table
            border
            stripe
            :header-cell-style="{ background: '#eef1f9' }"
            class="table"
            :data="collectMoneyList"
          >
            <el-table-column
              prop="pay_num"
              label="支付流水号"
            />
            <el-table-column
              prop="created_at"
              label="新增时间"
            />
            <el-table-column
              prop="updated_at"
              label="确认时间"
            />
            <el-table-column
              prop="type"
              label="方式"
            >
              <template slot-scope="{ row }">
                {{ receiveStatus(row.type) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="pay_money"
              label="付款金额"
            />
            <el-table-column
              prop
              label="状态"
            >
              <span>已收款</span>
            </el-table-column>
          </el-table>
          <div v-if="orderDetail && orderDetail.pay_status === 3" class="fixedH">退款确认</div>
          <el-form v-if="orderDetail && orderDetail.pay_status === 3" label-width="80px">
            <el-form-item label="退款金额">
              <el-input v-model="orderDetail.wait_back_money" disabled type="text" style="width: 350px" />
            </el-form-item>
            <el-form-item label="退款备注">
              <el-input v-model="backMoneyRemark" type="textarea" style="width: 350px" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitBackMoney">退款</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="发货签收记录" name="4">
        <div class="sending">
          <div class="head">
            <div>
              <span>发货单号：FH-20200505-054539</span>
              <span>制单时间：2020-05-05 18:14</span>
            </div>
            <div class="right">
              <span><i class="el-icon-download" />导出</span>
              <span @click="dialog.spending = true"><i class="el-icon-edit" />修改物流</span>
              <span><i class="el-icon-edit" />修改发货</span>
            </div>
          </div>
          <el-table
            border
            stripe
            :header-cell-style="{ background: '#eef1f9' }"
            class="table"
          >
            <el-table-column
              prop
              width="60"
            />
            <el-table-column
              prop
              label="主图"
            />
            <el-table-column
              prop
              label="商品编码"
            />
            <el-table-column
              prop
              label="商品名称"
            />
            <el-table-column
              prop
              label="商品规格"
            />
            <el-table-column
              prop
              label="单位"
            />
            <el-table-column
              prop
              label="发货数量"
            />
            <el-table-column
              prop
              label="收货数量"
            />
            <el-table-column
              prop
              label="收货单价"
            />
            <el-table-column
              prop
              label="收货金额"
            />
            <el-table-column
              prop
              label="备注"
              width="200"
              align="center"
            />
          </el-table>
          <div class="fixedB">
            <div class="left">
              <div>
                <span>出库信息</span>
                <br>
                <span>出库人：可乐[312418741]</span>
                <span>出库时间：2020-05-05 18:13</span>
              </div>
              <div>
                <span>发货信息</span>
                <br>
                <span>出库人：可乐[312418741]</span>
                <span>物流时间：2020-05-05 18:13</span>
                <span>物流公司：fffff</span>
                <span>物流单号：ffffffffffff</span>
              </div>
            </div>
            <div class="right">
              <span>应收金额: 2,400.00</span>
              <span>已核销金额: 0.00</span>
              <span>未核销金额: <span class="big">2,400.00</span></span>
            </div>
          </div>
        </div>
      </el-tab-pane> -->
    </el-tabs>
    <!-- 添加备注 -->
    <el-dialog
      title="添加备注"
      :visible.sync="dialog.remark"
      :show-close="false"
      :close-on-click-modal="false"
      width="520px"
      class="dialog_remark"
    >
      <el-input v-model="remark.order" type="textarea" class="textarea_h" maxlength="250" show-word-limit />
      <div class="dialog_btn_box">
        <el-button @click="dialog.remark = false">取消</el-button>
        <el-button type="primary" @click="addRemark">确定</el-button>
      </div>
    </el-dialog>
    <!-- 添加收款记录 -->
    <el-dialog
      title="添加收款记录"
      :visible.sync="dialog.receive"
      :show-close="false"
      :close-on-click-modal="false"
      class="dialog_receive"
    >
      <p class="title_1">待支付：{{ parseMoney(orderDetail && orderDetail.no_pay_money) }}</p>
      <div class="title_2">
        <span>订单金额：{{ parseMoney(orderDetail && orderDetail.money) }}</span>
        <span>已付款：{{ parseMoney(orderDetail && orderDetail.pay_money) }}</span>
        <span>{{ orderDetail && orderDetail.order_num }}</span>
      </div>
      <el-form ref="rechargeform" label-width="80px" :model="rechargeForm" :rules="rechargeRules">
        <div class="pay_form">
          <p class="fixedH2">账户余额</p>
          <div class="pay_from_body balance_body">
            <el-form-item label="付款金额" style="width: 300px;margin-bottom: 0;" prop="money">
              <el-input v-model="rechargeForm.money" type="text" />
            </el-form-item>
            <span class="balance">余额: {{ parseMoney(agentBanlance) }}</span>
          </div>
        </div>
        <div class="pay_form">
          <p class="fixedH2 morefixedH">线下付款</p>
          <div class="pay_from_body">
            <el-form-item label="付款金额" style="width: 300px" prop="p_money">
              <el-input v-model="rechargeForm.p_money" type="text" />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="rechargeForm.remark" type="textarea" style="width: 300px" />
            </el-form-item>
          </div>
        </div>
        <el-form-item>
          <el-button size="small" @click="resetDialogRecharge">取消</el-button>
          <el-button size="small" type="primary" @click="handleSubmitRecharge">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 发货 -->
    <el-dialog
      title="发货"
      :visible.sync="dialog.spending"
      :show-close="false"
      :close-on-click-modal="false"
      class="dialog_spending"
    >
      <el-form ref="spendform" label-width="80px" :model="spendForm">
        <el-form-item label="物流日期" prop="track_time">
          <el-date-picker
            v-model="spendForm.track_time"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <!-- <el-form-item label="物流公司" prop="track_company">
          <el-select v-if="toggle.company" v-model="spendForm.track_company" placeholder="请选择">
            <el-option label="德邦物流" value="德邦物流" />
            <el-option label="中通快递" value="中通快递" />
            <el-option label="中国邮政快递" value="中国邮政快递" />
          </el-select>
          <el-input v-else v-model="spendForm.track_company" type="text" />
          <br>
          <span v-if="toggle.company" class="handCompony" @click="toggle.company = false">手动填写</span>
          <span v-else class="handCompony" @click="toggle.company = true">选择公司</span>
        </el-form-item>
        <el-form-item label="物流单号" prop="track_number">
          <el-input v-model="spendForm.track_number" type="text" />
        </el-form-item>
        <el-form-item label="物流备注">
          <el-input v-model="spendForm.track_remark" type="textarea" />
        </el-form-item> -->
        <el-form-item label="自动收货" prop="day">
          <el-input v-model="spendForm.day" type="number" min="1">
            <span slot="append">天</span>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="dialog.spending = false">取消</el-button>
          <el-button size="small" type="primary" @click="submitOrderSpend">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 修改物流 -->
    <el-dialog
      title="修改物流"
      :visible.sync="dialog.editspend"
      :show-close="false"
      :close-on-click-modal="false"
      class="dialog_spending"
    >
      <el-form ref="spendform" label-width="80px" :model="spendForm" :rules="spendRules">
        <el-form-item label="物流日期" prop="track_time">
          <el-date-picker
            v-model="spendForm.track_time"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <!-- <el-form-item label="物流公司" prop="track_company">
          <el-select v-if="toggle.company" v-model="spendForm.track_company" placeholder="请选择">
            <el-option label="德邦物流" value="德邦物流" />
            <el-option label="中通快递" value="中通快递" />
            <el-option label="中国邮政快递" value="中国邮政快递" />
          </el-select>
          <el-input v-else v-model="spendForm.track_company" type="text" />
          <br>
          <span v-if="toggle.company" class="handCompony" @click="toggle.company = false">手动填写</span>
          <span v-else class="handCompony" @click="toggle.company = true">选择公司</span>
        </el-form-item>
        <el-form-item label="物流单号" prop="track_number">
          <el-input v-model="spendForm.track_number" type="text" />
        </el-form-item>
        <el-form-item label="物流备注">
          <el-input v-model="spendForm.track_remark" type="textarea" />
        </el-form-item> -->
        <el-form-item label="自动收货" prop="day">
          <el-input v-model="spendForm.day" type="number" min="1">
            <span slot="append">天</span>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="dialog.editspend = false">取消</el-button>
          <el-button size="small" type="primary" @click="submitOrderSpend">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 作废 -->
    <el-dialog
      title="订单作废确认"
      :visible.sync="dialog.void"
      :show-close="false"
      :close-on-click-modal="false"
      class="dialog_remark dialog_void"
      width="520px"
    >
      <p>确认将订货单<span class="red">{{ orderDetail && orderDetail.order_num }}</span>作废 ？ 订单作废后状态不可回退 ，<span class="red">如有关联的出库单将一并作废，相应的库存将退回原有仓库。</span> 如确定作废,请填写作废原因 :</p>
      <el-form>
        <el-form-item label="常用作废原因: ">
          <el-select v-model="voidTypeId">
            <el-option
              v-for="item in voidList"
              :key="item.id"
              :label="item.content"
              :value="item.id"
            />
          </el-select>
          <el-popover
            v-model="dialog.add_void"
            placement="bottom-end"
          >
            <el-input
              v-model="addVoidContent"
              type="textarea"
              resize="none"
              :autosize="{ minRows: 6, maxRows: 8}"
              placeholder="请添写常用作废原因"
            />
            <div style="float:right;margin-top: 15px;">
              <el-button plain size="mini" @click="resetAddVoid">取消</el-button>
              <el-button type="primary" size="mini" @click="submitAddVoid">添加</el-button>
            </div>
            <template slot="reference">
              <el-button type="text" style="margin-left: 10px;">添加其他常用原因</el-button>
            </template>
          </el-popover>
        </el-form-item>
        <el-form-item label="其他作废原因: ">
          <el-input v-model="remark.void" type="textarea" class="textarea_h" />
        </el-form-item>
      </el-form>
      <div class="dialog_btn_box">
        <el-button size="small" @click="dialog.void = false">取消</el-button>
        <el-button size="small" type="primary" @click="submitOrderVoid">确定</el-button>
      </div>
    </el-dialog>
    <!-- 退回 -->
    <el-dialog
      title="订单退回确认"
      :visible.sync="dialog.back"
      :show-close="false"
      :close-on-click-modal="false"
      class="dialog_remark dialog_back"
      width="520px"
    >
      <p>确认将订货单{{ orderDetail && orderDetail.order_num }}退回 ？ 如确定退回,请填写退回原因 :</p>
      <el-input v-model="remark.back" type="textarea" class="textarea_h" />
      <div class="dialog_btn_box">
        <el-button size="small" @click="resetDialogRemark">取消</el-button>
        <el-button size="small" type="primary" @click="orderBack">确定</el-button>
      </div>
    </el-dialog>
    <!-- 出库确认 -->
    <el-dialog
      title="出库确认"
      :visible.sync="dialog.outStock"
      :show-close="false"
      :close-on-click-modal="false"
      class="dialog_remark dialog_outStock"
      width="520px"
    >
      <div class="goods">
        <p>商品种类: 1</p>
        <p>商品数量: 3</p>
      </div>
      <div class="dialog_btn_box">
        <el-button size="small" @click="dialog.outStock = false">取消</el-button>
        <el-button size="small" type="primary">确定</el-button>
      </div>
    </el-dialog>
    <!-- 修改收货地址 -->
    <el-dialog
      title="修改收货地址"
      :visible.sync="dialog.address"
      :show-close="false"
      :close-on-click-modal="false"
      class="dialog_address"
    >
      <div slot="title" class="title">
        <span class="label">修改收货地址</span>
        <!-- <el-input type="text" style="width: 300px">
          <div slot="append" class="search">
            <i class="el-icon-search" />
          </div>
        </el-input> -->
        <i class="el-icon-plus add" @click="dialog.add_address = true">添加收货地址</i>
      </div>
      <div class="address_list">
        <el-radio-group v-model="addressId">
          <el-radio v-for="item in addressList" :key="item.id" :label="item.id" class="radio_item">
            <div>
              <span>{{ item.con_name }},{{ item.provice }}-{{ item.city }}-{{ item.area }}-{{ item.address }},{{ item.con_mobile }}</span>
              <span v-if="item.belong_user" style="color: red">(所属-{{ `昵称:${item.belong_user.nickname}, 真实姓名:${item.belong_user.realname}, 手机号:${item.belong_user.mobile}` }})</span>
              <!-- <span v-if="addressId === item.id" class="default">默认</span> -->
            </div>
            <div class="right">
              <!-- <i v-if="addressId !== item.id" class="el-icon-success">设为默认</i> -->
              <i class="el-icon-edit" @click="editAddress(item)">修改</i>
              <i class="el-icon-delete" @click="submitDeleteAddress(item)">删除</i>
            </div>
          </el-radio>
        </el-radio-group>
      </div>
      <div class="btn_main">
        <el-button @click="resetOrderAddress">取消</el-button>
        <el-button type="primary" @click="editOrderAddress">确定</el-button>
      </div>
    </el-dialog>
    <!-- 新增收货地址 -->
    <el-dialog
      :title="address_type ? '新增收货地址' : '修改收货地址'"
      :visible.sync="dialog.add_address"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form label-width="80px">
        <el-form-item label="收货人:">
          <el-input v-model="addressForm.name" placeholder="收货人姓名" style="width: 500px" />
        </el-form-item>
        <el-form-item label="手机号:">
          <el-input v-model="addressForm.mobile" placeholder="手机号" minlength="11" maxlength="11" show-word-limit style="width: 500px" />
        </el-form-item>
        <el-form-item label="地区:">
          <el-cascader
            v-model="addressForm.areaAll"
            :options="provinces"
            style="width: 500px"
          />
          <!-- <VDistpicker :province="addressForm.provice" :city="addressForm.city" :area="addressForm.area" @province="province => addressForm.provice = province.value" @city="city => addressForm.city = city.value" @area="area => addressForm.area = area.value" /> -->
        </el-form-item>
        <el-form-item label="地址:">
          <el-input v-model="addressForm.address" type="textarea" placeholder="地址" maxlength="50" show-word-limit style="width: 500px" />
        </el-form-item>
        <el-form-item>
          <el-button @click="resetAddress">取 消</el-button>
          <el-button v-if="address_type" type="primary" @click="submitAddress">确 定</el-button>
          <el-button v-else type="primary" @click="submitEditAddress">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 修改订单所属 -->
    <el-dialog
      title="绑定订单所属"
      :visible.sync="dialog.belong"
      :show-close="false"
      :close-on-click-modal="false"
      class="dialog_address"
    >
      <div style="padding: 20px;padding-top: 0;">
        <el-input
          v-model="belongUserParams.search_name"
          type="text"
          style="width: 300px"
          placeholder="所属者 昵称 / 手机号"
        />
        <el-button type="primary" @click="getBelongUser">搜索</el-button>
      </div>
      <div class="address_list">
        <el-radio-group v-model="belongId">
          <el-radio v-for="item in belongUserList" :key="item.id" :label="item.id" class="radio_item">
            <div>
              <span>{{ item.nickname }},{{ item.mobile }},{{ levelStatus(item.level).name }}</span>
              <!-- <span v-if="addressId === item.id" class="default">默认</span> -->
            </div>
          </el-radio>
        </el-radio-group>
      </div>
      <div class="belongPagination">
        <pagination
          :total="belongUserTotal"
          :limit="belongUserParams.page_size"
          :page="belongUserParams.page_index"
          @pagination="changeBelongPagination"
          @update:limit="changeBelongPagination"
        />
        <div class="btn_main">
          <el-button @click="resetBelong">取消</el-button>
          <el-button type="primary" @click="editOrderBelong">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <ChangeGoodList v-if="ycn_changGoodList_dialog" :show="ycn_changGoodList_dialog" :data="orderDetail" @refresh="getDetail" @close="ycn_changGoodList_dialog = false" />
  </div>
</template>
<script>
// api
import * as examine_api from '@/api/order/examine'
import {
  getDetail,
  addRemark,
  orderAdopt,
  receiveList,
  accountBalance,
  addRecharge,
  backRechargeMoney,
  toDelete,
  orderSpend,
  editOrderAddress,
  deleteAddress,
  belongUsers,
  editBelong
} from '@/api/order/examine'
import { getUserAddress, updateOrderAddress, addUserAddress, publishBindBelong } from '@/api/order/common'
// money
import { parseMoney } from '@/utils/index'
// level
import { levelStatus } from '@/filters/common'
// 验证金额
const isMoney = /^\d+(\.\d{1,2})?$/
// 组件
import MIXIN_CHANGGOODLIST from './mixin/changGoodList'
import ChangeGoodList from './components/ChangeGoodList'
// import VDistpicker from 'v-distpicker'
import provinces from '@/assets/json/provinces'
export default {
  components: { ChangeGoodList },
  filters: {
    levelName(level) {
      let out
      switch (+level) {
        case 1:
          out = '销售主管'
          break
        case 2:
          out = '销售经理'
          break
        case 3:
          out = '代理公司'
          break
        default:
          out = ''
      }
      return out
    }
  },
  mixins: [MIXIN_CHANGGOODLIST],
  data() {
    const receiveMoney = (rule, value, cb) => {
      if (!value) {
        this.rechargeForm.money = 0
        cb()
      }
      if (!isMoney.test(value)) {
        return cb(new Error('请输入正确的金额'))
      } else {
        value = Number(value)
        if (value === 0 && Number(this.rechargeForm.p_money) === 0) {
          return cb(new Error('余额金额和线下付款金额不能都为0'))
        } else {
          if (value > this.agentBanlance) {
            return cb(new Error('充值金额不能大于余额'))
          } else {
            if (value + Number(this.rechargeForm.p_money) > Number(this.orderDetail.no_pay_money)) {
              return cb(new Error('充值金额不能大于待支付金额'))
            } else {
              cb()
            }
          }
        }
      }
    }
    const receivePMoney = (rule, value, cb) => {
      if (!value) {
        this.rechargeForm.p_money = 0
        cb()
      }
      if (!isMoney.test(value)) {
        return cb(new Error('请输入正确的金额'))
      } else {
        value = Number(value)
        if (value === 0 && Number(this.rechargeForm.money) === 0) {
          return cb(new Error('线下付款金额和余额金额不能都为0'))
        } else {
          if (value + Number(this.rechargeForm.money) > Number(this.orderDetail.no_pay_money)) {
            return cb(new Error('充值金额不能大于待支付金额'))
          } else {
            cb()
          }
        }
      }
    }
    return {
      isRoot: this.$store.getters.role === 'root',
      roles: this.$route.meta.buttonAuthList ? this.$route.meta.buttonAuthList : [],
      loadingFull: false,
      tabIndex: '1',
      edit: false,
      provinces: provinces,
      dialog: {
        remark: false,
        receive: false,
        spending: false,
        void: false,
        back: false,
        outStock: false,
        editspend: false,
        address: false,
        add_address: false,
        add_void: false,
        belong: false
      },
      address_type: true,
      addressForm: {
        name: '',
        mobile: '',
        areaAll: '',
        provice: '',
        city: '',
        area: '',
        address: ''
      },
      remark: {
        order: '',
        void: '',
        back: ''
      },
      toggle: {
        cktable: true,
        log: false,
        company: true
      },
      orderDetail: {},
      toggleRemarkNum: 3,
      collectMoneyList: [],
      agentBanlance: 0,
      rechargeForm: {
        money: 0,
        p_money: 0,
        remark: ''
      },
      rechargeRules: {
        money: [
          { validator: receiveMoney, trigger: 'blur' }
        ],
        p_money: [
          { validator: receivePMoney, trigger: 'blur' }
        ]
      },
      backMoneyRemark: '',
      spendForm: {
        day: 15,
        track_number: '',
        track_company: '',
        track_remark: '',
        track_time: ''
      },
      spendRules: {
        day: [
          { required: true, message: '请填写自动收货时间', trigger: 'blur' }
        ],
        track_number: [
          { required: true, message: '请填写物流单号', trigger: 'blur' }
        ],
        track_company: [
          { required: true, message: '请填写物流公司', trigger: 'blur' }
        ],
        track_time: [
          { required: true, message: '请选择发货时间', trigger: 'blur' }
        ]
      },
      addressList: [],
      addressId: '',
      voidList: [],
      addVoidContent: '',
      voidTypeId: '',
      belongUserList: [],
      belongUserTotal: 0,
      belongUserParams: {
        page_index: 1,
        page_size: 10,
        search_name: ''
      },
      belongId: ''
    }
  },
  watch: {
    tabIndex(newV, oldV) {
      if (newV === '3') {
        this.receiveList()
      }
    },
    'dialog.void'(a) {
      if (a) {
        this.getVoidList()
      }
    },
    'dialog.add_void'(a) {
      if (!a) {
        this.resetAddVoid()
      }
    }
  },
  created() {
    this.parseMoney = parseMoney
    this.levelStatus = levelStatus
    this.getDetail()
    console.log(this.$route.meta)
  },
  methods: {
    resetBelong() { // 重置所属者
      this.belongUserParams = {
        page_index: 1,
        page_size: 10,
        search_name: ''
      }
      this.belongUserList = []
      this.belongUserTotal = 0
      this.dialog.belong = false
    },
    editOrderBelong() { // 修改所属者
      if (!this.belongId) {
        this.$message.error('请选择订单所属者')
        return false
      }
      this.$confirm('确认订单变更所属?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading()
        if (this.edit === true) {
          editBelong({
            id: this.belongId,
            order_num: this.orderDetail.order_num
          }).then(res => {
            loading.close()
            if (res.code === 200) {
              this.$message.success('修改订单所属成功')
              this.resetBelong()
              this.getDetail()
            } else {
              this.$message.error(res.message || '修改订单所属失败')
            }
          }).catch(() => {
            loading.close()
            this.$message.error('修改订单所属失败')
          })
        } else {
          publishBindBelong({
            belong_id: this.belongId,
            id: this.addressId
          }).then(res => {
            loading.close()
            if (res.code === 200) {
              this.$message.success('绑定订单所属成功')
              this.getUserAddress()
              this.dialog.belong = false
            } else {
              this.$message.error(res.message || '绑定订单所属失败')
            }
          }).catch(() => {
            loading.close()
            this.$message.error('绑定订单所属失败')
          })
        }
      }).catch(() => {})
    },
    changeBelongPagination({ page, limit }) { // 所属者分页
      this.belongUserParams.page_index = page
      this.belongUserParams.page_size = limit
      this.getBelongUser()
    },
    getBelongUser() { // 获取订单所属信息
      const loading = this.$loading()
      this.belongUserParams.order_num = this.orderDetail.order_num
      belongUsers(this.belongUserParams).then(res => {
        loading.close()
        if (res.code === 200) {
          if (res.data.total > 0) {
            this.belongUserList = res.data.list
            this.belongUserTotal = res.data.total
            this.dialog.belong = true
          } else {
            this.belongUserList = []
            this.$message.warning('暂无所属者信息')
          }
        } else {
          this.$message.error(res.message || '获取订单所属者失败')
        }
      }).catch(() => {
        loading.close()
        this.$message.error('获取订单所属者失败')
      })
    },
    resetAddVoid() {
      this.dialog.add_void = false
      this.addVoidContent = ''
    },
    // 添加订单作废原因
    submitAddVoid() {
      if (!this.addVoidContent) {
        this.$message.error('请添加作废原因')
        return false
      }
      const loading = this.$loading()
      examine_api.addVoid({
        content: this.addVoidContent
      }).then(res => {
        loading.close()
        if (res.code === 200) {
          this.resetAddVoid()
          this.getVoidList()
        } else {
          this.$message.error(res.message || '添加作废原因失败')
        }
      }).catch(() => {
        loading.close()
        this.$message.error('添加作废原因失败')
      })
    },
    // 获取订单作废原因
    getVoidList() {
      const loading = this.$loading()
      examine_api.getVoidList().then(res => {
        loading.close()
        if (res.code === 200) {
          this.voidList = res.data
        } else {
          this.$message.error(res.message || '获取订单作废原因失败')
        }
      }).catch(() => {
        loading.close()
        this.$message.error('获取订单作废原因失败')
      })
    },
    // 删除地址
    submitDeleteAddress({ id }) {
      this.$confirm('确认删除此地址?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loadingFull = true
        deleteAddress({ id }).then(res => {
          this.loadingFull = false
          if (res.code === 200) {
            this.$message.success('删除地址成功')
            this.getUserAddress()
          } else {
            this.$message.error(res.message || '删除地址失败')
          }
        }).catch(() => {
          this.loadingFull = false
          this.$message.error('删除地址失败')
        })
      }).catch(() => {})
    },
    // 获取详情
    async getDetail() {
      const params = this.$route.params
      if (params && params.order) {
        this.loadingFull = true
        await getDetail({
          order_num: params.order
        }).then(res => {
          this.loadingFull = false
          if (res.code === 200) {
            this.orderDetail = res.data
          } else {
            this.$message.error(res.message)
          }
        }).catch(e => {
          this.loadingFull = false
        })
      } else {
        this.$router.back()
      }
    },
    // 订单审核状态
    orderExamineStatus(status) {
      if (this.orderDetail.is_deleted === 1) {
        return '已作废'
      }
      let out
      switch (status) {
        case 0:
          out = '待订单审核'
          break
        case 1:
          out = '待财务审核'
          break
        case 2:
          out = '待发货审核'
          break
        case 3:
          out = '待收货'
          break
        default:
          out = '已完成'
      }
      return out
    },
    // 添加订单备注
    async addRemark() {
      if (!this.orderDetail.id) {
        this.$message.error('订单id为空')
        return false
      }
      if (!this.remark.order) {
        this.$message.error('备注不能为空')
        return false
      }
      this.loadingFull = true
      await addRemark({
        order_id: this.orderDetail.id,
        remark: this.remark.order
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.resetDialogRemark()
          this.voidTypeId = ''
          this.voidList = ''
          this.getDetail()
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // 重置remark
    resetDialogRemark() {
      this.remark = {
        order: '',
        void: '',
        back: ''
      }
      this.dialog = {
        remark: false,
        void: false,
        back: false
      }
    },
    // 纯通过
    async orderAdopt() {
      this.loadingFull = true
      await orderAdopt({
        order_id: this.orderDetail.id,
        type: 1,
        status: this.orderDetail.status,
        remark: ''
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.$message.success(res.message)
          this.$router.push({
            name: 'order_list'
          })
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // 退回
    async orderBack() {
      if (!this.remark.back) {
        this.$message.error('退回信息不能为空')
        return false
      }
      this.loadingFull = true
      await orderAdopt({
        order_id: this.orderDetail.id,
        type: 2,
        status: this.orderDetail.status,
        remark: this.remark.back
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.resetDialogRemark()
          this.$message.success(res.message)
          this.$router.push({
            name: 'order_list'
          })
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // 收款记录
    async receiveList() {
      this.loadingFull = true
      await receiveList({
        order_num: this.orderDetail.order_num
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.collectMoneyList = res.data
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // 收款记录状态
    receiveStatus(status) {
      let out
      switch (status) {
        case 0:
          out = '后台充值'
          break
        case 1:
          out = '支付'
          break
        case 2:
          out = '退回'
          break
        default:
          out = '扣款'
      }
      return out
    },
    // 获取余额
    async accountBalance() {
      this.loadingFull = true
      await accountBalance({
        order_id: this.orderDetail.id
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.agentBanlance = res.data
          if (this.agentBanlance > 0) {
            if (this.agentBanlance > this.orderDetail.no_pay_money) {
              this.rechargeForm.money = this.orderDetail.no_pay_money
            } else {
              this.rechargeForm.money = this.agentBanlance
            }
          }
          this.dialog.receive = true
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // 提交添加收款
    handleSubmitRecharge() {
      this.$refs.rechargeform.validate((valid) => {
        if (valid) {
          if (Number(this.rechargeForm.money) === 0 && Number(this.rechargeForm.p_money) === 0) {
            this.$message.error('充值金额不能都为0')
            return false
          }
          this.loadingFull = true
          addRecharge({
            order_id: this.orderDetail.id,
            money: this.rechargeForm.money,
            p_money: this.rechargeForm.p_money,
            remark: this.rechargeForm.remark
          }).then(res => {
            this.loadingFull = false
            if (res.code === 200) {
              this.resetDialogRecharge()
              this.receiveList()
              this.getDetail()
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
          }).catch(e => {
            this.loadingFull = false
          })
        } else {
          return false
        }
      })
    },
    // 重置添加收款
    resetDialogRecharge() {
      this.rechargeForm = {
        money: 0,
        p_money: 0,
        remark: ''
      }
      this.agentBanlance = 0
      this.dialog.receive = false
    },
    // 提交退款
    async submitBackMoney() {
      this.loadingFull = true
      await backRechargeMoney({
        order_id: this.orderDetail.id,
        money: this.orderDetail.wait_back_money,
        remark: this.backMoneyRemark
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.backMoneyRemark = ''
          this.receiveList()
          this.getDetail()
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // 作废
    submitOrderVoid() {
      if (!this.voidTypeId && !this.remark.void) {
        this.$message.error('请选择作废原因或填写作废原因')
        return false
      }
      const content = this.voidTypeId && this.voidList.length > 0 ? this.voidList.find(({ id }) => +id === this.voidTypeId).content : ''
      // if (!this.remark.void) {
      //   this.$message.error('请填写作废信息')
      //   return false
      // }
      this.loadingFull = true
      toDelete({
        order_num: this.orderDetail.order_num,
        remark: `${content}${this.remark.void}`
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.resetDialogRemark()
          this.getDetail()
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // 导出
    toExport() {
      if (!this.orderDetail.goods_detail || this.orderDetail.goods_detail.length < 1) {
        this.$message.error('没有可导出的内容')
        return false
      }
      const list = Object.assign([], this.orderDetail.goods_detail)
      this.loadingFull = true
      try {
        const header = []
        list.map(item => {
          item.gift = this.orderDetail.get_order_gift.map(i => `${i.pivot.num > 0 ? i.name + i.pivot.num : ''}`).join()
          Reflect.deleteProperty(item, 'main_img')
          Reflect.deleteProperty(item, 'id')
          Reflect.deleteProperty(item, 'detail_id')
        })
        Object.keys(list[0]).map(item => {
          switch (item) {
            case 'name':
              header.push('商品名称')
              break
            case 'size':
              header.push('商品规格')
              break
            case 'unit':
              header.push('商品单位')
              break
            case 'money':
              header.push('商品金额')
              break
            case 'num':
              header.push('商品数量')
              break
            case 'goods_price':
              header.push('商品单价')
              break
            case 'remark':
              header.push('备注')
              break
            case 'gift':
              header.push('赠品')
              break
          }
        })
        import('@/vendor/Export2Excel').then(excel => {
          excel.export_json_to_excel({
            header,
            data: list.map(listItem => Object.keys(listItem).map(j => listItem[j])),
            filename: `${this.orderDetail.order_num}-订单详情`,
            bookType: 'xlsx'
          })
        })
      } catch (e) {
        this.$message.error('导出失败')
      } finally {
        this.loadingFull = false
      }
    },
    // 发货
    submitOrderSpend() {
      this.$refs.spendform.validate((valid) => {
        if (valid) {
          this.loadingFull = true
          orderSpend({
            order_num: this.orderDetail.order_num,
            day: this.spendForm.day,
            // track_number: [this.spendForm.track_number],
            // track_company: [this.spendForm.track_company],
            // track_remark: [this.spendForm.track_remark],
            track_time: this.spendForm.track_time
          }).then(res => {
            this.loadingFull = false
            if (res.code === 200) {
              this.getDetail()
              this.resetOrderSpend()
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
          }).catch(e => {
            this.loadingFull = false
          })
        } else {
          return false
        }
      })
    },
    resetOrderSpend() {
      this.spendForm = {
        day: 15,
        track_number: '',
        track_company: '',
        track_remark: '',
        track_time: ''
      }
      this.dialog.spending = false
      this.dialog.editspend = false
    },
    // 修改物流信息
    editWLInfo() {
      this.spendForm.day = this.orderDetail.receive_time.length === 0 ? 15 : this.orderDetail.receive_time
      this.spendForm.track_number = this.orderDetail.track_number.length === 0 ? '' : this.orderDetail.track_number
      this.spendForm.track_company = this.orderDetail.track_company.length === 0 ? '' : this.orderDetail.track_company
      this.spendForm.track_remark = this.orderDetail.track_remark.length === 0 ? '' : this.orderDetail.track_remark
      this.spendForm.track_time = this.orderDetail.track_time.length === 0 ? '' : this.orderDetail.track_time
      this.dialog.editspend = true
    },
    // 获取收货地址
    async getUserAddress() {
      this.loadingFull = true
      await getUserAddress({
        user_id: this.orderDetail.get_user.id
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.addressList = res.data.list
          this.dialog.address = true
        } else {
          this.$message.error('未获取到收货信息')
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // 重置地址
    resetAddress() {
      this.addressForm = {
        name: '',
        mobile: '',
        provice: '',
        city: '',
        area: '',
        address: ''
      }
      this.addressId = ''
      this.dialog.add_address = false
      this.address_type = true
    },
    // 修改地址
    editAddress(item) {
      this.addressId = item.id
      this.addressForm.name = item.con_name
      this.addressForm.mobile = item.con_mobile
      this.addressForm.provice = item.provice
      this.addressForm.city = item.city
      this.addressForm.area = item.area
      this.addressForm.address = item.address
      this.addressForm.areaAll = [item.provice, item.city, item.area]
      this.address_type = false
      this.dialog.add_address = true
    },
    // 修改地址
    submitEditAddress() {
      const { name, mobile, provice, areaAll, city, area, address } = this.addressForm
      if (name && mobile && provice && city && area && address) {
        this.loadingFull = true
        updateOrderAddress({ address_id: this.addressId, name, mobile, province: areaAll[0], city: areaAll[1], area: areaAll[2], address }).then(res => {
          this.loadingFull = false
          if (res.code === 200) {
            this.dialog.add_address = false
            this.getUserAddress()
            this.resetAddress()
          } else {
            this.$message.error(res.message)
          }
        }).catch(e => {
          this.loadingFull = false
        })
      } else {
        this.$message.error('请输入完整地址')
      }
    },
    // 添加地址
    submitAddress() {
      const { name, mobile, provice, city, area, address } = this.addressForm
      if (name && mobile && provice && city && area && address) {
        this.loadingFull = true
        addUserAddress({ user_id: this.orderDetail.get_user.id, name, mobile, province: provice, city, area, address }).then(res => {
          this.loadingFull = false
          if (res.code === 200) {
            this.dialog.add_address = false
            this.getUserAddress()
            this.resetAddress()
          } else {
            this.$message.error(res.message)
          }
        }).catch(e => {
          this.loadingFull = false
        })
      } else {
        this.$message.error('请输入完整地址')
      }
    },
    // 修改订单地址
    editOrderAddress() {
      if (!this.addressId) {
        this.$message.error('请选择收货地址')
        return false
      }
      // this.loadingFull = true
      const belong_user = this.addressList.filter(item => Number(item.id) === Number(this.addressId))[0].belong_user
      if (!belong_user) {
        this.$confirm('该地址暂未绑定所属者, 请先绑定所属者?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.getBelongUser(() => {
            this.dialog.belong = true
          })
          this.edit = false
        }).catch(() => {})
        return false
      }
      editOrderAddress({
        address_id: this.addressId,
        order_id: this.orderDetail.id
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.resetOrderAddress()
          this.getDetail()
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // 重置修改订单
    resetOrderAddress() {
      this.addressId = ''
      this.addressList = []
      this.dialog.address = false
    }
  }
}
</script>
<style lang="scss">
  .cur {
    cursor: pointer;
  }
  .belongPagination {
    padding: 20px 20px 0 20px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    /deep/ .pagination-container {
      float: none;
      margin-top: 0;
    }
    .btn_main {
      padding: 0 !important;
    }
  }
  #order_examine {
    padding: 15px;

    .zengpin_list {
      padding: 0;
      margin: 0;
      list-style: none;
      li {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;
        &:nth-of-type(1) {
          margin-top: 10px;
        }
        p {
          min-width: 200px;
          margin: 0;
        }
      }
    }

    .cursor {
      cursor: pointer;
    }

    .info {
      padding: 15px;

      .fixed_controls {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .flex {
          display: flex;
        }

        button {
          margin-left: 10px;
        }

        .span{
          font-size: 12px !important;
          margin-right: 15px;
          cursor: pointer;
        }
      }

      .head {
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        font-size: 14px;

        .info_status{
          color: #f96b6b;
          font-size: 18px;
        }

        p {
          margin: 0;
          margin-right: 15px;
        }

        .tag {
          padding: 2px;
          margin-right: 2px;
          font-size: 12px;
          line-height: 1;
          border-radius: 2px;
          font-family: simsun;
          color: #fff;
          display: inline;
          cursor: pointer;
        }

        .sub-tag {
          font-size: 12px;
          color: #00a7f2;
          border: 1px solid rgba(0,167,242,.4);
        }

        .return-tag {
          color: #8c7ee4;
          border: 1px solid rgba(140,123,231,.4);
          display: inline-block;
        }

        .nickname{
          margin-left: 15px;
        }
      }

      .table {
        margin: 15px 0;

        .cursur {
          cursor: pointer;
        }
      }

      .nomgb {
        margin-bottom: 0;
      }

      .order_total {
        border: 1px solid #e7e9f1;
        border-top: none;
        padding: 20px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          margin-right: 20px;
        }

        .red {
          color: #f33333;
        }
      }

      .other {
        .other_address {
          i {
            cursor: pointer;
          }
        }

        span {
          font-size: 14px;
          margin-right: 15px;
        }
      }

      .remark_container {
        font-size: 14px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

        i {
          margin-top: 11px;
          cursor: pointer;
          margin-right: 10px;
        }

        .remark_list {
          padding-top: 10px;
          span {
            display: block;
            margin-bottom: 5px;
            line-height: 20px;
          }

          .toggle {
            color: #03b8cc;
            cursor: pointer;
          }
        }
      }
    }

    .out_of_stock {
      margin: 15px 0;

      .controls {
        border: 1px solid #e7e9f1;
        border-top: none;
        border-bottom: none;
        padding: 15px 20px;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .span{
          font-size: 12px;
          margin-right: 15px;
        }
      }

      .table_toggle {
        padding: 15px 20px;
        cursor: pointer;
        background-color: #eef1f9;
        border: 1px solid #e7e9f1;

        .arrow {
          float: right;
        }
      }
    }

    .receive {
      .head {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          height: 45px;

          i {
            font-weight: 600;
          }

          .bottom{
            span {
              margin-right: 20px;
            }
          }
        }
      }

      .fixedH {
        padding: 20px 0;
      }
    }

    .sending{
      .head {
        padding: 15px 20px;
        border: 1px solid #e7e9f1;
        border-bottom: none;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .right {
          span{
            cursor: pointer;
          }
        }

        span {
          margin-right: 30px;
          font-size: 12px;
        }
      }

      .fixedB {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border: 1px solid #e7e9f1;

        span{
          font-size: 12px;
          margin-right: 30px;
        }

        .left{
          height: 100px;
          div:nth-of-type(1) {
            margin-bottom: 15px;
          }
        }

        .right {
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          height: 100px;
        }

        .big {
          font-size: 16px;
          color: #f96b6b;
        }
      }
    }

    .dialog_remark {
      .textarea_h {
        height: 190px;
        margin-bottom: 30px;

        .el-textarea__inner {
          height: 100% !important;
          resize: none;
        }
      }

      .dialog_btn_box {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }

    .dialog_receive {
      p {
        margin: 0;
      }

      .title_1 {
        font-size: 24px;
        color: #f96868;
        margin-bottom: 15px;
      }

      .title_2 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 20px;

        span {
          margin-right: 20px;
        }

        span:nth-last-of-type(1){
          display: flex;
          justify-content: flex-start;
          align-items: center;

          &::before {
            content: "";
            display: block;
            width: 2px;
            height: 20px;
            background: #cccccc;
            margin-right: 15px;
          }
        }
      }

      .pay_form {
        display: table;
        margin-bottom: 20px;

        .fixedH2{
          display: table-cell;
          width: 80px;
          background-color: #eef1f9;
          text-align: center;
          vertical-align: middle;
          padding: 15px 0;
          margin-right: 20px;
        }

        .pay_from_body {
          display: table-cell;
          vertical-align: middle;
        }

        .balance_body {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .balance {
            margin-left: 10px;
            color: #c1cbd5!important;
          }
        }
      }
    }

    .dialog_spending {
      input, textarea {
        width: 350px;
      }

      .el-input-group--append {
        width: 350px;
      }
    }

    .dialog_void {
      .red {
        color: #f33333;
      }
    }

    .dialog_outStock {
      p {
        margin: 0;
        margin-bottom: 5px;
      }
      .goods{
        padding: 30px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
      }
    }

    .dialog_address {
      .title {
        display: flex;
        align-content: flex-start;
        align-items: center;
      }

      .label {
        margin-right: 15px;
      }

      .el-input-group__append {
        cursor: pointer;
        &:hover {
          background: #13C19F;
          color: #fff;
        }
      }

      .add {
        font-size: 12px;
        margin-left: 15px;
        cursor: pointer;
      }

      .el-dialog__body {
        padding-left: 0;
        padding-right: 0;
      }

      .el-radio-group {
        width: 100%;
      }

      .radio_item {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 10px 30px;
        &:hover{
          box-shadow: 0 1px 20px rgba(0,0,0,.2);

          & .el-radio__label .right {
            display: block;
          }
        }

        .default {
          font-size: 12px;
          color: #ff973c;
          border: 1px solid rgba(255,151,60,.4);
          display: inline-block;
          padding: 2px;
          border-radius: 2px;
        }

        .el-radio__label {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #606266;

          .right {
            display: none;
            i {
              margin-left: 10px;

              &:hover {
                color: #13C19F !important;
              }
            }
          }
        }
      }
      .btn_main {
        padding: 15px 30px;
      }
    }

    .handCompony {
      font-size: 12px;
      color: #409EFF;
      cursor: pointer;
    }
  }
</style>
