<template>
  <div>
    <el-form :model="queryForm" label-width="auto" :inline="true" ref="formRef">
      <div class="select-group">
        <el-form-item label="问题来源：" prop="source">
          <el-select v-model="queryForm.source" placeholder="全部" clearable @change="handleSelectChange">
            <el-option v-for="item in sourceOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="类型：" prop="issueType">
          <el-select v-model="queryForm.issueType" placeholder="全部" clearable :disabled="typeDisable">
            <el-option v-for="item in options" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="地点：" prop="workspaceId">
          <el-cascader v-model="workLocation" :options="locationOptions" :props="location" clearable
            @change="handleCascaderChange" />
        </el-form-item>
        <el-form-item label="状态：" prop="issueState">
          <el-select v-model="queryForm.issueState" clearable>
            <el-option v-for="item in issueStateOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="日期：" v-if="!isShowTab">
          <el-date-picker v-model="dateRange" type="daterange" range-separator="~" start-placeholder="开始时间"
            end-placeholder="结束时间" clearable unlink-panels value-format="YYYY-MM-DD HH:mm:ss.SSS"
            @change="handleDateChange" />
        </el-form-item>
      </div>
      <div class="btn-group">
        <el-form-item>
          <el-button class="search-btn" type="primary" @click="handleSearch">查询</el-button>
          <el-button class="reset-btn" @click="handleReset">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { reactive, ref } from 'vue';
import { sourceOptions, issueStateOptions } from './constant.question';

interface Props {
  isShowTab: boolean       // true展示数据，false默认数据
  aiOptions: Array<any>
  manualOptions: Array<any>
  locationOptions: Array<any>
};
const props = defineProps<Props>();
const emits = defineEmits(['onSearch', 'onReset']);

interface QueryModel {
  pageNumber: number,
  pageSize: number,
  source?: number,         // 来源
  issueType?: number,      // 类型
  workspaceId?: number[],  // 地点=工位id
  issueState?: number,     // 状态
  startTime?: string,      // 开始时间（默认）
  endTime?: string,        // 结束时间（默认）
};

const formRef = ref<FormInstance>();
const queryForm = reactive<QueryModel>({
  pageNumber: 1,
  pageSize: 10,
});

interface OptionModel {
  id: number,
  name: string
};

const options = ref<OptionModel[]>([]);
const typeDisable = ref(true);
const location = { multiple: true };  // 级联选择器（打开多选）
const workLocation = ref([]);   // 级联选择器，为二维数组（提取workspaceId）
const dateRange = ref([]);  // 时间段，拆分成startTime/endTime

const handleSearch = () => {
  console.log(queryForm);

  emits('onSearch', queryForm);
};

const handleReset = () => {
  typeDisable.value = true;
  workLocation.value = [];
  dateRange.value = [];
  formRef.value?.resetFields();
  emits('onReset', queryForm);
};

const handleSelectChange = () => {
  if (Number(queryForm.source) === 1) {
    typeDisable.value = false;
    options.value = props.aiOptions;
  }
  else if (Number(queryForm.source) === 2) {
    typeDisable.value = false;
    options.value = props.manualOptions;
  }
  else {
    typeDisable.value = true;
    options.value = [];
    queryForm.issueType = undefined;
  }
};

const handleCascaderChange = () => {
  const arr = [];
  workLocation.value.forEach((item) => {
    arr.push(item[1]);
  });
  queryForm.workspaceId = arr;
};

const handleDateChange = () => {
  if (dateRange.value != null) {
    queryForm.startTime = dateRange.value[0];
    queryForm.endTime = dateRange.value[1];
  } else {
    Reflect.deleteProperty(queryForm, "startTime");
    Reflect.deleteProperty(queryForm, "endTime");
  }
  console.log(queryForm);
};
</script>

<style scoped lang="scss">
.el-form {
  display: flex;
  justify-content: space-between;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 0;
}

:deep(.el-form-item__label) {
  padding: 0;
}

.select-group {
  flex: 1;
}

.btn-group {

  .search-btn {
    width: 65px;
    height: 32px;
    background: #1890FF;
    border-radius: 2px;
  }

  .reset-btn {
    width: 65px;
    height: 32px;
    border-radius: 2px;
    border: 1px solid #1890FF;
    color: #1890FF;
  }
}

.el-select {
  --el-select-width: 215px;
}
</style>
