<template>
  <div class="flex flex-col text-sm bg-white px-4 mt-5 pt-2 pb-2">
    <div class="flex flex-col">
      <el-space class="my-2">
        <h4 class="text-sm w-[40px] text-gray-400 font-normal text-center">类型</h4>
        <el-radio-group v-model="selectType" @change="onType">
          <el-radio-button v-for="(item,index) in websiteType" :key="index" :label="item.label" :value="item.value"/>
        </el-radio-group>
      </el-space>
      <el-space class="my-2">
        <h4 class="text-sm w-[40px] text-gray-400 font-normal text-center">行业分类</h4>
        <div class="flex-wrap">
          <el-radio-group v-model="selectIndustry" @change="onIndustry">
            <el-radio-button v-for="(item,index) in IndustryData" :key="index" :label="item.label"
                             :value="item.value"/>
          </el-radio-group>
        </div>
      </el-space>
      <el-space class="my-2">
        <h4 class="text-sm w-[40px] text-gray-400 font-normal text-center">终端</h4>
        <el-radio-group v-model="selectType" @change="onType">
          <el-radio-button v-for="(item,index) in websiteType" :key="index" :label="item.label" :value="item.value"/>
        </el-radio-group>
      </el-space>
      <el-space class="my-2" :size="12">
        <h4 class="text-sm w-[40px] text-gray-400 font-normal text-center">色系</h4>
        <template v-for="(item,index) in colors" :key="index">
          <nuxt-link :to="`?color=${item.label}`" @click="handleColor(item.label)">
            <el-avatar v-if="selectColor == item.label" :size="28" :style="item.comments"
                       class="border-solid border-1 border-gray-800 rounded-full"></el-avatar>
            <el-avatar v-else :size="24" :style="item.comments"></el-avatar>
          </nuxt-link>
        </template>
      </el-space>
    </div>
  </div>
  <el-scrollbar style="height: 100%;">
    <div class="mt-5 flex items-center text-sm">
      <nuxt-link :to="`?`" @click="handleDefault">插件</nuxt-link>
      <el-divider direction="vertical" />
      <nuxt-link :to="`?`" @click="handleDefault">应用</nuxt-link>
      <el-divider direction="vertical" />
      <nuxt-link :to="`?`" @click="handleDefault">模板</nuxt-link>
      <el-space class="ml-10">
        <el-input v-model="keywords" :placeholder="`云官网`"
                  :suffix-icon="Search"
                  class="hidden-sm-and-down"
                  style="width: 220px" @change="handleKeywords"/>
        <el-button class="hidden-sm-and-down" @click="clearWhere">重置</el-button>
      </el-space>
    </div>
  </el-scrollbar>
</template>

<script setup lang="ts">
import {Search} from '@element-plus/icons-vue'
import {listDictData} from "~/api/system/dict-data";
import IndustryData from "~/api/json/industry-data.json"

const props = withDefaults(
  defineProps<{
    value?: number;
  }>(),
  {}
);

// 关键词
const keywords = ref<string | undefined>()
const selectIndustry = ref<string>();
const selectType = ref<string>();
const selectColor = ref<string>();
// 终端
const appType = ref<any[]>()
// 行业
const industry = ref<string>()
// 网站类型
const websiteType = ref<any[]>([])
// 色系
const colors = ref<any[]>()

// 搜索条件
let where = <any>{
  keywords: undefined,
  websiteType: undefined,
  industry: undefined,
  color: undefined,
  sort: undefined,
  order: undefined
}

// 选择类型
const handleType = (text: string) => {
  if (text === '全部') {
    where.websiteType = undefined;
  } else {
    where.websiteType = text;
  }
  reload()
}

// 选择行业
const handleIndustry = (text: string) => {
  if (text === '全部') {
    where.industry = undefined;
  } else {
    where.industry = text;
  }
  reload()
}

// 选择色系
const handleColor = (text: string) => {
  selectColor.value = text;
  if (text === '彩色') {
    where.color = undefined;
  } else {
    where.color = text;
  }
  reload()
}

const handleDefault = () => {
  where.sort = undefined
  where.order = undefined
  reload()
}

const handleLast = () => {
  where.sort = 'createTime'
  where.order = 'desc'
  reload()
}

const handleHot = () => {
  where.sort = 'clicks'
  where.order = 'desc'
  reload()
}

const handleFree = () => {
  where.price = 0
  reload()
}

const handlePay = () => {
  where.isPay = true
  reload()
}

const handleOfficial = () => {
  where.official = true
  reload()
}

const clearWhere = () => {
  where = {}
  selectColor.value = ''
  selectType.value = ''
  selectIndustry.value = ''
  reload()
}

// 搜索关键词
const handleKeywords = () => {
  where.keywords = keywords.value;
  reload()
}

// 跳转路由
const reload = () => {
  navigateTo({
    path: '/market',
    query: where
  })
}

const onType = (text: string) => {
  where.websiteType = text
  if (text == '全部') {
    where.websiteType = undefined
  }
  reload();
}

const onIndustry = (text: string) => {
  where.industry = text
  if (text == '全部') {
    where.industry = undefined
  }
  reload();
}

// 获取基础数据
const getData = () => {
  listDictData({
    dictCode: 'WebsiteType'
  }).then(data => {
    websiteType.value = data.map((item: any) => {
      return {
        label: item.dictDataName,
        value: item.dictDataCode
      }
    })
  })
  listDictData({
    dictCode: 'Color'
  }).then(data => {
    colors.value = data.map((item: any) => {
      return {
        label: item.dictDataName,
        value: item.dictDataCode,
        comments: item.comments
      }
    })
  })
}
getData()

// watch(
//   () => props.where,
//   (query) => {
//     if(query){
//       where = query;
//     }
//   }
// );
</script>
