<template>
  <view>
    <custom-nav-bar :left-text="option.name" left-arrow />

    <image class="second-header" :src="recursionObj.icon"></image>

    <view class="second-search" v-if="option.name === '党建新闻' || option.name === '党建活动' || option.name === '星级党支部'">
      <view class="flex flex-between search-input">
        <input class="input" :value="searchValue" confirm-type="search" type="text"
          placeholder-class="placeholder-style" :placeholder="recursionObj.remark || '请输入要搜索的标题'" @input="onSearch"
          @confirm="onChange" />
        <view class="search-icon flex flex-center">
          <image class="search-icon-img" src="/static/images/search.png"></image>
        </view>
      </view>
    </view>

    <view class="second-model flex flex-v-center flex-between" :style="recursionTwoObj.cssStyle">
      <view :class="'second-line flex flex-col ' + (idx === 0 ? 'line1' : '')"
        v-for="(itemName, idx) in recursionTwoObj.children" :key="idx">
        <!-- <navigator v-if="itemName.clickUrl" class="line-navigator" :url="toods.updateQuery(itemName.clickUrl, itemName)"
          hover-class="none"></navigator> -->
          <navigator v-if="itemName.clickUrl" class="line-navigator" :url="updateQuery(itemName.clickUrl, itemName)"
          hover-class="none"></navigator>

        <image class="line-bg" :src="itemName.icon"></image>

        <view class="line-title">{{ itemName.name }}</view>

        <view v-if="itemName.remark" class="line-msg">{{ itemName.remark }}</view>
      </view>
    </view>

    <view class="second-model flex flex-v-center flex-between" style="color: #33aa9b" v-if="option.name === '家庭医生'">
      <view class="second-line flex flex-col line1">
        <navigator class="line-navigator" url="/packages/public/pages/chief-expert/chief-expert" hover-class="none">
        </navigator>
        <image class="line-bg"
          src="http://47.92.245.35:5009/xq-ssg/cb692c070fb7ebcd9545913771f0b63e2eaed99cead073282c41f3cfb03a2516.png">
        </image>
        <view class="line-title">首席专家团队介绍</view>
        <view class="line-msg">医疗惠民进网格 家医看病更方便</view>
      </view>
    </view>

    <view class="second-tabs" v-if="option.name === '家庭医生' || option.name === '党建引领'">
      <van-tabs id="secondTabs" @click-tab="onTabsChange($event, { tagId: 'secondTabs' })">
        <van-tab :title="key.name" v-for="(key, index) in recursionObj.children" :name="key.value" :key="index"></van-tab>
      </van-tabs>
    </view>

    <view class="second-section" v-if="option.name === '党建引领'">
      <view class="section-item flex flex-between" :data-item="item" @tap="headleDetails(item)"
        v-for="(item, index) in newsPageList" :key="index">
        <view class="section-item-left flex1 flex flex-between flex-col">
          <view class="consult-content-title text-line-1">{{ item.title }}</view>
          <view class="consult-content-block">
            <text>{{ getDateTime(item.createTime)}}</text>
            <text class="ml-30">{{ item.publisher }}</text>
          </view>
        </view>

        <image class="section-item-right" :src="item.pics" mode="aspectFill"></image>
      </view>
    </view>

    <view class="second-section" :style="option.name === '党建活动' ? 'margin-top: 100rpx;' : ''" v-else>
      <block v-if="tabsIndex === 0 || tabsIndex === 3">
        <scroll-view :scroll-y="true">
          <block v-if="recursionObj.children">
            <view class="section-item flex flex-between" :data-item="item" @tap="headleDetails(item)"
              v-for="(item, index) in newsPageList" :key="index">
              <view class="section-item-left flex1 flex flex-between flex-col">
                <view class="consult-content-title text-line-3">{{ item.name || item.title }}</view>
                <view class="consult-content-block">
                  {{ getDateTime(item.createTime) }}
                </view>
              </view>

              <image class="section-item-right" :src="item.coverPic || item.pics" mode="aspectFill"></image>
            </view>
          </block>
          <block v-else>
            <block v-if="newsPageList.length">
              <view class="section-item flex flex-between" :data-item="item" @tap="headleDetails(item)"
                v-for="(item, index) in newsPageList" :key="index">
                <view class="section-item-left flex1 flex flex-between flex-col">
                  <view class="consult-content-title multi-line">{{ item.title }}</view>
                  <view class="consult-content-block">
                    <text>{{ getDateTime(item.createTime) }}</text>
                    <text class="ml-30">{{ item.publisher }}</text>
                  </view>
                </view>

                <image class="section-item-right" :src="item.pics" mode="aspectFill"></image>
              </view>
            </block>
            <van-empty v-else description="暂无数据" />
          </block>
        </scroll-view>
      </block>
      <block v-if="tabsIndex === 1">
        <view class="community" :data-item="item" @tap="community" data-key="介小键" :data-name="item.title"
          v-for="(item, index) in newsPageList" :key="index">
          <view>{{ item.title }}</view>
        </view>
      </block>
      <block v-if="tabsIndex === 2">
        <view class="community-village" data-key="介小康">
          <view class="community-flex uniline" :data-name="item.title" data-key="介小康" @tap="community" :data-item="item"
            v-for="(item, index) in newsPageList" :key="index">
            <view class="uniline">{{ item.title }}</view>

            <view class="uniline">慢性病医疗队伍</view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>
<script>
  import * as peopleApi from '@/api/peopleApi';
  import * as publicApi from '@/api/publicApi';
  import * as enterprise from '@/api/enterprise';
  import utils from '@/utils/util.map'
  import util from '@/utils/util'

  // 民生 - 家庭医生列表 / 党建引领 复用
  export default {
    components: {},
    data() {
      return {
        nearFlag: 0,
        searchValue: '',
        option: {
          categoryId: 0,
          name: ''
        },
        recursionObj: {
          icon: '',
          remark: '',
          children: []
        },
        recursionTwoObj: {
          cssStyle: '',
          children: []
        },
        newsPageList: [],
        tabsIndex: 0,
        pageNo: 1,
        pageSize: 12,
        total: 0
      };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(option) {
      this.option = option
      this.recursionApi();
      this.callFcuntion();
    },
    onReachBottom() {
      if (this.newsPageList.length === this.total) {
        return;
      }
      this.getGridList(false);
    },
    methods: {
      updateQuery(url, name) {
        return utils.updateQuery(url, name);
      },
      getDateTime(time){
        if(typeof item !== undefined) {
         return utils.getDateTime(time)
        }
      },
      /**
       * 接口
       */
      async recursionApi() {
        const res = await publicApi.recursionApi({
          bannerType: 1,
          parentId: this.option.parentId
        });
        if (res.data) {
          this.recursionObj = res.data[0]
          this.recursionTwoObj = res.data[1] || {}
          if (this.option && this.option.name === '家庭医生') {
            // 触发tabs重绘，解决tabs底部下划线位置错误

          }
        }
      },

      async newsPageApi(reset = true) {
        const params = this.generalQueryData(reset);
        const param = {
          pageNo: 1,
          pageSize: 10,
          categoryId: this.option.categoryId
        };
        if (this.searchValue) {
          param.title = this.searchValue;
        }
        const res = await peopleApi.newsPageApi(param);
        if (res.data && res.data.list && res.data.list.length) {
          this.newsPageList = res.data.list
          if (this.option && this.option.name === '党建引领') {
            // 触发tabs重绘，解决tabs底部下划线位置错误
          }
        }
      },

      async hospitalPageApi() {
        // const locationInfo = uni.getStorageSync('userLocation');
        // if (!Object.keys(locationInfo).length) {
        //   return uni.showToast({
        //     title: '未允许定位，当前页面功能无法完全体验',
        //     icon: 'none',
        //     duration: 1500
        //   });
        // }
        const param = {
          pageNo: 1,
          pageSize: 10,
          nearFlag: this.nearFlag,
          // posX: locationInfo.split[0],
          // posY: locationInfo.split[1]
        };
        if (this.searchValue) {
          param.name = this.searchValue;
        }
        const res = await peopleApi.hospitalPageApi(param);
        let list = res.data.list
        if (list.length) {
          list.forEach((e) => {
            e.createTime = util.timeFormat(e.createTime, 'yyyy-mm-ss') || 0;
          });
          this.newsPageList = list
        }
      },

      /**
       * 页面事件
       */
      callFcuntion() {
        const ApiConfig = {
          党建引领: this.onTabsChange,
          家庭医生: this.hospitalPageApi,
          党建活动: this.newsPageApi,
          党建新闻: this.newsPageApi
        };
        if (ApiConfig[this.option.name]) {
          ApiConfig[this.option.name]();
        }
      },

      onTabsChange(event, _dataset) {
        /* ---处理dataset begin--- */
        // this.onTabsChange(event, _dataset);
        /* ---处理dataset end--- */
        if (this.option.name === '家庭医生') {
          const {
            name,
            index
          } = event;
          this.tabsIndex = name
          if (name === 0) {
            this.newsPageList = []
            this.nearFlag = name
            this.pageNo = 1
            this.hospitalPageApi();
          }
          if (name === 1) {
            console.log('我是介小键');
            this.newsPageList = []
            this.pageNo = 1
            this.getGridList(true, 1);
          }
          if (name === 2) {
            this.newsPageList = []
            this.pageNo = 1
            this.getGridList(true, 2);
          }
          if (name === 3) {
            this.newsPageList = []
            this.pageNo = 1
            this.option.categoryId = 1101
            this.newsPageApi();
          }
        }
        if (this.option.name === '党建引领') {
          const data = {
            0: 6,
            // 党建新闻所需id
            1: 5 // 党建活动所需id
          };
          this.option.categoryId = data[event && event.name] || data[0]
          this.newsPageList = []
          this.newsPageApi();
        }
      },

      async getGridList(reset = true) {
        const params = this.generalQueryData(reset);
        let _goodsList = []
        params.type = this.tabsIndex === 1 ? 1 : 2;
        const res = await peopleApi.getGridListApi(params);
        if (res.data) {
          const {
            list = [], total = 0
          } = res.data;
          if (reset) {
            _goodsList = list;
          } else {
            _goodsList = this.newsPageList.concat(list);
          }
          this.pageNo = params.pageNo || 1;
          this.total = total;
          this.newsPageList = _goodsList
        }
      },

      onChange(e) {
        this.searchValue = e.detail.value
        this.callFcuntion();
      },

      onSearch(e) {
        if (e.detail.value !== '') {
          return;
        }
        this.searchValue = e.detail.value
        this.callFcuntion();
      },

      // 分页参数处理事件
      generalQueryData(reset = false) {
        const {
          pageNo,
          pageSize
        } = this;
        const params = {
          pageNo: 1,
          pageSize: 14
        };
        if (reset) {
          return params;
        }
        return {
          ...params,
          pageNo: pageNo + 1,
          pageSize
        };
      },

      headleDetails(event) {
        const {
          id,
          orgId,
          name
        } = event;
        const defaultUrl =
          `/packages/public/pages/details/details?name=${this.recursionObj.name}详情&&referId=${id}&orgId=${orgId}&hospitalName=${name}`;
        uni.navigateTo({
          url: this.tabsIndex ? `/packages/public/pages/details/details?name=医疗政策详情&&referId=${id}&orgId=${orgId}` :
            defaultUrl
        });
      },

      // 介小键和介小康跳转
      community(event) {
        const {
          name,
          key,
          item
        } = event.currentTarget.dataset;
        let orgId = event.currentTarget.dataset.item.orgId;
        uni.navigateTo({
          url: `/packages/people/pages/second/second-community?name=${name}&key=${key}&orgId=${orgId}&gridId=${item.id}`
        });
      }
    }
  };
</script>
<style lang="less">
  page {
    --custom-nav-bar-background-color: transparent;
  }

  .ml-30 {
    margin-left: 30rpx;
  }

  .second-header {
    width: 100%;
    height: 330rpx;
  }

  .second-search {
    padding: 40rpx 30rpx 50rpx;

    .search-input {
      height: 64rpx;
      line-height: 64rpx;
      background: #f9f9f9;
      border-radius: 35rpx;
      border: 1px solid #e1e1e1;
      text-align: center;
      position: relative;
      box-sizing: content-box;

      .input {
        width: 100%;
        height: 64rpx;
        line-height: 64rpx;
        text-decoration: 20rpx;
        padding: 0 64rpx;
        font-size: 26rpx;
        font-weight: 400;
      }

      .placeholder-style {
        text-align: center;
        color: #c1c1c1;
      }
    }

    .search-icon {
      width: 64rpx;
      height: 64rpx;
      background: #ffffff;
      border-radius: 35rpx;
      border: 1px solid #e1e1e1;
      position: absolute;
      right: -1px;
      top: 0;
      z-index: 1;

      .search-icon-img {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .life-tabs {
      margin-top: 40rpx;

      .van-tabs__wrap {
        border-bottom: 1px solid #c1c1c1;
      }

      .life-tabs-flex {
        margin-top: 50rpx;

        .life-tabs-icon {
          width: 70rpx;
          height: 70rpx;
          background: linear-gradient(180deg, #ff5f7a 0%, #fe3b53 100%);
          box-shadow: 0px 6px 4px 0px rgba(254, 80, 107, 0.1);
          border-radius: 500rpx;

          .icon {
            width: 44rpx;
            height: 44rpx;
          }
        }

        .life-iocn-title {
          margin-left: 32rpx;
          font-size: 34rpx;
          font-weight: 400;
          color: #333333;
          line-height: 34rpx;
        }
      }
    }
  }

  .second-model {
    margin-top: 50rpx;
    flex-wrap: wrap;
    padding: 0 24rpx;

    .second-line {
      width: 343rpx;
      height: 110rpx;
      justify-content: center;
      padding-left: 39rpx;
      position: relative;

      &:not(:first-child) {
        margin-top: 16rpx;
      }

      .line-navigator {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
      }

      .line-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
      }

      .line-title {
        position: absolute;
        font-size: 32rpx;
        font-weight: 500;
        line-height: 32rpx;
      }

      .line-msg {
        position: absolute;
        margin-top: 100rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #666666;
        line-height: 26rpx;
      }
    }

    .line1 {
      width: 100%;
      height: 171rpx;

      .line-title {
        font-size: 40rpx;
        font-weight: 500;
        line-height: 40rpx;
      }
    }
  }

  .second-tabs {
    padding: 22rpx 0 50rpx;

    .van-tabs__wrap::before {
      content: '';
      position: absolute;
      z-index: 0;
      // top: 84rpx;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #e1e1e1;
    }
  }

  .second-section {
    padding: 0 40rpx 16rpx 40rpx;

    .section-item {
      padding: 24rpx 0;
      border-bottom: 1px solid #e1e1e1;

      &:first-child {
        padding-top: 0;
      }

      .section-item-left {
        margin-right: 50rpx;

        .consult-content-title {
          font-size: 32rpx;
          font-weight: 400;
          color: #333333;
        }

        .consult-content-block {
          font-size: 24rpx;
          font-weight: 400;
          color: #999999;
        }
      }

      .section-item-right {
        width: 200rpx;
        height: 150rpx;
        border-radius: 8rpx;
      }
    }
  }

  .community {
    margin-bottom: 16rpx;

    view {
      font-weight: 500;
      width: 100%;
      font-size: 32rpx;
      border-radius: 8rpx;
      color: #fff;
      padding: 28rpx 32rpx;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin-bottom: 16rpx;
    }

    &:nth-child(odd) {
      view {
        background-image: url('https://jiexiu.xuqidata.com:8083/jiexiujumin/3451f3d1bfbffd0b3276d15634517ed6c4960977ee8175769365fa28d3c7f1aa.png');
      }
    }

    &:nth-child(even) {
      view {
        background-image: url('https://jiexiu.xuqidata.com:8083/jiexiujumin/23d5165d993cf51bd6b932c66b606f071337a5ad584e638e385c2dd5d9bcd249.png');
      }
    }
  }

  .community-village {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16rpx;
    flex-wrap: wrap;

    .community-flex {
      width: 48%;
      font-size: 32rpx;
      padding: 26rpx 11rpx 26rpx 31rpx;
      border-radius: 8rpx;
      color: #ffffff;
      margin-bottom: 24rpx;

      &:nth-child(odd) {
        background: linear-gradient(90deg, #1593f7 0%, #64bcee 100%);
        margin-right: 16rpx;
      }

      &:nth-child(even) {
        background: linear-gradient(-90deg, #ffc8c9 0%, #ff9fa1 100%);
      }

      view:nth-child(1) {
        font-weight: 500;
      }
    }
  }
</style>