<template>
  <view>
    <Navbar title="工程选择" />
    <div class="content">
      <u-input
        v-model="searchValue"
        placeholder="请输入搜索内容"
        suffixIcon="search"
        suffixIconStyle="color: #909399"
        shape="circle"
        @blur="handleSearch"
        style="margin-bottom: 20px"
      />

      <!-- 数据列表 -->
      <div class="list-item" v-for="(item, index) in projectList" :key="index">
        <div class="item">{{ item.label }}</div>
        <div><u-button type="primary" plain text="查看" size="mini" @click="handleSee(item)" /></div>
      </div>
      <u-divider v-if="projectList.length == 0" text="暂无数据"></u-divider>
      <div style="height: 30px;"></div>
    </div>
  </view>
</template>

<script>
import { getProjectList } from '@/api/project'

export default {
  data() {
    return {
      searchValue: '',
      projectList: []
    }
  },
  mounted() {
    this.getProjectList()
  },
  methods: {
    handleSearch() {
      console.log('搜索', this.searchValue)
      this.getProjectList()
    },
    // 获取工程列表
    async getProjectList() {
      const params = {
        keyWord: this.searchValue || undefined
      }
      console.log('🚀 ~ getProjectList ~ params:', params)
      const res = await getProjectList(params)
      console.log('🚀 ~ getProjectList ~ res:', res)
      if (res.code === 200) {
        this.projectList = res.data
      }
    },
    // 查看
    handleSee(item) {
      console.log('查看', item)
      const params = {
        id: item.value,
        supUuid: item.supUuid,
        consUuid: item.consUuid
      }
      uni.navigateTo({
        url: `/pages/projectApproval/projectApproval?params=${JSON.stringify(params)}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0 20px;

  .list-item {
    font-weight: 400;
    font-size: 12px;
    color: #0a2640;
    margin: 18px 0;
    padding: 4px 10px;
    height: 36px;
    box-shadow: 0px 2px 4px 0px rgba(56, 136, 255, 0.1);
    border-radius: 3px 3px 3px 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: auto;
    text-overflow: ellipsis;

    .item {
      width: 70%;
      white-space: normal;
      word-wrap: break-word;
      word-break: break-all;
    }
  }
}
</style>
