<template>
  <!-- 过滤 -->
  <div class="filterTable">
    <a-range-picker v-model:value="date"
                    class="commonPicker"
                    style="width: 200px"
                    :show-time="{hideDisabledOptions: true}"
                    format="YYYY-MM-DD" />
    <FilterOption :selectList="selectList"
                  :inputList="inputList"
                  :fixedBtnList="fixedBtnList">
      <template #selectAfter>
        <a-select label-in-value
                  class="conditionSelect"
                  style="width: 120px"
                  v-model:value="goodsid"
                  placeholder="选择商品">
          <a-select-option v-for="(option, j) in goodsList"
                           :key="j + '22'"
                           :value="option.value">
            {{option.lable}}
          </a-select-option>
        </a-select>
        <a-checkbox v-model:checked="isOverTime"
                    class="filter-check">过滤超时单</a-checkbox>
        <a-select label-in-value
                  class="conditionSelect"
                  style="width: 120px"
                  v-model:value="userid"
                  placeholder="选择商品">
          <a-select-option v-for="(option, j) in areaList"
                           :key="j + '22'"
                           :value="option.value">
            {{option.lable}}
          </a-select-option>
        </a-select>
        <a-checkbox v-model:checked="includesub"
                    class="filter-check">包含子级</a-checkbox>
      </template>
    </FilterOption>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import FilterOption from '@/common/components/filter/index.vue';
import { defineComponent, ref } from 'vue';
import { handleFilter, InputList, SelectList } from '@/common/setup/filter';
import { initData } from '@/common/methods';
import { handleSelectOption } from '../../../../setup';
import { getGoodsList } from '@/services/bus/goods';
import { queryTableList } from '@/common/setup/table';
import { QhjParentAreaList } from '@/services/go/ermcp/qhj/interface';
import { queryParentAreaList } from '@/services/go/ermcp/qhj';
import { SelectOption } from '@/common/setup/filter/interface';
import { Moment } from 'moment';
import { getRangeTime } from '@/utils/time';

interface Value {
    key?: string;
    label?: string;
}

export default defineComponent({
    name: 'filter-platinum_pick_query',
    components: { FilterOption },
    setup(props, context) {
        const select = ref<SelectList[]>([
            {
                value: undefined,
                key: 'userinfotype',
                placeholder: '账号类型',
                list: [
                    { value: 1, lable: '个人' },
                    { value: 2, lable: '企业' },
                ],
            },
        ]);
        // 商品
        const goodsid = ref<Value | undefined>();
        const goodsList = ref<SelectOption[]>([]);
        const isOverTime = ref<boolean>(false);
        // 机构列表
        const userid = ref<Value | undefined>();
        const areaList = ref<SelectOption[]>([]);
        // 是否包含子级 1-包含
        const includesub = ref<boolean>(false);
        const input: InputList[] = [{ value: '', placeholder: '模糊搜索账号', key: 'filtername' }];

        const date = ref<Moment[]>([]);

        const param = {
            search(result: any) {
                result.includesub = includesub.value ? 1 : 0;
                result.isOverTime = isOverTime.value;
                result.goodsid = goodsid.value ? [goodsid.value.key] : [''];
                result.userid = userid.value ? [userid.value.key] : [''];
                // 处理范围时间内搜索
                const time = date.value;
                const temp = time.length > 1 ? getRangeTime(time[0], time[1]) : [''];
                result.ordertime = temp;
            },
            reset() {
                includesub.value = false;
                isOverTime.value = false;
                goodsid.value = undefined;
                userid.value = undefined;
                date.value = [];
            },
        };
        const { selectList, inputList, fixedBtnList } = handleFilter(select, input, context, param);
        const { queryTable } = queryTableList<QhjParentAreaList>();
        initData(() => {
            goodsList.value = getGoodsList().map((e) => {
                return { value: e.goodsid, lable: e.goodsname };
            });

            // 机构列表
            queryTable(queryParentAreaList).then((res) => {
                areaList.value = res.map((e) => {
                    return { value: e.userid, lable: e.accountname };
                });
            });
        });
        return {
            date,
            isOverTime,
            goodsid,
            userid,
            goodsList,
            areaList,
            includesub,
            selectList,
            inputList,
            fixedBtnList,
        };
    },
});
</script>

<style lang="less">
.filterTable {
    .commonPicker.ant-calendar-picker {
        display: inline-flex;
        padding-top: 9px;
        padding-bottom: 6px;
        margin-right: 10px;
        .ant-input {
            border: 0;
            background: @m-grey9;
        }
    }
}
</style>;
