<template>
  <view class="content">
    <view style="width: 100%; height: 44px;"></view>
    <view class="top-heder">
      <view class="t-left" @click="getback()">
        <uni-icons type="left" size="18"></uni-icons>
      </view>
      <view class="t-title">
        <text>选择检测项目</text>
      </view>
      <view class="t-you"></view>
    </view>
    <view class="cont_box">

      <view class="title_">
        可选检测项目：
      </view>
      <view class="box_">
        <view class="box_button " :class="{ 'box_button_x' :selectProject.indexOf(item)>-1  }"
              v-for="item in inpectionProjects" @click="clickProject(item)">{{ item.projectName }}
        </view>
      </view>

      <view class="title_">
        已选检测项目：
      </view>
      <u-steps activeColor="#0D2E8D" direction="column">
        <u-steps-item :iconSize="iconSize" v-for="item in selectProject" :title="item.projectName">
        </u-steps-item>

      </u-steps>


    </view>


    <view class="dlanniu" @click="sureChoose()">
      <text>确定选择</text>
    </view>

  </view>
</template>

<script>
import request from '../../utils/request';

export default {
  data() {
    return {
      iconSize: 130,
      inpectionProjects: [],
      selectProject: []
    }
  },
  onShow() {
    this.getProjects()

  },
  methods: {
    sureChoose() {
      if (this.selectProject.length == 0) {
        uni.showToast({
          title: '请选择项目！',
          icon: 'none'
        })
        return
      }
      this.selectProject.map(item => {
        item.projectId = item.id
        item.id = undefined
      })
      uni.$emit('selectProject', this.selectProject);
      this.getback()
    },
    getback() {
      uni.navigateBack()
    },
    async getProjects() {
      let res = await request({
        url: '/inspection/dl-inspection-project/page',
        method: 'get',
        params: {
          pageNo: 1,
          pageSize: 100
        }

      })
      this.inpectionProjects = res.data.records
    },
    clickProject(data) {
      let idx = this.selectProject.indexOf(data)
      if (idx > -1) {
        // 如果元素存在于数组中，则使用splice方法来删除它
        this.selectProject.splice(idx, 1);
      } else {
        this.selectProject.push(data)
      }

    }
  }
}
</script>

<style scoped>
	::v-deep .step-style{
			.u-steps-item__content{
				.u-text__value {
					font-size:80rpx !important;
					line-height: 90rpx !important;
				}
			}
		}
.cont_box {
  box-sizing: border-box;
  padding: 10px;
}

.title_ {
  font-weight: bold;
  margin-bottom: 5px;
}

.box_ {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.box_button_x {
  border-radius: 6px;
  border: 1px solid #0D2E8D;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-sizing: border-box;
  padding: 10px 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  background: #0D2E8D;
  color: #fff;
}

.box_button {
  border-radius: 6px;
  border: 1px solid #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:  18px;
  box-sizing: border-box;
 padding: 10px 15px;
 margin-right: 15px;
 margin-bottom: 15px;
}

.dlanniu {
  width: 80%;
  height: 45px;
  background: linear-gradient(180deg, #3F61C0 0%, #0D2E8D 100%);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  color: white;
}

.t-you {
  height: 100%;
  width: 20%;
}

.content {
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh);
  background: white;
}

.top-heder {
  width: 100%;
  height: 46px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 5px 15px;
}

.t-title {
  font-size: 17px;
  font-weight: bold;
  color: #333333;
}

.t-left {
  width: 10%;
}
</style>
