<template>
  <view class="ConCss">
    <u-sticky bgColor="#fff" customNavHeight="0" offsetTop="0">
      <view class="topFCss">
        <view class="tabsCss" :class="!current?'isActiveCss':''" @click="typeChange(0)">
          市场摸底
        </view>
        <view class="tabsCss" :class="current?'isActiveCss':''" @click="typeChange(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;" @click="tabChange1">
          <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;" @click="tabChange2">
          <!-- <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>
    </u-sticky>
    <view class="listBodyCss">
      <view class="" v-if="!current">
        <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="newList1.length <= 0"></u-empty>
        <view class="reportCss" v-for="(item,index) in newList1" :key="index">
          <view class="topTitleCss">
            <view class="top1 overflow-one-lines"> {{item.reportName || ""}} </view>
            <view class="top2 overflow-one-lines"> 预算主体:{{item.budgetSubject || ""}} </view>
            <view class="top2 overflow-one-lines"> 填报人: {{item.createBy || ""}}</view>
            <view class="top2 overflow-one-lines"> 状态有效时间:
              {{$u.timeFormat(item.validityTimeEnd, 'yyyy年mm月dd日 hh:MM:ss') || ""}}
            </view>
          </view>
          <view class="topStateCss">
            <view class="textCss" :style="{'color':statusCss(item.statusCode)}"> {{item.statusName}} </view>
            <view class="btnCss">
              <u-button color="#CF000D" style="width: 160rpx;height: 60rpx;" shape="circle" text="查看详情"
                @click="jumpReportDetails(item.reportNo)"></u-button>
            </view>
          </view>
        </view>
        <u-loadmore :status="status1" v-if="newList1.length > 0" />
      </view>
      <view v-else>
        <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="newList2.length <= 0"></u-empty>
        <view class="reportCss" @click="jumpUserDetails(item)" :style="'height:auto'" v-else
          v-for="(item,index) in newList2" :key="index">
          <view class="topTitleCss">
            <view class="top1 overflow-one-lines" v-if="current2 === 0"> {{item.householdName || ""}} </view>
            <view class="top1 overflow-one-lines" v-else-if="current2 === 1"> {{item.householdName || ""}} </view>
            <view class="top1 overflow-one-lines" v-else-if="current2 === 2"> {{item.contactPerson || ""}} </view>
            <view class="top2 overflow-one-lines"> 预算主体: {{item.budgetSubject || ""}}</view>
            <view class="top2 overflow-one-lines"> 联系方式: {{item.phoneNumber || ""}}</view>
            <view class="top2 overflow-one-lines"> 详情地址: {{item.address || ""}}</view>
          </view>
        </view>
        <u-loadmore :status="status2" v-if="newList2.length > 0" />
      </view>
    </view>
    <u-datetime-picker :show="fiscalYearShow" v-model="yaerModal" cancelText="重置" @confirm="confirmYear"
      @cancel="resetDate" @close="fiscalYearShow = false" closeOnClickOverlay mode="year"></u-datetime-picker>
  </view>
</template>

<script>
  import {
    getOrganizelist,
    getPoolResidentlist,
    getPoolCommercelist,
    getPoolIndustrylist
  } from '@/api/organize.js'
  import {
    $moment
  } from '@/uni_modules/uview-ui';
  export default {
    components: {},
    props: {

    },
    data() {
      return {
        current: 0,
        keyword: "",
        current1: 0,
        current2: 0,
        newList1: [],
        newList2: [],
        fiscalYearShow: false,
        yaerModal:"",
        fiscalYear: "",
        status1: "loadmore",
        status2: "loadmore",
        total1: null,
        total2: null,
        queryParameter: {
          pageNum: 1,
          pageSize: 10
        },
        tabList1: [{
          name: '全部'
        }, {
          name: '待申报',
        }, {
          name: '待评审'
        }, {
          name: '待修改'
        }, {
          name: '已通过'
        }],
        tabList2: [{
          name: '居民用户'
        }, {
          name: '商业用户',
        }, {
          name: '工业用户'
        }],
      }
    },
    computed: {

    },
    onLoad() {
      this.initData()
    },
    onReachBottom() {
      let allTotal = this.queryParameter.pageNum * this.queryParameter.pageSize
      //待开发用户池
      if (this.current) {
        console.log(222);
        if (allTotal < this.total2) {
          this.queryParameter.pageNum++;
          this.status2 = 'loading';
          this.updateList2()
        } else {
          this.status2 = 'nomore';
        }
      } else {
        console.log(111);
        //市场摸底
        if (allTotal < this.total1) {
          this.queryParameter.pageNum++;
          this.status1 = 'loading';
          this.updateList1()
        } else {
          this.status1 = 'nomore';
        }
      }
    },
    onPullDownRefresh() {
      this.resetQuery();
      this.keyword = "";
      if (this.current) {
        this.current2 = 0;
        this.updateList2()
      } else {
        this.current1 = 0;
        this.updateList1()
      }
      setTimeout(() => {
        //结束下拉刷新
        uni.stopPullDownRefresh();
      }, 500);
    },
    methods: {
      statusCss(code) {
        const colors = ['#5875eb', '#ffa500', '#e74c3c', '#666666'];
        return colors[code];
      },
      initData() {
        getOrganizelist().then(res => {
          console.log("市场摸底列表", res);
          if (res.code === 200) {
            this.newList1 = res.rows;
            this.total1 = res.total;
          }
        })
      },
      typeChange(i) {
        this.keyword = "";
        this.resetQuery();
        this.current = i;
        this.current ? this.updateList2() : this.updateList1();
      },
      updateList1() {
        let Params
        if (this.keyword && this.current1 !== -1 && this.fiscalYear !== "") {
          Params = {
            reportName: this.keyword,
            statusCode: this.current1,
            fiscalYear: this.fiscalYear,
          }
        } else if (this.keyword !== "") {
          Params = {
            reportName: this.keyword,
          }
        } else if (this.current1 !== 0) {
          Params = {
            statusCode: this.current1 - 1
          }
        } else if (this.fiscalYear !== "") {
          Params = {
            fiscalYear: this.fiscalYear
          }
        }
        console.log(Params);
        Params = {
          ...this.queryParameter,
          ...Params
        };
        getOrganizelist(Params).then(res => {
          // console.log(res);
          if (res.code === 200) {
            if (this.queryParameter.pageSize > 1) {
              this.newList1 = [...this.newList1, ...res.rows];
            } else {
              this.newList1 = res.rows
            }
            this.total1 = res.total;
            console.log(this.newList1);
          }
        })
      },
      updateList2() {
        let Params
        if (this.current2 === 0) {
          if (this.keyword) {
            Params = {
              householdName: this.keyword,
            }
          }
          getPoolResidentlist(Params).then(res => {
            // console.log(res);
            if (res.code === 200) {
              if (this.queryParameter.pageSize > 1) {
                this.newList2 = [...this.newList2, ...res.rows];
              } else {
                this.newList2 = res.rows
              }
              this.total2 = res.total;
            }
          })
        } else if (this.current2 === 1) {
          if (this.keyword) {
            Params = {
              householdName: this.keyword,
            }
          }
          getPoolCommercelist(Params).then(res => {
            // console.log(res);
            if (res.code === 200) {
              if (this.queryParameter.pageSize > 1) {
                this.newList2 = [...this.newList2, ...res.rows];
              } else {
                this.newList2 = res.rows
              }
              this.total2 = res.total;
            }
          })
        } else if (this.current2 === 2) {
          if (this.keyword) {
            Params = {
              contactPerson: this.keyword,
            }
          }
          getPoolIndustrylist(Params).then(res => {
            // console.log(res);
            if (res.code === 200) {
              if (this.queryParameter.pageSize > 1) {
                this.newList2 = [...this.newList2, ...res.rows];
              } else {
                this.newList2 = res.rows
              }
              this.total2 = res.total;
            }
          })
        } else {

        }
        this.checkTotal()
        console.log("待开发", this.newList2);
      },
      checkTotal() {
        let allTotal = this.queryParameter.pageNum * this.queryParameter.pageSize
        if (this.total1 < allTotal) {
          this.status1 = "nomore"
        }
        if (this.total2 < allTotal) {
          this.status2 = "nomore"
        }
      },
      resetQuery() {
        this.newList1 = [];
        this.newList2 = [];
        this.queryParameter = {
          pageNum: 1,
          pageSize: 10
        }
      },
      tabChange1(e) {
        console.log(e);
        this.resetQuery()
        this.current1 = e.index;
        this.updateList1();
      },
      tabChange2(e) {
        console.log(e);
        this.current2 = e.index
        this.resetQuery();
        this.updateList2();
      },
      openFiscalYearChoice() {
        this.fiscalYearShow = true;
        // this.fiscalYear = Number(new Date());
      },
      confirmYear() {
        this.$nextTick(()=>{
          let year = this.$u.timeFormat(this.yaerModal, 'yyyy');
          this.fiscalYear = year;
          this.fiscalYearShow = false;
          console.log(this.fiscalYear);
          this.resetQuery();
        })
      },
      resetDate() {
        console.log("重置");
        this.fiscalYear = "";
        this.fiscalYearShow = false;
        this.resetQuery();
        this.updateList1();
      },
      search() {
        console.log("搜索");
        this.resetQuery();
        if (this.current) {
          this.updateList2()
        } else {
          this.updateList1()
        }
      },
      jumpUserDetails(item) {
        uni.navigateTo({
          url: `/pages/market/userDetails?type=${this.current2}&details=${JSON.stringify(item)}`
        })
      },
      jumpReportDetails(id) {
        uni.navigateTo({
          url: "/pages/market/reportDetails?reportNo=" + id
        })
      }
    }
  }
</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;
  }

  .u-empty {
    background: #fff !important;
  }
</style>
