<template>
  <!-- 搜索弹窗 -->
  <div class="SearchPop flex-col">
    <van-action-sheet v-model:show="sheetShow" :closeable='false' title="输入以下任意信息进行搜索">

      <div class="content">
        <van-form @submit="onSubmit">
          <!-- 挂单编号 -->
          <van-field v-model="orderId" name="orderId" label="挂单编号" placeholder="挂单编号" />

          <!-- 创建时间 -->

          <!-- 挂单类型、挂单状态 -->
          <van-row>
            <!-- 挂单类型 type：1买，2卖-->
            <van-col span="12">
              <van-field label-width="66" v-model="orderTypeText" is-link readonly label="挂单类型" placeholder="请选择挂单类型"
                @click="orderTypeShow = true" class="field" />
              <van-popup v-model:show="orderTypeShow" round position="bottom">
                <van-cascader v-model="orderType" title="请选择挂单类型" :options="orderTypeOptions"
                  @close="orderTypeShow = false" @finish="orderTypeFinish" />
              </van-popup>
            </van-col>

            <van-col span="12">
              <van-field label-width="66" v-model="orderStatusText" is-link readonly label="挂单状态" placeholder="请选择挂单状态"
                @click="orderStatusShow = true" class="field" />
              <van-popup v-model:show="orderStatusShow" round position="bottom">
                <van-cascader v-model="orderStatus" title="请选择挂单状态" :options="orderStatusOptions"
                  @close="orderStatusShow = false" @finish="orderStatusFinish" />
              </van-popup>
            </van-col>
          </van-row>

          <van-row justify="space-around" style="padding: 2em;">
            <van-button class="clearBtn" span="5" round plain type="primary" style="height: 2em; padding: 0 2em;"
              @click="registerClick">清空条件</van-button>
            <van-button class="selectBtn" span="5" round type="primary" style="height: 2em; padding: 0 2em;"
              native-type="submit">点击搜索</van-button>
          </van-row>
        </van-form>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { styleUrl } from "../../common/js/utils";

export default {
  setup(prop, context) {

    const sheetShow = ref(false);

    const orderId = ref('');

    const orderType = ref(''); // 挂单类型
    const orderTypeText = ref(''); // 挂单类型 - 页面显示
    const orderTypeShow = ref(false); // 挂单类型级联状态
    const orderTypeOptions = ref([ // 挂单类型级联选项，挂单类型：1买，2卖
      {
        text: '买',
        value: '1',
      }, {
        text: '卖',
        value: '2',
      }
    ]);
    const orderTypeFinish = ({ selectedOptions }) => { // 挂单类型级联选择
      orderTypeShow.value = false;
      orderTypeText.value = selectedOptions.map((option) => option.text).join('/');
    };

    const orderStatus = ref(''); // 挂单状态
    const orderStatusText = ref(''); // 挂单状态 - 页面显示
    const orderStatusShow = ref(false); // 挂单状态级联状态
    const orderStatusOptions = ref([ // 挂单状态级联选项：0过期，1生效，2撤单，3全部成交，4部分成交
      {
        text: '过期',
        value: '0',
      }, {
        text: '匹配中',
        value: '1',
      }, {
        text: '撤单',
        value: '2',
      }, {
        text: '匹配成功',
        value: '3',
      }, {
        text: '部分匹配成功',
        value: '4',
      }
    ]);
    const orderStatusFinish = ({ selectedOptions }) => { // 挂单类型级联选择
      orderStatusShow.value = false;
      orderStatusText.value = selectedOptions.map((option) => option.text).join('/');
    };


    // 父组件页面触发展示及初始化
    const showSearch = () => { sheetShow.value = true; };

    // 提交搜索表单触发搜索
    const onSubmit = () => {
      const searchParam = {
        id: orderId.value,

        type: orderType.value,
        status: orderStatus.value,
      };
      context.emit('search', searchParam);
      sheetShow.value = false;
    }
    // 清空条件
    const registerClick = () => {
      orderId.value = '',
      orderType.value = '';
      orderTypeText.value = '';
      orderStatus.value = '';
      orderStatusText.value = '';
    };

    onMounted(() => {

    });

    // 加载样式
    styleUrl('SearchPop');
    return {
      orderId,
      sheetShow,

      orderType,
      orderTypeText,
      orderTypeShow,
      orderTypeOptions,
      orderTypeFinish,

      orderStatus,
      orderStatusText,
      orderStatusShow,
      orderStatusOptions,
      orderStatusFinish,

      showSearch,
      registerClick,
      onSubmit,
    };
  },
  components: {},
};
</script>

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