<template>
  <Page name="order-filter" flank>
    <template #content>
      <u-form :model="searchForm" ref="uForm" labelWidth="100">
        <u-form-item label="订单号"><u-input v-model="searchForm.orderCode" /></u-form-item>
        <u-form-item label="内部单号"><u-input v-model="searchForm.customerOrderCodes" /></u-form-item>
      </u-form>
    </template>
    <template #footer>
      <view class="footer">
        <view class="reset" @click="resetChange">重置</view>
        <view class="inquiry" @click="inquiryChange">查询</view>
      </view>
    </template>
  </Page>
</template>

<script>
export default {
  name: 'settlement-filter',
  props: {
    searchModel: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      searchForm: {
        orderCode: '', // 订单号
        customerOrderCodes: '', // 内部订单编号
      },
    };
  },
  onLoad(option) {
    Object.keys(option).forEach(i => {
      this.searchForm[i] = option[i];
    });
  },
  methods: {
    // 重置
    resetChange() {
      this.searchForm = {
        orderCode: '', // 订单号
        customerOrderCodes: '', // 内部订单编号
        startCityCode: '',
        startCityName: '',
        endCityCode: '',
        endCityName: '',
        projectCode: '',
        projectName: '',
        feeType: '',
        feeTypeName: '',
      };
    },
    // 查询
    inquiryChange() {
      this.getOpenerEventChannel().emit('refreshData', this.searchForm);
      setTimeout(() => uni.navigateBack(), 500);
    },
  },
};
</script>

<style lang="scss">
.page-order-filter {
  &__footer {
    background: $color-white;
    .footer {
      display: flex;
      justify-content: space-between;
      .reset {
        text-align: center;
        width: 236upx;
        height: 82upx;
        line-height: 82upx;
        margin-right: 20upx;
        background: #dfebff;
        border-radius: 14upx;
        font-size: 30upx;
        font-weight: 500;
        color: $color-primary;
      }
      .inquiry {
        text-align: center;
        width: 450upx;
        height: 82upx;
        line-height: 82upx;
        background: $color-primary;
        border-radius: 14upx;
        font-size: 30upx;
        font-weight: 500;
        color: #ffffff;
      }
    }
  }
}
</style>
