<template>
  <div id="background">
    <div id="topBox">
      <img src="./img/定位.png" />
      <el-cascader v-model="selectedOptions" :options="options" @change="addressChoose" placeholder="请选择地区" />
      <div id="searchInp">
        <input @keyup.enter.native="search" type="search" v-model="parmas.introduction" />
        <span @click="search" id="searchButton" placeholder="请输入关键字">搜索</span>
      </div>
      <div class="categoryBox">
        <span>家政分类</span>

        <div class="catagoryList">
          <div class="categoryItem" v-for="(item, i) in category">
            <span tabindex="i" @click="selectCategory($event)">{{ item.name }}</span>
          </div>
        </div>
        <el-button @click.native="resetPage" native-type="reset" id="resetButton" class="cancelBtn"
          round="true">重置</el-button>
        <br />
        <span id="salaryRank">薪酬(次/元)</span>
        <div class="catagoryList">
          <div class="categoryItem" v-for="(item, i) in salaryList">
            <span @click="selectSalary($event)">{{ item }}</span>
          </div>
        </div>
        <label>薪酬排序</label>
        <label ref="up" @click="upSalary">升序</label>
        <label ref="down" @click="downSalary">降序</label>
      </div>
      <div id="bottom">
        <span>聘请类别</span>
        <label>长期工</label>
        <input @click="convertServerType('1')" v-model="isLong" type="radio" name="serverType" value="1">
        <label>短期工</label>
        <input @click="convertServerType('2')" v-model="isLong" type="radio" name="serverType" value="2" />
        <span>是否住家</span>
        <label>住家</label>
        <input @click="isStay('1')" v-model="isHome" value="1" type="radio" name="stay" />
        <label>不住家</label>
        <input @click="isStay('2')" v-model="isHome" value="2" type="radio" name="stay" />
      </div>
    </div>
  </div>
</template>
<script>
import { categoryListApi, searchByIntroduction, searchServerWithNoCondition } from "@/api";
import {
  regionDataPlus,
  CodeToText,
} from "element-china-area-data";
import { searchServer } from "@/api";
import { mapGetters, mapMutations, mapState } from "vuex";
export default {
  name: "searchBox",
  data() {
    return {
      category: [],
      searchFlag: 0,
      serverType: "0",
      stay: '0',
      isHome: null,
      isLong: null,
      homeClick: null,
      content: [],
      options: regionDataPlus,
      selectedOptions: [],
      serveArea: "",
      salaryList: ["不限", "100以下", "100-300", "300-500", "500以上"],
      parmas: {
        pageNum: 1,
        pageSize: 3,
        nickName: "",
        salaryOrder: 0,
        categoryName: "不限",
        salary: '0',
        stay: '0',
        // 表示家政人员
        userType: 1,
        workArea: "",
        // 长期工or短期工
        serverType: '',
        introduction: ''
      },
    };
  },
  computed: {
    ...mapState("SearchStore", ["searchList", "isByCondition"]),
    ...mapGetters("SearchStore", ["getPageNum", "getTotal", "getPageSize"]),
  },
  created() {
    // 家政分类
    categoryListApi().then((response) => {
      if (response.data.code === 200) {
        this.category = response.data.data;
      }
    });
  },
  // 监控页码变化
  watch: {
    getPageNum(newVal, oldVal) {
      if (!localStorage.getItem("token") || localStorage.getItem("token") === '') {
        alert("请先登录")
        return
      }
      if (this.isByCondition === false && this.searchFlag === 0) {
        let params = {
          pageNum: newVal,
          pageSize: this.getPageSize
        }
        searchServerWithNoCondition(params).then((response) => {
          if (response.data.code === 200) {
            this.content = response.data.data.rows;
            this.count = response.data.data.total;
            this.content.forEach(e => {
              // 渲染serverArea
              if (e.serverArea.substring(0, 2) === '全部') {
                e.serverArea = e.serverArea = '全国范围内'
              } else {
                e.serverArea = e.serverArea.replace('全部', '内')
                e.serverArea = e.serverArea.replace('undefined', '')
              }
            })
            this.setTotal(this.count);
            this.setList(this.content);
          }
        });
      } else if (this.isByCondition === true && this.searchFlag === 0) {
        this.parmas.pageNum = newVal
        this.setParmas(this.parmas);
        searchServer(this.parmas).then((response) => {
          if (response.data.code === 200) {
            this.content = response.data.data.rows;
            this.content.forEach(e => {
              e.serverArea = e.workArea
            })
            this.content.forEach(e => {
              // 渲染serverArea
              if (e.serverArea.substring(0, 2) === '全部') {
                e.serverArea = e.serverArea = '全国范围内'
              } else {
                e.serverArea = e.serverArea.replace('全部', '内')
                e.serverArea = e.serverArea.replace('undefined', '')
              }
            })
            this.setTotal(response.data.data.total);
            this.setList(this.content);
          }
        });
      } else if (this.searchFlag === 1 && this.isByCondition === true) {
        let param = {
          introduction: this.parmas.introduction,
          pageSize: this.parmas.pageSize,
          pageNum: this.parmas.pageNum
        }
        searchByIntroduction(param).then((response) => {
          if (response.data.code == 200) {
            this.content = response.data.data.rows;
            this.setTotal(response.data.data.total);
            this.setList(this.content);
          }
        });
      }
    },
    getPageSize(newVal, oldVal) {
      if (!localStorage.getItem("token") || localStorage.getItem("token") === '') {
        alert("请先登录")
        return
      }
      let params = {
        pageNum: this.getPageNum,
        pageSize: newVal
      }
      searchServerWithNoCondition(params).then((response) => {
        if (response.data.code === 200) {
          this.content = response.data.data.rows;
          this.content.forEach(e => {
              // 渲染serverArea
              if (e.serverArea.substring(0, 2) === '全部') {
                e.serverArea = e.serverArea = '全国范围内'
              } else {
                e.serverArea = e.serverArea.replace('全部', '内')
                e.serverArea = e.serverArea.replace('undefined', '')
              }
            })
          this.count = response.data.data.total;
          this.setTotal(this.count);
          this.setList(this.content);
        }
      });
      this.parmas.pageNum = newVal
      this.setParmas(this.parmas);
      searchServer(this.parmas).then((response) => {
        if (response.data.code === 200) {
          this.content = response.data.data.rows;
          this.content.forEach(e => {
            e.serverArea = e.workArea
          })
          this.content.forEach(e => {
              // 渲染serverArea
              if (e.serverArea.substring(0, 2) === '全部') {
                e.serverArea = e.serverArea = '全国范围内'
              } else {
                e.serverArea = e.serverArea.replace('全部', '内')
                e.serverArea = e.serverArea.replace('undefined', '')
              }
            })
          this.setTotal(response.data.data.total);
          this.setList(this.content);
        }
      });
    },
  },
  methods: {
    ...mapMutations("SearchStore", ["setParmas", "setList", "setTotal"]),
    ...mapMutations("SearchStore", ["convertParmas", "changePageNum", "changePageSize", "changeIsByCondition"]),
    ...mapGetters("SearchStore", ["getParmas"]),
    // 选择分类
    selectCategory(e) {
      for (
        var i = 0;
        i < e.currentTarget.parentNode.parentNode.children.length;
        i++
      ) {
        e.currentTarget.parentNode.parentNode.children[i].children[0].className = null;
      }
      e.currentTarget.className = "activeSpan";
      if (!localStorage.getItem("token") || localStorage.getItem("token") === '') {
        alert("请先登录")
        return
      }
      var value = e.currentTarget.textContent;
      this.parmas.categoryName = value;
      this.setParmas(this.parmas);
      this.changeIsByCondition(true)
      searchServer(this.parmas).then((response) => {
        if (response.data.code === 200) {
          this.content = response.data.data.rows;
          this.content.forEach(e => {
            e.serverArea = e.workArea
          })
          this.content.forEach(e => {
              // 渲染serverArea
              if (e.serverArea.substring(0, 2) === '全部') {
                e.serverArea = e.serverArea = '全国范围内'
              } else {
                e.serverArea = e.serverArea.replace('全部', '内')
                e.serverArea = e.serverArea.replace('undefined', '')
              }
            })
          this.setTotal(response.data.data.total);
          this.setList(this.content);
        }
      });
    },
    selectSalary(e) {
      for (
        var i = 0;
        i < e.currentTarget.parentNode.parentNode.children.length;
        i++
      ) {
        e.currentTarget.parentNode.parentNode.children[
          i
        ].children[0].className = null;
      }
      e.currentTarget.className = "activeSpan";
      var value = e.currentTarget.textContent;
      if (!localStorage.getItem("token") || localStorage.getItem("token") === '') {
        alert("请先登录")
        return
      }
      if (value == "100以下") value = '1';
      else if (value == "100-300") value = '2';
      else if (value == "300-500") value = '3';
      else if (value == "500以上") value = '4';
      else if (value == "不限") value = '0';
      this.parmas.salary = value;
      this.setParmas(this.parmas);
      this.changeIsByCondition(true)
      searchServer(this.parmas).then((response) => {
        if (response.data.code == 200) {
          this.setTotal(response.data.data.total);
          this.content = response.data.data.rows;
          this.content.forEach(e => {
            e.serverArea = e.workArea
          })
          this.content.forEach(e => {
              // 渲染serverArea
              if (e.serverArea.substring(0, 2) === '全部') {
                e.serverArea = e.serverArea = '全国范围内'
              } else {
                e.serverArea = e.serverArea.replace('全部', '内')
                e.serverArea = e.serverArea.replace('undefined', '')
              }
            })
          this.setList(this.content);
        }
      });
    },
    upSalary() {
      this.$refs.down.style.color = "black";
      this.$refs.up.style.color = "#446AB0";
      if (!localStorage.getItem("token") || localStorage.getItem("token") === '') {
        alert("请先登录")
        return
      }
      this.parmas.salaryOrder = 1;
      this.setParmas(this.parmas);
      this.changeIsByCondition(true)
      searchServer(this.parmas).then((response) => {
        if (response.data.code == 200) {
          this.content = response.data.data.rows;
          this.content.forEach(e => {
            e.serverArea = e.workArea
          })
          this.content.forEach(e => {
              // 渲染serverArea
              if (e.serverArea.substring(0, 2) === '全部') {
                e.serverArea = e.serverArea = '全国范围内'
              } else {
                e.serverArea = e.serverArea.replace('全部', '内')
                e.serverArea = e.serverArea.replace('undefined', '')
              }
            })
          this.setList(this.content);
          this.setTotal(response.data.data.total);
        }
      });
    },
    downSalary() {
      this.$refs.up.style.color = "black";
      this.$refs.down.style.color = "#446AB0";
      if (!localStorage.getItem("token") || localStorage.getItem("token") === '') {
        alert("请先登录")
        return
      }
      this.parmas.salaryOrder = 2;
      this.setParmas(this.parmas);
      this.changeIsByCondition(true)
      searchServer(this.parmas).then((response) => {
        if (response.data.code == 200) {
          this.content = response.data.data.rows;
          this.content.forEach(e => {
            e.serverArea = e.workArea
          })
          this.content.forEach(e => {
              // 渲染serverArea
              if (e.serverArea.substring(0, 2) === '全部') {
                e.serverArea = e.serverArea = '全国范围内'
              } else {
                e.serverArea = e.serverArea.replace('全部', '内')
                e.serverArea = e.serverArea.replace('undefined', '')
              }
            })
          this.setTotal(response.data.data.total);
          this.setList(this.content);
        }
      });
    },
    //长期工 短期工
    convertServerType(i) {
      if (!localStorage.getItem("token") || localStorage.getItem("token") === '') {
        alert("请先登录")
        return
      }
      this.parmas.serverType = i
      this.setParmas(this.parmas);
      this.changeIsByCondition(true)
      searchServer(this.parmas).then((response) => {
        if (response.data.code === 200) {
          this.content = response.data.data.rows;
          this.content.forEach(e => {
            e.serverArea = e.workArea
          })
          this.content.forEach(e => {
              // 渲染serverArea
              if (e.serverArea.substring(0, 2) === '全部') {
                e.serverArea = e.serverArea = '全国范围内'
              } else {
                e.serverArea = e.serverArea.replace('全部', '内')
                e.serverArea = e.serverArea.replace('undefined', '')
              }
            })
          this.setTotal(response.data.data.total);
          this.setList(this.content);
        }
      });
    },
    isStay(i) {
      this.parmas.stay = i;

      if (!localStorage.getItem("token") || localStorage.getItem("token") === '') {
        alert("请先登录")
        return
      }
      this.setParmas(this.parmas);
      this.changeIsByCondition(true)
      searchServer(this.parmas).then((response) => {
        if (response.data.code == 200) {
          this.content = response.data.data.rows;
          this.content.forEach(e => {
            e.serverArea = e.workArea
          })
          this.content.forEach(e => {
              // 渲染serverArea
              if (e.serverArea.substring(0, 2) === '全部') {
                e.serverArea = e.serverArea = '全国范围内'
              } else {
                e.serverArea = e.serverArea.replace('全部', '内')
                e.serverArea = e.serverArea.replace('undefined', '')
              }
            })
          this.setTotal(response.data.data.total);
          this.setList(this.content);
        }
      });
    },
    addressChoose(value) {
      if (!localStorage.getItem("token") === undefined || localStorage.getItem("token") === '') {
        alert("请先登录")
        return
      }
      this.serveArea =
        CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]];
      var a =
        CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]];
      if (a == "全部undefinedundefined") a = "";
      this.parmas.workArea = a;
      this.setParmas(this.parmas);
      this.changeIsByCondition(true)
      searchServer(this.parmas).then((response) => {
        if (response.data.code == 200) {
          this.content = response.data.data.rows;
          this.content.forEach(e => {
            e.serverArea = e.workArea
          })
          this.content.forEach(e => {
              // 渲染serverArea
              if (e.serverArea.substring(0, 2) === '全部') {
                e.serverArea = e.serverArea = '全国范围内'
              } else {
                e.serverArea = e.serverArea.replace('全部', '内')
                e.serverArea = e.serverArea.replace('undefined', '')
              }
            })
          this.setTotal(response.data.data.total);
          this.setList(this.content);
        }
      });
    },
    //搜索家政人员
    search() {
      if (!localStorage.getItem("token") === undefined || localStorage.getItem("token") === '') {
        alert("请先登录")
        return
      }
      this.searchFlag = 1
      this.setParmas(this.parmas);
      let param = {
        introduction: this.parmas.introduction,
        pageSize: this.parmas.pageSize,
        pageNum: this.parmas.pageNum
      }
      this.changeIsByCondition(true)
      searchByIntroduction(param).then((response) => {
        if (response.data.code == 200) {
          this.content = response.data.data.rows;
          this.setTotal(response.data.data.total);
          this.setList(this.content);
        }
      });
    },
    // 重置选择
    resetPage() {
      this.parmas = {
        pageNum: 1,
        pageSize: 3,
        nickName: "",
        salaryOrder: 0,
        categoryName: "不限",
        salary: '0',
        stay: '0',
        userType: 1,
        workArea: "",
        serverType: "",
        introduction: ''
      }
      this.selectedOptions = []
      this.$refs.down.style.color = "black";
      this.$refs.up.style.color = "black";
      this.isLong = null
      this.isHome = null
      this.searchFlag = 0
      const activeElements = document.querySelectorAll('.activeSpan');
      for (const element of activeElements) {
        element.classList.remove('activeSpan');
      }
      this.setParmas(this.parmas)
      this.changeIsByCondition(false)
      this.changePageNum(this.parmas.pageNum)
      this.changePageSize(this.parmas.pageSize)
      let params = {
        pageNum: this.getPageNum,
        pageSize: this.getPageSize
      }
      searchServerWithNoCondition(params).then((response) => {
        if (response.data.code === 200) {
          this.content = response.data.data.rows;
          this.count = response.data.data.total;
          this.content.forEach(e => {
              // 渲染serverArea
              if (e.serverArea.substring(0, 2) === '全部') {
                e.serverArea = e.serverArea = '全国范围内'
              } else {
                e.serverArea = e.serverArea.replace('全部', '内')
                e.serverArea = e.serverArea.replace('undefined', '')
              }
            })
          this.setTotal(this.count);
          this.setList(this.content);
        }
      });
    },
  },
};
</script>

<style scoped>
.cancelBtn {
  color: black;
  background-color: #f5f5f5;
  margin-left: 20px;
  border: 2px;
}

#topBox {
  text-align: left;
  margin: 0 auto;
  margin-left: 4rem;
  background-color: rgb(255, 255, 255);
  width: 93%;
  position: relative;
  top: 5rem;
  padding-bottom: 1rem;
  border-radius: 1rem;
}

#background {
  width: 100%;
  margin-top: -1rem;
  margin: 0 auto;
  /* background-color: rgb(237, 244, 237); */
}

/* 地标图片 */
#topBox img {
  display: inline-block;
  height: 1.8rem;
  width: auto;
  margin-top: 1.6rem;
  margin-left: 7.8rem;
  margin-right: 0.5rem;
}

/* 地区选择器 */
::v-deep .el-cascader {
  --el-cascader-menu-text-color: var(--el-text-color-regular);
  --el-cascader-menu-selected-text-color: var(--el-color-primary);
  --el-cascader-menu-fill: var(--el-bg-color-overlay);
  --el-cascader-menu-font-size: var(--el-font-size-base);
  --el-cascader-menu-radius: var(--el-border-radius-base);
  --el-cascader-menu-border: solid 1px var(--el-border-color-light);
  --el-cascader-menu-shadow: var(--el-box-shadow-light);
  --el-cascader-node-background-hover: var(--el-fill-color-light);
  --el-cascader-node-color-disabled: var(--el-text-color-placeholder);
  --el-cascader-color-empty: var(--el-text-color-placeholder);
  --el-cascader-tag-background: var(--el-fill-color);
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 1.25rem;
  left: 9.8rem;
  font-size: var(--el-font-size-base);
  line-height: 32px;
  outline: 0;
  width: 175px;
}

/* 搜素框 */
#searchInp {
  text-align: center;
  display: inline-block;
  width: 62%;
  height: 3rem;
  background-color: #5fb49e;
  position: absolute;
  left: 24rem;
  top: 1rem;
  border-radius: 0.7rem;
}

#searchButton {
  cursor: pointer;
}

#searchInp input {
  height: 2.5rem;
  margin-top: 0.2rem;
  width: 92%;
  border-radius: 1rem;
  margin-left: 0rem;
  margin-right: 1rem;
  border: 0;
  padding-left: 1rem;
  outline: none;
  font-size: small;
}

#searchInp span {
  color: white;

  font-weight: 600;
}

/* 家政分类 */
.catagoryList {
  margin-top: 1.5rem;
  display: inline-block;
  background-color: #f5f5f5;
  box-sizing: border-box;
  border-radius: 1rem;
}

.categoryItem {
  display: inline-block;
  box-sizing: border-box;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.categoryBox span {
  font-weight: bold;
}

.categoryBox>span {
  margin-top: 1rem;
  margin-left: 8rem;
  margin-right: 4rem;
}

.categoryItem span {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  margin-right: 2.7rem;
  margin-left: 2.7rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

.activeSpan {
  background-color: #55b084;
  color: white;
}

.categoryBox label {
  font-weight: bold;
  margin-left: 2.5rem;

  cursor: pointer;
}

#salaryRank {
  margin-right: 3rem;
}

/* 长期工等的选择 */
#bottom {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

#bottom span {
  vertical-align: middle;

  margin-left: 19rem;
  margin-right: 2rem;
  font-weight: bold;
}

#bottom label {
  font-weight: 600;
  vertical-align: middle;
}

#bottom input {
  margin-right: 1rem;
  vertical-align: middle;
}
</style>
