<template>
  <view class="container">
    <div class="header">
      <div
        class="searchBox"
        :style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
      >
        <view class="searchBox_add">
          <u-icon
            bold
            color="#000"
            size="40"
            name="arrow-left"
            @click="back"
          ></u-icon>
        </view>
        <div class="iptBox">
          <image
            src="https://static.hshuishang.com/property-img-file/com_communitySearchIcon.png"
          ></image>
          <u--input
            placeholder="请输入内容"
            border="none"
            v-model="value"
            @change="change"
          ></u--input>
        </div>
      </div>
      <div class="Filter">
        <div class="Filter_left">
          <div class="FilterItem" @click="showDialog(1)">
            附近
            <image
              src="https://static.hshuishang.com/property-img-file/homeServer_filterMore.png"
            ></image>
          </div>

          <div class="FilterItem" @click="showDialog(2)">
            综合
            <image
              src="https://static.hshuishang.com/property-img-file/homeServer_filterMore.png"
            ></image>
          </div>

          <div class="FilterItem" @click="showDialog(3)">
            排序
            <image
              src="https://static.hshuishang.com/property-img-file/homeServer_filterMore.png"
            ></image>
          </div>

          <div class="FilterItem" @click="showDialog(4)">
            分类
            <image
              src="https://static.hshuishang.com/property-img-file/homeServer_filterMore.png"
            ></image>
          </div>

          <div class="FilterItem" @click="showDialog(5)">
            性别
            <image
              src="https://static.hshuishang.com/property-img-file/homeServer_filterMore.png"
            ></image>
          </div>

          <div class="FilterItem" @click="showDialog(6)">
            地区
            <image
              src="https://static.hshuishang.com/property-img-file/homeServer_filterMore.png"
            ></image>
          </div>
        </div>

        <div class="Filter_right">
          筛选
          <image
            src="https://static.hshuishang.com/property-img-file/homeServer_filter.png"
          ></image>
        </div>
      </div>
      <!-- 位置筛选 -->
      <div class="FilterMore" v-if="show1">
        <div class="local">距离 <span>上海公馆</span></div>
        <div class="filterMore1">
          <div class="filterMoreItem">附近</div>
          <div class="filterMoreItem">500m</div>
          <div class="filterMoreItem">1km</div>
          <div class="filterMoreItem">3km</div>
          <div class="filterMoreItem">5km</div>
          <div class="filterMoreItem">10km</div>
        </div>
      </div>

      <!-- 综合筛选 -->
      <div class="FilterMore" v-if="show2">
        <div class="filterMore2_item">
          <div class="filterMore2_item_left">综合</div>
          <div class="filterMore2_item_right">
            <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
          </div>
        </div>
        <div class="filterMore2_item">
          <div class="filterMore2_item_left active2">从高到低</div>
          <div class="filterMore2_item_right">
            <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
          </div>
        </div>
        <div class="filterMore2_item">
          <div class="filterMore2_item_left">从低到高</div>
          <div class="filterMore2_item_right">
            <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
          </div>
        </div>
      </div>
      <!-- 排序筛选 -->
      <div class="FilterMore" v-if="show3">
        <div class="filterMore2_item">
          <div class="filterMore2_item_left2">智能排序</div>
          <div class="filterMore2_item_right">
            <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
          </div>
        </div>
        <div class="filterMore2_item">
          <div class="filterMore2_item_left2 active2">距离优先</div>
          <div class="filterMore2_item_right">
            <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
          </div>
        </div>
        <div class="filterMore2_item">
          <div class="filterMore2_item_left2">好评优先</div>
          <div class="filterMore2_item_right">
            <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
          </div>
        </div>
        <div class="filterMore2_item">
          <div class="filterMore2_item_left2">销量优先</div>
          <div class="filterMore2_item_right">
            <u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
          </div>
        </div>
      </div>

      <!-- 分类筛选 -->
      <div class="FilterMore3" v-if="show4">
        <div class="filterMore3Item" v-for="(item, index) in 9" :key="index">
          家电维修
        </div>
      </div>

      <!-- 性别筛选 -->
      <div class="FilterMore3" v-if="show5">
        <div class="filterMore3Item">男</div>
        <div class="filterMore3Item">女</div>
      </div>
    </div>

    <!-- 地区筛选 -->
    <u-popup :show="show6" @close="close" v-if="show6">
      <view>
        <picker-view
          indicator-style="height: 50px;"
          style="width: 100%; height: 400rpx"
          :value="id"
          @change="bindChange"
        >
          <picker-view-column>
            <view
              v-for="(item, index) in provList"
              :key="index"
              style="line-height: 50px; text-align: center"
              >{{ item.short_name }}</view
            >
          </picker-view-column>
          <picker-view-column>
            <view
              v-for="(item, index) in defaultCity"
              :key="index"
              style="line-height: 50px; text-align: center"
              >{{ item.short_name }}</view
            >
          </picker-view-column>
          <picker-view-column>
            <view
              v-for="(item, index) in defaultDist"
              :key="index"
              style="line-height: 50px; text-align: center"
              >{{ item.short_name }}</view
            >
          </picker-view-column>
        </picker-view>
      </view>
    </u-popup>


    <div class="main">
      <!-- 遮罩 -->
      <div class="dialogBox" v-if="isShowDia"></div>

      <div class="MasterList">
        <div class="MasterItem" v-for="(item, index) in 5" :key="index">
          <div class="MasterItem_right">
            <div class="MasterItem_info">
              <div class="MasterItem_Info_left">
                <image
                  src="https://static.hshuishang.com/property-img-file/home_icon12.png"
                ></image>
                <div class="state state1">待服务</div>
                <div class="state state2" v-if="false">休息中</div>
                <div class="state state3" v-if="false">服务中</div>
              </div>
              <div class="MasterItem_Info_right">
                <div class="MasterItem_Info_right_1">
                  <div class="master_info_right_left">
                    林师傅
                    <image
                      class="Medal"
                      src="https://static.hshuishang.com/property-img-file/homeServer_Champion.png"
                    >
                    </image>
                    <image
                      class="Medal"
                      v-if="false"
                      src="https://static.hshuishang.com/property-img-file/homeServer_RunnerUp.png"
                    >
                    </image>
                    <image
                      class="star"
                      src="https://static.hshuishang.com/property-img-file/local_start1.png"
                    ></image>
                    <span>4.8</span>
                  </div>

                  <div class="master_info_right_right" @click="masterInfo">
                    查看资料
                  </div>
                </div>
                <div class="MasterItem_Info_right_2">
                  52岁 广东梅州人 5-10年
                </div>
                <div class="MasterItem_Info_right_3">
                  <span>500+</span>预定 <span>100+</span>评价
                </div>
                <div class="MasterItem_Info_right_4">
                  <div class="tagItem tag1">积极主动</div>
                  <div class="tagItem tag2">技术精湛</div>
                  <div class="tagItem tag3">技术精湛</div>
                </div>

                <div class="MasterItem_Info_right_5">
                  价格范围： <span>￥500-￥800</span>
                </div>

                <div class="MasterItem_Info_right_6">
                  <image
                    src="https://static.hshuishang.com/property-img-file/com_MsgImg1.png"
                  ></image>
                  <image
                    src="https://static.hshuishang.com/property-img-file/com_MsgImg1.png"
                  ></image>
                  <image
                    src="https://static.hshuishang.com/property-img-file/com_MsgImg1.png"
                  ></image>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="Btn">确定</div> -->
    </div>
  </view>
</template>

<script>
import {
  request,
  picUrl,
  NavgateTo,
  menuButtonInfo,
} from "../../../utils/index";
import { apiArr } from "../../../api/reservation";
import { apiArr as apiArr2 } from "../../../api/area";

export default {
  data() {
    return {
      top: "",
      localHeight: "",
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      isShowDia: false,
      id: [0, 0, 0], // 默认选中第一个省、市、区

      provList: [], // 省
      cityList: [], //市
      distList: [], // 区
      defaultCity: [], // 默认展示的市区数据
      defaultDist: [], // 默认展示的县/区数据
      confirmProv: {}, // 默认选中省
      confirmProv1: {},
      confirmCity: {}, // 默认选中市
      confirmDist: {}, // 默认选中区/县
    };
  },
  methods: {
    masterInfo() {
      NavgateTo("../masterInfo/index");
    },
    back() {
      NavgateTo("1");
    },

    showDialog(index) {
      this[`show${index}`] = !this[`show${index}`];
      this.logOtherButtons(index);
      this.isShowDia = this[`show${index}`];
    },
    close() {
      this.show6 = false;
      this.isShowDia = false;
    },
    logOtherButtons(excludeIndex) {
      for (let i = 1; i <= 6; i++) {
        if (i == 6) {
          this.getProvList();
        }
        if (i !== excludeIndex) {
          this[`show${i}`] = false;
        }
      }
    },
    /////////////////////////////////// 省市区方法///////////////////////////////////////////
    // 获取省份信息
    async getProvList() {
      const res = await request(apiArr2.getArea, "POST", {}, { silent: false });
      this.provList = res.rows;
      this.confirmProv1 = res.rows[0];
      // 加载默认省份的城市数据
      this.getCityList(0);
      // 缓存省市区数据
    },

    // 获取市区信息
    async getCityList(sq = 0, x = 0) {
      console.log("11swq", sq);
      console.log("获取x", x);
      if (!this.sf && this.cityList.length > 0) {
        console.log("省份没变，查市跟区", this.cityList);
        let newDist = this.cityList[sq];
        console.log("新的市信息", newDist);
        if (this.xsq.ad_code !== newDist.ad_code) {
          console.log("新市区跟旧市区不一直");
          this.xsq = newDist;
          this.getDistList(this.confirmCity, x);
        } else {
          console.log("新市区跟旧市区一直");
          this.confirmDist = this.defaultDist[x];
        }
        return;
      }
      const res = await request(
        apiArr2.getArea,
        "POST",
        { parent_ad_code: this.confirmProv1.ad_code },
        { silent: false }
      );
      this.cityList = res.rows;
      let newDist;

      this.defaultCity = res.rows;
      this.confirmCity = res.rows[0]; // 拿市的第一条区查区
      this.getDistList(newDist, x);
    },
    // 获取 县/区 信息
    async getDistList(xsq, x) {
      console.log("页面传递的x", x);
      const res = await request(
        apiArr2.getArea,
        "POST",
        { parent_ad_code: xsq ? xsq.ad_code : this.confirmCity.ad_code },
        { silent: false }
      );
      this.distList = res.rows;
      this.defaultDist = res.rows;
      this.confirmDist = res.rows[0]; // 区的第一条信息
      this.id = [0, 0, 0]; // 刷新选择器视图
    },

    // 切换省市区时联动改变参数值
    bindChange(e) {
      console.log("[1231331], e", e);
      const { value } = e.detail;
      // // 每次切换时，根据当前点击的省过滤出所属市区，并且变化县/区
      let newCrty = this.provList[value[0]];
      console.log("新的省份信息", newCrty);
      console.log("旧的省信息", this.confirmProv1);
      if (newCrty.ad_code === this.confirmProv1.ad_code) {
        console.log("省份信息没变");
        this.sf = false;
      } else {
        this.sf = true;
      }
      console.log("this.cityListthis.cityList", this.cityList);
      this.confirmProv1 = newCrty;
      this.getCityList(value[1], value[2]);
    },
  },
  onReady() {},

  onLoad(options) {
    const meun = menuButtonInfo();
    this.top = meun.top;
    // this.top = meun.height + meun.top;
    this.localHeight = meun.height;
    this.getProvList(); // 初始化加载省份数据
  },
  onShow() {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {},
};
</script>

<style>
@import url("./index.css");
</style>