<template>
  <div>
    <!-- 首页导航 -->
    <Navs></Navs>
    <!-- content -->
    <section class="content">
      <!-- 全局搜索 -->
      <search></search>
      <div class="content_cont">
        <!-- 主内容 -->
        <div class="mainCont">
          <div class="mainCont_content" v-if="pageConfiguration.countSize!==0">
            <div class="header">
              <div class="left">相关搜索约为 {{pageConfiguration.countSize}} 条</div>
              <div class="right">
                <span>筛选栏目：</span>
                <cityPicker
                  :level="jishu"
                  :selectpattern="selectpattern"
                  :city-data="cityData"
                  :default-city="cityDefaultName"
                  @choice-caller="choiceCaller"
                ></cityPicker>
                <span @click="getSearchData(pageConfiguration.nowPage)">刷新</span>
              </div>
            </div>
            <div class="list_bia" v-if="pageConfiguration.countSize!==0">
              <div class="title">
                <div>ID</div>
                <div>name</div>
                <div>分类名称</div>
                <div>所属栏目</div>
              </div>
              <div class="content">
                <div v-for="(item,index) in searchData" :key="index">
                  <div>{{item.id}}</div>
                  <div @click="jumpSearch(item)">{{item.name}}</div>
                  <div>{{item.className}}</div>
                  <div>{{item.lmss}}</div>
                </div>
              </div>
              <!-- 分页 :hide-on-single-page="value"显示隐藏分页-->
              <el-pagination
                background
                layout="prev, pager, next"
                :total="pageConfiguration.countSize"
                class="pagination"
                :page-size="pageConfiguration.oneSize"
                :hide-on-single-page="true"
                @prev-click="prevClick"
                @next-click="nextClick"
                @current-change="currentChange"
              ></el-pagination>
            </div>
          </div>
          <div
            v-if="pageConfiguration.countSize===0"
            style="height:20rem;width:100%;display:flex;align-items:center;justify-content:center;font-size:1.56rem;"
          >哎呦，没有搜到结果呦！再试一遍吧！</div>
        </div>
      </div>
    </section>
    <!-- 页脚信息 -->
    <FooterInfors></FooterInfors>
  </div>
</template>

<script>
// 导航
import Nav from '@/components/nav/Nav.vue'
// 页脚信息
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
// 全局搜索
import search from '@/components/search/search.vue'
// 引入下拉组件
import cityPicker from '@/components/cityPicker/CityPicker.vue'
export default {
  name: 'index',
  components: {
    Navs: Nav,
    FooterInfors: FooterInfor,
    search: search,
    cityPicker: cityPicker
  },
  data () {
    return {
      imgurl: {
        list1: require('../../../static/dataList/list1.png')
      },
      // 栏目数据   结构不可变
      cityData: [
        // { 'id': '110000', 'name': '年度数据', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
        // { 'id': '110000', 'name': '季度数据', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
        // { 'id': '110000', 'name': '月度数据', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' },
        // { 'id': '110000', 'name': '-全部-', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' }
      ],
      // 栏目级数
      jishu: 1,
      // 默认显示栏目
      cityDefaultName: '-全部-',
      // 筛选数据
      selectpattern: [
        {
          field: 'userProvinceId',
          placeholder: '-全部-'
        }
      ],
      // 搜索到的数据
      searchData: [
        // { id: 1, name: '张三', className: 'table1', lmss: '年度数据' },
        // { id: 2, name: '张三', className: 'table1', lmss: '年度数据' },
        // { id: 3, name: '张三', className: 'table1', lmss: '年度数据' },
        // { id: 4, name: '张三', className: 'table1', lmss: '年度数据' },
        // { id: 5, name: '张三', className: 'table1', lmss: '年度数据' },
        // { id: 6, name: '张三', className: 'table1', lmss: '年度数据' },
        // { id: 7, name: '张三', className: 'table1', lmss: '年度数据' },
        // { id: 8, name: '张三', className: 'table1', lmss: '年度数据' }
      ],
      // 分页
      // 分页配置
      pageConfiguration: {
        // 每页显示条数
        oneSize: 2,
        // 数据总条数
        countSize: null,
        // 总页数
        countPage: 1,
        // 当前页数
        nowPage: 1
      },
      // 筛选栏目type
      selectLMType: '',
      // 筛选栏目id
      selectLMId: ''
    }
  },
  methods: {
    // 自动运行
    dfyu () {
      const products = [
        {
          id: 'p1',
          items: [
            {
              id: '03',
              name: [
                {
                  id: '02',
                  name: 'samsung'
                },
                {
                  id: '04',
                  name: 'samsung'
                }
              ]
            }
          ]
        },
        {
          id: 'p2',
          itemss: [
            {
              id: '06',
              name: [
                {
                  id: '03',
                  name: 'samsung'
                },
                {
                  id: '05',
                  name: 'samsung'
                }
              ]
            }
          ]
        }
      ]
      var tsy = products.find(product => product.items.some(item => item.name.some(list => list.id === '04')))
      console.log(tsy)
      // console.log(Object.keys(gh))
      // Object.keys(gh).forEach((item, index) => {
      //   console.log(item)
      // })
    },
    // 被选中时触发
    choiceCaller (resu) {
      console.log(resu, '触发')
      console.log(resu[1], 'resu[1]')
      /* eslint-disable */
      resu[0] === '-全部-' ? (this.selectLMType = '', this.selectLMId = '') : (this.selectLMType = resu[2].type, this.selectLMId = resu[2].id)
      console.log(this.selectLMType, this.selectLMId)
    },
    // 获取搜索到的数据、
    getSearchData(page) {
      this.$axios({
        method: 'GET',
        url: 'search/search/list',
        params: {
          key: this.$route.query.keyVal,
          limit: 2,
          page: page,
          type: this.selectLMType,
          id: this.selectLMId
        }
      }).then(res => {
        console.log(res, '全局搜索数据')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          let arrts = []
          res.data.data.list.forEach((item, index) => {
            // console.log(item)
            let srtAs = {
              id: item.id,
              name: item.name,
              className: item.cname,
              lmss: item.classify,
              classify_id: item.classify_id,
              f: item.f, type: item.type
            }
            arrts.push(srtAs)
          })
          this.searchData = arrts
          this.pageConfiguration.countSize = parseInt(res.data.data.total)
          console.log(this.pageConfiguration)
        } else {
          // alert(res.data.message)
          this.$alert(res.data.message, '温馨提示', {
            confirmButtonText: '确定',
          })
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 获取筛选栏目
    getScreening() {
      this.$axios({
        method: 'GET',
        url: 'search/search/screening',
        params: {
        }
      }).then(res => {
        console.log(res, '筛选栏目')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          let arrts = []
          res.data.data.list.forEach((item, index) => {
            // console.log(item)
            let srtAs = { 'id': item.id, 'name': item.name + (item.type === 2 ? ' (地区)' : ' (非地区)'), 'parentId': '100000', 'shortName': '北京', 'cityCode': '', type: item.type }
            arrts.push(srtAs)
          })
          arrts.push({ 'id': '-全部-', 'name': '-全部-', 'parentId': '100000', 'shortName': '北京', 'cityCode': '' })
          this.cityData = arrts
        } else {
          // alert(res.data.message)
          this.$alert(res.data.message, '温馨提示', {
            confirmButtonText: '确定',
          })
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 点击上一页
    prevClick() {
      this.pageConfiguration.nowPage--
      this.getSearchData(this.pageConfiguration.nowPage)
    },
    // 点击下一页
    nextClick() {
      this.pageConfiguration.nowPage++
      this.getSearchData(this.pageConfiguration.nowPage)
    },
    currentChange(ev) {
      this.pageConfiguration.nowPage = ev
      this.getSearchData(this.pageConfiguration.nowPage)
    },
    // 跳转至查询页面
    jumpSearch(listCount) {
      console.log(listCount)
      this.$router.push(
        {
          path: '/datasweb',
          query: {
            type: listCount.type === '1' ? listCount.f : 'area',
            defaultLeftId: listCount.classify_id
          }
        }
      )
    },
  },
  computed: {
    // 计算字符串
    computedStr() {
      return (str) => {
        let Strs = ''
        str.length <= 32 ? (Strs = str) : (Strs = str.slice(0, 31) + '...')
        return Strs
      }
    }
  },
  mounted() {
    this.dfyu()
    // 获取搜索的数据
    this.getSearchData(1)
    // 筛选栏目数据
    this.getScreening()
  }
}
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #fff;

  & > .content_cont {
    width: 84.25rem;
    // border: 1px solid red;
    & > .swipersty {
      width: 100%;
      height: 33.25rem;
    }
    & > .mainCont {
      // margin-top: 3.125rem;
      // margin-bottom: 3.125rem;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      background-color: #fff;
      & > .mainCont_content {
        // border: 0.0625rem solid red;
        // box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
        background-color: #fff;
        width: 84.25rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        & > .header {
          width: 84.25rem;
          height: 4.25rem;
          // border: 1px solid red;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;

          & > .left {
            // margin-left: 1.5rem;
            font-size: 1.125rem;
            font-weight: normal;
            font-stretch: normal;
            // line-height: 41p;
            letter-spacing: 0rem;
            color: #333333;
          }
          & > .right {
            font-size: 1.25rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rem;
            color: #8fa3ae;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            // border: 0.0625rem solid red;
            & > span:nth-child(1) {
              margin: 0 1.5rem;
              font-size: 1.125rem;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: -0.0625rem;
              color: #333333;
            }
            & > span:nth-child(3) {
              margin: 0 1.5rem;
              width: 4.375rem;
              height: 2.5rem;
              background-color: #52b6e3;
              border-radius: 5px;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              font-size: 1.125rem;
              font-weight: normal;
              font-stretch: normal;
              // line-height: 41px;
              letter-spacing: -0.0625rem;
              color: #ffffff;
            }
            & > span:nth-child(3):hover {
              cursor: pointer;
            }
          }
        }
        & > .list_bia {
          // margin-top:.75rem;
          padding-bottom: 2.5rem;
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          & > .title {
            width: 100%;
            height: 4.375rem;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            background-color: #e4eaec;
            & > div {
              width: 21.05125rem;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              font-size: 1.375rem;
              font-weight: bold;
              font-stretch: normal;
              // line-height: 41px;
              letter-spacing: -0.0625rem;
              color: #2d2d2d;
            }
          }
          & > .content {
            margin-bottom: 2.5rem;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            & > div {
              width: 100%;
              height: 4.375rem;
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: center;
              & > div:nth-child(2) {
                cursor: pointer;
              }
              & > div {
                width: 25%;
                height: 4.375rem;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                font-size: 1.25rem;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: -0.0625rem;
                color: #666666;
                border-bottom: 1px solid #e9eeef;
                border-right: 1px solid #e9eeef;
                border-left: 1px solid #e9eeef;
              }
              & > div:nth-child(n + 2) {
                border-left: 1px solid #e9eeef;
              }
            }
            & > div:nth-child(2n + 2) {
              background-color: #f1f7f9;
            }
            & > div:nth-child(2n + 1) {
              background-color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>
