<template>
  <Page name="order-filter" flank>
    <template #content>
      <u-form :model="searchForm" ref="uForm" labelWidth="100">
        <view class="card">
          <u-form-item label="订单号"><u-input v-model="searchForm.code" placeholder="请输入" /></u-form-item>
        </view>
        <view class="card">
          <u-form-item label="司机姓名"><u-input v-model="searchForm.driverName" placeholder="请输入" /></u-form-item>
        </view>
        <view class="card">
          <u-form-item label="司机手机号"><u-input v-model="searchForm.driverMobile" placeholder="请输入" /></u-form-item>
        </view>
        <view class="card">
          <u-form-item label="车牌号"><u-input v-model="searchForm.vehicleLicenseNum" placeholder="请输入" /></u-form-item>
        </view>
        <view class="card">
          <u-form-item label="存在未处理异常" labelWidth="130">
            <u-radio-group v-model="searchForm.unHandledExceptionFlag">
              <u-radio v-for="(item, index) in radioList" :key="index" :name="item.value">
                {{ item.text }}
              </u-radio>
            </u-radio-group>
          </u-form-item>
        </view>
        <view class="card">
          <u-form-item label="是否已签单" labelWidth="130">
            <u-radio-group v-model="searchForm.receiptFlag">
              <u-radio v-for="(item, index) in radioList" :key="index" :name="item.value">
                {{ item.text }}
              </u-radio>
            </u-radio-group>
          </u-form-item>
        </view>
        <view class="card">
          <u-form-item label="支付状态" @click="chosePayStatus">
            <u-input v-model="searchForm.payStatusName" border="none" suffix-icon="arrow-right" placeholder="请选择" disabledColor="#ffffff" disabled />
          </u-form-item>
        </view>
      </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>
import { urlParam } from '@/utils/param';
export default {
  name: 'order-filter',
  props: {
    searchModel: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      searchForm: {
        code: '', //
        driverName: '',
        driverMobile: '', // 客户
        vehicleLicenseNum: '',
        unHandledExceptionFlag: '', // 存在异常
        receiptFlag: '', // 是否已签单
        payStatus: '', // 支付状态
        payStatusName: '', //
      },
      radioList: [
        { text: '是', value: 'true' },
        { text: '否', value: 'false' },
      ],
    };
  },
  onLoad(option) {
    Object.keys(option).forEach(i => {
      this.searchForm[i] = option[i];
    });
  },
  methods: {
    // 重置
    resetChange() {
      this.searchForm = {
        code: '', //
        driverName: '',
        driverMobile: '', // 客户
        vehicleLicenseNum: '',
        unHandledExceptionFlag: '', // 存在异常
        startCityCode: '',
        startCityName: '',
        endCityCode: '',
        endCityName: '',
        projectCode: '',
        projectName: '',
        receiptFlag: '', // 是否已签单
        payStatus: '', // 支付状态
        payStatusName: '', //
      };
    },
    // 查询
    inquiryChange() {
      this.getOpenerEventChannel().emit('refreshData', this.searchForm);
      setTimeout(() => uni.navigateBack(), 500);
    },
    chosePayStatus() {
      uni.$once('select-dict', option => {
        this.searchForm.payStatus = option.valueCode;
        this.searchForm.payStatusName = option.valueName;
      });
      uni.navigateTo({
        url: `/pages/global/search-dict${urlParam({
          title: '支付状态',
          dict: 'ONLINE_FREIGHT_ORDER_PAY_PROCESS',
        })}`,
      });
    },
  },
};
</script>

<style lang="scss">
.page-order-filter {
  &__content {
    .card {
      background-color: $color-white;
      padding-left: $padding-xs;
      padding-right: $padding-xs;
      border-radius: $radius-md;
      box-shadow: $shadow-normal;
      margin-bottom: $padding-sm;
    }
  }
  &__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>
