<template>
  <div>
    <div class="fixed top-0z left-0 w-screen z-50">
      <div class="relative flex justify-center items-center py-3 h-12 ">
        <div class="absolute left-3 top-1/2 transform -translate-y-1/2 ">
          <app-icon
            icon-name="left-arrow"
            class-name="w-6 h-6"
            @click="$router.go(-1)"
          />
        </div>
        <div class="flex items-center justify-center  w-2/3 rounded-full bg-common-bg">
          <app-icon
            icon-name="search-light"
            class-name="w-7 h-7 mx-1"
          />
          <input v-model="value" type="text" placeholder="请输入搜索关键词" class="bg-common-bg">
        </div>
        <div class="absolute right-3 top-1/2 transform -translate-y-1/2">
          <button class="text-color-primary" @click="clickCancel()">取消</button>
        </div>
      </div>
    </div>
    <!-- <div>
        <ul v-for="(data,index) in Seach(value)" :key="index">{{data.thing}}</ul>
      </div> -->
    <div class="px-4 pt-8">
      <div class="mt-6 ">负责人</div>
      <div>
        <div v-for="(object,index) in leaders" :key="index" class=" rounded">
          <div class="border-b pl-2.5 pr-1 w-full  flex items-center text-sm">
            <app-icon
              slot="icon"
              icon-name="radio"
              class-name="w-6 h-6 mr-2 flex items-center"
            />
            <app-icon
              icon-name="avator"
              class-name="w-8 h-8 flex items-center mx-4"
            />
            <div class="w-screen ">{{ object }}</div>
          </div>
        </div>
      </div>
      <div class="mt-2 ">目标</div>
      <div>
        <div v-for="(object,index) in objects" :key="index" class="rounded">
          <div class="border-b pl-2.5 pr-1 py-2 w-full flex items-center text-sm">
            <app-icon
              icon-name="radio"
              class-name="w-4 h-4 mr-6 flex items-center"
            />
            <div class=" px-2 mr-2 rounded-full border border-tag-red text-tag-red">{{ object.condition }}</div>
            <div>{{ object.thing }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'OSearch',

  components: {
    'app-icon': () => import('@/components/common/Icon.vue')
  },
  data() {
    return {
      value: '有',
      checked: '',
      // datas:[
      //   {condition:'紧急',thing:'b增强公司内部管理制度1'},
      //   {condition:'重要',thing:'b增强公司内部管理制度2'},
      //   {condition:'紧急',thing:'a增强公司内部管理制度1'},
      //   {condition:'一般',thing:'d增强公司内部管理制度3'},
      // ],
      objects: [
        { condition: '紧急', thing: '有~增强公司内部管理制度' }
      ],
      leaders: [
        '有/点击展开 再次点击姓名 收起',
        '有XX'
      ]
    }
  },
  computed: {

  },
  methods: {
    clickCancel() {
      this.value = ''
    }
    // 根据字段筛选
    // Seach(value:string){
    //     return this.datas.filter(item => {
    //         if(item.thing.includes(value)){
    //             return item;
    //        }
    //    })
    // }
  }

})
</script>

<style lang="less">

</style>
