<!--
 * @Description : 全局搜索组件 -- 回车搜索 -- 点击搜索 -- 重置清空数据
 * @Author      : jinxin
 * @Date        : 2022-10-14 09:30:57
-->
<template>
  <div class="content-box">
    <el-form ref="form" v-model="data.list" class="c-b-form">
      <div v-for="(rowItem,inde) in data.list" :key="inde" class="c-b-f-1-item">
        <div v-for="(colItem,index) in rowItem" :key="index" class="c-b-f-2-item">
          <div v-if="inde <= data.isShowMore">
            <el-form-item :label="colItem.label" v-if="colItem.type == 'ipt'">
              <el-input v-model.trim="colItem.value" maxlength="100" limit style="width:220px;"
                @input="changComVal(colItem)" @keydown.enter.prevent="commonClick('enter')"
                :placeholder="colItem.placeholder">
              </el-input>
            </el-form-item>
            <el-form-item v-if="colItem.type == 'sel'" :label="colItem.label">
              <el-select v-model="colItem.value" filterable remote clearable reserve-keyword
                @change="changComVal(colItem)" :remote-method="(query)=>{getlist(query,colItem)}"
                :popper-append-to-body="false" placeholder="请输入...">
                <el-option v-for="(it,index) in colItem.list" :key="index" :label="it.name" :value="it.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="colItem.type == 'cas'" :label="colItem.label">
              <el-cascader v-model="colItem.value"  ref="getDom" @change="selectProdcut(colItem)"
                :options="data.options" :props="data.props" :show-all-levels="false"  clearable style="width:220px" />
            </el-form-item>
            <el-form-item v-if="colItem.type == 'spec'"></el-form-item>
            <el-form-item v-if="colItem.type == 'checkboxcontainer'">
              <el-checkbox v-model="colItem.otherComponent.value" @change="changComVal(colItem.otherComponent)"
                true-label="1" false-label="0">{{colItem.otherComponent.name}}</el-checkbox>
              <el-checkbox v-model="colItem.otherchekbox.value" @change="changComVal(colItem.otherchekbox)"
                true-label="1" false-label="0">{{colItem.otherchekbox.name}}</el-checkbox>
            </el-form-item>
            <el-form-item v-if="colItem.type == 'date'" :label="colItem.label">
              <el-date-picker v-model="colItem.value" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期"
                :default-value="new Date()" @change="changComVal(colItem)" />
            </el-form-item>
            <el-form-item :label="colItem.label" v-if="colItem.type == 'searchReset'">
              <span @click="getMoreSearch" class="bl-c m-r">更多筛选</span>
              <el-button :class="[colItem.otherComponent?'m-l':'']" type="primary"
                @click="commonClick('search',colItem.url,colItem.otherValue)">搜索</el-button>
              <el-button type="primary" @click="commonClick('reset',colItem.url,colItem.otherValue)">重置</el-button>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { defineComponent, onMounted, reactive, watch, getCurrentInstance, ref } from 'vue'
import Request from '@/utils/request.js'
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: 'CommonSeach',
  props: {
    diySerach: Array,
    options: Array,
    noticeClear: Number
  },
  emits: ['update:diySerach', 'getSeachData', 'update:noticeClear', 'getSeachTopSeachVal', 'getChangeValue', 'clearValue'],
  setup (props, context) {
    // 生命周期
    onMounted(() => { })
    // 创建实例
    const request = new Request()
    const { proxy } = getCurrentInstance()
    let data = reactive({
      list: [],
      props: {
        expandTrigger: 'hover',
        value: 'id',
        label: 'name',
        children: 'children',
        emitPath: false,
      },
      options: [],
      isShowMore: 1
    })
    let getDom = ref(null)
    // 点击搜索 -- 重置
    const commonClick = (typeP, urlP, otherValueP) => {

      // 处理请求数据 - 回车搜索 - 点击搜索 - 重置清空数据
      let enterlist = []
      // 去掉假值
      data.list = data.list.filter(Boolean)
      data.list.forEach(el => {
        if (!enterlist.length) {
          enterlist = el.filter(it => it.type == 'searchReset')
        }
      })
      let type = typeP == 'enter' ? 'search' : typeP
      let url = typeP == 'enter' ? enterlist[0].url : urlP
      let otherValue = typeP == 'enter' ? enterlist[0].otherValue : otherValueP
      let query = otherValue
      data.list.forEach(el => {
        el.forEach(ele => {
          if (ele.type == 'ipt' || ele.type == 'sel' || ele.type == 'cas' || ele.type == 'date') {
            if (type == 'search') {
              query[ele.queryValue] = ele.value
            } else {
              query[ele.queryValue] = ''
              ele.value = ''
            }
          }
          if (ele.otherComponent) {
            if (type == 'search') {
              query[ele.otherComponent.queryValue] = ele.otherComponent.value
            } else {
              query[ele.otherComponent.queryValue] = '0'
              ele.otherComponent.value = '0'
            }
          }
        });
      });
      // 成功 - 更新数据、成功提示 -- 失败 - 数据不变、失败提示 
      // console.log('query -->',query)
      // console.log('typeP --> ',typeP)
      if (typeP == 'reset') {
        context.emit('clearValue')
      }
      request.get(url, query).then(res => {
        ElMessage({
          type: res.s_code.toLowerCase(),
          message: res.message
        })
        if (res.status == 200) {
          context.emit('getSeachTopSeachVal', query)
          context.emit('getSeachData', JSON.parse(JSON.stringify(res.data)))
        }
      })
    }
    const getMoreSearch = () => {
      data.isShowMore = data.isShowMore === 1 ? 2 : 1
    }
    // 获取模糊匹配list
    const getlist = (val, item) => {
      if (item.label == 'OPD团队') {
        let queryPara = {
          page: 1,
          size: 5,
          name: val,
          status: 1
        }
        proxy.$http.get('v1/opd_team', queryPara).then(res => {
          if (res.status == 200) {
            item.list = res.data.data
          }
        })
      }
      if (item.label == '默认供应商') {
        let queryPara = {
          page: 1,
          size: 5,
          value: val
        }
        proxy.$http.get('v1/product/get_supplier_list', queryPara).then(res => {
          if (res.status == 200) {
            item.list = res.data.data
          }
        })
      }
      if (item.label == '默认供应组织') {
        let queryPara = {
          page: 1,
          size: 5,
          value: val
        }
        proxy.$http.get('v1/product/get_org_list', queryPara).then(res => {
          if (res.status == 200) {
            item.list = res.data.data
          }
        })
      }
    }
    // 值发生改变的时候
    const changComVal = (item) => {
      // console.log('input select item -->', item)
      context.emit('getChangeValue', item)
    }
    // 产品分类
    const selectProdcut = (item) => {
      // console.log('cas item -->',item)
      context.emit('getChangeValue', item)
      // getDom.value[0].togglePopperVisible()
    }
    // 监听
    watch(() => props.diySerach, (newVal, oldVal) => {
      data.list = newVal
      console.log('diySerach', data.list)
    })
    watch(() => props.options, (v1, v2) => {
      data.options = v1
    })
    watch(() => props.noticeClear, (v1, v2) => {
      //   console.log('清空搜索内容',v1)
      //   console.log('清空数据 -- >',data.list)
      // 去假值
      data.list = data.list.filter(Boolean)
      data.list.forEach(el => {
        el.forEach(ele => {
          if (ele.type == 'ipt' || ele.type == 'sel' || ele.type == 'cas') {
            ele.value = ''
          }
          if (ele.otherComponent) {
            ele.otherComponent.value = '0'
          }
        });
      });
    })
    return {
      data,
      props,
      getDom,
      commonClick,
      getlist,
      selectProdcut,
      changComVal,
      getMoreSearch
    }
  }
})
</script>
<style scoped>
.content-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: inherit;
}
.c-b-form {
  width: 100%;
  padding: 24px 0 0;
}

.c-b-f-1-item,
.c-b-f-2-item {
  display: flex;
  width: 100%;
  justify-content: center;
  align-content: center;
}
.m-l {
  margin-left: 10px;
}
.m-r {
  margin-right: 10px;
}
.m-t {
  margin-top: 10px;
}
::v-deep(.c-b-f-item .el-form-item) {
  flex: 1;
}
::v-deep(.el-form-item__label) {
  width: 110px;
}
.bl-c {
  color: #409eff;
  cursor: pointer;
}
</style>