<template>
  <div id="order_examine" class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div class="info">
      <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 v-if="roles.indexOf(0) !== -1" class="head-btns">
          <div v-if="orderDetail && orderDetail.status === 0">
            <el-button icon="el-icon-edit-outline" @click="ycn_changGoodList_dialog = true">修改</el-button>
            <el-button icon="el-icon-delete-solid" @click="dialog.void = true">作废</el-button>
            <!-- <el-button icon="el-icon-refresh" @click="dialog.back = true">退回</el-button> -->
          </div>
        </div>
        <div v-if="roles.indexOf(1) !== -1" class="head-btns">
          <div v-if="orderDetail && orderDetail.status === 1">
            <!-- <el-button icon="el-icon-edit-outline" @click="ycn_changGoodList_dialog = true">修改</el-button> -->
            <el-button icon="el-icon-refresh" @click="dialog.back = true">退回</el-button>
          </div>
        </div>
        <div v-if="roles.indexOf(2) !== -1" class="head-btns">
          <div v-if="orderDetail && orderDetail.status === 2 || orderDetail.status === 3">
            <!-- <el-button icon="el-icon-edit-outline" @click="ycn_changGoodList_dialog = true">修改</el-button> -->
            <el-button icon="el-icon-refresh" @click="dialog.back = true">退回</el-button>
          </div>
          <!-- <div v-else-if="orderDetail && orderDetail.status === 3">
              <el-button icon="el-icon-refresh" @click="dialog.back = true">退回</el-button>
          </div> -->
        </div>
      </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" @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
            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">
              <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="操作日志">
            <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-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.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" style="width: 300px">
            <el-option
              v-for="item in voidList"
              :key="item.id"
              :label="item.content"
              :value="item.id"
            />
          </el-select>
        </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="resetDialogVoid">取消</el-button>
        <el-button size="small" type="primary" @click="submitOrderVoid">确定</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>
      </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>
            </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>
    <change-good-list
      v-if="ycn_changGoodList_dialog"
      :show="ycn_changGoodList_dialog"
      :data="orderDetail"
      @refresh="getDetail"
      @close="ycn_changGoodList_dialog = false"
    />
  </div>
</template>
<script>

import { studioOrderDetail, addressList, changeOrderAddress, orderDestory, orderAdopt } from '@/api/studio/order'

// api
import * as examine_api from '@/api/order/examine'
// money
import { parseMoney } from '@/utils/index'
// level
import { levelStatus } from '@/filters/common'

// 组件
import ChangeGoodList from './components/ChangeGoodList'
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
    }
  },
  data() {
    return {
      isRoot: this.$store.getters.role === '超级管理员',
      // roles: this.$route.meta.buttonAuthList ? this.$route.meta.buttonAuthList : [],
      roles: [],
      loadingFull: false,
      ycn_changGoodList_dialog: false,
      dialog: {
        void: false,
        address: false,
        add_void: false,
        back: false
      },
      remark: {
        void: '',
        back: ''
      },
      toggle: {
        log: false
      },
      orderDetail: {},
      toggleRemarkNum: 3,
      addressList: [],
      addressId: '',
      voidList: [],
      addVoidContent: '',
      voidTypeId: ''
    }
  },
  watch: {
    'dialog.void'(a) {
      if (a) {
        this.getVoidList()
      }
    },
    'dialog.add_void'(a) {
      if (!a) {
        this.resetAddVoid()
      }
    }
  },
  created() {
    this.parseMoney = parseMoney
    this.levelStatus = levelStatus
    this.getDetail()
    this.roles = JSON.parse(localStorage.getItem('roles'))
  },
  methods: {
    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('获取订单作废原因失败')
      })
    },
    // 获取详情
    async getDetail() {
      const params = this.$route.params
      if (params && params.id) {
        this.loadingFull = true
        await studioOrderDetail({
          id: params.id
        }).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 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: 'studioOrder'
          })
        } 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 : ''
      this.loadingFull = true
      orderDestory({
        order_id: this.orderDetail.id,
        remark: `${content}${this.remark.void}`
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.resetDialogVoid()
          this.getDetail()
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // 重置订单作废
    resetDialogVoid() {
      this.remark.void = ''
      this.dialog.void = false
    },
    // 获取收货地址
    async getUserAddress() {
      const loading = this.$loading()
      await addressList({
        user_id: this.orderDetail.get_user.id
      }).then(res => {
        loading.close()
        if (res.code === 200) {
          this.addressList = res.data.list
          if (res.data.list.length > 0) {
            this.dialog.address = true
          } else {
            this.$message.error('暂无地址列表')
          }
        } else {
          this.$message.error(res.message || '获取地址列表失败')
        }
      }).catch(e => {
        loading.close()
        this.$message.error('获取地址列表失败')
      })
    },
    // 修改订单地址
    editOrderAddress() {
      if (!this.addressId) {
        this.$message.error('请选择收货地址')
        return false
      }
      this.loadingFull = true
      changeOrderAddress({
        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
    },
    // 重置remark
    resetDialogRemark() {
      this.remark = {
        order: '',
        void: '',
        back: ''
      }
      this.dialog = {
        remark: false,
        void: false,
        back: false
      }
    }
  }
}
</script>
<style lang="scss">
  #order_examine {
    padding: 15px;
    .cursor {
      cursor: pointer;
    }

    .info {
      padding: 15px;

      .head {
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        font-size: 14px;
        position: relative;
        &-btns {
          // margin-left: auto;
          position: absolute;
          top: 0;
          right: 0;
          .flex {
            display: flex;
          }

          button {
            margin-left: 10px;
          }

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

        .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: 30px 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;
          }
        }
      }
    }

    .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_void {
      .red {
        color: #f33333;
      }
    }

    .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;
      }
    }
  }
</style>
