<!--
  @description: 订单审核
  @Modifier：dijia
  @routerPath:/personalCenter/orderAudit
  @date：2021/09/07
-->
<template>
  <div class="container">
    <!-- 标题 -->
    <div class="nav">
      <span class="title">
        订单审核
      </span>
      <i class="el-icon-close cursor" title="返回" style="font-size:20px;" @click="gotoClose" />
    </div>
    <!-- 商品信息 -->
    <div class="list-wrap">
      <div class="title-con">
        订单信息
      </div>
      <div class="list-title">
        <el-row>
          <el-col :span="7">
            <div class="text_align">
              商品名称
            </div>
          </el-col>
          <el-col :span="3">
            <div class="text_align">
              数量
            </div>
          </el-col>
          <el-col :span="3">
            <div class="text_align">
              状态
            </div>
          </el-col>
          <el-col :span="3">
            <div class="text_align">
              单价（元）
            </div>
          </el-col>
          <el-col :span="4">
            <div class="text_align">
              收货人
            </div>
          </el-col>
          <el-col :span="4">
            <div class="text_align">
              总价（元）
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-for="list in orderDetail.orderPage" :key="list.orderId" class="list-info">
        <div class="detail_title">
          <span>{{ list.createTime }}</span>
          <span>订单号：{{ list.orderNo }}</span>
          <span>京东商城订单号：{{ list.supplierOrderId1 ? list.supplierOrderId1 : orderDetail.supplierOrderId }}</span>
          <span>店铺：<span>{{ list.goodsDepartName }}</span></span>
        </div>
        <el-row v-for="(val, index) in list.orderdetails" :key="index">
          <el-col :span="16">
            <el-row
              v-for="(item) in val.skus"
              :key="item.id"
              class="sku_item"
            >
              <el-col :span="3">
                <div
                  class="cursor img_box"
                  @click="goToDetail(item)"
                >
                  <div class="img-box">
                    <img :src="item.productPicture" alt>
                  </div>
                </div>
              </el-col>
              <el-col :span="7">
                <div
                  class="cursor goodsNameBox"
                  @click="goToDetail(item)"
                >
                  <span class="gdou" :title="item.goodsName">{{ item.goodsName }}</span>
                </div>
              </el-col>
              <el-col :span="5" style="line-height: 80px;">
                <div style="text-align: center;color: #7F7F7F;padding-left: 9%;">
                  x{{ item.number }}
                </div>
              </el-col>
              <el-col :span="4" style="line-height: 80px;">
                <div style="text-align: center;color: #7F7F7F;padding-left: 12%;" :title="item.goodsDepartName" class="depart_name">
                  待审核
                </div>
              </el-col>
              <el-col :span="5" style="line-height: 80px">
                <div style="text-align: center;color: #7F7F7F;">
                  {{ item.commodityPrice| toPrice }} &nbsp;
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4" :style="{ height: 80*val.skus.length + 'px' }" class="rece_box">
            <span>
              {{ list.receiverName }}
            </span>
          </el-col>
          <el-col :span="4" :style="{ height: 80*val.skus.length + 'px' }" class="rece_box">
            <span class="amount_box">
              <span>¥</span>
              {{ val.orderAmount }}
            </span>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 审核结果 -->
    <div class="commodity_container">
      <div class="title_con">
        审核结果
      </div>
      <div class="commodity_res">
        <div class="res_title">
          审核意见：
        </div>
        <el-input
          v-model="formData.auditOptions"
          :rows="4"
          type="textarea"
          maxlength="250"
          show-word-limit
          placeholder="请输入审核意见"
        />
      </div>
      <div class="footer_btns">
        <el-button type="purple" @click="dialogClick">
          同 意
        </el-button>
        <el-button type="danger" @click="cancelClick">
          驳 回
        </el-button>
        <el-button @click="gotoClose">
          关 闭
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
// api
import { auditOrders, getOrders } from '@/api/shoppingmall/order'
export default {
  name: 'OrderAudit',
  components: {
  },
  filters: {
    toPrice: function(value) {
      if (value < 0) {
        value = ''
      }
      return '￥' + value
    }
  },
  data() {
    return {
      formData: {
        // 审核意见
        auditOptions: null,
        // 商品ID
        orderNo: null,
        // 审核标识位 0审核驳回 1审核通过
        auditStatus: '1'
      },
      title: '审核',
      orderDetail: {},
      totalPrice: 0
    }
  },
  watch: {
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      const id = this.$route.query.id
      const params = {
        id: id,
        pageNo: 0,
        pageSize: 1000,
        type: 's'
      }
      getOrders(params).then(res => {
        this.orderDetail = res.data.records[0]
        this.formData.orderNo = this.orderDetail.orderNumber
      }).catch(() => {
      })
    },
    gotoClose() {
      this.$router.push({
        path: '/personalCenter/myorderDital',
        query: {
          menuIndex: this.$route.query.menuIndex
        }
      })
    },
    goToDetail(val) {
      this.$router.push({
        path: '/shop/goodsClassDetail',
        query: { id: val.goodsId }
      })
    },
    // 通过
    dialogClick() {
      // 审核标识位 0审核驳回 1审核通过
      this.formData.auditStatus = '1'
      this.auditOption('确认通过吗?通过后自动下单')
    },
    // 驳回
    cancelClick() {
      // 审核标识位 0审核驳回 1审核通过
      this.formData.auditStatus = '0'
      this.auditOption('确认要驳回吗?')
    },
    // 审核
    auditOption(text) {
      this.$confirm(text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        if (!this.formData.auditOptions && this.formData.auditStatus === '0') {
          this.$message.error('驳回订单时，请填写审核意见！')
          return
        }
        auditOrders(this.formData).then(res => {
          if (res.header.ret === '0') {
            this.$message.success('提交成功！')
            this.formData = {
              auditOptions: null,
              orderNo: null,
              auditStatus: '1'
            }
            this.gotoClose()
          }
        })
      }).catch()
    }
  }
}
</script>

<style lang="less" scoped>
.commodity_container {
  margin: 20px 12px;
  box-shadow: 2px 2px 5px #dcd8d8;
  padding: 20px 40px;
  .commodity_res {
    display: flex;
    margin-left: 15px;
    .res_title {
      padding-top: 5px;
      width: 110px;
    }
  }
  .footer_btns {
    text-align: center;
    margin-top: 30px;
  }
}
.text_align {
  text-align: center;
}
.img_box {
  margin-left: 20px;padding-top:10px;
}
.detail_title {
  width: 100%;
  background-color: rgba(242, 242, 242, 0.6);
  height: 34px;
  line-height: 34px;
  color: #666;
  >span {
    margin-left: 15px;
  }
  span:nth-child(4) {
    >span {
      display: inline-block;
      border-width: 0px;
      padding: 1px 5px;
      width: auto;
      line-height: 20px;
      background-color: #f59a23;
      text-align: center;
      border-radius: 4px;
      -webkit-box-shadow: none;
      box-shadow: none;
      font-size: 10px;
      color: #FFFFFF;
    }
  }
}
.title-con{
  margin-bottom: 15px;
  font-size: 14px;
}
.title_con{
  margin-bottom: 20px;
  padding-bottom: 10px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.goodsNameBox {
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 80px;
}
.gdou{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #000;
}
.gdou:hover {
  color: #00aaca;
}
.list-wrap {
    margin: 20px 12px;
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    font-style: normal;
    font-size: 12px;
    box-shadow: 2px 2px 5px #dcd8d8;
    padding: 20px;
    .list-title {
      height: 40px;
      line-height: 40px;
      color: #7F7F7F;
      background-color: rgba(242, 242, 242, 0.6);
    }

    .list-info {
      border: 1px solid #eee;
      margin-top: 15px;
      .sku_item {
        height: 80px;
        border-bottom: 1px solid #F2F2F2;
        &:last-of-type {
          border-bottom: none;
        }
        .img-box {
          display: inline-block;
          margin-right:10px;
          width: 60px;
          height: 60px;
          text-align: center;
          border: 1px solid rgba(242, 242, 242, 1);
          img {
            margin-top: 10%;
            width: 80%;
            height: 80%;
          }
        }
        .depart_name {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .rece_box {
        display: flex;
        justify-content: center;
        align-items: center;
        border-left: 1px solid #F2F2F2;
        color: #333;
        .amount_box {
          color: #F59A23;
          font-size:18px;
          margin:0 5px;
          >span {
            font-size: 14px;
          }
        }
      }
    }
}
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
    padding: 0 12px;
    .title {
      font-size: 14px;
      font-weight: bold;
      color: #333333;
      line-height: 41px;
      height: 41px;
      font-family: "MicrosoftYaHei-Bold";
    }
}
.mr30 {
  margin-right: 30px;
}
</style>
