<template>
  <my-page :left-style="{width: '50%'}">
    <template slot="header">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
        <el-form-item label="订单状态" prop="status">
          <el-select style="width: 100px;" v-model="queryParams.status" placeholder="请选择订单状态" clearable>
            <el-option label="未完成" value="0" />
            <el-option label="已完成" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="订单" prop="orderNo">
          <OrderInput width="160px" size="small" orderType="1" placeholder="请选择订单" :value="queryParams.orderNo" :label="queryParams.orderNo"
            @change="handleOrderChange"></OrderInput>
        </el-form-item>
        <el-form-item label="货物名称" prop="cargoName">
          <el-input v-model="queryParams.cargoName" style="width: 140px;" placeholder="请输入货物名称" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="开始时间" prop="beginDate">
          <el-date-picker v-model="queryParams.beginDate" style="width: 140px;" value-format="yyyy-MM-dd" type="date" placeholder="请选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endDate">
          <el-date-picker v-model="queryParams.endDate" style="width: 140px;" value-format="yyyy-MM-dd" type="date" placeholder="请选择结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template slot="left">
      <TransPlan ref="transPlan" :extraHeight="100" style="height: 100%;" @select="handleTransPlanChange"></TransPlan>
    </template>
    <TransCargoPlan ref="transCargoPlan" :extraHeight="100" :plans="plans" style="height: 100%;margin-left: 4px;" @change="handleTransCargoPlanChange"></TransCargoPlan>
  </my-page>
</template>

<script>
import TransPlan from './components/TransPlan.vue';
import TransCargoPlan from './components/TransCargoPlan.vue';
import OrderInput from '@/views/tm/components/OrderInput';

export default {
  name: "Plan",
  components: {
    TransPlan,
    TransCargoPlan,
    OrderInput,
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        orderId: null,
        orderNo: null,
        itemName: null,
        cargoName: null,
        beginDate: null,
        endDate: null,
        status: '0', //默认0未完成
      },
      plans: [],
      cargoPlans: [],
    };
  },
  created() {
    this.$watch('$route', this.routerChange);
    this.queryParams.orderNo = this.$route.query.orderNo;
  },
  mounted() {
    this.handleQuery();
  },
  methods: {
    routerChange(to, from) {
      if (to.path !== '/tm/carriage_order/plan') {
        return;
      }
      // 参数有变化重新搜索
      if (to.query.orderNo && to.query.orderNo !== this.queryParams.orderNo) {
        this.queryParams.orderNo = to.query.orderNo;
        this.$nextTick(() => {
          this.handleQuery();
        });
      }
    },
    handleOrderChange(orders) {
      const order = orders[0] || {};
      this.queryParams.orderId = order.id;
      this.queryParams.orderNo = order.orderNo;
      this.handleQuery();
    },
    handleTransPlanChange(plan) {
      this.plans = plan ? [plan]:[];
      this.$nextTick(() => {
        this.$refs.transCargoPlan.handleQuery(this.queryParams);
      });
    },
    handleTransCargoPlanChange(cargoPlans) {
      this.cargoPlans = cargoPlans;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$refs.transPlan.handleQuery(this.queryParams);
      this.$refs.transCargoPlan.handleQuery(this.queryParams);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
};
</script>
<style scoped>
</style>