<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <el-select v-model="listQuery.activity_id" style="width:300px;margin-bottom:20px" @change="seclect">
      <el-option v-for="item in activitys" :key="item.id" :label="item.title" :value="item.id" />
    </el-select>
    <el-select
      v-model="listQuery.apply_status"
    >
      <el-option v-for="item in applyList" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>
    <el-select v-model="listQuery.destroy_status">
      <el-option v-for="item in destoryList" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>
    <el-input v-model="listQuery.search_name" placeholder="备注昵称/姓名/手机号" class="filter-item filter-input" style="display: inline-block; width: 300px;" clearable />
    <el-button type="primary" style="margin-left: 15px" @click="getList()">搜索</el-button>
    <!-- <el-button type="primary" style="margin-left: 15px" @click="toExport">导出</el-button> -->
    <el-table
      border
      stripe
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      :data="tablelist"
    >
      <el-table-column prop="apply_time" align="center" label="申请时间" width="160" />
      <el-table-column prop="order_num" align="center" label="订单编号" width="210">
        <template slot-scope="{ row }">
          <span style="cursor:pointer;color:#1890FF;" @click="showDetail(row.order_num)">{{ row.order_num }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="get_user" label="下单人昵称" align="center" width="150" :show-overflow-tooltip="true">
        <template slot-scope="{ row }">{{ row.get_user && row.get_user.nickname }}</template>
      </el-table-column>
      <el-table-column prop="get_user" label="下单人姓名" align="center" width="120">
        <template slot-scope="{ row }">{{ row.get_user && row.get_user.realname }}</template>
      </el-table-column>
      <el-table-column prop="created_at" align="center" label="下单时间" width="160" />
      <el-table-column prop="destroy_cause" align="center" label="申请原因" width="160" :show-overflow-tooltip="true" />
      <el-table-column prop="status" align="center" label="订单状态" width="110">
        <!-- <template slot-scope="{ row: { is_deleted, status } }">
          <el-tag v-if="is_deleted === 1" type="info">已作废</el-tag>
          <el-tag v-else :color="orderStatus(status).color" style="color:#ffffff;">{{ orderStatus(status).name }}</el-tag>
        </template> -->
        <template slot-scope="{ row: { is_deleted, apply_status } }">
          <el-tag v-if="is_deleted === 1" type="info">已作废</el-tag>
          <el-tag v-else :type="apply_status === 1? 'warning' : ''">{{ apply_status === 1? '申请作废' : '正常' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="total" label="数量合计" align="center" width="80">
        <template slot-scope="{ row }">
          {{ row.total }}
        </template>
      </el-table-column>
      <el-table-column prop="money" label="订单总额" align="center" width="120">
        <template slot-scope="{ row }">{{ `￥${row.money}` }}</template>
      </el-table-column>
      <el-table-column prop="belong_user" align="center" label="审核状态" width="120">
        <template slot-scope="{ row }">
          <el-tag :type="row.destroy_status === 0? '' : row.destroy_status === 1? 'success' : 'danger'">{{ row.destroy_status | destroy_status }}</el-tag>
          <el-popover
            placement="top-start"
            title="拒绝原因"
            width="200"
            trigger="click"
            :content="row.reject_cause"
          >
            <el-button v-if="row.destroy_status === 2 && row.reject_cause" slot="reference" type="text">查看拒绝原因</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160">
        <template slot-scope="{ row }">
          <!-- <el-popconfirm
            title="确定要作废此订单吗？"
            @confirm="reject_fei(row)"
          >
            <el-button v-if="row.is_deleted === 0 && row.apply_status" slot="reference" type="primary" style="margin-left: 15px" size="small">通过</el-button>
          </el-popconfirm> -->
          <el-button v-if="row.is_deleted === 0 && row.apply_status" slot="reference" type="primary" style="margin-left: 15px" size="small" @click="reject_fei(row)">通过</el-button>
          <el-button v-if="row.is_deleted === 0 && row.apply_status" slot="reference" type="danger" style="margin-left: 15px" size="small" @click="reject(row.id)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination :total="tableTotal" :limit="listQuery.page_size" :page="listQuery.page_index" @pagination="changePagination" @update:limit="changePagination" />
    <!-- 订单详情 -->
    <el-dialog
      title="订单详情"
      :visible.sync="dialogVisible"
      width="70%"
    >
      <div>
        <p>订单编号: {{ orderDetail && orderDetail.order_num }}</p>
        <!-- 表格 -->
        <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">
              <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">
                <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 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="赠品信息">
              <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 v-if="orderDetail.destroy_cause" label="作废原因:">
              <span style="color:#FB231F">{{ orderDetail.destroy_cause }}</span>
            </el-form-item>
            <el-form-item v-if="orderDetail.reject_cause" label="拒绝原因:">
              <span style="color:#FB231F">{{ orderDetail.reject_cause }}</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
    <!-- 拒绝原因 -->
    <el-dialog
      title="拒绝原因"
      :visible.sync="dialogReject"
      width="30%"
    >
      <el-input
        v-model="rejectForm.reject_cause"
        type="textarea"
        :rows="6"
        maxlength="100"
        placeholder="请输入拒绝原因"
      />
      <div style="color: #f30; margin-top:10px;">
        （拒绝原因可选择不填写）
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogReject = false">取 消</el-button>
        <el-button type="primary" @click="reject_sure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// api
import { GetApplyOrder, UpdateApplyStatus, GetApplyCount } from '@/api/order/list'
import { getDetail, toDelete } from '@/api/order/examine'
import { activityList } from '@/api/giftB'
import { parseMoney } from '@/utils/index'
import { orderStatus, payStatus } from '@/filters/common'
export default {
  filters: {
    destroy_status(v) {
      if (v === 0) {
        return '未审核'
      } else if (v === 1) {
        return '已通过'
      } else if (v === 2) {
        return '已拒绝'
      }
    }
  },
  data() {
    return {
      rejectForm: {
        id: '',
        status: '',
        reject_cause: ''
      },
      loadingFull: false,
      dialogVisible: false,
      dialogReject: false,
      order_num: '',
      visible: false,
      orderDetail: {},
      listQuery: {
        page_index: 1,
        page_size: 10,
        search_name: '',
        activity_id: '',
        apply_status: '',
        destroy_status: ''
      },
      toggleRemarkNum: 3,
      applyList: [
        {
          id: '',
          name: '全部'
        },
        {
          id: 0,
          name: '正常'
        },
        {
          id: 1,
          name: '申请作废'
        },
        {
          id: 2,
          name: '已作废'
        }
      ],
      destoryList: [
        {
          id: '',
          name: '全部'
        },
        {
          id: 0,
          name: '未审核'
        },
        {
          id: 1,
          name: '已通过'
        },
        {
          id: 2,
          name: '已拒绝'
        }
      ],
      tablelist: [],
      tableTotal: 0,
      activitys: []
    }
  },
  created() {
    this.orderStatus = orderStatus
    this.payStatus = payStatus
    this.parseMoney = parseMoney
    this.activityList(() => {
      this.getList()
    })
  },
  methods: {
    // 获取角标信息
    getag() {
      GetApplyCount().then(res => {
        setTimeout(() => {
          const num = res.data.count
          const index = this.$store.state.unreadMessage.findIndex(e => e.name === 'cancel')
          this.$store.commit('unreadMessage/UNREAD_MESSAGE_NUM_CHANGE', { index, num })
        }, 567)
      })
    },
    reject_fei(row) {
      this.$confirm('确定要作废订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        toDelete({
          order_num: row.order_num,
          remark: row.destroy_cause
        }).then(res => {
          if (res.code === 200) {
            UpdateApplyStatus({ id: row.id, status: 1 }).then(res => {
              if (res.code === 200) {
                this.$message.success('作废成功')
                this.getList()
                this.getag()
              } else {
                this.$message.success('作废失败' || res.message)
              }
            })
          } else {
            this.$message.error(res.message)
          }
        }).catch(e => {
          this.loadingFull = false
        })
      })
    },
    // 驳回弹窗
    reject(id) {
      this.rejectForm.reject_cause = ''
      this.dialogReject = true
      this.rejectForm.id = id
    },
    // 提交驳回申请
    reject_sure() {
      // if (!this.rejectForm.reject_cause) {
      //   this.$message.error('请输入拒绝回原因')
      //   return false
      // }
      this.rejectForm.status = 2
      UpdateApplyStatus(this.rejectForm).then(res => {
        if (res.code === 200) {
          this.$message.success('拒绝成功')
          this.dialogReject = false
          this.getList()
          this.getag()
        } else {
          this.$message.success('拒绝失败' || res.message)
        }
      })
    },
    // 打开订单详情弹窗
    showDetail(order_num) {
      this.order_num = order_num
      this.getDetail()
      this.dialogVisible = true
    },
    // 获取详情
    async getDetail() {
      this.loadingFull = true
      await getDetail({
        order_num: this.order_num
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.orderDetail = res.data
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    seclect() {
      this.getList()
    },
    async getList() {
      this.loadingFull = true
      await GetApplyOrder(this.listQuery).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.tablelist = res.data.list
          this.tableTotal = res.data.total
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    index(i) {
      const { page_index: a, page_size: b } = this.listQuery
      return (a - 1) * b + i + 1
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
      this.getList()
    },
    // 导出
    // async toExport() {
    //   this.loadingFull = true
    //   this.$request(ExportExceptionOrder({ activity_id: this.listQuery.activity_id }), (res) => {
    //     const exportData = res
    //     console.log(exportData)
    //     import('@/vendor/Export2Excel').then(excel => {
    //       const header = ['序号', '下单时间', '所属政委', '备注昵称', '下单人姓名', '订单状态', '支付状态', '数量合计', '订单总额', '所属者昵称', '所属者姓名', '所属者手机号']
    //       const exportK = ['index', 'updated_at', 'admin_name', 'name', 'realname', 'status', 'pay_status', 'total', 'money', 'belong_nickname', 'belong_realname', 'belong_mobile']
    //       const exportV = exportData.map((item, i) => {
    //         const obj = {
    //           index: i + 1,
    //           updated_at: item.updated_at || '',
    //           admin_name: item.get_user && item.get_user.warea && item.get_user.warea.admin_name,
    //           name: item.get_user.name || '',
    //           realname: item.get_user.realname || '',
    //           status: orderStatus(item.status).name || '',
    //           pay_status: payStatus(item.pay_status).name,
    //           total: item.total || '',
    //           money: item.money || '',
    //           belong_realname: item.belong_user && item.belong_user.realname,
    //           belong_nickname: item.belong_user && item.belong_user.nickname,
    //           belong_mobile: item.belong_user && item.belong_user.mobile
    //         }
    //         return obj
    //       })
    //       const exportD = exportV.map(item => exportK.map(k => item[k]))
    //       excel.export_json_to_excel({
    //         header,
    //         data: exportD,
    //         filename: `${formatter(new Date(), 'yyyy-MM-dd')}异常订单`,
    //         autoWidth: true,
    //         bookType: 'xlsx'
    //       })
    //     })
    //     this.loadingFull = false
    //   })
    // },
    async activityList(cb) {
      // this.loadingFull = true
      await activityList().then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.activitys = res.data
          res.data.map(item => {
            if (item.is_ing === 1) {
              this.listQuery.activity_id = item.id
            }
          })
        }
        cb && cb()
      }).catch(e => {
        // this.loadingFull = false
        cb && cb()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
   .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;
        }
      }
    }
    .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;
        }
      }
    }
</style>
