<template>
  <div class="ls-search-form">
    <el-row :gutter="20" class="search-style">
      <el-col :span="6">
        <label >拜访目的</label>
        <el-select clearable   :filterable="true" size="mini" v-model="queryParam.visitPurposeNames"  multiple  placeholder="请选择" @change="visitPurposefor(queryParam.visitPurposeNames)" collapse-tags>
          <el-option v-for="item in visitPurposeList" :value="item.vaule"  :key="item.vaule" :label="item.key"></el-option>
        </el-select>
        </common-select>
      </el-col>
      <el-col :span="6" >
        <label>客户名称</label>
        <el-input clearable size="mini" type="text" v-model="queryParam.customer" placeholder="请输入" maxlength="100" @keyup.enter.native="doSearch"></el-input>
      </el-col>
      <el-col :span="5">
        <label >销售人员</label>
        <el-input clearable size="mini" type="text" v-model="queryParam.salesUserName" placeholder="请输入" @keyup.enter.native="doSearch"></el-input>
        </common-select>
      </el-col>
      <el-col :span="7">
        <label>拜访时间</label>
        <el-date-picker @change="timeData"  v-model="timeDatas" type="daterange" size="mini"
          clearable range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-col>
    </el-row>

    <el-row v-show="isExtend" :gutter="20" class="search-style">
      <el-col :span="6" >
        <label>事项类型</label>
        <common-select :dictType="'Crm_Event_Type'" v-model="queryParam.itemType"></common-select>
      </el-col>
     <!-- <el-col :span="6">
         <label >事业部</label>
          <el-select v-model="queryParam.businessStr"  @change="departmenChange"
               placeholder="请选择" clearable  filterable size="mini" >
            <el-option
               v-for="(item , i) in departList"
               :key="i"
               :label="item.businessUnit"
               :value="item.businessUnit">
             </el-option>
           </el-select>
      </el-col>-->
      <el-col :span="6">
       <label >产品线</label>
       <el-select clearable   :filterable="true" size="mini" v-model="queryParam.productLineNames"  multiple  placeholder="请选择" @change="itemlistfor(queryParam.productLineNames)" collapse-tags>
         <el-option v-for="item in itemProductLinesList" :value="item.productLineName"  :key="item.productLineName" :label="item.productLineName"></el-option>
       </el-select>
      </el-col>
      <!-- <el-col :span="7">
        <label>销售区域</label>
         <el-input clearable size="mini" type="text" v-model="queryParam.salesRegion" placeholder="请输入" @keyup.enter.native="doSearch"></el-input>
      </el-col>
      </el-row>
      <el-row :gutter="20" class="search-style">
       <el-col :span="6">
        <label>关键词</label>
         <el-input clearable size="mini" type="text" v-model="queryParam.searchKey" placeholder="请输入" @keyup.enter.native="doSearch"></el-input>
      </el-col>-->
     </el-row>

    <div class="btns-wrap">
      <el-button type="warning" size="mini" icon="el-icon-search" @click="doSearch">查询</el-button>
      <el-button type="info" size="mini" icon="el-icon-refresh-left" plain @click="reset">重置</el-button>
     <!-- <div  class="extend">
        <el-button  @click="handleExtend" type="text"  size="mini" >
          <span v-if="isExtend">收起</span>
          <span v-else>展开</span>条件
          <i :class="isExtend?'el-icon-arrow-up':'el-icon-arrow-down' "></i>
        </el-button>
      </div> -->
    </div>
  </div>
</template>


<script>
  import commonSelectData from '@/common/commonSelectList.js'
  import commonSelectList from '../../../common/commonSelectList.js';
  export default {
    name: 'dictionary-search',
    components:{
    },
    props: {
    },
    data: function() {
      return {
        timeDatas: [],
        labelWidth: '85px', //label宽度
        selectLabelWidth: '72.5px',
        isExtend: true, //默认收起两行搜索条件
        productLines:"",
        queryParam: {
          itemType:"",
          customer: '',
          creater:"",
          salesUserName:"",//销售人员
          visitPurposeNames:[],
          productLineNames:[],
        },
        itemProductLinesList:[],//产品线
        departList:[],//事业部
        visitPurposeList:[],//拜访目的
        isShowList: [{
          value: '是',
          label: '是'
        }, {
          value: '否',
          label: '否'
        }],

        isRequiredList: [{
            value: '是',
            label: '是'
          },
          {
            value: '否',
            label: '否'
          }
        ],
      };
    },
    created: function() {
      //初始化下拉框数据
      this.initSelect();
      this.itemProductLinesData()
    },
    methods: {
      async departmenChange(val){
        if(val){
             for(let item of  this.departList){
                if(item.businessUnit === val){
                  this.itemProductLinesList  = await commonSelectData.initProductLinePost(this, val);
                  return;
                }
             }
            } else {
              this.itemProductLinesList  = await commonSelectList.initProductLinePost(this);
            }
      },
      //筛选控件触发查询
      doSearch: function() {
        this.$emit('query', this.queryParam);
      },
      async initSelect(){
        //获取事业部数据
        this.departList = await commonSelectData.initProductLineChangePost(this);
        //获取拜访目的
        this.visitPurposeList = await commonSelectList.initDictDataGet(this,"Crm_Visit_Purpose");
          //获取产品线数据
        this.itemProductLinesList = await commonSelectList.initProductLinePost(this);
      },
      async itemProductLinesData(){
        //获取产品线数据
        this.itemProductLinesList = await commonSelectList.initProductLinePost(this);
      },
      //展开搜索条件
      handleExtend(){
        this.isExtend = !this.isExtend;
      },
      //时间范围
      timeData() {
        if (this.timeDatas == "" || this.timeDatas == undefined) {
            this.queryParam.starTime = ""
            this.queryParam.endTime = ""
        } else {
          this.queryParam.starTime = this.timeDatas[0]
          this.queryParam.endTime = this.timeDatas[1]
        }
      },
      //获取选中的产品线字符串
      itemlistfor(value) {
         //去重
         this.queryParam.productLineNames = Array.from(new Set(value));
      },

      // 获取选中的拜访目的
      visitPurposefor(value) {
         //去重
         this.queryParam.visitPurposeNames = Array.from(new Set(value));
      },

      //重置
      reset: function() {
        this.queryParam = {
          starTime:"",
          endTime:"",
          itemType:"",
          customer: "",
          creater:"",
          salesUserName:"",//销售人员
          visitPurposeNames:[],
          productLineNames:[],

        }
        this.timeDatas = []
        this.doSearch()
      }
    },

  }
</script>

<style type="text/css" scoped lang="scss">
.ls-search-form{
  /deep/ .el-date-editor .el-range-separator {
    padding: 0 ;
  }
}
</style>
