<template>
  <SimpleList ref="list" v-bind="$attrs" :extraHeight="123" :params="queryParams" :queryMethod="pageListOrder()" propKey="orderNo" subKey="orderType" @change="$emit('change', $event)">
    <template slot="header">
      <div class="order-select">
        <el-select v-if="showCustType" style="flex: 1;" v-model="queryParams.orderType" placeholder="选择订单类型" clearable @change="handleSearch">
          <el-option v-for="dict in dict.type.customer_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
        <!-- <el-checkbox v-if="showAmortize" style="margin-left: 20px;margin-right: 20px;" v-model="queryParams.isBalance" true-label="1" false-label="0" @change="handleSearch">{{queryParams.isBalance === '1'?'有结算记录':'无结算记录'}}</el-checkbox> -->
      </div>
      <el-input v-model="queryParams.keyword" style="margin-bottom: 10px;margin-top: 5px;" placeholder="搜索订单号/客户名称" clearable
        @keyup.enter.native="handleSearch">
        <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
      </el-input>
    </template>
    <el-table-column label="订单号" align="center" prop="orderNo" />
    <el-table-column label="货物名称" align="center" prop="cargoInfo" />
    <el-table-column label="托运/承运" align="center" prop="orderType" >
      <template slot-scope="scope">
          <dict-tag :options="dict.type.customer_type" :value="scope.row.orderType" />
        </template>
    </el-table-column>
    <el-table-column label="运价" align="center" prop="freightRates" />
    <el-table-column label="客户名称" align="center" prop="custName" />
  </SimpleList>
</template>

<script>
import { allPageListOrder } from "@/api/tm/order";
import SimpleList from "@/views/tm/components/SimpleList";

export default {
  name: "OrderList",
  dicts: ['customer_type'],
  components: { SimpleList },
  props: {
    orderType: {
      type: String,
      default: ''
    },
    // 展示客户类型
    showCustType: {
      type: Boolean,
      default: true
    },
    // 展示是否结算
    showAmortize: {
      type: Boolean,
      default: true
    },
    // 订单状态，1完成 0未完成
    status: {
      type: String,
      default: ''
    }
  },
  watch: {
    orderType: {
      handler(val) {
        this.queryParams.orderType = val;
      },
      immediate: true
    },
    status: {
      handler(val) {
        this.queryParams.status = val;
      },
      immediate: true
    }
  },
  data() {
    return {
      // orderDate、status
      queryParams: {
        keyword: '',
        custName: '',
        orderType: '',
        isBalance: '',
        orderDate: null,
        status: this.status,
      }
    };
  },
  methods: {
    pageListOrder() {
      return allPageListOrder;
    },
    handleSearch(e) {
      this.$nextTick(() => {
        this.$refs.list.handleSearch(e);
      });
    },
    clearSelection() {
      this.$refs.list.clearSelection();
    }
  }
};
</script>
<style scoped lang="scss">
  .order-select {
    display: flex;
    align-items: center;
  }
</style>