<template>
  <div class="right">
    <div class="showTitle">
      <el-icon>
        <Tickets />
      </el-icon>
      <h2>家政经历</h2>
      <input type="button" @click="convertMsg($event)" value="修改" />
    </div>
    <div class="smallTitle">
      <h4>个人描述</h4>
    </div>
    <table class="bigtable">
      <tr>
        <td class="title">
          <div>
            <h3>工作范围</h3>
          </div>
        </td>
        <td class="input">
          <input v-model="this.workRange" type="text" disabled />
        </td>
        <td class="title">
          <div>
            <h3>擅长技能</h3>
          </div>
        </td>
        <td class="input">
          <input v-model="this.skill" type="text" disabled />
        </td>
      </tr>
      <tr>
        <td class="title">
          <div>
            <h3>工作地点</h3>
          </div>
        </td>
        <td class="input">
          <input v-model="this.workArea" type="text" disabled />
        </td>
        <td class="title">
          <div>
            <h3>联系方式</h3>
          </div>
        </td>
        <td class="input">
          <input v-model="this.phoneNumber" type="text" disabled />
        </td>
      </tr>
    </table>
    <div class="smallTitle">
      <h4>家政经历</h4>
    </div>
    <table class="bigtable">
      <tr>
        <td class="title">
          <div>
            <h3>个人特点</h3>
          </div>
        </td>
        <td class="input">
          <input type="text" v-model="this.characteristic" disabled />
        </td>
      </tr>
      <tr>
        <td class="title">
          <div>
            <h3>证书</h3>
          </div>
        </td>
        <td class="input">
          <input type="text" v-model="this.cert" disabled />
        </td>
      </tr>
      <tr class="expirence">
        <td class="title">
          <div>
            <h3>工作经验</h3>
          </div>
        </td>
        <td class="input">
          <textarea disabled v-model="this.workExp"></textarea>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import {
  Tickets,
  PictureFilled,
  Avatar,
  UserFilled,
  Iphone,
  Location,
  Clock,
  User,
} from "@element-plus/icons-vue";
import { mapState } from "vuex";
import { userInfo, convertInfo } from "@/api";
export default {
  name: "WorkExpeirence",
  data() {
    return {
      workRange: "",
      skill: "",
      workArea: "",
      phoneNumber: "",
      characteristic: "",
      cert: "",
      workExp: "",
      age: "",
    };
  },
  components: {
    User,
    Clock,
    Location,
    Tickets,
    PictureFilled,
    Avatar,
    UserFilled,
    Iphone,
  },
  created() {
    //页面加载时就从本地通过localstorage获取存储的token值
    if (localStorage.getItem("token")) {
      this.token = localStorage.getItem("token");
    }
    userInfo().then((response) => {
      if (response.data.code === 200) {
        this.workRange = response.data.data.workRange;
        this.skill = response.data.data.skill;
        this.workArea = response.data.data.workArea;
        this.phoneNumber = response.data.data.phone;
        this.characteristic = response.data.data.characteristic;
        this.cert = response.data.data.cert;
        this.workExp = response.data.data.workExp;
        this.age = response.data.data.age;
      }
    });
  },
  computed: {
    ...mapState("PerCent", [
      "workRange",
      "skill",
      "workArea",
      "phone",
      "characteristic",
      "cert",
      "workExp",
    ]),
    ...mapState("LoginStore", ["tokenStore"]),
  },
  methods: {
    validate() {
      if (this.phoneNumber.length < 11) {
        alert("手机号长度不能小于11位");
        return false;
      }
      return true;
    },
    change(e) {
      this.$forceUpdate();
    },
    convertMsg(e) {
      if (e.currentTarget.getAttribute("value") == "确认修改") {
        //第一个表格
        const n = document.documentElement
          .getElementsByTagName("table")[0]
          .getElementsByTagName("input").length;
        /*  console.log(n); */
        for (var i = 0; i < n; i++) {
          document.documentElement
            .getElementsByTagName("table")[0]
            .getElementsByTagName("input")
          [i].setAttribute("disabled", "disabled");
        }
        //第二个表格
        const n2 = document.documentElement
          .getElementsByTagName("table")[1]
          .getElementsByTagName("input").length;
        /* console.log(n2); */
        for (var i = 0; i < n2; i++) {
          document.documentElement
            .getElementsByTagName("table")[1]
            .getElementsByTagName("input")
          [i].setAttribute("disabled", "disabled");
        }

        document.documentElement
          .getElementsByTagName("textarea")[0]
          .setAttribute("disabled", "disabled");
        e.currentTarget.setAttribute("value", "修改");
        //更新个人信息
        const params = {
          workRange: this.workRange,
          skill: this.skill,
          workArea: this.workArea,
          phonenumber: this.phoneNumber,
          characteristic: this.characteristic,
          cert: this.cert,
          workExp: this.workExp,
          age: this.age,
        };
        if (this.validate()) {
          convertInfo(params).then((response) => {
            if (response.data.code == 200) {
              alert("修改成功");
            } else {
              alert("修改失败");
            }
          });
        }
        this.$router.go(0);
      } else {
        //第一个表
        const n = document.documentElement
          .getElementsByTagName("table")[0]
          .getElementsByTagName("input").length;
        /* console.log(n); */
        for (var i = 0; i < n; i++) {
          document.documentElement
            .getElementsByTagName("table")[0]
            .getElementsByTagName("input")
          [i].removeAttribute("disabled");
        }
        //第二个表
        const n2 = document.documentElement
          .getElementsByTagName("table")[1]
          .getElementsByTagName("input").length;
        /*    console.log(n2); */
        for (var i = 0; i < n2; i++) {
          document.documentElement
            .getElementsByTagName("table")[1]
            .getElementsByTagName("input")
          [i].removeAttribute("disabled");
        }
        document.documentElement
          .getElementsByTagName("textarea")[0]
          .removeAttribute("disabled");
        e.currentTarget.setAttribute("value", "确认修改");
      }
    },
  },
};
</script>
<style scoped>
.right {
  width: 59rem;
  background-color: rgb(255, 255, 255);
  top: 1rem;
  left: 24rem;
  border: 1px solid gray;
  border-radius: 10px;
  margin-left: 25rem;
}

.showTitle {
  position: relative;
  width: 100%;
  height: 3rem;
  border-bottom: 1px solid rgb(165, 162, 162);
  box-sizing: border-box;
  text-align: start;
  padding-left: 2rem;
}

.showTitle h2 {
  display: inline-block;
  font-size: 1.3rem;
  text-align: left;
}

table {
  width: 95%;
  margin: 0 auto;
  margin-top: 0.3rem;
  font-size: small;
  font-weight: bolder;
  border-collapse: separate;
  border-spacing: 0;
  border: solid 2px rgb(215, 215, 215);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

td {
  text-align: left;
  padding: 0.5rem;
  border-top: 1px solid rgb(213, 213, 213);
}

td:last-child,
th:last-child {
  border-right-color: transparent;
}

.title {
  width: 4rem;
  background-color: rgb(245, 245, 245);
  padding-left: 1rem;
  margin: 0;
  padding: 0.3rem;
}

.headPortrait {
  height: 6rem;
}

td,
th {
  border-right: 2px solid rgb(213, 213, 213);
}

.el-icon {
  --color: inherit;
  height: 1em;
  width: 1em;
  line-height: 1em;
  fill: currentColor;
  color: var(--color);
  display: inline-block;
  font-size: 1.3rem;
  text-align: left;
  font-size: large;
}

table td h3 {
  display: inline-block;
  font-size: 0.8rem;
}

table td .el-icon[data-v-7641c14d] {
  --color: inherit;
  height: 1em;
  width: 1em;
  line-height: 1em;
  fill: currentColor;
  color: var(--color);
  font-size: 1.3rem;
  font-size: large;
  display: inline-block;
  position: absolute;
  top: 0rem;
  left: -0.2rem;
}

table td div {
  position: relative;
  text-align: justify;
  padding-left: 0.2rem;
}

input[type="button"] {
  background-color: #409eff;
  width: 6rem;
  height: 2rem;
  border-radius: 1rem;
  position: absolute;
  right: 2rem;
  border: none;
  top: 0.5rem;
  color: white;
  text-align: center;
  letter-spacing: 0.3rem;
  cursor: pointer;
}

.smallTitle {
  text-align: left;
}

.smallTitle h4 {
  padding-left: 1rem;
  display: inline-block;
}

.expirence div {
  padding: 1.4rem;
}

input {
  display: inline-block;
  padding: 0;
  margin: 0;
  width: 90%;
  height: 2rem;
  border: none;
  /* outline: none; */
  color: rgb(63, 62, 62);
  font-size: 1rem;
  font-weight: 500;
  padding-left: 0.5rem;
}

.input {
  padding: 0;
  padding-left: 0.4rem;
}

.expirence input {
  height: 5rem;
  font-weight: 500;
}

/* 工作经历输入框 */
textarea {
  resize: none;
  width: 90%;
  height: 7rem;

  border: none;
  /*  outline: none; */
  color: black;
  font-size: 1rem;
  font-weight: 500;
  padding-left: 0.5rem;
  /* border: none; */
}

/* 输入框的disabled样式清除 */
textarea [disabled] {
  background-color: rgb(248, 246, 246) !important;
  font-weight: bold;
}</style>
