<template>
  <div class="filter-container">
    <el-date-picker
      v-model="searchDatas.memberBirthday"
      type="date"
      placeholder="会员生日"
      value-format="yyyy-MM-dd"
      class="filter-item"
    ></el-date-picker>
    <el-select v-model="searchDatas.memberType" placeholder="请选择会员类型" class="form_select" clearable>
      <el-option
        v-for="item in memberType"
        :key="item.F_ValueId"
        :label="item.F_Value"
        :value="item.F_Value"
      ></el-option>
    </el-select>
    <el-cascader
      v-model="searchDatas.provinceCity"
      :options="provinceCityDatas"
      :props="props"
      @change="handleItemChange"
      ref="myCascader"
      placeholder="请选择地区"
      class="form_select area"
      clearable
      change-on-select
    />
    <el-input v-model="searchDatas.customerName" placeholder="客户姓名" class="filter-item"></el-input>
    <el-input v-model="searchDatas.phoneNumber" placeholder="手机号码" class="filter-item"></el-input>
    <el-input v-model="searchDatas.address" placeholder="详细地址" class="filter-item"></el-input>
    <el-input v-model="searchDatas.referrer" placeholder="推荐人" class="filter-item"></el-input>
    <el-input v-model="searchDatas.saleperson" placeholder="销售负责人" class="filter-item"></el-input>
    <!-- <el-input v-model="searchDatas.contactFrequency" placeholder="联系频次" class="filter-item"></el-input> -->
    <el-button type="primary" class="filter-item" icon="el-icon-search" @click="btn_search">搜索</el-button>
    <el-button
      v-permission="'HY_add'"
      type="primary"
      class="filter-item"
      icon="el-icon-plus"
      @click="btn_add"
    >添加</el-button>
    <el-button v-permission="'HY_label'" type="primary" class="filter-item" @click="btn_label">打标签</el-button>
    <el-button
      v-permission="'HY_coupon'"
      type="primary"
      class="filter-item"
      @click="btn_coupon"
    >赠送优惠券</el-button>
    <el-button
      v-permission="'HY_send_message'"
      type="primary"
      class="filter-item"
      @click="btn_send_message"
    >群发短信</el-button>
    <el-button
      v-permission="'HY_member_extension'"
      type="primary"
      class="filter-item"
      @click="btn_member_extension"
    >付费会员延期</el-button>
    <el-button
      v-permission="'HY_member_level'"
      type="primary"
      class="filter-item"
      @click="btn_member_level"
    >会员等级</el-button>
    <el-button type="primary" class="filter-item" @click="btn_import">
      <svg-icon icon-class="daoru" />导入
    </el-button>
    <el-button type="primary" class="filter-item" @click="btn_export">导出</el-button>
    <!-- <el-button type="primary" class="filter-item" @click="btn_file_merge">档案合并</el-button>
    <el-button type="primary" class="filter-item" @click="btn_file_split">档案拆分</el-button> -->
    <el-button type="primary" class="filter-item" icon="el-icon-plus" @click="btn_add">添加</el-button>
    <el-button type="primary" class="filter-item" @click="btn_deletes">批量删除</el-button>
    <el-button type="primary" class="filter-item" @click="transfer">转移</el-button>
  </div>
</template>

<script>
import {
  getProviceCity,
  getDictionary,
  getProviceCityById
} from "@/api/commonAPI";
import { pickerOptions } from "@/utils";
import addOrEdit from "./addOrEdit";
import editLabel from "./editLabel";
import freeCoupons from "./freeCoupons";
import sendGroupMessage from "./sendGroupMessage";
import memberExtension from "./memberExtension";
import memberLevel from "./memberLevel";
import importFile from "./importFile";
import { getMemberType } from "@/api/memberManagement/memberList";
export default {
  name: "SearchFilter",
  props: {
    searchDatas: {
      required: true,
      type: Object,
      default() {
        return {
          customerName: "", //客户姓名
          phoneNumber: "", //手机号码
          memberType: "", //会员类型
          // province: '', //省份
          // city: '', //市
          // county: '', //县区
          // township: '', //乡镇
          address: "", //详细地址
          memberBirthday: "", //会员生日
          referrer: "", //推荐人
          saleperson: "", //销售负责人
          // contactFrequency: "", //联系频次
          provinceCity: [],// 省市下拉绑定的值
        };
      }
    },
    selectedId: Array
    // provinceCity: Array,
  },
  data() {
    return {
      provinceCityDatas: [], // 省市下拉数据
      provinceCityText: [], // 省市下拉绑定的值
      props: {
        // 自定义省市下拉数据的key值
        value: "id",
        label: "text",
        children: "children",
      },
      addressParams: {
        pid: 1
      },
      level: 0, //城市等级
      deptOptions: [], // 咨询/投诉下拉数据
      memberType: [], // 会员类型下拉数据
      pickerOptions // 日期数据
    };
  },
  created() {
    this.getType();
    this.getProCity();
  },
  methods: {
    btn_search() {
      console.log(this.provinceCityText)
      this.$emit("search",this.searchDatas,this.provinceCityText);
    },
    btn_export() {
      this.$emit("export", this.searchDatas,this.provinceCityText);
    },
    btn_deletes() {
      this.$emit("delorders");
    },
    transfer() {
      this.$emit("transfer");
    },
    btn_add() {
      this.$layer.iframe({
        content: {
          content: addOrEdit, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { rowid: "" } // props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ["80%", "90%"],
        title: "添加会员信息"
      });
    },
    btn_label() {
      this.$layer.iframe({
        content: {
          content: editLabel,
          parent: this,
          data: { rowid: this.selectedId }
        },
        area: ["80%", "90%"],
        title: "打标签"
      });
    },
    btn_coupon() {
      this.$layer.iframe({
        content: {
          content: freeCoupons, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { rowid: this.selectedId } // props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ["80%", "90%"],
        title: "赠送优惠券"
      });
    },
    btn_send_message() {
      this.$layer.iframe({
        content: {
          content: sendGroupMessage, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { rowid: this.selectedId } // props
        },
        area: ["80%", "90%"],
        title: "群发短信"
      });
    },
    btn_member_extension() {
      this.$layer.iframe({
        content: {
          content: memberExtension, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { rowid: this.selectedId } // props
        },
        area: ["80%", "90%"],
        title: "付费会员延期"
      });
    },
    btn_member_level() {
      this.$layer.iframe({
        content: {
          content: memberLevel, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { rowid: this.selectedId } // props
        },
        area: ["80%", "90%"],
        title: "会员等级"
      });
    },
    btn_import() {
      // if (!this.planId) {
      //   this.$message.warning('请先选择一行!')
      //   return
      // }
      this.$layer.iframe({
        content: {
          content: importFile, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { rowid: "" } // props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ["40%", "380px"],
        shadeClose: false,
        title: "导入会员信息"
      });
    },
    btn_file_merge() {},
    btn_file_split() {},
    // 获取省市下拉数据
    // getProCity() {
    //   return new Promise(resolve => {
    //     const params={
    //       level:1
    //     }
    //     getProviceCity(params).then(response => {
    //       if (response.state.toLowerCase() === 'success') {
    //         this.provinceCityDatas = response.data
    //       }
    //     })
    //     resolve()
    //   })
    // },
    getProCity() {
      getProviceCityById(this.addressParams)
        .then(res => {
          this.provinceCityDatas = this.handleData(res.data);
        })
        .catch(err => {});
    },
    handleItemChange(val) {
      this.provinceCityText=this.$refs['myCascader'].currentLabels
      let pid = val ? val[val.length - 1] : 1; //id值
      this.level = val.length + 1; //判断第几级
      this.provinceCityDatas = this.handleData(
        this.provinceCityDatas,
        pid,
        this.level
      );
    },
    handleData(data, val, level) {
      for (let i = 0; i < data.length; i++) {
        if (!data[i].children) {
          this.$set(data[i], "children", []);
        }
        if (data[i].id === val) {
          getProviceCityById({ pid: val })
            .then(res => {
              if (res.data.length) {
                data[i].children = res.data;
                if(this.level!==4){
                  data[i].children.forEach(ele => {
                    this.$set(ele, "children", []);
                  });
                }
              } else {
                data[i].children = undefined;
              }
            })
            .catch(err => {});
        } else {
          if (data[i].children.length) {
            this.handleData(data[i].children, val,level);
          }
        }
      }

      return data;
    },
    
    // 获取会员类型
    getType() {
      return new Promise(resolve => {
        const params = {
          pageindex: 1,
          pagesize: 10,
          isleaf: true,
          code: "HYLX"
        };
        getMemberType(params).then(response => {
          if (response.state.toLowerCase() === "success") {
            this.memberType = response.data.Rows;
          }
        });
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.filter-container .filter-item.el-select {
  margin-right: 10px;
}
.filter-container .filter-item.el-date-editor {
  margin-right: 10px;
}
.area {
  width: 270px !important;
}
</style>

