<template>
  <div class="land-index-warp">
    <common current-name="land">
      <template #main>
        <banner :imglist="bannerList"></banner>
        <div class="land-filter-top">
          <div v-if="!isHide">
            <typetop ref="arearef" :list="LevelOne" :name="'area'" title="选择地区" @select="doSelect"></typetop>
            <typetop ref="uesdref" :list="landUse" :name="'uesd'" title="选择土地" @select="doSelect"></typetop>
            <typetop ref="typeref" :list="landType" :name="'type'" title="土地用途" @select="doSelect"></typetop>
            <typetop ref="productref" :list="landProduct" :name="'product'" title="种养殖产物" @select="doSelect"></typetop>
            <typetop ref="circulationref" :list="landCirculation" :name="'circulation'" title="土地流转" @select="doSelect"></typetop>
            <div class="more-filter">
              <div class="more-title">更多</div>
              <div class="filter-r">
                <el-row :gutter="16">
                  <el-col :span="8">
                    <el-select v-model="fliter.area" placeholder="请选择面积范围" style="width: 200px">
                      <el-option v-for="item in areaRange" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-select v-model="fliter.year" placeholder="请选择流转年限" style="width: 200px">
                      <el-option v-for="m in yearList" :key="m.value" :label="m.label" :value="m.value" />
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-select v-model="fliter.lookType" placeholder="请选择预约带看" style="width: 200px">
                      <el-option v-for="n in lookType" :key="n.value" :label="n.label" :value="n.value" />
                    </el-select>
                  </el-col>
                  <el-col :span="24" style="margin: 16px 0">
                    <el-radio-group v-model="fliter.other">
                      <el-radio v-for="(k, index) in radioList" :key="index" :value="k.value">{{ k.label }}</el-radio>
                    </el-radio-group>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
          <div class="select-result">
            <div class="title">所选分类</div>
            <div class="result-list">
              <template v-for="(r, indexr) in selectkeylist" :key="indexr">
                <div class="result-item">
                  <el-tag closable :type="'info'" @close="handleClose(r)">
                    {{ selectAll[r] && selectAll[r].title ? selectAll[r].title : '' }}
                  </el-tag>
                </div>
              </template>
              <div class="show-hide" @click="doShowHide">
                <el-icon v-if="!isHide"><ArrowUpBold /></el-icon>
                <el-icon v-else><ArrowDownBold /></el-icon>
                <span>{{ isHide ? '展开' : '收起' }}</span>
              </div>
            </div>
          </div>

          <div class="filter-bottom">
            <el-row :gutter="16">
              <el-col :span="12" align="left">
                <div class="result-count">
                  共匹配到
                  <span class="count">{{ '0' }}</span>
                  个结果
                </div>
              </el-col>
              <el-col :span="12" align="right">
                <div class="do-set">
                  <el-icon><Refresh /></el-icon>
                  <span>重置</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>

        <div class="land-reuslt-list">
          <el-row class="land-item-warp" :gutter="24">
            <template v-for="(land, indexl) in 11" :key="indexl">
              <el-col :span="12">
                <landItem></landItem>
              </el-col>
            </template>
          </el-row>
        </div>
      </template>
    </common>
  </div>
</template>
<script setup name="ecommerce">
import common from './components/common.vue';
import banner from './components/banner.vue';
import typetop from './components/typetop.vue';
import landItem from './components/landItem.vue';
import { ref, reactive, onMounted, watch, computed } from 'vue';

let LevelOne = reactive([
  { id: '01', title: '耿马镇' },
  { id: '02', title: '孟定镇' },
  { id: '03', title: '孟永镇' },
  { id: '04', title: '孟撒镇' },
  { id: '05', title: '勐简乡' },
  { id: '06', title: '大兴乡' },
  { id: '07', title: '四排山乡' },
  { id: '08', title: '贺派乡' },
]);

let landUse = reactive([
  { id: '01', title: '耕地' },
  { id: '02', title: '林地' },
  { id: '03', title: '园地' },
  { id: '04', title: '草地' },
  { id: '05', title: '交通运输用地' },
  { id: '06', title: '水域水利设施用地' },
  { id: '07', title: '其他用地' },
]);

let landType = reactive([
  { id: '01', title: '水田' },
  { id: '02', title: '水浇地' },
  { id: '03', title: '旱地' },
]);

let landProduct = reactive([
  { id: '01', title: '水果坚果类' },
  { id: '02', title: '蔬菜瓜果类' },
  { id: '03', title: '粮食油料类' },
  { id: '04', title: '养殖类' },
  { id: '05', title: '其他' },
]);

let landCirculation = reactive([
  { id: '01', title: '经营权出租' },
  { id: '02', title: '经营权合作' },
  { id: '03', title: '经营权入股' },
  { id: '04', title: '经营权转让' },
  { id: '05', title: '经营权互换' },
  { id: '06', title: '经营权转包' },
  { id: '07', title: '使用权出租' },
  { id: '08', title: '使用权转让' },
  { id: '09', title: '使用权入股' },
  { id: '10', title: '使用权合作' },
]);
let radioList = reactive([
  { value: '01', label: '电话核实' },
  { value: '02', label: '现场核实' },
  { value: '03', label: '现场视频' },
  { value: '04', label: '官方发布' },
  { value: '05', label: '金牌地源' },
  { value: '06', label: '优质地源' },
  { value: '07', label: '地区商家' },
]);

let areaRange = reactive([
  { value: '0', label: '10亩以下' },
  { value: '10', label: '10 ~ 100亩' },
  { value: '100', label: '101 ~ 1000亩' },
  { value: '1000', label: '1001 ~ 5000亩' },
  { value: '5000', label: '5000亩以上' },
]);

let yearList = reactive([
  { value: '0', label: '5年以下' },
  { value: '5', label: '6 ~ 10年' },
  { value: '10', label: '11 ~ 15年' },
  { value: '15', label: '16 ~ 20年' },
  { value: '20', label: '21 ~ 30年' },
  { value: '30', label: '30年以上' },
]);

let lookType = reactive([
  { value: 'reservation', babel: '可预约带看' },
  { value: 'pay', babel: '单词付费带看' },
  { value: 'bond', babel: '保证金带看' },
]);

let bannerList = reactive(['images/ecommerce/' + 'banner3.png', 'images/ecommerce/' + 'banner3.png']);
let isHide = ref(false);
let fliter = reactive({
  area: null,
  year: null,
  lookType: null,
  other: null,
});

let selectAll = reactive({});
const doSelect = (data) => {
  let { select, nameVal } = data;
  selectAll[nameVal] = select;
  console.info('doSelect', data);
};

let selectkeylist = computed(() => {
  let list = Object.keys(selectAll);
  return list;
});

let arearef = ref(null);
let uesdref = ref(null);
let typeref = ref(null);
let productref = ref(null);
let circulationref = ref(null);

const refs = {
  arearef,
  uesdref,
  typeref,
  productref,
  circulationref,
};

const handleClose = (name) => {
  if (name) {
    let refName = name + 'ref';
    const componentRef = refs[refName];
    console.info(' componentRef.value', componentRef.value);
    componentRef.value && componentRef.value.clearSelect();
    delete selectAll[name];
  }
};

const doShowHide = () => {
  isHide.value = !isHide.value;
};
</script>
<style lang="scss" scoped>
.land-index-warp {
  width: 100%;
  .land-filter-top {
    width: 100%;
    border-radius: 16px;
    background: $color-fff;
    padding: 16px;

    .more-filter {
      display: inline-flex;
      justify-content: flex-start;
      width: 100%;
      .filter-r,
      .more-title {
        display: -webkit-inline-box;
        vertical-align: top;
      }
      .more-title {
        color: $color-999;
        font-size: 20px;
        width: 120px;
        vertical-align: top;
        font-weight: 500;
        line-height: 40px;
      }
      .filter-r {
      }
    }

    .select-result {
      display: inline-flex;
      justify-content: flex-start;
      width: 100%;
      text-align: left;
      .title,
      .result-list {
        display: inline-block;
        vertical-align: top;
      }
      .title {
        display: -webkit-inline-box;
        color: $color-999;
        font-size: 20px;
        width: 120px;
        vertical-align: top;
        font-weight: 500;
        line-height: 40px;
      }
      .result-list {
        width: calc(100% - 120px);
        padding-right: 30px;
        position: relative;
        .result-item {
          display: inline-block;
          margin: 8px;
        }
        .show-hide {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          cursor: pointer;
          font-size: 16px;
          .el-icon {
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
    }
  }
  .filter-bottom {
    width: 100%;
    text-align: center;
    .result-count {
      font-size: 18px;
      color: $color-666;
      .count {
        color: $color-main;
        padding: 0 2px;
      }
    }
    .do-set {
      font-size: 16px;
      color: $color-666;
      .el-icon {
        display: inline-block;
        vertical-align: middle;
        font-size: 20px;
      }
    }
  }

  .land-reuslt-list {
    width: 100%;
    margin-top: 24px;
    .land-item-warp {
    }
  }
}
</style>
