<template>
  <div class="relation" ref="gdSum">
    <!-- 首页导航 -->
    <Navs></Navs>
    <div class="relation_cont">
      <div class="header">
        <div class="left">联系我们</div>
        <div class="right">
          <img :src="imgurl.pos" alt />
          <span>当前位置：</span>
          <span @click="$router.push('/')">首页</span>
          >
          <span @click="$router.go(0)">联系我们</span>
        </div>
      </div>
      <div class="center">
        <div class="title">留言板</div>
        <div class="center_input">
          <input type="text" placeholder="姓名*" v-model="leave.name" />
          <input type="text" placeholder="邮箱*" v-model="leave.mail" />
          <input type="text" placeholder="电话*" v-model="leave.iphone" />
        </div>
        <input type="text" placeholder="标题*" v-model="leave.title" />
        <textarea v-model="leave.cont" placeholder="留言内容*"></textarea>
        <div class="sub" @click="upoloadMessage">提交</div>
      </div>
      <div class="bottom">
        <div class="contactWay">联系方式</div>
        <div class="contactWay_cont">
          <div v-for="(item,index) in relationData" :key="index">
            <div>
              <span>地区</span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.region}}
            </div>
            <div>
              <span>联系人</span>
              &nbsp;&nbsp;&nbsp;&nbsp;{{item.name}}
            </div>
            <div>
              <span>电话</span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.iphone}}
            </div>
            <div>
              <span>地址</span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.site}}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚信息 -->
    <FooterInfors></FooterInfors>
    <!-- 置顶 -->
    <!-- <div class="relationZD" @click="relationZDs">
      <img :src="imgurl.zhiding" alt />
    </div>-->
    <backTop v-back-top v-scroll-show="isBackShow" :isShow="isBackShow"></backTop>
  </div>
</template>
<script>
// 导航
import Nav from '@/components/nav/Nav.vue'
// 页脚信息
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
// 置顶
import backTop from '@/components/backTop/BackTop.vue'
export default {
  name: 'relation',
  components: {
    Navs: Nav,
    FooterInfors: FooterInfor,
    backTop: backTop
  },
  data () {
    return {
      imgurl: {
        pos: require('../../../static/company/posweizhi.png'),
        zhiding: require('../../../static/relation/zhiding.png')
      },
      leave: {
        name: '',
        mail: '',
        iphone: '',
        title: '',
        cont: ''
      },
      relationData: [
        {
          region: '华东',
          name: '李先生',
          iphone: '000-12345678',
          site: '北京市西城区月坛南街57号'
        },
        {
          region: '华东',
          name: '李先生',
          iphone: '000-12345678',
          site: '北京市西城区月坛南街57号'
        },
        {
          region: '华东',
          name: '李先生',
          iphone: '000-12345678',
          site: '北京市西城区月坛南街57号'
        }
      ],
      // 置顶
      isBackShow: { value: 200 }
    }
  },
  methods: {
    relationZDs (e) {
      setTimeout(() => {
        window.scrollTo(0, 0)
      }, 2000)
    },
    // 联系方式
    getContact () {
      this.$axios({
        method: 'GET',
        url: 'aboutus/about-us/contact',
        params: {}
      }).then(res => {
        // console.log(res, '可联系方式')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          let arrts = []
          res.data.data.list.forEach((item, index) => {
            let srtAs = {
              region: item.area,
              name: item.name,
              iphone: item.tel,
              site: item.address
            }
            arrts.push(srtAs)
          })
          this.relationData = arrts
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 留言板
    upoloadMessage () {
      if (this.leave.name === '') {
        // alert('姓名不能为空！')
        this.$alert('姓名不能为空！', '温馨提示', {
          confirmButtonText: '确定'
        })
      } else if (this.leave.mail === '') {
        // alert('邮箱不能为空！')
        this.$alert('邮箱不能为空！', '温馨提示', {
          confirmButtonText: '确定'
        })
      } else if (this.leave.iphone === '') {
        // alert('电话号码不能为空！')
        this.$alert('电话号码不能为空！', '温馨提示', {
          confirmButtonText: '确定'
        })
      } else if (this.leave.title === '') {
        // alert('标题不能为空！')
        this.$alert('标题不能为空！', '温馨提示', {
          confirmButtonText: '确定'
        })
      } else if (this.leave.cont === '') {
        // alert('留言内容不能为空！')
        this.$alert('留言内容不能为空！', '温馨提示', {
          confirmButtonText: '确定'
        })
      } else if (!(/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(this.leave.mail))) {
        // alert('您输入的邮箱地址不正确，请重新填写！')
        this.$alert('您输入的邮箱地址不正确，请重新填写！', '温馨提示', {
          confirmButtonText: '确定'
        })
      } else if (!(/^1[3456789]\d{9}$/.test(this.leave.iphone))) {
        // alert('您输入的电话号码不正确，请重新填写！')
        this.$alert('您输入的电话号码不正确，请重新填写！', '温馨提示', {
          confirmButtonText: '确定'
        })
      } else {
        this.$axios({
          method: 'POST',
          url: 'aboutus/about-us/message',
          data: {
            name: this.leave.name,
            email: this.leave.mail,
            tel: this.leave.iphone,
            title: this.leave.title,
            message: this.leave.cont
          }
        }).then(res => {
          console.log(res, '留言板')
          // 请求接口完成   请求成功
          if (res.data.code === 200) {
            this.$alert(res.data.message, '温馨提示', {
              confirmButtonText: '确定'
            })
            // alert(res.data.message)
            this.leave.name = ''
            this.leave.mail = ''
            this.leave.iphone = ''
            this.leave.title = ''
            this.leave.cont = ''
          }
        }).catch((fail) => {
          console.log(fail)
        })
      }
    }
  },
  mounted () {
    this.getContact()
  }

}
</script>
<style lang="scss" scoped>
input {
  padding: 0 0.75rem;
}
textarea {
  padding: 0.75rem;
}
// 置顶
.relationZD {
  position: fixed;
  right: 7.5rem;
  bottom: 7.5rem;
  width: 3.375rem;
  height: 3.375rem;
  background-color: #ffffff;
  box-shadow: 0rem 0.125rem 0.125rem 0rem rgba(237, 237, 237, 0.4);
  border-radius: 0.3125rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  & > img {
    width: 1.375rem;
    height: 1.75rem;
  }
}
.relation_cont {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  & > .header {
    width: 84.25rem;
    height: 4.25rem;
    // border: 1px solid red;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    & > .left {
      // margin-left: 1.5rem;
      font-size: 1.5rem;
      font-weight: bold;
      font-stretch: normal;
      letter-spacing: 0.125rem;
      color: #000000;
    }
    & > .right {
      // margin-right: 1.5rem;
      font-size: 1.25rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #8fa3ae;
      & > img {
        width: 1rem;
        height: 1.25rem;
        margin-right: 0.45rem;
      }
      & > span:nth-child(n + 3):hover {
        cursor: pointer;
        color: #52b6e3;
      }
    }
  }
  & > .center {
    width: 84.25rem;
    height: 63.5rem;
    // border: 1px solid red;
    background-color: #ffffff;
    box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    & > .title {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 8.75rem;
      font-size: 1.5rem;
      font-weight: normal;
      font-stretch: normal;
      // line-height: 19px;
      letter-spacing: 0rem;
      color: #000000;
    }
    & > .center_input {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      & > input {
        width: 21.25rem;
        height: 3.125rem;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #666666;
        opacity: 0.7;
      }
    }
    & > input {
      width: 77.4rem;
      height: 3.125rem;
      font-size: 1.25rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #666666;
      opacity: 0.7;
    }
    & > textarea {
      width: 77.4rem;
      height: 35rem;
    }
    & > .sub {
      width: 23.5rem;
      height: 3.5rem;
      background-color: #52b6e3;
      border-radius: 0.3125rem;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      font-size: 1.375rem;
      font-weight: normal;
      font-stretch: normal;
      // line-height: 19px;
      letter-spacing: 0rem;
      color: #ffffff;
    }
    & > .sub:hover {
      cursor: pointer;
    }
  }
  & > .bottom {
    width: 84.25rem;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    & > .contactWay {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 6.2rem;
      font-size: 1.5rem;
      font-weight: normal;
      font-stretch: normal;
      // line-height: 19px;
      letter-spacing: 0rem;
      color: #000000;
    }
    & > .contactWay_cont {
      margin-bottom: 2.375rem;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      & > div {
        width: 22.25rem;
        height: 10.625rem;
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        & > div {
          font-size: 1.25rem;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rem;
          color: #666666;
          & > span {
            font-size: 1.25rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rem;
            color: #333333;
          }
        }
      }
    }
  }
}
</style>
