<template>
  <view class="body-background"></view>
	<u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="#fff"
  ></u-navbar>
  <view class="screen-body" :class="{pad:(tabCheck === 'lists')}">
    <u-row>
      <u-col :custom-style="{backgroundColor:'#fff',borderRadius:'10rpx',padding:'0 26rpx'}">
        <u-tabs
            :list="list"
            u-sticky
            lineWidth="64"
            lineHeight="8"
            :inactiveStyle="{color:'#AFB5BE'}"
            :activeStyle="{color:'#F47210'}"
            lineColor="#F47210"
            :custom-style="{margin:'auto'}"
            :scrollable="false"
            @change="tabsChenge"
        ></u-tabs>
        <view class="screen-container row"  :class="{show:(tabCheck === 'lists')}">
          <u-row :custom-style="{width:'100%',display:(tabCheck === 'lists'?'flex':'none')}" :gutter="20">
            <u-col :span="5">
              <view class="screen-type">
                <view class="screen-type-button row ">
                  <view class="button-text">
                    <u-text text="事件类型" size="28" color="#020B18"></u-text>
                  </view>
                  <view class="button-icon">
                    <u-icon name="arrow-down-fill" size="12"></u-icon>
                  </view>
                </view>
              </view>
            </u-col>
            <u-col :span="7">
              <view class="screen-date col-7">
                <view class="screen-date-button row col">
                  <view class="date-text">
                    <u-text text="2023-08-03" size="28" color="#020B18"></u-text>
                  </view>
                  <view class="date-icon">
                    <u-icon name="calendar" size="32"></u-icon>
                  </view>
                </view>
              </view>
            </u-col>
          </u-row>


        </view>
        <view :class="{show:(tabCheck === 'submit')}">
          <SubmitPage v-show="(tabCheck === 'submit')"></SubmitPage>
        </view>
      </u-col>
    </u-row>
  </view>

  <view class="screen-button-body" :style="{display:(tabCheck === 'lists'?'flex':'none')}">
    <u-row :custom-style="{padding:'16rpx 26rpx'}">
      <u-col>
        <view class="screen-button-group row">
          <view class="screen-button">
            <u-button text="全部事件" color="#FF9545" :hairline="false" :custom-style="{borderRadius:'10rpx',border:'none'}">全部事件</u-button>
          </view>
          <view class="screen-button">
            <u-button text="全部事件" color="#fff" :hairline="false" :custom-style="{borderRadius:'10rpx',border:'none',color:'#020B18'}">待结案</u-button>
          </view>
          <view class="screen-button">
            <u-button text="全部事件" color="#fff" :hairline="false" :custom-style="{borderRadius:'10rpx',border:'none',color:'#020B18'}">已结案</u-button>
          </view>

        </view>
      </u-col>
    </u-row>
  </view>
	<view :class="{show:(tabCheck === 'lists')}">
    <ListPage v-show="(tabCheck === 'lists')"></ListPage>
	</view>
</template>

<script>
  import SubmitPage from "./components/SubmitPage/index.vue";
  import ListPage from "./components/ListPage/index.vue";

	export default {
		components: {
      SubmitPage,
      ListPage,
		},
		data() {
			return {
        list: [{
          name: '线索提交',
          id:'submit'
        }, {
          name: '线索列表',
          id:'lists'
        },],
        tabCheck:'submit',
				show: false,
				title: '线索上传',
			}
		},
		onLoad() {

		},
		methods: {
			// store.
      tabsChenge(e){
        console.log(e)
        this.tabCheck = e.id
      }
		},
		onPageScroll(res) {

		},
		created() {

      },
		mounted() {

		},
	}
</script>

<style lang="scss">

  ::v-deep .u-tabs__wrapper__nav__line{
    left:24rpx;
  }
  .body-background{
    background:{
      color:#F5F5F6;
    }
  }
  .screen-type-button{
   justify-content: space-between;
    border:2rpx solid #eee;
    align-items: center;
    padding:12rpx 24rpx;
    border-radius: 10rpx;
    .button-text{
      //margin-right:50rpx;
    }
  }
  .screen-date-button{
    justify-content: space-between;
    border:2rpx solid #eee;
    align-items: center;
    padding:12rpx 24rpx;
    border-radius: 10rpx;
    .button-date{
      //margin-right:50rpx;
    }
  }
  .screen-button-group{
    justify-content: flex-start;
    .screen-button + .screen-button{
        margin-left:16rpx;
    }
  }
  .screen-body{
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    transition-delay: .2s;

    -webkit-transition-duration:.2s;
    -webkit-transition-timing-function:ease-in-out;
    -webkit-transition-delay:.2s;
    padding:16rpx 26rpx;
    background:{
      color:transparent;
    }
    &.pad{
      background:{
        color:#fff;
      }
      .screen-container{
        position: relative;
        opacity: 1;
        margin-top:32rpx;
        margin-bottom:16rpx;
      }
    }

  }
  @keyframes show {
    0% {
      display: block;
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .show {
    animation: show .5s;
  }
</style>