<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div class="filter-container">
      <el-date-picker
        v-model="listQuery.time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="filter-item"
      />
      <el-input
        v-model="listQuery.search_name"
        placeholder="订单编号"
        class="filter-item filter-input"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        class="filter-item"
        @click="listQuery.page_index = 1;getList()"
      >
        搜索
      </el-button>
      <el-button
        type="primary"
        :loading="downloadLoading"
        icon="el-icon-document"
        class="filter-item"
        @click="exportOrder"
      >
        导出
      </el-button>
    </div>

    <el-table
      :data="table"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
    >
      <el-table-column
        prop="ordersn"
        align="center"
        label="订单编号"
        width="180"
      />
      <el-table-column
        prop="created_at"
        align="center"
        label="下单时间"
        width="160"
      />
      <el-table-column
        prop="status"
        align="center"
        label="订单状态"
        width="100"
      >
        <template
          slot-scope="{ row }"
        >
          <el-tag
            :color="orderStatus(row.status).color"
            style="color:#ffffff;"
          >
            {{ orderStatus(row.status).name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="crown"
        label="代理公司昵称"
        align="center"
        width="150"
      >
        <template slot-scope="{ row }">
          {{ row.crown.nickname }}
        </template>
      </el-table-column>
      <el-table-column
        prop="num"
        label="数量合计"
        align="center"
        width="100"
      />
      <el-table-column
        prop="price"
        label="订单总额"
        align="center"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ `￥${row.price}` }}
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="收货人"
        align="center"
        width="150"
      >
        <template slot-scope="{ row }">
          {{ row.address.username }}
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="联系方式"
        align="center"
        width="150"
      >
        <template slot-scope="{ row }">
          {{ row.address.mobile }}
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="收货地址"
        align="center"
        width="200"
      >
        <template slot-scope="{ row }">
          {{ row.address.address }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        align="center"
        label="商品信息"
        width="100"
      >
        <template
          slot-scope="{ row }"
        >
          <el-button
            type="text"
            style="padding: 0"
            @click="handleSeeAllGoods(row)"
          >
            查看详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="user"
        label="下单人"
        align="center"
        width="150"
      >
        <template slot-scope="{ row }">
          {{ row.user.nickname }}
        </template>
      </el-table-column>
      <el-table-column
        prop="agent"
        label="发单人"
        align="center"
        width="150"
      >
        <template slot-scope="{ row }">
          {{ row.agent.nickname }}
        </template>
      </el-table-column>
      <el-table-column
        prop="orderType"
        align="center"
        label="订单类型"
        width="100"
      >
        <template slot-scope="{ row }">
          <el-tag
            :type="row.is_turn === 0 ? 'wraning' : (row.is_turn === 1 ? 'success' : 'danger')"
          >
            {{ row.is_turn === 0 ? '没有转单' : (row.is_turn === 1 ? '全部转单' : '部分转单') }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="turn_is"
        label="原始订单"
        align="center"
        width="80"
      >
        <template slot-scope="{ row }">
          <el-tag :type="row.turn_is === 0 ? 'success' : 'danger'">
            {{ row.turn_is === 0 ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="is_manual"
        label="手动订单"
        align="center"
        width="80"
      >
        <template slot-scope="{ row }">
          <el-tag :type="row.is_manual === 0 ? 'success' : 'danger'">
            {{ row.is_manual === 0 ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="200"
      >
        <template
          slot-scope="{ row }"
        >
          <el-button
            type="text"
            @click="handleUpdataAddress(row)"
          >
            更改收货信息
          </el-button>
          <el-button
            type="text"
            style="margin-left:0"
            @click="handleSetSend(row)"
          >
            确认发货
          </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="visible.address"
    >
      <change-address
        :form="update.address"
        @update:cancel="visible.address = false"
        @update:success="()=>{ visible.address = false; getList() }"
      />
    </el-dialog>
    <!-- 查看订单全部商品 -->
    <el-drawer
      :title="`订单: ${orderInfo.ordersn}`"
      :visible.sync="visible.goods"
      direction="rtl"
    >
      <div
        v-if="visible.goods"
        class="orderInfo"
      >
        <p>收货信息</p>
        <el-form label-width="100px">
          <el-form-item label="收货人姓名:">{{ orderInfo.address.username }}</el-form-item>
          <el-form-item label="收货人手机:">{{ orderInfo.address.mobile }}</el-form-item>
          <el-form-item label="收货人地址:">{{ orderInfo.address.address }}</el-form-item>
          <el-form-item label="订单备注:">{{ orderInfo.desc ? orderInfo.desc : '客户未填写备注' }}</el-form-item>
          <el-form-item label="下单时间:">{{ orderInfo.created_at }}</el-form-item>
          <el-form-item label="订单状态:">
            <el-tag
              :color="orderStatus(orderInfo.status).color"
              style="color:#ffffff;"
            >
              {{ orderStatus(orderInfo.status).name }}
            </el-tag>
          </el-form-item>
        </el-form>
        <p>商品详情:</p>
        <ul class="orderGoodsList">
          <li
            v-for="item in orderInfo.ordergoods"
            :key="item.id"
            class="orderGoodsItem"
          >
            <div class="orderGoodsHeader">
              <el-image
                :src="item.imgurl"
                fit="cover"
                style="width:60px;height:60px;margin-right:15px;"
              />
              <p>{{ item.goodsname }}</p>
            </div>
            <div
              v-for="(btem, i) in item.goodssku"
              :key="i"
              class="orderGoodsSku"
            >
              <p>{{ `${btem.type}+${btem.size}` }}</p>
              <p>数量: {{ btem.num }}件</p>
              <p>总价: {{ Number(btem.price)*Number(btem.num) }}</p>
            </div>
          </li>
        </ul>
      </div>
    </el-drawer>
  </div>
</template>

<script>
// api
import {
  getList,
  setSend,
  exportOrder
} from '@/api/order/next'
// 订单状态
import {
  orderStatus
} from '@/filters/common'

import ChangeAddress from './components/ChangeAddress'

export default {
  components: {
    ChangeAddress
  },
  data() {
    return {
      listQuery: {
        search_name: '',
        page_index: 1,
        page_size: 20,
        time: ''
      },
      table: [],
      tableTotal: 0,
      visible: {
        address: false,
        goods: false
      },
      update: {
        address: {}
      },
      orderInfo: {
        ordersn: '',
        name: '',
        desc: '',
        ordergoods: [],
        address: {
          username: '',
          mobile: '',
          address: ''
        }
      },
      loadingFull: false,
      downloadLoading: false
    }
  },
  created() {
    this.orderStatus = orderStatus
    this.getList()
  },
  methods: {
    // 获取代理订单列表
    async getList() {
      this.loadingFull = true
      try {
        const res = await getList(this.listQuery)
        const { message, code } = res
        if (code === 200) {
          const { data } = res
          const { list, total } = data
          this.tableTotal = total
          this.table = list
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`获取订单列表失败:${e}`)
      }
      this.loadingFull = false
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
      this.getList()
    },
    // 确认发货
    handleSetSend(row) {
      const { id, manual_ordersn } = row
      this.$confirm(`确认将订单${manual_ordersn}发货?`, '确认发货', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.setSend(id)
      })
    },
    // 确认发货
    async setSend(id) {
      try {
        const res = await setSend({ id })
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.getList()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`订单列表确认发货失败:${e}`)
      }
    },
    // 更改收货人信息
    handleUpdataAddress(row) {
      const { address } = row
      this.update.address = address
      this.visible.address = true
    },
    // 查看订单全部商品
    handleSeeAllGoods(row) {
      this.orderInfo = row
      this.visible.goods = true
    },
    // 导出
    async exportOrder() {
      this.loadingFull = true
      try {
        const res = await exportOrder(this.listQuery)
        const { code, message } = res
        if (code === 200) {
          const { data } = res
          if (data.length < 1) {
            this.$message.error('没有数据哦!!!')
            return false
          }
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = ['订单编号', '下单时间', '订单状态', '代理公司昵称', '数量合计', '订单总额', '收货人', '联系方式', '收货地址', '订单备注', '下单人', '发单人', '订单类型', '是否为原始订单', '是否为手动订单']
            const filterVal = ['ordersn', 'created_at', 'order_status', 'crown_nickname', 'num', 'price', 'receive_name', 'receive_mobile', 'receive_address', 'receive_remark', 'set_nickname', 'get_nickname', 'order_type', 'is_old', 'is_hand']
            data.map(item => {
              item.order_status = orderStatus(item.status).name
              item.crown_nickname = item.crown.nickname
              item.receive_name = item.address.username
              item.receive_mobile = item.address.mobile
              item.receive_address = item.address.address
              item.receive_remark = item.desc
              item.set_nickname = item.user.nickname
              item.get_nickname = item.agent.nickname
              item.order_type = item.is_turn === 0 ? '没有转单' : (item.is_turn === 1 ? '全部转单' : '部分转单')
              item.is_old = item.turn_is === 0 ? '是' : '否'
              item.is_hand = item.is_manual === 0 ? '是' : '否'
            })
            const dataVal = this.formatJson(filterVal, data)
            excel.export_json_to_excel({
              header: tHeader,
              data: dataVal,
              filename: `公司代发订单数据`,
              autoWidth: true,
              bookType: 'xlsx'
            })
            this.loadingFull = false
          })
        } else {
          this.$message.error(message)
          this.loadingFull = false
        }
      } catch (e) {
        console.log(`导出公司代发订单失败: ${e}`)
        this.loadingFull = false
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    }
  }
}
</script>

<style lang="scss" scoped>
  .infoList{
    list-style: none;
    padding: 0;
    margin: 0;

    p{
      margin: 0;
    }

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

      .info_lebel{
        width: 60px;
        text-align: right;
      }

      .info_val{
        width: calc(100% - 70px);
        padding-left: 10px;
        text-align: left;
      }
    }
  }
  .goodsList{
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    p{
      margin: 0;
    }
    .goodsItem{
      display: flex;
      width: 100%;
      justify-content: flex-start;
      border-bottom: 1px solid #ccc;
      margin-bottom: 5px;
      padding: 5px 0;
      &:nth-last-of-type(1){
        border-bottom: none;
      }
      .goodsMian{
        display: flex;
        justify-content: space-around;
        flex-direction: column;
      }
      .goodsImg{
        display: block;
        width: 65px;
        height: 65px;
        margin-right: 10px;
      }
    }
  }
  .orderInfo{
    padding: 0 20px;
    .el-form-item {
      margin-bottom: 0px;
    }
    .orderGoodsList{
      list-style: none;
      padding-left: 20px;
    }
    .orderGoodsItem{
      margin-bottom: 20px;
    }
    .orderGoodsHeader{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 15px;
    }
    .orderGoodsSku{
      font-size: 12px !important;
      color: #333 !important;
      display: flex;
      justify-content: space-around;
      align-items: center;
      p{
        width: calc(100% / 3);
        margin: 0;
        margin-bottom: 8px;
      }
    }
  }
</style>
