<!--
  @description:订单管理列表/供应商的订单
  @Modifier：haoFx
  @routerPath: /shopmall/order/
  @date：  2019/10/9-13:46
-->
<template>
  <div>
    <div class="shopmall-page-title">
      {{ titleName }}
    </div>
    <div class="search-content clearfix">
      <section class="fl">
        <el-form ref="orderFrom" :inline="true" :model="orderFrom">
          <el-form-item label="采购单位" prop="buyerDepartName">
            <el-input v-model.trim="orderFrom.buyerDepartName" />
          </el-form-item>
          <el-form-item label="下单时间" prop="date">
            <el-date-picker
              v-model="orderFrom.date"
              value-format="yyyy-MM-dd"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item label="审核状态" prop="auditStatus">
            <el-select v-model="orderFrom.auditStatus" placeholder="--请选择--">
              <el-option
                v-for="item in ground"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </section>
      <div class="fr">
        <el-button type="purple" @click.native="onSearch">
          搜索
        </el-button>
        <el-button type="gray" @click.native="resetList">
          重置
        </el-button>
      </div>
    </div>
    <div class="shopmall-view">
      <el-table
        :header-cell-style="{color:'#666666'}"
        :data="orderList"
        :row-class-name="tableRowClassName"
        class="el-table--striped-border"
        style="font-size: 12px;font-family:'MicrosoftYaHei';text-align: left;color: #333333"
      >
        <el-table-column label="序号" min-width="60" align="center" type="index" />
        <el-table-column prop="orderNo" label="订单编号" min-width="200" />
        <el-table-column prop="buyerDepartName" label="采购单位" min-width="160">
          <template slot-scope="{row}">
            <span style="color:#00AACA;cursor: pointer;">{{ row.buyerDepartName }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="orderAmount" label="订单金额(元)" min-width="120" />
        <el-table-column prop="createTime" label="下单时间" min-width="160">
          <template slot-scope="{row}">
            <span style="color:#999999;cursor: pointer;">{{ row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="auditStatus" label="审核状态" align="center" min-width="100">
          <template slot-scope="{row}">
            <span v-if="row.auditStatus === '审核通过'" style="color:#00AACA;cursor: pointer;">{{ row.auditStatus }}</span>
            <span v-else style="color:#FF6600;cursor: pointer;">{{ row.auditStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" align="center" min-width="100">
          <template slot-scope="{row}">
            <span v-if="row.orderStatus === '待收货' || row.orderStatus === '交易成功'" style="color:#00AACA;cursor: pointer;">{{ row.orderStatus }}</span>
            <span v-else style="color:#FF6600;cursor: pointer;">{{ row.orderStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="120" align="center">
          <template slot-scope="scope">
            <el-button
              style="color: #00AACA"
              type="text"
              size="mini"
              @click.native="seeOrderDetail(scope.row)"
            >
              [查看]
            </el-button>
            <span v-if="roleCode!=='shopPlatAdmin'" style="margin-left:10px;">
              <el-button
                v-if="scope.row.auditStatus === '审核通过'&&scope.row.orderStatus === '待发货'"
                style="color: #00AACA"
                type="text"
                size="mini"
                @click.native="sendOrder(scope.row)"
              >
                [发货]
              </el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页组件-->
    <pagination :pagination-data="paginationData" shopmall-pagination="shopmall-pagination" @change="initData" />
    <look-order-details v-if="childenData.dialog" :childen-data="childenData" />
    <sendOrderDialog ref="sendDialog" @repload="repload" />
  </div>
</template>
<script>
// api
import { supplierOrderList } from '@/api/shoppingmall/order.js'
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页
import LookOrderDetails from './lookOrderDetails'
import sendOrderDialog from './sendOrder-dialog'
/* 公用方法*/
import { filterObj } from '@/assets/js/utils'// 常用方法
export default {
  components: {
    LookOrderDetails: LookOrderDetails,
    sendOrderDialog,
    pagination
  },
  data() {
    return {
      childenData: {
        dialog: false,
        id: ''
      },
      titleName: '',
      orderFrom: {
        buyerDepartName: '', // 采购单位，
        createStartDate: '', //
        createEndDate: '', //
        pageNo: 1, // 当前页
        pageSize: 10, // 每页数目条数
        status: '00', // 类型,
        auditStatus: null,
        date: ''
      },
      total: 1,
      orderList: [],
      ground: [{
        value: '00',
        label: '待审核'
      }, {
        value: '01',
        label: '审核通过'
      }, {
        value: '02',
        label: '审核不通过'
      }],
      // 分页数据
      paginationData: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      roleCode: ''
    }
  },
  created() {
    this.initData()
    this.roleCode = this.$store.getters.info.currentRol.roleCode
  },
  methods: {
    initData() {
      const params = this.getQueryParams()// 查询条件
      if (this.$route.meta.path === 'orderList') {
        this.titleName = '订单管理'
      } else {
        this.titleName = '订单列表'
      }
      supplierOrderList(params).then((res) => {
        if (res.header.ret === '0') {
          this.orderList = res.data.records
          this.paginationData.total = res.data.total
        }
      }).catch((err) => {
        throw new Error('获取订单列表数据失败' + err)
      })
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.orderFrom)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      param.createStartDate = this.orderFrom.date[0]
      param.createEndDate = this.orderFrom.date[1]
      const array = JSON.parse(JSON.stringify(param))
      delete array.date
      return filterObj(array)
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    /**
       * 查看
       */
    seeOrderDetail(row) {
      if (this.$route.meta.path === 'orderList') {
        this.childenData = {
          dialog: true,
          type: '01', // 01 新增
          id: row.id
        }
      } else {
        this.$router.push({
          path: '/personalCenter/orderShopDetail',
          query: {
            orderId: row.id,
            supplierOrderId1: row.supplierOrderId,
            supplierOrderId: row.supplierOrderId,
            // row.sendStatus 00:未拆单 101:拆单
            status: row.sendStatus === '00' ? '00' : '11',
            from: '/personalCenter/' + this.$route.meta.path
          }
        })
      }
      // this.$router.push({ path: '/shopmall/lookOrderDetails', query: { orderId: id }})
    },
    // 搜索
    onSearch() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      // 获取列表信息
      this.initData()
    },
    // 重置
    resetList() {
      this.$refs.orderFrom.resetFields()
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      // 获取列表信息
      this.initData()
    },
    // 发货
    sendOrder(row) {
      this.$refs.sendDialog.open({
        visible: true,
        id: row.id
      })
    },
    repload() {
      this.paginationData.pageNo = 1
      this.initData()
    }
  }
}
</script>

<style scoped lang="less">
</style>
