<template>
  <div class="pop-box" :style="'z-index:'+zIndex">
    <div>
      <div class="header-box"><i class="back el-icon-close" @click="dialogClose"></i>选择地区</div>
      <div class="search-H5box">
        <div class="txt">
          <el-input placeholder="地区名称" suffix-icon="el-icon-search" v-model="formData.name"
                    @keyup.enter.native="searchEvent">
            <el-button slot="append" @click="searchEvent"> 搜索</el-button>
          </el-input>
        </div>
        <div class="icon-screen" @click="popStatus = true">
          <i class="iconfont icon-shaixuan1"></i>
          <span>{{ $t1('高级筛选') }}</span>
        </div>
      </div>
      <div class="flex">
        <div class="checkbox-all_list" @scroll="handleScroll">
          <div v-for="(row,rowIndex) in page.records" :key="rowIndex" class="order-item"
               :class="{on:isChecked(row)}" @click="changeCheck(row,rowIndex)">
            <div class="is-checked" v-if="isChecked(row)"><i class="el-icon-check"></i>已选择</div>
            <div class="t1">
              <i class="icon"></i>
              <span>{{ row.name }}</span>
            </div>
            <div class="t2">
              <p>地区全称：{{ row.fullName }}</p>
            </div>
          </div>
        </div>
        <div class="checkbox-all">
          <div class='ca-t'>已选择地区：</div>
          <div class="ca-c">
          <span v-for="(checkRow, rowIndex) in checkRows" :key="rowIndex">{{ checkRow.name }}<i
            class="el-icon-delete" @click="changeCheck(checkRow)"></i></span>
          </div>
        </div>
      </div>
      <div class="fixed-bottom-btns">
        <el-button type="primary" plain class="btn" @click="dialogClose" icon="el-icon-close">{{$t1('取 消')}}
        </el-button>
        <el-button type="primary" class="btn" @click="dialogPrimary" icon="el-icon-check">{{$t1('确 定')}}</el-button>
      </div>
      <h5SearchDialog v-if="popStatus" :visiable.sync="popStatus" @searchEvent="confirmSearchDialog"
                      @resetEvent="resetSearchDialog">
        <el-form label-position="top">
          <el-form-item label="地区名称">
            <el-input v-model="formData.name" class="txt" clearable/>
          </el-form-item>
          <el-form-item label="地区全称">
            <el-input v-model="formData.fullName" class="txt" clearable/>
          </el-form-item>
        </el-form>
      </h5SearchDialog>
    </div>
  </div>
</template>
<script>
import mixin from "@base/mixins/mobile/selectDialog/index";

export default {
  mixins: [mixin],
  props: ['visiable', 'multi', 'rows', 'param'],
  created() {
    this.initSetting({
      url: USER_PREFIX + '/area/listPage',
      param: () => {
        return {
          ...this.formData,
          ...this.param,
        }
      }
    })
  },
  mounted() {
    this.searchEvent();
  }
}

</script>
<style lang="scss">
@import "~@/resources/css/h5.scss";
</style>
