<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch" label-width="88px">
      <el-row>
        <el-col :span="8">
          <el-form-item class="treeselectForm treeselectForm2" label="组织架构" prop="orgIds">
            <tree @treeselectFn="treeselectFn" :treeval="queryParams.orgIds" style="width: 193px;"></tree>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="销售员" prop="userId">
            <user :userId="queryParams.userId" :orgIds="queryParams.orgIds" @userIdFn="userIdFn"></user>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="经销商名称" prop="chainCode">
<!--            <el-select-->
<!--              v-model="queryParams.chainCode"-->
<!--              filterable-->
<!--              clearable-->
<!--              reserve-keyword-->
<!--              placeholder="请选择经销商"-->
<!--              @change="onInput">-->
<!--              <el-option-->
<!--                v-for="item in chainsList"-->
<!--                :key="item.chainCode"-->
<!--                :label="item.chainName"-->
<!--                :value="item.chainCode">-->
<!--              </el-option>-->
<!--            </el-select>-->
            <el-select
              v-model="queryParams.chainCode" clearable filterable :filter-method="filterMethod"
              v-el-select-loadmore="loadMore(rangeNumber)"
              @visible-change="visibleChange">
              <el-option
                v-for="(item, index) in chainsList.slice(0, rangeNumber)"
                :key="item.chainCode"
                :label="item.chainName"
                :value="item.chainCode">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否有效" prop="validFlag">
            <el-select
              v-model="queryParams.validFlag"
              clearable
              placeholder="请选择是否有效"
              @change="onInput">
              <el-option
                v-for="item in isNotOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['sfa:coverAndRoutReport:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="coverAndRoutReportList">
      <el-table-column label="区域" align="center" prop="deptPpname" width="150"/>
      <el-table-column label="销售部门" align="center" prop="deptPname" width="140"/>
      <el-table-column label="销售部" align="center" prop="deptName" width="160"/>
      <el-table-column label="经销商编码" align="center" prop="chainCode" width="100" />
      <el-table-column label="经销商名称" align="center" prop="chainName"  width="240" :show-overflow-tooltip="true"/>
      <el-table-column label="门店编码" align="center" prop="storeCode"  width="100"/>
      <el-table-column label="门店名称" align="center" prop="storeName" width="240" :show-overflow-tooltip="true" />
      <el-table-column label="门店类型" align="center" prop="storeCategory"  width="120"/>
      <el-table-column label="城市级别" align="center" prop="cityLevel" width="100" />
      <el-table-column label="门店是否有效" align="center" prop="validFlag" width="100" />
      <el-table-column label="是否有调色机" align="center" prop="ccmFlag" width="100" />
      <el-table-column label="用户账号" align="center" prop="workCode" width="100" />
      <el-table-column label="姓名" align="center" prop="nickName" />
      <el-table-column label="人员职位" align="center" prop="postName" width="140" />
<!--      <el-table-column label="用户类型" align="center" prop="isConfirm" />-->
      <el-table-column label="拜访线路号" align="center" prop="routeNumber" width="100"/>
      <el-table-column label="排序号" align="center" prop="sort" />
      <el-table-column label="拜访周期" align="center" prop="frequence" width="130"/>
      <el-table-column label="线路起始时间" align="center" prop="startTime" width="130" >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startTime,'{yy}-{mm}-{dd}') }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listCoverAndRoutReport, getCoverAndRoutReport, delCoverAndRoutReport, addCoverAndRoutReport, updateCoverAndRoutReport } from "@/api/sfa/coverAndRoutReport";
import { listChains } from "@/api/sfa/chains";
import tree from "@/views/components/sfa/treeselectParent";
import user from "@/views/components/sfa/user";
import {_debounce} from '@/utils/debounce.js'
export default {
  name: "CoverAndRoutReport",
  components: { tree,user },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 门店覆盖和线路规则明细表格数据
      coverAndRoutReportList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
        isNotOptions:[],
        chainsList:[],
        rangeNumber: 10,
        resOptions:[],
    };
  },
  created() {
      // 是否
      this.getDicts("is_not").then(response => {
          this.isNotOptions = response.data;
      });
      this.getChainList();
    this.getList();

  },
  directives:{
      'el-select-loadmore':(el, binding) => {
          // 获取element-ui定义好的scroll盒子
          const SELECTWRAP_DOM = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");
          if(SELECTWRAP_DOM){
              SELECTWRAP_DOM.addEventListener("scroll", function () {
                  /**
                   * scrollHeight 获取元素内容高度(只读)
                   * scrollTop 获取或者设置元素的偏移值,
                   *  常用于:计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
                   * clientHeight 读取元素的可见高度(只读)
                   * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
                   * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                   */
                  const condition = this.scrollHeight - this.scrollTop-20 <= this.clientHeight;
                  if (condition) binding.value();
              });
          }
      },
  },
  methods: {
      onInput(){
          this.$forceUpdate();
      },
      // 获取经销商列表
      getChainList(){
          listChains({orgIds:this.queryParams.orgIds}).then(response => {
              // this.chainsList = response.rows;
              this.resOptions = response.rows;
          });
      },
      loadMore(n) {
          // n是默认初始展示的条数会在渲染的时候就可以获取,具体可以打log查看
          // elementui下拉超过7条才会出滚动条,如果初始不出滚动条无法触发loadMore方法
          return () => (this.rangeNumber += 5); // 每次滚动到底部可以新增条数  可自定义
      },
      // 筛选方法
      filterMethod:_debounce(function(filterVal){
          if(filterVal){
              let filterArr = this.resOptions.filter((item)=>{
                  return item.chainName.toLowerCase().includes(filterVal.toLowerCase())
              })
              this.chainsList = filterArr;
          }else{
              this.chainsList = this.resOptions;
          }
      },500),
      // 下拉框出现时，调用过滤方法
      visibleChange(flag){
          if(flag){
              this.filterMethod()
          }
      },
      treeselectFn(val){
          this.queryParams.orgIds = val;
          this.getChainList();

      },
      userIdFn(val){
          this.queryParams.userId = val;
      },
    /** 查询门店覆盖和线路规则明细列表 */
    getList() {
      this.loading = true;
      listCoverAndRoutReport(this.queryParams).then(response => {
        this.coverAndRoutReportList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.orgIds = [];

      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('sfa/route/coverAndRoutExport', {
        ...this.queryParams
      }, `门店覆盖和线路规则明细_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
