<template>
  <div>
    <nav-bar/>
    <van-tabs type="card"
              class="sextab"
              color="#166bcc"
              @click="onClick">
      <van-tab title="男"></van-tab>
      <van-tab title="女"></van-tab>
    </van-tabs>
    <!-- 正面-->
    <div class="mzBody" v-if="isMzBodyShow">
      <img src="../assets/bodymz.png" width="380" height="720" alt="planets" usemap="#plantmap"/>
      <map name="plantmap">
        <!-- area 定义图像映射中的区域 -->
        <area shape="rect" coords="127,-0,245,93" alt="Sun" @click="handleClickHead"/>
        <area shape="rect" coords="101,91,277,117" alt="Sun" @click="handleClickNeck"/>

        <area shape="poly" coords="25,121,101,117,98,272,70,408,24,392,21,279,29,193"
              @click="handleClickLeftlimb"/>
        <area shape="poly" coords="279,116,337,123,349,238,352,380,325,411,303,375,287,298,276,223,273,150"
              @click="handleClickRightlimb"/>

        <area shape="rect" coords="114,131,264,206" @click="handleClickChest"/>
        <area shape="rect" coords="113,215,270,315" @click="handleClickbelly"/>
        <area shape="rect" coords="105,334,275,391" @click="handleClickPrivateParts"/>
        <area shape="rect" coords="79,423,177,698" @click="handleClickLeftLeg"/>
        <area shape="rect" coords="298,416,197,698" @click="handleClickRightLeg"/>
      </map>
    </div>
    <!-- 背面-->
    <div class="mzBody" v-if="isMfBodyShow">
      <img src="../assets/bodymf.png" width="380" height="720" alt="planets" usemap="#plantmap"/>
      <map name="plantmap">
        <!-- area 定义图像映射中的区域 -->
        <area shape="rect" coords="127,-0,245,93" alt="Sun" @click="handleClickHead"/>
        <area shape="rect" coords="101,91,277,117" alt="Sun" @click="handleClickNeck"/>

        <area shape="poly" coords="25,121,101,117,98,272,70,408,24,392,21,279,29,193"
              @click="handleClickLeftlimb"/>
        <area shape="poly" coords="279,116,337,123,349,238,352,380,325,411,303,375,287,298,276,223,273,150"
              @click="handleClickRightlimb"/>

        <area shape="rect" coords="114,131,264,206" @click="handleClickback"/>
        <area shape="rect" coords="113,215,270,315" @click="handleClickwaist"/>
        <area shape="rect" coords="105,334,275,391" @click="handleClickbuttocks"/>
        <area shape="rect" coords="79,423,177,698" @click="handleClickLeftLeg"/>
        <area shape="rect" coords="298,416,197,698" @click="handleClickRightLeg"/>
      </map>
    </div>
    <div class="mzBody" v-if="isWzBodyShow">
      <img src="../assets/bodywz.png" width="380" height="720" alt="planets" usemap="#plantmap"/>
      <map name="plantmap">
        <!-- area 定义图像映射中的区域 -->
        <area shape="rect" coords="127,-0,245,93" alt="Sun" @click="handleClickHead"/>
        <area shape="rect" coords="101,91,277,117" alt="Sun" @click="handleClickNeck"/>

        <area shape="poly" coords="25,121,101,117,98,272,70,408,24,392,21,279,29,193"
              @click="handleClickLeftlimb"/>
        <area shape="poly" coords="279,116,337,123,349,238,352,380,325,411,303,375,287,298,276,223,273,150"
              @click="handleClickRightlimb"/>

        <area shape="rect" coords="114,131,264,206" @click="handleClickChest"/>
        <area shape="rect" coords="113,215,270,315" @click="handleClickbelly"/>
        <area shape="rect" coords="105,334,275,391" @click="handleClickPrivateParts"/>
        <area shape="rect" coords="79,423,177,698" @click="handleClickLeftLeg"/>
        <area shape="rect" coords="298,416,197,698" @click="handleClickRightLeg"/>
      </map>
    </div>
    <div class="mzBody" v-if="isWfBodyShow">
      <img src="../assets/bodywf.png" width="380" height="720" alt="planets" usemap="#plantmap"/>
      <map name="plantmap">
        <!-- area 定义图像映射中的区域 -->
        <area shape="rect" coords="127,-0,245,93" alt="Sun" @click="handleClickHead"/>
        <area shape="rect" coords="101,91,277,117" alt="Sun" @click="handleClickNeck"/>

        <area shape="poly" coords="25,121,101,117,98,272,70,408,24,392,21,279,29,193"
              @click="handleClickLeftlimb"/>
        <area shape="poly" coords="279,116,337,123,349,238,352,380,325,411,303,375,287,298,276,223,273,150"
              @click="handleClickRightlimb"/>

        <area shape="rect" coords="114,131,264,206" @click="handleClickback"/>
        <area shape="rect" coords="113,215,270,315" @click="handleClickwaist"/>
        <area shape="rect" coords="105,334,275,391" @click="handleClickbuttocks"/>
        <area shape="rect" coords="79,423,177,698" @click="handleClickLeftLeg"/>
        <area shape="rect" coords="298,416,197,698" @click="handleClickRightLeg"/>
      </map>
    </div>

    <div class="xuanzhuanclass" @click="exchange">
      <img class="imgclass" src="../assets/xuanzhuan.png"/>
    </div>


    <van-popup
        v-model="show"
        position="right"
        :style="{ height: '100%' ,width:'50%'}">

      <van-cell
          v-for="(item,i) in questionTypeList"
          :key="i"
          :title="item.questionTypeName"
          is-link
          @click="showName(item)"
      />


    </van-popup>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  getdzQuestionsType,
} from "@/request/api.js";
import dh from "@/components/nav.vue";
import {Tab, Tabs, Popup, Toast} from 'vant';

export default {
  components: {
    dh,
  },
  data() {
    return {
      show: false,
      questionTypeList: [],
      isMzBodyShow: true,
      isMfBodyShow: false,
      isWzBodyShow: false,
      isWfBodyShow: false,
      sexflag: 'man',  //男为true
    };
  },
  mounted() {

  },
  methods: {
    handleClickHead() {
      // alert("点击头")
      let data = {
        place: "1"
      }
      getdzQuestionsType(data).then(res => {
            this.questionTypeList = res.data
            this.show = true
            console.log(res)
          }
      )

      // this.$router.push({
      //   path: "/Zndz_detail" +
      //       "?isPlace=1"
      // });
    },
    handleClickNeck() {
      // alert("点击脖子")
      let data = {
        place: "2"
      }
      getdzQuestionsType(data).then(res => {
            this.questionTypeList = res.data
            this.show = true
            console.log(res)
          }
      )
      // this.$router.push({
      //   path: "/Zndz_detail" +
      //       "?isPlace=2"
      // });
    },
    handleClickLeftlimb() {
      // alert("点击左肢")
      let data = {
        place: "4"
      }
      getdzQuestionsType(data).then(res => {
            this.questionTypeList = res.data
            this.show = true
            console.log(res)
          }
      )
      // this.$router.push({
      //   path: "/Zndz_detail" +
      //       "?isPlace=4"
      // });
    },
    handleClickRightlimb() {
      // alert("点击右肢")
      let data = {
        place: "4"
      }
      getdzQuestionsType(data).then(res => {
            this.questionTypeList = res.data
            this.show = true
            console.log(res)
          }
      )
      // this.$router.push({
      //   path: "/Zndz_detail" +
      //       "?isPlace=4"
      // });
    },
    handleClickChest() {
      // alert("点击胸口")
      let data = {
        place: "3"
      }
      getdzQuestionsType(data).then(res => {
            this.questionTypeList = res.data
            this.show = true
            console.log(res)
          }
      )
      // this.$router.push({
      //   path: "/Zndz_detail" +
      //       "?isPlace=3"
      // });
    },
    handleClickbelly() {
      // alert("点击肚子")
      let data = {
        place: "5"
      }
      getdzQuestionsType(data).then(res => {
            this.questionTypeList = res.data
            this.show = true
            console.log(res)
          }
      )
      // this.$router.push({
      //   path: "/Zndz_detail" +
      //       "?isPlace=5"
      // });
    },
    handleClickPrivateParts() {
      // alert("点击私处")
      let data = {
        place: "6"
      }
      getdzQuestionsType(data).then(res => {
            this.questionTypeList = res.data
            this.show = true
            console.log(res)
          }
      )
      // this.$router.push({
      //   path: "/Zndz_detail" +
      //       "?isPlace=6"
      // });
    },
    handleClickLeftLeg() {
      // alert("点击左腿")
      let data = {
        place: "7"
      }
      getdzQuestionsType(data).then(res => {
            this.questionTypeList = res.data
            this.show = true
            console.log(res)
          }
      )
      // this.$router.push({
      //   path: "/Zndz_detail" +
      //       "?isPlace=7"
      // });
    },
    handleClickRightLeg() {
      // alert("点击右腿")
      let data = {
        place: "7"
      }
      getdzQuestionsType(data).then(res => {
            this.questionTypeList = res.data
            this.show = true
            console.log(res)
          }
      )
      // this.$router.push({
      //   path: "/Zndz_detail" +
      //       "?isPlace=7"
      // });
    },
    handleClickback() {
      // alert("点击后背")
      let data = {
        place: "8"
      }
      getdzQuestionsType(data).then(res => {
            this.questionTypeList = res.data
            this.show = true
            console.log(res)
          }
      )
      // this.$router.push({
      //   path: "/Zndz_detail" +
      //       "?isPlace=8"
      // });
    },
    handleClickwaist() {
      // alert("点击腰")
      let data = {
        place: "9"
      }
      getdzQuestionsType(data).then(res => {
            this.questionTypeList = res.data
            this.show = true
            console.log(res)
          }
      )
      // this.$router.push({
      //   path: "/Zndz_detail" +
      //       "?isPlace=9"
      // });
    },
    handleClickbuttocks() {
      // alert("点击屁股")
      let data = {
        place: "10"
      }
      getdzQuestionsType(data).then(res => {
            this.questionTypeList = res.data
            this.show = true
            console.log(res)
          }
      )
      // this.$router.push({
      //   path: "/Zndz_detail" +
      //       "?isPlace=10"
      // });
    },
    exchange() {
      if (this.sexflag === 'man') {
        this.isMzBodyShow = !this.isMzBodyShow
        this.isMfBodyShow = !this.isMfBodyShow
        this.isWzBodyShow = false
        this.isWfBodyShow = false
      } else {
        this.isWzBodyShow = !this.isWzBodyShow
        this.isWfBodyShow = !this.isWfBodyShow
        this.isMzBodyShow = false
        this.isMfBodyShow = false
      }


    },
    showName(value) {
      this.$router.push({
        path: "/Zndz_detail" +
            "?area=" + value.bodyAreaType + "&type=" + value.questionType
      });
    },
    onClick(name, title) {
      if (name === 0) {
        this.sexflag = 'man'
        this.isMzBodyShow = true
        this.isMfBodyShow = false
        this.isWfBodyShow = false
        this.isWzBodyShow = false
      } else {
        this.sexflag = 'woman'
        this.isWzBodyShow = true
        this.isMzBodyShow = false
        this.isMfBodyShow = false
        this.isWfBodyShow = false

      }
    },

  },
};
</script>


<style scoped lang="scss">


.mzBody {
  width: 100%;
  text-align: center;

  img {
    display: inline-block;
  }
}

.sextab {
  width: 4rem;
  position: absolute;
  bottom: 0.5rem;
  left: 0rem;
}

.xuanzhuanclass {
  position: absolute;
  right: 0.5rem;
  bottom: 0rem;
}

</style>
