<template>
  <view class="ConCss">
    <view class="topFCss">
      <view class="tabsCss" :class="!current?'isActiveCss':''" @click="current = 0">
        市场摸底

      </view>
      <view class="tabsCss" :class="current?'isActiveCss':''" @click="current = 1">
        待开发用户池
      </view>
    </view>
    <u-divider style="margin:0;"></u-divider>
    <view class="topSCss" v-if="!current">
      <u-tabs :list="tabList1" :current="current1" lineHeight="0" lineColor="#f56c6c" :activeStyle="{
                 color: '#cf000d',
                 fontWeight: 'bold',
                 transform: 'scale(1.1)'
             }" itemStyle="height: 78rpx;">
        <view slot="right" style="padding-left: 4px;padding-right: 10rpx;" @click="openFiscalYearChoice">
          <view style="display:flex;"><u-icon name="clock" size="18" bold></u-icon>
            <text style="padding-left:10rpx;" :style="fiscalYear!=''?'color:#339af0':''">财年</text>
          </view>
        </view>
      </u-tabs>
    </view>
    <view class="topSCss" v-else>
      <u-tabs :list="tabList2" :current="current2" lineHeight="0" lineColor="#f56c6c" :activeStyle="{
                 color: '#cf000d',
                 fontWeight: 'bold',
                 transform: 'scale(1.1)'
             }" itemStyle="display:flex;justify-content: space-between;height: 78rpx;">
        <!-- <view v-show="!current" slot="right" style="padding-left: 4px;padding-right: 10rpx;" @click="$u.toast('插槽被点击')">
          <view style="display: flex;">
            <u-icon name="clock" size="21" bold></u-icon>
            <text>财年</text>
          </view>
        </view> -->
      </u-tabs>
    </view>
    <u-search placeholder="搜索感兴趣的内容" v-model="keyword" :show-action="false" borderColor="rgb(230, 230, 230)"
      height="74rpx" bgColor="#F5F6FA" @search="search"></u-search>
    <view class="listBodyCss">
      <view class="reportCss" v-if="!current" v-for="i in 5">
        <view class="topTitleCss">
          <view class="top1 overflow-one-lines"> 2023财年玉林中燃天然气市场调研报告 </view>
          <view class="top2 overflow-one-lines"> 预算主体: </view>
          <view class="top2 overflow-one-lines"> 填报人: </view>
          <view class="top2 overflow-one-lines"> 状态有效时间: </view>
        </view>
        <view class="topStateCss">
          <view class="textCss"> 状态 </view>
          <view class="btnCss">
            <u-button color="#CF000D" style="width: 160rpx;height: 60rpx;" shape="circle" text="查看详情" @click="jumpReportDetails"></u-button>
          </view>
        </view>
      </view>
      <view class="reportCss" @click="jumpUserDetails" :style="'height:auto'" v-else v-for="i in 5">
        <view class="topTitleCss">
          <view class="top1 overflow-one-lines"> 张三 </view>
          <view class="top2 overflow-one-lines"> 预算主体: </view>
          <view class="top2 overflow-one-lines"> 联系方式: </view>
          <view class="top2 overflow-one-lines"> 详情地址: </view>
        </view>
      </view>
    </view>
    <u-datetime-picker :show="fiscalYearShow"  v-model="fiscalYear" cancelText="重置"  @confirm="fiscalYearShow = false"
     @cancel="reset" @close="fiscalYearShow = false" closeOnClickOverlay mode="year" ></u-datetime-picker>
  </view>
</template>

<script>
  import { $moment } from '@/uni_modules/uview-ui';
  export default {
    components: {},
    props: {

    },
    data() {
      return {
        current: 0,
        keyword: "",
        current1: 0,
        current2: 0,
        fiscalYearShow:false,
        fiscalYear:"",
        tabList1: [{
          name: '全部'
        }, {
          name: '待申报',
        }, {
          name: '待评审'
        }, {
          name: '待修改'
        }, {
          name: '已通过'
        }],
        tabList2: [{
          name: '居民用户'
        }, {
          name: '商业用户',
        }, {
          name: '工业用户'
        }],
      }
    },
    computed: {

    },
    onLoad() {

    },
    methods: {
      openFiscalYearChoice(){
        this.fiscalYearShow = true;
        // this.fiscalYear = Number(new Date());
      },
      reset(){
        console.log("重置");
        this.fiscalYear = "";
        this.fiscalYearShow = false;
      },
      jumpUserDetails(){
        uni.navigateTo({
          url:"/pages/market/userDetails"
        })
      },
      jumpReportDetails(){
        uni.navigateTo({
          url:"/pages/market/reportDetails"
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ConCss {
    background: #f2f4f3;
  }

  .topFCss {
    display: flex;
    justify-content: center;
    background: #fff;
  }


  .tabsCss {
    position: relative;
    margin: 24rpx 66rpx;
    padding-bottom: 10rpx;
    background-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    font-family: '苹方 中等', '苹方', sans-serif;
    color: #666666;
    text-align: left;
    line-height: normal;
    font-size: 32rpx;
    color: #666666;
  }

  .isActiveCss {
    background-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    font-family: '苹方 粗体', '苹方 中等', '苹方', sans-serif;
    font-weight: 700;
    color: #333333;
    text-align: left;
    line-height: normal;
    font-size: 42rpx;
  }

  .isActiveCss::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    min-width: 168rpx;
    /* 图片宽度 */
    height: 14rpx;
    /* 图片高度 */
    background-image: url('@/static/images/icon/tabs.png');
    background-repeat: no-repeat;
    background-position: 10%;
    background-size: 100% 100%;
  }

  .topSCss {
    padding: 26rpx 34rpx;
    background: #fff;
  }

  /deep/.u-search {
    background: #fff;
    padding: 0rpx 34rpx 24rpx 34rpx;
  }

  /deep/.u-tabs__wrapper__nav {
    justify-content: space-between;
  }

  .listBodyCss {}

  .topTitleCss {
    display: flex;
    flex-direction: column;

    .top1 {
      background-color: rgba(255, 255, 255, 0);
      box-sizing: border-box;
      font-family: '苹方 中等', '苹方', sans-serif;
      color: #333333;
      text-align: left;
      line-height: normal;
      font-size: 30rpx;
      font-weight: 500;
      margin-bottom: 16rpx;
    }

    .top2 {
      background-color: rgba(255, 255, 255, 0);
      box-sizing: border-box;
      font-family: '苹方 中等', '苹方', sans-serif;
      color: #8b9197;
      text-align: left;
      line-height: normal;
      font-size: 26rpx;
      margin: 16rpx 0rpx;
    }
  }

  .topStateCss {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;

    .textCss {
      background-color: rgba(255, 255, 255, 0);
      box-sizing: border-box;
      font-family: '苹方 中等', '苹方', sans-serif;
      text-align: left;
      line-height: normal;
      font-size: 26rpx;
    }

    .btnCss {}
  }

  .reportCss {
    margin: 20rpx 24rpx;
    height: 377rpx;
    display: flex;
    justify-content: space-between;
    padding: 30rpx;
    border-radius: 20px;
    background-color: #ffffff;
    box-sizing: border-box;
  }
</style>