<template>
	<view class="page">
    <view class="status-secs">
      <view
        v-for="(item, index) in statusList"
        :key="item.id"
        :class="[ { active: totalStatus.statusCount === item.id } ]"
        @click="chooseStatus(item.id)"
      >
        {{ item.text }}
      </view>
    </view>
    <uni-easyinput
        prefixIcon="search"
        v-model="totalStatus.keyword"
        placeholder="请输入项目名称"
        @iconClick="toggleSearch"
    ></uni-easyinput>
    <zb-dropdown-menu  style="width: 100%">
      <zb-dropdown-item
          name="first"
          :options="learnTypeRange"
          v-model="totalStatus.learnType"
          @change="statusChange"
      ></zb-dropdown-item>
      <zb-dropdown-item
          name="two"
          :options="outDateStatusRange"
          v-model="totalStatus.outDateStatus"
          @change="statusChange"
      ></zb-dropdown-item>
      <zb-dropdown-item
          name="three"
          :options="qualStatusRange"
          v-model="totalStatus.qualStatus"
          @change="statusChange"
      ></zb-dropdown-item>
      <zb-dropdown-item
          name="four"
          :options="signupStatusRange"
          v-model="totalStatus.signupStatus"
          @change="statusChange"
      ></zb-dropdown-item>
    </zb-dropdown-menu>
    <view class="project-cont">
      <view
          v-for="(item, index) in projList"
          :key="item.id"
          class="single-proj"
      >
        <h4 class="img">
          <image :src="item.img"></image>
        </h4>
        <view class="proj-detail">
          <view class="detail-upper">
            <h5 style="font-size: 16px">{{ item.title }}</h5>
            <l-starRate v-model="item.star" :disabled="true"></l-starRate>
            <view class="icons">
              <uni-icons color="#c0c0c0" type="eye-filled"></uni-icons><span>3</span>
              <uni-icons color="#c0c0c0" type="chat-filled" style="margin-left: 5rpx"></uni-icons><span>3</span>
              <uni-icons color="#c0c0c0" type="hand-up-filled" style="margin-left: 5rpx"></uni-icons><span>3</span>
            </view>
          </view>
          <view class="detail-lower">
            <view class="avatar">
              <image :src="item.avatar"></image>
            </view>
            <view class="progress">
              <span>{{ item.user }}</span>
              <view class="bar">
                <liu-progressbar
                    :progress="item.percent"
                    color="#000"
                    :height="'10rpx'"
                    bgColor="#1989FA"
                    :textInside="false"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				statusList: [
          { text: '全部', id: 0 },
          { text: '已完成', id: 1 },
          { text: '未完成', id: 2 },
        ],
        // 参数状态
        totalStatus: {
          statusCount: 0,
          keyword: '',
          learnType: '',
          outDateStatus: '',
          qualStatus: '',
          signupStatus: ''
        },
        // 状态选项
        learnTypeRange: [
          { text: '学习类型', value: '' },
          { text: '不学', value: 1 },
          { text: '要学', value: 2 },
        ],
        outDateStatusRange: [
          { text: '逾期状态', value: '' },
          { text: '临期', value: 1 },
          { text: '过期', value: 2 },
        ],
        qualStatusRange: [
          { text: '合格状态', value: '' },
          { text: '合格', value: 1 },
          { text: '不及格', value: 2 },
        ],
        signupStatusRange: [
          { text: '报名状态', value: '' },
          { text: '报了', value: 1 },
          { text: '没报', value: 2 },
        ],
        // 项目列表
        projList: [
          {
            id: 1,
            img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
            title: '应急抢险',
            star: 5,
            avatar: '/static/avatar.jpg',
            user: '管理员',
            percent: 71
          },
          {
            id: 2,
            img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
            title: '应急抢险',
            star: 3,
            avatar: '/static/avatar.jpg',
            user: '管理员',
            percent: 33
          },
          {
            id: 3,
            img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
            title: '应急抢险',
            star: 2,
            avatar: '/static/avatar.jpg',
            user: '管理员',
            percent: 94
          },
          {
            id: 4,
            img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
            title: '应急抢险',
            star: 4,
            avatar: '/static/avatar.jpg',
            user: '管理员',
            percent: 76
          },
          {
            id: 5,
            img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
            title: '应急抢险',
            star: 1,
            avatar: '/static/avatar.jpg',
            user: '管理员',
            percent: 63
          },
          {
            id: 6,
            img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
            title: '应急抢险',
            star: 5,
            avatar: '/static/avatar.jpg',
            user: '管理员',
            percent: 52
          },
          {
            id: 7,
            img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
            title: '应急抢险',
            star: 4,
            avatar: '/static/avatar.jpg',
            user: '管理员',
            percent: 18
          },
        ]
			}
		},
		methods: {
      chooseStatus(count) {
        this.totalStatus.statusCount = count
        console.log(this.totalStatus)
      },
      toggleSearch() {
        console.log(this.totalStatus)
      },
      statusChange(item) {
        console.log(this.totalStatus)
      }
		}
	}
</script>

<style lang="scss">

  .page{

    width: 100vw;
    height: 100vh;
    background-color: #F8F8F8;
    box-sizing: border-box;
    padding: 0 10px;

    .status-secs{

      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 1vh;

      view{

        box-sizing: border-box;
        padding: 0 15rpx;
        font-size: 18px;
        color: #9EA2AC;
        font-weight: bold;

      }

      .active{

        font-size: 28px;
        color: #000;

      }

    }

    .drops{

      width: 100%;
      margin-top: 1vh;
      display: flex;

    }

    .project-cont{

      width: 100%;
      height: 10rpx;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .single-proj{

        width: 49%;
        height: 30vh;
        margin-bottom: 1vh;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background-color: #fff;

        .img{

          width: 100%;
          height: 45%;

          image{

            width: 100%;
            height: 100%;

          }

        }

        .proj-detail{

          flex: 1;
          display: flex;
          flex-direction: column;

          .detail-upper{

            width: 100%;
            height: 65%;
            border-bottom: 1px solid #DFDFDF;
            box-sizing: border-box;
            padding: 5px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .icons{

              font-size: 12px;
              color: #C0C0C0;
              display: flex;
              align-items: center;

              span{

                padding-left: 5rpx;

              }

            }

          }

          .detail-lower{

            flex: 1;
            box-sizing: border-box;
            padding: 5px;
            display: flex;

            .avatar{

              width: 20%;
              height: 100%;
              border-radius: 50%;
              overflow: hidden;
              margin-right: 10rpx;

              image{

                width: 100%;
                height: 100%;

              }

            }

            .progress{

              flex: 1;
              box-sizing: border-box;
              font-size: 12px;
              display: flex;
              flex-direction: column;
              justify-content: space-around;

              .bar{

                flex: 1;

              }

            }

          }

        }

      }

    }

  }

</style>
