<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">

      <!-- 搜索 -->
      <el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
      <el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
        <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
      </el-select>
      <el-select v-model="status" clearable placeholder="订单状态" class="filter-item" style="width: 130px">
        <el-option
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
      <!-- 新增 -->
    </div>
    <!--表单组件-->
    <eForm ref="form" :is-add="isAdd"/>
    <eDetail ref="form1" :is-add="isAdd"/>
    <eRefund ref="form2" :is-add="isAdd"/>
    <!--表格渲染-->
    <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
      <el-table-column prop="orderId" width="140" label="订单号">
        <template slot-scope="scope">
          <span>{{ scope.row.orderId }}</span>
          <p>{{ scope.row.pinkName }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="realName" label="用户姓名"/>
      <el-table-column prop="cartInfoList" width="300" label="商品信息">
        <template slot-scope="scope" >
          <div v-for="(item,index) in scope.row.cartInfoList">
            <span><img style="width: 30px;height: 30px;margin:0;cursor: pointer;"
            :src="item.cartInfoMap.productInfo.image"/></span>
            <span>{{item.cartInfoMap.productInfo.storeName}}</span>
            <span> | ￥{{item.cartInfoMap.truePrice}}×{{item.cartInfoMap.cartNum}}</span>
          </div>
          <div v-if="item.cartInfoMap.productInfo.attrInfo" v-for="(item,index) in scope.row.cartInfoList">
            <span>
                <img style="width: 30px;height: 30px;margin:0;cursor: pointer;"
                :src="item.cartInfoMap.productInfo.attrInfo.image">
            </span>
            <span>{{item.cartInfoMap.productInfo.storeName}}&nbsp;{{item.cartInfoMap.productInfo.attrInfo.suk}}</span>
            <span> | ￥{{item.cartInfoMap.truePrice}}×{{item.cartInfoMap.cartNum}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="payPrice" label="实际支付"/>
      <el-table-column prop="payTypeName" label="支付状态"/>
      <el-table-column prop="statusName" label="订单状态">
        <template slot-scope="scope">
          <span v-html="scope.row.statusName">{{ scope.row.addTime }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="addTime" width="160" label="创建时间">
        <template slot-scope="scope">
          <span>{{ formatTime(scope.row.addTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="checkPermission(['ADMIN','YXSTOREORDER_ALL','YXSTOREORDER_EDIT','YXSTOREORDER_DELETE'])" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button  v-permission="['ADMIN','YXSTOREORDER_ALL','YXSTOREORDER_EDIT']" size="mini" type="primary"
                     @click="detail(scope.row)">
            订单详情</el-button>
          <el-dropdown size="mini" split-button type="primary" trigger="click">
            操作
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button v-if="scope.row._status == 2" v-permission="['ADMIN','YXSTOREORDER_ALL','YXSTOREORDER_EDIT']" size="mini" type="primary"
                           @click="edit(scope.row)">
                  去发货</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button v-if="scope.row._status == 3" v-permission="['ADMIN','YXSTOREORDER_ALL','YXSTOREORDER_EDIT']" size="mini" type="primary"
                           @click="refund(scope.row)">
                  立刻退款</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-popover
                  v-permission="['ADMIN','YXSTOREORDER_ALL','YXSTOREORDER_DELETE']"
                  :ref="scope.row.id"
                  placement="top"
                  width="180">
                  <p>确定删除本条数据吗？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
                    <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
                  </div>
                  <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                </el-popover>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import initData from '@/mixins/initData'
import { del } from '@/api/yxStoreOrder'
import eForm from './form'
import eDetail from './detail'
import eRefund from './refund'
import { formatTime } from '@/utils/index'
export default {
  components: { eForm, eDetail, eRefund },
  mixins: [initData],
  data() {
    return {
      delLoading: false, status,
      queryTypeOptions: [
        { key: 'orderId', display_name: '订单号' },
        { key: 'realName', display_name: '用户姓名' },
        { key: 'userPhone', display_name: '用户电话' }
      ],
      statusOptions: [
        { value: '0', label: '未支付' },
        { value: '1', label: '未发货' },
        { value: '2', label: '待收货' },
        { value: '3', label: '待评价' },
        { value: '4', label: '交易完成' },
        // { value: '5', label: '待核销' },
        { value: '-1', label: '退款中' },
        { value: '-2', label: '已退款' },
        { value: '-4', label: '已删除' }
      ]
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    formatTime,
    checkPermission,
    beforeInit() {
      this.url = 'api/yxStoreOrder'
      const sort = 'id,desc'
      this.params = { page: this.page, size: this.size, sort: sort, orderStatus: this.status }
      const query = this.query
      const type = query.type
      const value = query.value
      if (type && value) { this.params[type] = value }
      return true
    },
    subDelete(id) {
      this.delLoading = true
      del(id).then(res => {
        this.delLoading = false
        this.$refs[id].doClose()
        this.dleChangePage()
        this.init()
        this.$notify({
          title: '删除成功',
          type: 'success',
          duration: 2500
        })
      }).catch(err => {
        this.delLoading = false
        this.$refs[id].doClose()
        console.log(err.response.data.message)
      })
    },
    add() {
      this.isAdd = true
      this.$refs.form.dialog = true
    },
    edit(data) {
      this.isAdd = false
      const _this = this.$refs.form
      _this.form = {
        id: data.id,
        orderId: data.orderId,
        uid: data.uid,
        realName: data.realName,
        userPhone: data.userPhone,
        userAddress: data.userAddress,
        cartId: data.cartId,
        freightPrice: data.freightPrice,
        totalNum: data.totalNum,
        totalPrice: data.totalPrice,
        totalPostage: data.totalPostage,
        payPrice: data.payPrice,
        payPostage: data.payPostage,
        deductionPrice: data.deductionPrice,
        couponId: data.couponId,
        couponPrice: data.couponPrice,
        paid: data.paid,
        payTime: data.payTime,
        payType: data.payType,
        addTime: data.addTime,
        status: data.status,
        refundStatus: data.refundStatus,
        refundReasonWapImg: data.refundReasonWapImg,
        refundReasonWapExplain: data.refundReasonWapExplain,
        refundReasonTime: data.refundReasonTime,
        refundReasonWap: data.refundReasonWap,
        refundReason: data.refundReason,
        refundPrice: data.refundPrice,
        deliveryName: data.deliveryName,
        deliveryType: data.deliveryType,
        deliveryId: data.deliveryId,
        gainIntegral: data.gainIntegral,
        useIntegral: data.useIntegral,
        backIntegral: data.backIntegral,
        mark: data.mark,
        isDel: data.isDel,
        unique: data.unique,
        remark: data.remark,
        merId: data.merId,
        isMerCheck: data.isMerCheck,
        combinationId: data.combinationId,
        pinkId: data.pinkId,
        cost: data.cost,
        seckillId: data.seckillId,
        bargainId: data.bargainId,
        verifyCode: data.verifyCode,
        storeId: data.storeId,
        shippingType: data.shippingType,
        isChannel: data.isChannel,
        isRemind: data.isRemind,
        isSystemDel: data.isSystemDel
      }
      _this.dialog = true
    },
    refund(data) {
      this.isAdd = false
      const _this = this.$refs.form2
      _this.form = {
        id: data.id,
        orderId: data.orderId,
        uid: data.uid,
        realName: data.realName,
        userPhone: data.userPhone,
        userAddress: data.userAddress,
        cartId: data.cartId,
        freightPrice: data.freightPrice,
        totalNum: data.totalNum,
        totalPrice: data.totalPrice,
        totalPostage: data.totalPostage,
        payPrice: data.payPrice,
        payPostage: data.payPostage,
        deductionPrice: data.deductionPrice,
        couponId: data.couponId,
        couponPrice: data.couponPrice,
        paid: data.paid,
        payTime: data.payTime,
        payType: data.payType,
        addTime: data.addTime,
        status: data.status,
        refundStatus: data.refundStatus,
        refundReasonWapImg: data.refundReasonWapImg,
        refundReasonWapExplain: data.refundReasonWapExplain,
        refundReasonTime: data.refundReasonTime,
        refundReasonWap: data.refundReasonWap,
        refundReason: data.refundReason,
        refundPrice: data.refundPrice,
        deliveryName: data.deliveryName,
        deliveryType: data.deliveryType,
        deliveryId: data.deliveryId,
        gainIntegral: data.gainIntegral,
        useIntegral: data.useIntegral,
        backIntegral: data.backIntegral,
        mark: data.mark,
        isDel: data.isDel,
        unique: data.unique,
        remark: data.remark,
        merId: data.merId,
        isMerCheck: data.isMerCheck,
        combinationId: data.combinationId,
        pinkId: data.pinkId,
        cost: data.cost,
        seckillId: data.seckillId,
        bargainId: data.bargainId,
        verifyCode: data.verifyCode,
        storeId: data.storeId,
        shippingType: data.shippingType,
        isChannel: data.isChannel,
        isRemind: data.isRemind,
        isSystemDel: data.isSystemDel
      }
      _this.dialog = true
    },
    detail(data) {
      this.isAdd = false
      const _this = this.$refs.form1
      _this.form = {
        id: data.id,
        orderId: data.orderId,
        payTypeName: data.payTypeName,
        statusName: data.statusName,
        uid: data.uid,
        realName: data.realName,
        userPhone: data.userPhone,
        userAddress: data.userAddress,
        cartId: data.cartId,
        freightPrice: data.freightPrice,
        totalNum: data.totalNum,
        totalPrice: data.totalPrice,
        totalPostage: data.totalPostage,
        payPrice: data.payPrice,
        payPostage: data.payPostage,
        deductionPrice: data.deductionPrice,
        couponId: data.couponId,
        couponPrice: data.couponPrice,
        paid: data.paid,
        payTime: data.payTime,
        payType: data.payType,
        addTime: data.addTime,
        status: data.status,
        refundStatus: data.refundStatus,
        refundReasonWapImg: data.refundReasonWapImg,
        refundReasonWapExplain: data.refundReasonWapExplain,
        refundReasonTime: data.refundReasonTime,
        refundReasonWap: data.refundReasonWap,
        refundReason: data.refundReason,
        refundPrice: data.refundPrice,
        deliveryName: data.deliveryName,
        deliveryType: data.deliveryType,
        deliveryId: data.deliveryId,
        gainIntegral: data.gainIntegral,
        useIntegral: data.useIntegral,
        backIntegral: data.backIntegral,
        mark: data.mark,
        isDel: data.isDel,
        unique: data.unique,
        remark: data.remark,
        merId: data.merId,
        isMerCheck: data.isMerCheck,
        combinationId: data.combinationId,
        pinkId: data.pinkId,
        cost: data.cost,
        seckillId: data.seckillId,
        bargainId: data.bargainId,
        verifyCode: data.verifyCode,
        storeId: data.storeId,
        shippingType: data.shippingType,
        isChannel: data.isChannel,
        isRemind: data.isRemind,
        isSystemDel: data.isSystemDel
      }
      _this.dialog = true
    }
  }
}
</script>

<style scoped>

</style>
