<template>
  <!-- 设备列表 - 搜索弹窗 -->
  <div class="deviceSearch flex-col">
    <van-action-sheet v-model:show="sheetShow" :closeable='false' :title="$t('device.enterAnyInformationToSearch')">
      <div class="content">
        <van-form @submit="onSubmit">
          <van-field
            v-model="clientId"
            name="clientId"
            :label="$t('device.equipmentNoLabel')"
            :placeholder="$t('device.equipmentNoPlaceholder')"
          />
          <van-field
            v-model="equipmentName"
            name="equipmentName"
            :label="$t('device.equipmentNameLabel')"
            :placeholder="$t('device.equipmentNamePlaceholder')"
          />
          <van-field
            v-model="adminUserName"
            name="adminUserName"
            :label="$t('device.merchantNameLabel')"
            :placeholder="$t('device.merchantNamePlaceholder')"
          />
          <!-- <van-field
            v-model="areaName"
            name="areaName"
            label="设备所在地"
            :placeholder="'请输入设备所在地'"
          /> -->
          <!-- 设备类型、设备机型 -->
          <van-row>
            <van-col span="12">
              <van-field
                v-model="machineTypeText"
                is-link
                readonly
                :label="$t('device.equipmentTypeLabel')"
                :placeholder="$t('device.equipmentTypePlaceholder')"
                @click="machineTypeShow = true"
                class="field"
              />
              <van-popup v-model:show="machineTypeShow" round position="bottom">
                <van-cascader
                  v-model="machineType"
                  :title="$t('device.equipmentTypePlaceholder')"
                  :options="machineTypeOptions"
                  @close="machineTypeShow = false"
                  @finish="machineTypeFinish"
                />
              </van-popup>
            </van-col>
            <van-col span="12">
              <van-field
                v-model="equimentTypeText"
                is-link
                readonly
                :label="$t('device.equipmentModelLabel')"
                :placeholder="$t('device.equipmentModelPlaceholder')"
                @click="equimentTypeShow = true"
                class="field"
              />
              <van-popup v-model:show="equimentTypeShow" round position="bottom">
                <van-cascader
                  v-model="equimentType"
                  :title="$t('device.equipmentModelPlaceholder')"
                  :options="equimentTypeOptions"
                  @close="equimentTypeShow = false"
                  @finish="equimentTypeFinish"
                />
              </van-popup>
            </van-col>
          </van-row>
          <!-- 开机状态、设备状态 -->
          <van-row>
            <van-col span="12">
              <van-field
                v-model="eqeStatusText"
                is-link
                readonly
                :label="$t('device.powerOnStatus')"
                :placeholder="$t('device.pleaseSelectThePowerOnStatus')"
                @click="eqeStatusShow = true"
                class="field"
              />
              <van-popup v-model:show="eqeStatusShow" round position="bottom">
                <van-cascader
                  v-model="eqeStatus"
                  :title="$t('device.pleaseSelectThePowerOnStatus')"
                  :options="eqeStatusOptions"
                  @close="eqeStatusShow = false"
                  @finish="eqeStatusFinish"
                />
              </van-popup>
            </van-col>
            <van-col span="12">
              <van-field
                v-model="isUsingText"
                is-link
                readonly
                :label="$t('device.equipmentStatus')"
                :placeholder="$t('device.pleaseSelectTheDeviceStatus')"
                @click="isUsingShow = true"
                class="field"
              />
              <van-popup v-model:show="isUsingShow" round position="bottom">
                <van-cascader
                  v-model="isUsing"
                  :title="$t('device.pleaseSelectTheDeviceStatus')"
                  :options="isUsingOptions"
                  @close="isUsingShow = false"
                  @finish="isUsingFinish"
                />
              </van-popup>
            </van-col>
          </van-row>
          <!-- 支付方式、信道 -->
          <van-row>
            <!-- <van-col span="12">
              <van-field
                v-model="payTypeText"
                is-link
                readonly
                label="支付方式"
                placeholder="请选择支付方式"
                @click="payTypeShow = true"
                class="field"
              />
              <van-popup v-model:show="payTypeShow" round position="bottom">
                <van-cascader
                  v-model="payType"
                  title="请选择支付方式"
                  :options="payTypeOptions"
                  @close="payTypeShow = false"
                  @finish="payTypeFinish"
                />
              </van-popup>
            </van-col> -->
            <!-- <van-col span="12">
              <van-field
                v-model="channelText"
                is-link
                readonly
                label="信道"
                placeholder="请选择信道"
                @click="channelShow = true"
                class="field"
              />
              <van-popup v-model:show="channelShow" round position="bottom">
                <van-cascader
                  v-model="channel"
                  title="请选择信道"
                  :options="channelOptions"
                  @close="channelShow = false"
                  @finish="channelFinish"
                />
              </van-popup>
            </van-col> -->
          </van-row>
          <!-- 操作 -->
          <van-row justify="space-around" style="padding: 2em;">
            <van-button span="5" round plain type="primary" style="height: 2em; padding: 0 2em;" @click="registerClick">{{$t('device.emptyingConditions')}}</van-button>
            <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em;" native-type="submit">{{$t('device.clickSearch')}}</van-button>
          </van-row>
        </van-form>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

export default {
  setup(prop, context) {
    const { t } = useI18n();
    const sheetShow = ref(false);
    const clientId = ref(''); // 设备唯一码_设备编号
    const equipmentName = ref(''); // 设备名称_机器名
    const adminUserName = ref(''); // 商家名
    const areaName = ref(''); // 设备所在地_地址名
    const machineType = ref(''); // 设备类型
    const machineTypeText = ref(''); // 设备类型 - 页面显示
    const machineTypeShow = ref(false); // 设备类型级联状态
    const machineTypeOptions = ref([
      {
        text: t('device.spunSugar'),
        value: '0',
      },
      {
        text: t('device.popcorn'),
        value: '1',
      }
    ]); // 设备类型级联选项
    const machineTypeFinish = ({ selectedOptions }) => {
      machineTypeShow.value = false;
      machineTypeText.value = selectedOptions.map((option) => option.text).join('/');
    }; // 设备类型级联选择

    const equimentType = ref(''); // 设备机型
    const equimentTypeText = ref(''); // 设备机型 - 页面显示
    const equimentTypeShow = ref(false); // 设备机型级联状态
    const equimentTypeOptions = ref([
      {
        text: 'MG320',
        value: 'MG320',
      },
      {
        text: 'MG301',
        value: 'MG301',
      },
      {
        text: 'MG280',
        value: 'MG280',
      }
    ]); // 设备机型级联选项
    const equimentTypeFinish = ({ selectedOptions }) => {
      equimentTypeShow.value = false;
      equimentTypeText.value = selectedOptions.map((option) => option.text).join('/');
    }; // 设备机型级联选择

    const eqeStatus = ref(''); // 开机状态
    const eqeStatusText = ref(''); // 开机状态 - 页面显示
    const eqeStatusShow = ref(false); // 开机状态级联状态
    const eqeStatusOptions = ref([
      {
        text: t('device.startUp'),
        value: '1',
      },
      {
        text: t('device.shutdown'),
        value: '0',
      }
    ]); // 开机状态级联选项
    const eqeStatusFinish = ({ selectedOptions }) => {
      eqeStatusShow.value = false;
      eqeStatusText.value = selectedOptions.map((option) => option.text).join('/');
    }; // 开机状态级联选择

    const isUsing = ref(''); // 设备状态
    const isUsingText = ref(''); // 设备状态 - 页面显示
    const isUsingShow = ref(false); // 设备状态级联状态
    const isUsingOptions = ref([
      {
        text: t('device.enable'),
        value: true,
      },
      {
        text: t('device.deactivate'),
        value: true,
      }
    ]); // 设备状态级联选项
    const isUsingFinish = ({ selectedOptions }) => {
      isUsingShow.value = false;
      isUsingText.value = selectedOptions.map((option) => option.text).join('/');
    }; // 设备状态级联选择

    const payType = ref(''); // 支付方式
    const payTypeText = ref(''); // 支付方式 - 页面显示
    const payTypeShow = ref(false); // 支付方式级联状态
    const payTypeOptions = ref([
      {
        text: '支付方式1',
        value: '0',
      },
      {
        text: '支付方式2',
        value: '1',
      }
    ]); // 支付方式级联选项
    const payTypeFinish = ({ selectedOptions }) => {
      payTypeShow.value = false;
      payTypeText.value = selectedOptions.map((option) => option.text).join('/');
    }; // 支付方式级联选择

    const channel = ref(''); // 信道
    const channelText = ref(''); // 信道 - 页面显示
    const channelShow = ref(false); // 信道级联状态
    const channelOptions = ref([
      {
        text: '个推',
        value: '1',
      },
      {
        text: 'Mq',
        value: '2',
      }
    ]); // 信道级联选项
    const channelFinish = ({ selectedOptions }) => {
      channelShow.value = false;
      channelText.value = selectedOptions.map((option) => option.text).join('/');
    }; // 信道级联选择
    
    // channel 信道
    // 父组件页面触发展示及初始化
    const showSearch = () => { sheetShow.value = true; };
    // 提交搜索表单触发搜索
    const onSubmit = () => {
      const searchParam = {
        clientId: clientId.value,
        equipmentName: equipmentName.value,
        adminUserName: adminUserName.value,
        areaName: areaName.value,
        machineType: machineType.value,
        equimentType: equimentType.value,
        eqeStatus: eqeStatus.value,
        isUsing: isUsing.value,
        payType: payType.value,
        channel: channel.value,
      };
      context.emit('search', searchParam);
      sheetShow.value = false;
    }
    // 清空条件
    const registerClick = () => {
      clientId.value = '';
      equipmentName.value = '';
      adminUserName.value = '';
      areaName.value = '';
      machineType.value = '';
      machineTypeText.value = '';
      equimentType.value = '';
      equimentTypeText.value = '';
      eqeStatus.value = '';
      eqeStatusText.value = '';
      isUsing.value = '';
      isUsingText.value = '';
      payType.value = '';
      payTypeText.value = '';
      channel.value = '';
      channelText.value = '';
    };
    
    return {
      sheetShow,

      clientId,
      equipmentName,
      adminUserName,
      areaName,

      machineType,
      machineTypeText,
      machineTypeShow,
      machineTypeOptions,
      machineTypeFinish,

      equimentType,
      equimentTypeText,
      equimentTypeShow,
      equimentTypeOptions,
      equimentTypeFinish,

      eqeStatus,
      eqeStatusText,
      eqeStatusShow,
      eqeStatusOptions,
      eqeStatusFinish,

      isUsing,
      isUsingText,
      isUsingShow,
      isUsingOptions,
      isUsingFinish,

      payType,
      payTypeText,
      payTypeShow,
      payTypeOptions,
      payTypeFinish,
      
      channel,
      channelText,
      channelShow,
      channelOptions,
      channelFinish,

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

<style lang="less" scoped>
.field .van-field__label { width: auto; }
</style>
