<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="adminName" name="adminName" :label="$t('device.merchantNameLabel')"
            :placeholder="$t('device.merchantNamePlaceholder')" />
          <!-- 公司平台 -->
          <div v-if="isShowCompany()">
            <van-field label-width="86" v-model="companyTypeText" is-link readonly :label="$t('device.companyTypeLabel')"
              :placeholder="$t('device.companyTypePlaceholder')" @click="companyTypeShow = true" class="field" />
            <van-popup v-model:show="companyTypeShow" round position="bottom">
              <van-cascader v-model="companyType" :title="$t('device.companyTypePlaceholder')"
                :options="companyTypeOptions" @close="companyTypeShow = false" @finish="companyTypeFinish" />
            </van-popup>
          </div>
          <!-- <van-field
            v-model="areaName"
            name="areaName"
            label="设备所在地"
            :placeholder="'请输入设备所在地'"
          /> -->
          <!-- 设备类型、设备机型 -->
          <van-row>
            <van-col span="12">
              <van-field label-width="66" 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 label-width="66" 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 label-width="66" 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 label-width="66" 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 class="clearBtn" span="5" round plain type="primary" style="height: 2em; padding: 0 2em;"
              @click="registerClick">{{ $t('device.emptyingConditions') }}</van-button>
            <van-button class="selectBtn" 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, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { getLoginUser, styleUrl } from "../../common/js/utils";
import { Api_getLabelList } from "../../service/labelMan";


export default {
  setup(prop, context) {
    const { t } = useI18n();
    const sheetShow = ref(false);
    const clientId = ref(''); // 设备唯一码_设备编号
    const equipmentName = ref(''); // 设备名称_机器名
    const adminName = ref(''); // 商家名
    const areaName = ref(''); // 设备所在地_地址名
    const machineType = ref(''); // 设备类型
    const machineTypeText = ref(''); // 设备类型 - 页面显示
    const machineTypeShow = ref(false); // 设备类型级联状态
    const companyType = ref(''); // 公司平台
    const deviceGroup = ref(''); // 设备分组
    const companyTypeText = ref(''); // 公司平台 - 页面显示
    const deviceGroupText = ref(''); // 设备分组 - 页面显示
    const companyTypeShow = ref(false); // 公司平台级联状态
    const deviceGroupShow = ref(false); // 设备分组级联状态
    const user = getLoginUser(); // 获取登录用户
    const machineTypeOptions = ref([
      {
        text: t('device.spunSugar'),
        value: '0',
      },
      {
        text: t('device.popcorn'),
        value: '1',
      },
      {
        text: t('device.iceCream'),
        value: '2',
      }
    ]); // 设备类型级联选项
    const companyTypeOptions = ref([
      {
        text: t('device.sz'),
        value: '0',
      },
      {
        text: t('device.sc'),
        value: '1',
      }
    ]);
    const deviceGroupOptions = ref([]);
    const machineTypeFinish = ({ selectedOptions }) => {
      machineTypeShow.value = false;
      machineTypeText.value = selectedOptions.map((option) => option.text).join('/');
    }; // 设备类型级联选择

    const companyTypeFinish = ({ selectedOptions }) => {
      companyTypeShow.value = false;
      companyTypeText.value = selectedOptions.map((option) => option.text).join('/');
    }; // 公司平台级联选择

    const equimentType = ref(''); // 设备机型
    const equimentTypeText = ref(''); // 设备机型 - 页面显示
    const equimentTypeShow = ref(false); // 设备机型级联状态
    const equimentTypeOptions = ref([
      {
        text: 'SC330',
        value: 'MG330',
      },
      {
        text: 'SC320',
        value: 'MG320',
      },
      {
        text: 'SI320',
        value: 'SI320',
      }
      // {
      //   text: 'SC301',
      //   value: 'MG301',
      // },
      // {
      //   text: 'SC280',
      //   value: 'MG280',
      // },
      // {
      //   text: 'P30',
      //   value: 'P30',
      // }
    ]); // 设备机型级联选项
    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: false,
      }
    ]); // 设备状态级联选项
    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,
        adminName: adminName.value,
        areaName: areaName.value,
        machineType: machineType.value,
        companyType: companyType.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 = '';
      adminName.value = '';
      areaName.value = '';
      machineType.value = '';
      machineTypeText.value = '';
      companyType.value = '';
      companyTypeText.value = '';
      deviceGroup.value = '';
      deviceGroupText.value = '';
      equimentType.value = '';
      equimentTypeText.value = '';
      eqeStatus.value = '';
      eqeStatusText.value = '';
      isUsing.value = '';
      isUsingText.value = '';
      payType.value = '';
      payTypeText.value = '';
      channel.value = '';
      channelText.value = '';
    };

    onMounted(() => {
      // 获取标签分组
      getLabelList();
    });
    // 获取设备标签
    const getLabelList = async () => {
      // console.log("adminId>>>>", user.id);
      Api_getLabelList({
        adminId: user.id,
        type: "1"
      }).then((res) => {
        const { data } = res.data;
        deviceGroupOptions.value = data.map((label) => ({
          text: label.name,
          value: label.id,
        }));
      })
    }

    // 加载样式
    styleUrl('deviceSearch');

    // 是否管理员
    const isShowCompany = () => { return (user && user.type === 0); }

    return {
      sheetShow,

      clientId,
      equipmentName,
      adminName,
      areaName,

      machineType,
      machineTypeText,
      machineTypeShow,
      machineTypeOptions,
      machineTypeFinish,

      equimentType,
      equimentTypeText,
      equimentTypeShow,
      equimentTypeOptions,
      equimentTypeFinish,

      isShowCompany,
      companyType,
      companyTypeText,
      companyTypeShow,
      companyTypeOptions,
      companyTypeFinish,

      deviceGroup,
      deviceGroupText,
      deviceGroupShow,
      deviceGroupOptions,

      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></style>
