<template>
  <div>
    <div class="leader-h1" v-if="show">
      <h1 class="h1">领导信箱</h1>
      <!-- 点击返回上一页 -->
      <div class="leader-h1-img" @click="back">
        <img src="@/views/XiXianZhongXin/assets/返回.png" alt="" />
      </div>
    </div>
    <!-- 输入姓名，留言点击上传数据库 -->
    <div class="inputAll">
      <!-- 提交form表单 -->
      <form @submit.prevent="submit(staff_num)">
        <div class="input-name">
          <span class="span-name">姓名:</span>
          <!-- input事件用来点击复选框时显示原本姓名还是匿名 -->
          <input
            type="text"
            name="姓名"
            placeholder="请输入姓名"
            class="input-border"
            v-model="username"
            @input="userNameChange"
          />
          <!-- 这里的v-model用来控制是匿名还是非匿名 -->
          <div>
            <van-checkbox v-model="checked" shape="square">匿名</van-checkbox>
          </div>
        </div>
        <div class="input-message">
          <van-field
            v-model="content"
            rows="5"
            colon="true"
            name="留言"
            label="留言"
            type="textarea"
            placeholder="请输入留言"
          />
        </div>
        <div class="input-button">
          <input type="submit" value="提交" />
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: 1,
      content: "",
      username: "",
      staff_num: "",
      token: sessionStorage.getItem("mytoken")
        ? sessionStorage.getItem("mytoken")
        : "",
      show: true,
      gettoken:""
    };
  },
  methods: {
    //点击事件提交到领导信箱的数据库
    submit(num) {
      // console.log(id);
      if (this.username == "" || this.content == "") {
        this.$toast("请填写内容");
      } else {
        this.$http
          .post("/api/workbench/leader_mailbox/add", {
            staff_num: num,
            status: this.checked,
            content: this.content,
            name: this.username,
          })
          .then((res) => {
            console.log(res);
          });
        //获得提示表明已提交意见
        this.$toast("建议已提交");
        this.$router.push(`/leader-mailbox-list?token=${this.token}`);
      }
    },
    userNameChange() {
      //当checked等于true的时候表单内容被*号覆盖
      if (this.checked == true) {
        let inputUserName = this.username;
        inputUserName = inputUserName.replace(/./g, "*");
        this.username = inputUserName;
      } else {
        //反之显示原本的内容
        this.username;
      }
    },
    //返回上一页面
    back() {
      window.history.back();
    },
    getxinxi(){
      this.$http.post('http://xixuan.nxjiewei.com:8011/api/user/info').then(res=>{
        // console.log(res.data.data.staff_num);
        this.staff_num=res.data.data.staff_num
      })
    }
  },
  //这里挂载的是获取token
  mounted() {
    this.gettoken=this.$route.query.token
    this.token=`Bearer ${this.gettoken}` 
    sessionStorage.setItem("mytoken", this.token);
    this.show = this.$route.query.tabbar ? this.$route.query.tabbar : true;
    this.getxinxi()
  },
};
</script>

<style>
body {
  background: #3399ff;
}
.h1 {
  text-align: center;
  color: #fff;
  font-weight: 500;
  font-size: 20px;
}
.van-cell {
  margin-bottom: 3%;
  border-radius: 10px;
}
.van-button--info {
  color: #39f;
  background-color: #fff;
}
.input-name {
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
  width: 90%;
  height: 50px;
  line-height: 50px;
  margin-bottom: 3%;
  background: #fff;
  border-radius: 10px;
  margin-top: 3%;
}
.span-name {
  font-size: 14px;
  color: #97a3b4;
  margin-left: 3%;
}
.input-border {
  border: none;
}
.input-border::-webkit-input-placeholder {
  color: #97a3b4;
  font-size: 14px;
}
.input-button {
  width: 85%;
  background: #fff;
  height: 40px;
  text-align: center;
  margin: auto;
  line-height: 40px;
  border-radius: 10px;
  margin-top: 5%;
}
.input-button > input {
  background: #fff;
  border: none;
  color: #39f;
}
.input-checkbox {
  line-height: 40px;
}
.input-message {
  width: 90%;
  margin: 0 auto;
}
.van-checkbox {
  margin-top: 10px;
}
.van-checkbox__icon .van-icon {
  width: 20px;
  height: 20px;
}
.van-checkbox__label {
  margin-left: 3px;
  margin-top: 10%;
  color: #97a3b4;
  line-height: 10px;
  font-size: 16px;
}
.van-checkbox__icon {
  margin-top: 5px;
}
.input-message span {
  color: #97a3b4;
}
.leader-h1 {
  position: relative;
}
.leader-h1-img {
  position: absolute;
  left: 9%;
  top: 25%;
}
.leader-h1-img > img {
  width: 15px;
  height: 18px;
}
</style>