<template>
  <div id="bigBox">
    <div id="left">
      <img id="searchPic" src="./img/search.png" />
      <input type="button" @click="toLogin" value="去登录" />
    </div>
    <div id="right">
      <div class="content" v-for="item in this.searchList">
        <div id="avatar">
          <img :src="item.avatar" />
        </div>
        <h5 class="name">{{ item.serverNickName }}</h5>
        <div class="three first">{{ item.categoryName }}</div>
        <div class="three">{{ item.serverType == 1 ? '长期工' : item.serverType == 2 ? '短期工' : '出现错误' }}</div>
        <div class="three">{{ item.stay == 1 ? '住家' : item.stay == 2 ? '不住家' : '出现错误' }}</div>
        <br />
        <div id="bottom">
          <label>薪酬：</label>
          <h4 id="money">{{ item.salary }}</h4>
          <label>元/(次/日)</label>
          <label id="phoneLabel">联系方式:</label>
          <h4 id="phone">{{ item.phone }}</h4>
        </div>
        <input style="cursor: pointer" type="button" @click="appointment(item)" value="预约" />
        <hr />
        <label id="areaLabel">地区:</label>
        <h4 id="workArea">{{ item.serverArea }}</h4>
        <label id="areaLabel">简介:</label>
        <h4 id="workArea">{{ item.introduction.substring(0, 4) + "......" }}</h4>
        <label @click="serveDetail(item.serverId)" id="detailLabel">点击详情</label>
        <div id="insulate"></div>
      </div>
      <div v-if="!(this.getTotal * 1)">
        <img id="noImg" src="./img/noContent.png" />
        <h3 id="noH3">没有内容.....</h3>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</template>
<script>
import { searchServerWithNoCondition } from "@/api";
import { mapActions, mapState } from "vuex";
import popmessage from "@/components/tip/index.js";
import { mapMutations } from "vuex";
import { mapGetters } from "vuex";
import { setCookie } from "@/util/cookie.js";

export default {
  name: "mainContent",
  data() {
    return {
      count: 0,
      content: [],
      result: "",
    };
  },
  computed: {
    ...mapGetters("SearchStore", [
      "getSearchList",
      "getPageNum",
      "getParmas",
      "getTotal",
    ]),
    ...mapState("SearchStore", ["searchList", "total"]),
  },
  methods: {
    ...mapMutations("SearchStore", [
      "setList",
      "changePageNum",
      "setId",
      "setTotal",
    ]),
    ...mapActions("SearchStore", ["searchServerAction"]),
    toLogin() {
      if (
        localStorage.getItem("token") ||
        localStorage.getItem("token") == ""
      ) {
        popmessage({ type: "warn", str: "您已登录" });
      } else {
        this.$router.push("/loginview");
      }
    },
    //预约
    appointment(item) {
      if (
        !localStorage.getItem("token") ||
        localStorage.getItem("token") == ""
      ) {
        alert("请先登录")
        popmessage({ type: "warn", str: "请您登录之后再进行预约" });
        this.$router.push("/loginview");
      } else {
        setCookie("serverId", item.id);
        setCookie("nickName", item.serverNickName, 1);
        setCookie("categoryName", item.categoryName, 1);
        setCookie("phoneNumber", item.phone, 1);
        setCookie("serverType", item.serverType, 1);
        setCookie("salary", item.salary, 1);
        this.$router.push("/confirm_order");
      }
    },
    serveDetail(id) {
      if (!localStorage.getItem("token") || localStorage.getItem("token") === '') {
        alert("请先登录")
        return
      }
      this.setId(id);
      this.$router.push("/serve_detail");
    },
  },

  created() {
    const parmas = {
      pageNum: 1,
      pageSize: 3,
    }
    searchServerWithNoCondition(parmas).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);
      }
    });
  },
};
</script>
<style scoped>
#bigBox {
  /* background-color: aqua; */
  /* top: 8rem; */
  /* left: 0rem; */
  margin-top: 6rem;
}

#bigBox #searchPic {
  width: 22rem;
  height: auto;
  top: 0rem;
  left: 0rem;
  min-width: 20rem;
  max-width: 24rem;
  /* display: inline-block; */
  border-radius: 1rem;
  display: inline-block;
  margin-left: -57rem;
}

#left input[type="button"] {
  top: 10rem;
  left: 12rem;
  font-size: 1.3rem;
  letter-spacing: 0.2rem;
  font-weight: 800;
  border: none;
  border-radius: 1.3rem;
  background-color: #f9ec90;
  padding: 0.5rem 1.8rem;
  cursor: pointer;
  min-width: 8rem;
  max-width: 12rem;
  display: inline-block;
  z-index: 99;
  position: relative;
  top: -8rem;
  left: -10rem;
}

/* 右侧内容样式 */
#right {
  top: 0rem;
  left: 25rem;
  text-align: start;
  width: 66rem;
  margin-top: -21rem;
  margin-left: 29rem;
}

#right .content {
  position: relative;
  top: 0rem;
  left: 0rem;
  background: white;
  margin-bottom: 1rem;
  width: 63rem;
  border-radius: 2rem;
  font-weight: 600;
}

#right #avatar {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 4rem;
  height: 4rem;
  /* background-color: #f9ec90; */
  border-radius: 2rem;
  overflow: hidden;
}

#avatar img {
  height: 4rem;
  width: auto;
}

#right .name {
  text-align: start;
  display: inline-block;
  position: absolute;
  top: 1.5rem;
  left: 6rem;
  width: 10rem;
  overflow: hidden;
  font-size: 1rem;
}

.content .three {
  font-size: 1rem;
  display: inline-block;
  width: 4.2rem;
  overflow: hidden;
  margin-left: 1rem;
  margin-top: 0.8rem;
  color: #68aa84;
  background-color: #e2e7e0;
  text-align: center;
  border-radius: 0.2rem;
  padding: 0.1rem 0.3rem;
  font-weight: bold;
}

.content .first {
  margin-left: 13rem;
}

.content #phoneLabel {
  margin-left: 7rem;
}

.content input[type="button"] {
  width: 5rem;
  height: 2rem;
  border-radius: 1rem;
  color: white;
  background-color: #52a7f8;
  border: none;
  margin-left: 12rem;
}

.content #bottom {
  font-size: 1.1rem;
  display: inline-block;
  margin-top: 1rem;
  margin-left: 13rem;
  top: 0rem;
  left: 0rem;
}

.content hr {
  margin: 0 auto;
  padding: 0;
  margin-top: 1rem;
  width: 90%;
  margin-bottom: 1rem;
}

.content h4 {
  display: inline-block;
}

.content #money {
  width: 2.2rem;
  overflow: hidden;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}

.content #phone {
  width: 7rem;
  overflow: hidden;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}

.content label {
  margin-right: 0.2rem;
  font-weight: 600;
}

#areaLabel {
  margin-left: 2rem;
  vertical-align: middle;
}

#skillLabel {
  margin-left: 0rem;
}

#detailLabel {
  margin-left: 0rem;
  color: #8191ba;
  cursor: pointer;
}

#workArea {
  width: 20rem;
  overflow: hidden;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

#skill {
  width: 25rem;
  overflow: hidden;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

#insulate {
  display: block;
  height: 1rem;
  width: 3rem;
  margin-bottom: 1rem;
}

/* 分页按钮 */
::v-deep .el-pagination {
  --el-pagination-font-size: 1.1rem;
  --el-pagination-bg-color: var(--el-fill-color-blank);
  --el-pagination-text-color: var(--el-text-color-primary);
  --el-pagination-border-radius: 2px;
  --el-pagination-button-color: var(--el-text-color-primary);
  --el-pagination-button-width: 3rem;
  --el-pagination-button-height: 3rem;
  --el-pagination-button-disabled-color: var(--el-text-color-placeholder);
  --el-pagination-button-disabled-bg-color: var(--el-fill-color-blank);
  --el-pagination-button-bg-color: var(--el-fill-color);
  --el-pagination-hover-color: var(--el-color-primary);
  --el-pagination-font-size-small: 12px;
  --el-pagination-button-width-small: 24px;
  --el-pagination-button-height-small: 24px;
  --el-pagination-item-gap: 16px;
  white-space: nowrap;
  color: var(--el-pagination-text-color);
  font-size: var(--el-pagination-font-size);
  font-weight: 400;
  align-items: center;
}

/* 缺省页 */
#noImg {
  width: 26rem;
  margin-left: 20rem;
}

#noH3 {
  margin-left: 32rem;
}

/* 清除浮动 */
.clear {
  clear: both;
}

/* 左侧图片 */
#left {
  margin: 0;
}
</style>
