<!--
 * @Author: your name
 * @Date: 2021-05-08 15:59:31
 * @LastEditTime: 2021-05-14 13:40:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ESB\src\components\projectNav.vue
-->
<template>
  <div class="tool-common-wrap" style="margin-left: 10px">
    <div class="search-wrap">
      <quick-query ref="projectQuick" :placeholder="placeholder" :is-date="false" @quickSearch="projectSearch"/>
    </div>
    <div style="clear: both" class="project-content">
      <el-radio-group v-model="navProjectId" style="width: 100%">
      <div
class="item"
           v-for="(item,index) in projectList"
:key="index"
           @click.stop="projectClick(item)">
        <span style="flex: 1">{{ item.name }}</span>
        <el-radio  :label="item.id">{{ "" }}</el-radio>
      </div>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
import QuickQuery from '@/components/quickquery/QuickQuery'
import { queryProjectList, exportDatas } from '@/api/project_list'
export default {
  name: 'ProjectNav',
  components: { QuickQuery },
  data() {
    return {
      placeholder: '请输入项目名称',
      navProjectId: localStorage.getItem('projectID'),
      projectList: [],
      projectObj: {}
    }
  },
  props: {
    choose: {
      type: String,
      default: ''
    }
  },
  mounted() {
    this.queryProject()
    this.projectObj.id = localStorage.getItem('projectID')
    this.projectObj.name = localStorage.getItem('projectName')
    this.$emit('itemClick', this.projectObj)
  },
  methods: {
    projectClick(item) {
      console.log('点击一下', 'item')
      this.navProjectId = item.id
      this.$emit('itemClick', item)
    },
    projectSearch(val) {
      this.queryProject(val.searchData)
    },
    queryProject(val) {
      // const data = {
      //   'logic': 'or',
      //   'filters': [
      //     {
      //       key: 'name',
      //       opt: 'LIKE',
      //       type: 'S',
      //       value: val
      //     }
      //   ],
      //   'orderby': 'createon',
      //   'sort': 'desc',
      //   'pageNum': 1,
      //   'pageSize': 9999,
      //   'total': 7
      // }
      const data = {
        'filters': [
          {
            key: 'level',
            opt: 'LIKE',
            type: 'S',
            value: 1
          }, {
            key: 'name',
            opt: 'LIKE',
            type: 'S',
            value: val
          }
        ],
        'orderby': 'createon',
        'sort': 'desc',
        'pageNum': 1,
        'pageSize': 9999
      }
      exportDatas(data).then(rt => {
        if (rt.status === '200') {
          this.projectList = rt.data.list
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.project-content {
  height: 520px; //calc(70vh - 50px);
  overflow: scroll;
  padding: 10px;
  background-color: #eeeeee;

.item {
  height: 30px;
  padding-left: 10px;
  margin: 2px 0;
  border-radius: 2px;
  display: flex;
  align-items: center;
  background-color: #fff;
  font-size: 13px;
}
}
</style>
