<template>
  <a-row style="margin-bottom: 20px;" justify="space-between">
    <a-col>
      <a-button style="margin-right: 10px;" @click="state.visible = true">
        机场设备绑定码
        <MenuOutlined />
      </a-button>
      <a-popover trigger="hover" v-if="false">
        <template #content>
          <div class="popover">
            <div>
              请使用遥控器连接飞行器后，在“Pilot2首页-云服务-三方云平台”绑定设备。
            </div>
            <div>
              了解更多：
              <span>
                <a>
                  <ReadOutlined />
                  说明书
                </a>
              </span>
            </div>
          </div>
        </template>
        <a style="margin-right: 10px;">
          如何绑定机场？
        </a>
      </a-popover>
      <a-button type="primary" danger :disabled="!selectedRowKeys.length" @click="onClickDelete">
        删除
      </a-button>
    </a-col>
    <a-col>
      <a-form ref="formRef" layout="inline" :model="formModel" :colon="false">
        <a-form-item name="device_type">
          <a-select style="width: 200px;" placeholder="设备型号" v-model:value="formModel.device_type">
            <a-select-option v-for="item in state.deviceModelList" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="search_info">
          <a-input style="width: 200px;" placeholder="设备SN、设备名称" v-model:value="formModel.search_info" />
        </a-form-item>
        <a-form-item>
          <a-button style="margin-right: 10px;" @click="handleClickSearch">
            <template #icon>
              <SearchOutlined />
            </template>
          </a-button>
          <a-button @click="handleClickReset">
            <template #icon>
              <ReloadOutlined />
            </template>
          </a-button>
        </a-form-item>
      </a-form>
    </a-col>
  </a-row>
  <a-modal v-model:visible="state.visible" title="设备绑定码" :footer="null">
    <div>
      请在 Pilot2 机场部署流程-云服务配置中，以组织ID和设备绑定码来绑定机场设备。
    </div>
    <div class="modal-item">
      <div class="modal-item-title">
        项目名称
      </div>
      <div>
        {{ state.deviceInfo.name }}
      </div>
    </div>
    <div class="modal-item">
      <div class="modal-item-title">
        设备绑定码
      </div>
      <div>
        {{ state.deviceInfo.code }}
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { ReadOutlined, MenuOutlined, SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
import { apis } from '/@/api/custom';

interface Props {
  selectedRowKeys: string[],
  onClickDelete: () => Promise<any>,
  onClickSearch: (query: any) => Promise<any>,
  onClickReset: (query: any) => Promise<any>,
};

const props = withDefaults(defineProps<Props>(), {

});

const formRef = ref();

const formModel = reactive({
  device_type: undefined,
  search_info: undefined,
})

interface State {
  visible: boolean,
  deviceInfo: {
    name: string,
    code: string,
  },
  deviceModelList: {
    value: string,
    label: string,
  }[],
};

const state: State = reactive({
  visible: false,
  deviceInfo: {
    name: '',
    code: '',
  },
  deviceModelList: [],
})

onMounted(async () => {
  try {
    const res = await apis.fetchDeviceModel();
    const list = res.data.map((item: any) => {
      return {
        value: item.device_value,
        label: item.device_name,
      }
    })
    state.deviceModelList = list;
  } catch (e) {
    console.error(e);
  }
})

// 设备绑定码弹出层
watch(() => state.visible, async (value) => {
  if (value) {
    const res = await apis.fetchBingCode();
    state.deviceInfo = {
      name: res.data.workspace_name,
      code: res.data.bind_code,
    }
  }
})

// 点击查询
const handleClickSearch = async () => {
  const values = formRef.value?.getFieldsValue();
  await props.onClickSearch(values);
}

// 点击重置
const handleClickReset = async () => {
  formRef.value?.resetFields();
  const values = formRef.value?.getFieldsValue();
  await props.onClickReset(values);
}
</script>

<style lang="scss" scoped>
.popover {
  width: 200px;
}

.modal-item {
  display: flex;
  margin-top: 20px;

  &-title {
    width: 100px;
    font-weight: bold;
  }
}
</style>