<template>
  <div :class="$style.searchheader">
    <div :class="$style.topbg">
      <div id="fgd" :class="$style.fgd"><div v-show="true" :class="$style.logo"></div></div>
      <a-divider v-show="false" type="vertical" />
      <!-- <h2>全文检索</h2> -->
      <div style="margin-top:80px;">
        <img src="./title.png" />
      </div>
    </div>
    <div :class="$style.bottombg">
      <a-select label-in-value :default-value="{ key: 'file' }" :size="size" @change="handleChange">
        <a-select-option v-for="item in selectTypeData" :key="item.value">
          {{ item.label }}
        </a-select-option>
      </a-select>
      <div :class="$style.inputsearch">
        <a-input-search
          v-model="inputValue"
          :size="size"
          show-search
          placeholder="请输入搜索内容"
          :class="$style.input"
          @change="onInputChange"
          @search="onBtnSearch"
          @focus="onFocus"
          @blur="onBlur"
        />
        <a-select
          v-decorator="['value']"
          :size="size"
          :class="$style.selectsearch"
          placeholder=""
          show-search
          :default-active-first-option="false"
          :show-arrow="false"
          :filter-option="false"
          :not-found-content="null"
          :open="isOpen"
          label-in-value
          @search="onOptinonSearch"
          @change="onSelectChange"
        >
          <a-select-option v-for="(item, index) in data" :key="index">
            {{ item }}
            <a-icon type="close" @click.stop="onDelete(index, item)" />
          </a-select-option>
        </a-select>
      </div>
      <span :class="$style.result" @click="onResultSearch">在结果中搜索</span>
    </div>
    <!-- 类型复选框 -->
    <div :class="$style.type">
      <a-checkbox-group v-model="typeVal" :options="typeOptions" @change="nodeTypeChange" />
    </div>
    <!-- 用户信息 -->
    <div :class="$style.userarea">
      <slot name="userinfo">
        <a-dropdown :class="$style.userinfowrap">
          <div>
            <a-avatar
              :class="$style.userinfo"
              icon="user"
              :src="`api/mobile/v1/user-manager/userAvatar/${userInfo.account}` | sdResource"
              alt="avatar"
            />
            {{ userInfo.name }}
            <a-icon type="down" />
          </div>
          <a-menu slot="overlay">
            <a-menu-item @click="$router.push('/sd-frame/sd-account-info')">
              <a-icon type="user" />个人中心
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item @click="logout"> <a-icon type="logout" />退出登录 </a-menu-item>
          </a-menu>
        </a-dropdown>
      </slot>
      <a-divider type="vertical" />
      <div :class="$style.gobance" @click="$router.push('/sd-frame/iam-content')">
        进入工作台
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@/common/services/axios-instance'
import loginService from '@/login/login-service'
import storeMixin from '@/common/store-mixin'
import store from '@/common/store'
import { Message } from 'ant-design-vue'
import components from './_import-components/oa-fullsearch-header-import'
import FullSearchService from './fullsearch-service'
const selectTypeData = [
  {
    label: '文件',
    value: 'file',
  },
  {
    label: '应用',
    value: 'apply',
  },
]
export default {
  name: 'OaFullsearchHeader',
  metaInfo: {
    title: 'OaFullsearchHeader',
  },
  components,
  mixins: [storeMixin],
  props: {
    searchVal: {
      type: String,
      default: '请输入搜索内容',
    },
  },
  data() {
    return {
      configInfo: {},
      platformName: '',
      data: [],
      inputValue: this.searchVal === '请输入搜索内容' ? '' : this.searchVal,
      value: '',
      selectTypeData,
      isApply: false,
      isOpen: false,
      size: 'large',
      // bussinessTypeList: [
      //   {
      //     title: '全部',
      //     value: 'all',
      //   },
      // ],
      typeVal: [],
      typeOptions: [{ label: '全部', value: 'all' }],
    }
  },
  created() {
    const oldLogoTheme = document.getElementById('background-style')
    const style = document.createElement('style')
    style.id = 'background-style'
    style.type = 'text/css'
    axios
      .post('api/xcoa-mobile/v1/iamlogoconfig/we-open-api/getLogos')
      .then((res) => {
        if (res?.data) {
          this.configInfo = res.data
          style.innerText =
            // `.art_ext-layout_custom{background: url(${
            //   this.configInfo.backgroundImg
            //     ? 'api/xcoa-mobile/v1/iamlogoconfig/we-open-api/downloadBackGrounImg?name=backgroundImg'
            //     : require('../../../src_custom/images/login-background.jpg')
            // }) center center / cover no-repeat !important}` +
            `.title_sd-header_common{background: url(${
              this.configInfo.homeLogo
                ? 'api/xcoa-mobile/v1/iamlogoconfig/we-open-api/downloadBackGrounImg?name=homeLogo'
                : require('@custom/images/logo.png')
            }) no-repeat center center !important}`
          this.platformName = this.configInfo.platformName || store.state.sd.common.appTitle
          // if (this.configInfo.homeLogo) xmLocalStorage.setItem('homeLogo', true)
        }
      })
      .catch(() => {
        this.platformName = store.state.sd.common.appTitle
        style.innerText =
          // `.art_ext-layout_custom{background: url(${require('../../../src_custom/images/login-background.jpg')}) center center / cover no-repeat !important}` +
          `.title_sd-header_common{background: url(${require('@custom/images/logo.png')}) no-repeat center center !important}`
      })
      .finally(() => {
        if (oldLogoTheme) {
          document.head.removeChild(oldLogoTheme)
        }
        document.head.appendChild(style)
      })
  },
  mounted() {
    this.getBusinessType()
  },
  methods: {
    // 获取业务类型分类
    getBusinessType() {
      FullSearchService.getCategoryList().then((res) => {
        const options = []
        res.data.forEach((item) => {
          // options.push({
          //   label: item.text,
          //   value: parseInt(item.id),
          // })
          if (item.children && item.children.length > 0) {
            item.children.forEach((k) => {
              if (options.length < 10) {
                options.push({
                  label: k.text,
                  value: parseInt(k.id),
                })
              }
            })
          }
          // this.bussinessTypeList.push({
          //   title: item.text,
          //   value: parseInt(item.id),
          //   options: options,
          // })
        })
        this.typeOptions = options
      })
    },
    // 文件/应用
    handleChange(val) {
      if (val.key === 'apply') {
        this.$emit('handleSelect', 'apply')
        this.isApply = true
      } else {
        this.$emit('handleSelect', 'file')
        this.isApply = false
      }
    },
    // input change
    onInputChange(e) {
      this.value = e.target.value
      this.isOpen = true
      this.onOptinonSearch(e.target.value)
    },
    // 选中option
    onSelectChange(val) {
      this.value = val.label[0].text.trim()
      this.inputValue = val.label[0].text.trim()
      this.isOpen = false
      if (this.isApply) {
        this.$emit('onSearch', this.inputValue, 'fileType')
      } else {
        this.$emit('onSearch', this.inputValue, 'searchText')
      }
    },
    // 文本框值变化
    onOptinonSearch(text) {
      this.data = []
      FullSearchService.seachInputTip(encodeURIComponent(text)).then((res) => {
        if (res.data?.length) {
          this.data = res.data
        } else {
          this.data.push(text)
        }
      })
    },
    // 搜索框获取焦点
    onFocus() {
      if (this.inputValue) return
      this.data = []
      FullSearchService.getHistoryData().then((res) => {
        if (res.data?.length) {
          this.data = res.data
          this.isOpen = true
        }
      })
    },
    // 搜索框失去焦点
    onBlur() {
      this.isOpen = false
    },
    // 删除下拉框中选中的数据
    onDelete(index, text) {
      FullSearchService.deleteSearchItem(encodeURIComponent(text)).then((res) => {
        if (res.data) {
          Message.success('删除成功')
          this.data.splice(index, 1)
        } else {
          Message.error('删除失败')
        }
      })
    },
    // 业务类型子类型
    nodeTypeChange(val) {
      console.log(val)
      this.loading = true
      this.$emit('onSearch', val, 'docTypeId')
    },
    // 搜索
    onBtnSearch() {
      if (this.isApply) {
        this.$emit('onSearch', this.inputValue, 'fileType')
      } else {
        this.$emit('onSearch', this.inputValue, 'searchText')
      }
      this.isOpen = false
    },
    // 在结果中搜索
    onResultSearch() {
      this.$emit('onSearch', this.inputValue, 'searchResult')
    },
    // 退出登录
    logout() {
      loginService.doLogout()
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$fontcolor: #fff;
.searchheader {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  .topbg {
    // display: flex;
    align-items: center;
    .logo {
      display: inline-block;
      width: 256px;
      height: 64px;
      // background: url('~@custom/images/logo.png') no-repeat center;
      background: url('./logo2.png') no-repeat center;
      margin-top: 20px;
      margin-left: -130px;
    }

    .fgd {
      width: 1px; // 圆形元素的宽度
      height: 1px; // 圆形元素的高度，保持与宽度相同，使得元素呈圆形
      border-radius: 50%; // 设置元素为圆形
      box-shadow: 0 0 300px 40px #fff; // 为元素添加4层阴影，实现圆外发光效果
      margin-left: 50%;
      background: rgba(255, 255, 255, 2);
    }
    h2 {
      color: $fontcolor;
      /* stylelint-disable-next-line */
      margin-bottom: 0;
      margin-left: 20px;
    }
  }
  .bottombg {
    display: flex;
    align-items: center;
    :global(.ant-select-lg .ant-select-selection--single) {
      height: 60px;
    }
    :global(.ant-select-lg .ant-select-selection__rendered) {
      line-height: 58px;
    }
    :global(.ant-input-lg) {
      height: 60px;
    }
    .inputsearch {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 570px;
      height: 60px;
      .input {
        z-index: 20;
      }
      .selectsearch {
        position: absolute;
        width: 570px;
        opacity: 0;
      }
    }
    .result {
      display: flex;
      align-items: center;
      height: 40px;
      margin-left: 1.5rem;
      color: $fontcolor;
      cursor: pointer;
    }
  }

  .userarea {
    position: absolute;
    top: 5px;
    right: 15px;
    display: flex;
    align-items: center;
    color: $fontcolor;
    .gobance {
      cursor: pointer;
    }
    .userinfowrap {
      padding-right: 10px;
      cursor: pointer;
      &:hover {
        /* stylelint-disable-next-line */
        background-color: rgba(0, 0, 0, 0.2);
      }
    }
    .userinfo {
      margin: 0 10px;
    }
  }
}
:global(.ant-select-dropdown) {
  :global(.ant-select-dropdown-menu-item) {
    :global(.anticon-close) {
      width: 32px;
      height: 20px;
      line-height: 27px;
      cursor: pointer;
      float: right;
      margin-right: 1rem;
    }
  }
}
.type {
  :global(.ant-checkbox-wrapper) {
    color: #fff;
  }
}
</style>
