<template>
  <div v-if="show" class="right">
    <div class="showTitle">
      <el-icon><icon-menu /></el-icon>
      <h2>发布状态</h2>
      <input type="button" ref="button" @click="convertStatus" value="修改" />
    </div>
    <div id="tips">
      <div>
        <h4>Tips:>>></h4>
        <font> &nbsp;{{ this.Msg }} </font>
        <br><br><br>
      </div>
    </div>
    <div id="myStatus">
      <span id="statusTitle">我的状态</span>
      <img id="statusImg" src="../../img/status.png" />
      <span id="msgStatus">{{ statusText }}</span>
      <table class="bigtable">
        <tr>
          <td class="title">
            <div>
              <el-icon>
                <HelpFilled />
              </el-icon>
              <h3>分类范围</h3>
            </div>
          </td>
          <td class="input">
            <select v-model="categoryId" disabled>
              <option v-for="item in this.categoryList" :value="item.id">
                {{ item.name }}
              </option>
            </select>
          </td>
          <td class="title">
            <div>
              <el-icon>
                <List />
              </el-icon>
              <h3>聘请类别</h3>
            </div>
          </td>
          <td class="input">
            <select v-model="serverType" disabled>
              <option value="1">长期工</option>
              <option value="2">短期工</option>
            </select>
          </td>
        </tr>
        <tr>
          <td class="title">
            <div>
              <el-icon>
                <Calendar />
              </el-icon>
              <h3>上岗日期</h3>
            </div>
          </td>
          <td class="input">
            <input type="text" v-model="this.serverTime" disabled placeholder="可接单时段/几日到岗" />
          </td>
          <td class="title">
            <div>
              <el-icon>
                <PhoneFilled />
              </el-icon>
              <h3>联系方式</h3>
            </div>
          </td>
          <td class="input">
            <input v-model="phone" type="text" disabled />
          </td>
        </tr>
        <tr>
          <td class="title">
            <div>
              <el-icon>
                <Present />
              </el-icon>
              <h3>待遇</h3>
            </div>
          </td>
          <td class="input">
            <input type="text" disabled v-model="treatment" placeholder="休假等期望待遇" />
          </td>
          <td class="title">
            <div>
              <el-icon>
                <HomeFilled />
              </el-icon>
              <h3>是否住家</h3>
            </div>
          </td>
          <td>
            <select v-model="stay" disabled>
              <option value="1">住家</option>
              <option value="2">不住家</option>
            </select>
          </td>
        </tr>
        <tr>
          <td class="title">
            <div>
              <el-icon>
                <Money />
              </el-icon>
              <h3>薪酬</h3>
            </div>
          </td>
          <td class="input">
            <input id="salaryInput" v-model="this.salary" type="text" disabled />
            <label>元（日/次）</label>
          </td>
          <td class="title">
            <div>
              <el-icon>
                <Location />
              </el-icon>
              <h3>服务地区</h3>
            </div>
          </td>
          <td class="input">
            <input v-if="!canAlter" :value="serverArea" disabled type="text" />
            <el-cascader v-if="canAlter" ref="area" style="width: 75%" :options="options" :placeholder="this.serverArea"
              @change="addressChoose"></el-cascader>
          </td>
        </tr>
        <tr>
          <td class="endPortrait">
            <div>
              <el-icon>
                <Location />
              </el-icon>
              <h3>简介</h3>
            </div>
          </td>
          <td class="lognInput" colspan="3">
            <input v-model="introduction" type="text" disabled />
          </td>
        </tr>
      </table>
    </div>
    <span id="private">设为私密</span>
    <el-switch @click="changetStatus" v-model="isPriva" :disabled="forbidden" />
  </div>
</template>

<script>
import { postStatus, getCondition, categoryListApi } from "@/api";
import { getCookie } from "@/util/cookie";
import popmessage from "@/components/tip/index.js";

import {
  Menu as IconMenu,
  Money,
  Location,
} from "@element-plus/icons-vue";

import { regionDataPlus, CodeToText } from "element-china-area-data";

export default {
  name: "PostStatus",
  created() {
    this.serverId = getCookie("userId");
    if (localStorage.getItem("token")) {
      this.token = localStorage.getItem("token");
    }
    let parmas = {
      serverId: this.serverId,
    };
    getCondition(parmas).then((response) => {
      if (response.data.code === 200) {
        this.treatment = response.data.data.treatment;
        this.phone = response.data.data.phone;
        this.serverTime = response.data.data.workDate;
        this.serverType = response.data.data.serverType;
        this.salary = response.data.data.salary;
        this.categoryId = response.data.data.categoryId;
        this.stay = response.data.data.stay;
        this.status = response.data.data.status;
        this.serverArea = response.data.data.serverArea;
        // 渲染serverArea
        if (this.serverArea.substring(0, 2) === '全部') {
          this.serverArea = '全国范围内'
        } else {
          this.serverArea.replace('全部', '内')
          this.serverArea.replace('undefined', '')
        }
        this.introduction = response.data.data.introduction
        // 返回管理员反馈
        if (response.data.data.tips != null) {
          this.Msg = response.data.data.tips;
        }
        if (this.status == 4 || this.statis == 5) {
          this.forbidden = true
        }
        if (this.status == 0 || this.status == 1) {
          this.forbidden = false
        }
        // 转换为审核成功
        if (this.status == 1 || this.status === 0) {
          this.statusText = this.statusList[6];
          this.status = localStorage.getItem('isPriva')
        } else {
          this.statusText = this.statusList[parseInt(this.status)];
        }
        if (this.status == 1) {
          this.isPriva = true;
          this.forbidden = false
        } else if(this.status == 0){
          this.isPriva = false;
        }
      }
    });
    categoryListApi().then((response) => {
      if (response.data.code === 200) {
        // var c = response.data.data;
        // var newC = [];
        // for (var i = 1; i < c.length; i++) {
        //   newC[i - 1] = c[i];
        // }
        // this.categoryList = newC;
        this.categoryList = response.data.data
      }
    });
  },
  data() {
    return {
      forbidden: true,
      show: true,
      //家政分类list
      categoryList: [],
      //状态信息
      statusList: ["公开", "私密", "未提交", "已接单", "审核中", "审核失败", '审核成功'],
      statusText: "",
      serverId: 0,
      serverArea: "",
      treatment: "",
      phone: "",
      serverTime: "",
      type: "",
      categoryId: "",
      stay: "",
      introduction: '',
      // 省市区级联
      options: regionDataPlus,
      selectedOptions: [],
      showArrow: true,
      isShow: true,
      isPriva: false,
      Msg: '请尽快填写信息',
      ishome: "",
      serverid: "",
      salary: 0,
      eltips: {
        "background-color": "blue !importent",
      },
      errMSg: "",
      canAlter: false,
    };
  },
  methods: {
    showTips() {
      if (this.isShow) {
        this.$refs.tipMsg.style.display = "block";
        this.showArrow = false;
        this.isShow = false;
      } else if (!this.isShow) {
        this.$refs.tipMsg.style.display = "none";
        this.showArrow = true;
        this.isShow = true;
      }
    },
    //解除禁用
    convertStatus() {
      if (this.$refs.button.value == "修改") {
        const n = document.documentElement
          .getElementsByTagName("table")[0]
          .getElementsByTagName("input").length;
        const n2 = document.documentElement
          .getElementsByTagName("table")[0]
          .getElementsByTagName("select").length;
        for (var i = 0; i < n2; i++) {
          document.documentElement
            .getElementsByTagName("table")[0]
            .getElementsByTagName("select")
          [i].removeAttribute("disabled");
        }
        for (var i = 0; i < n; i++) {
          document.documentElement
            .getElementsByTagName("table")[0]
            .getElementsByTagName("input")
          [i].removeAttribute("disabled");
        }
        this.canAlter = true;
        this.$refs.button.value = "发布";
      } else if (this.$refs.button.value == "发布") {
        if (this.validate()) {
          const parmas = {
            serverId: this.serverId,
            serverArea: this.serverArea,
            treatment: this.treatment,
            phone: this.phone,
            workDate: this.serverTime,
            serverType: this.serverType,
            salary: this.salary,
            categoryId: this.categoryId,
            stay: this.stay,
            status: 4,
            introduction: this.introduction
          };
          //是否发布确认弹框
          this.$confirm(`是否确认发布?`, "提示", {
            distinguishCancelAndClose: true,
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              //确认发布
              postStatus(parmas).then((response) => {
                if (response.data.code === 200) {
                  localStorage.removeItem('isPriva')
                  this.show = false;
                  this.statusText = "审核中";
                  popmessage({ type: "success", str: "发布成功" });
                  //锁定
                  const n = document.documentElement
                    .getElementsByTagName("table")[0]
                    .getElementsByTagName("input").length;

                  const n2 = document.documentElement
                    .getElementsByTagName("table")[0]
                    .getElementsByTagName("select").length;

                  for (var i = 0; i < n2; i++) {
                    document.documentElement
                      .getElementsByTagName("table")[0]
                      .getElementsByTagName("select")
                    [i].setAttribute("disabled", "disabled");
                  }
                  for (var i = 0; i < n; i++) {
                    document.documentElement
                      .getElementsByTagName("table")[0]
                      .getElementsByTagName("input")
                    [i].setAttribute("disabled", "disabled");
                  }
                  this.canAlter = false;
                  this.$refs.button.value = "修改";
                  this.show = true;
                } else {
                  popmessage({ type: "error", str: "发布失败请重试" });
                }
              });
            })
            .catch((action) => { });
        } else {
          alert(this.errMSg);
        }
      }
    },
    //格式验证
    validate() {
      const phoneRegx =
        /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
      if (!phoneRegx.test(this.phone)) {
        this.errMSg += "手机号格式不正确";
        return false;
      } else if (this.serverArea == "") {
        this.errMSg += "请填写完整信息";
        return false;
      } else if (this.treatment == "") {
        this.errMSg += "请填写完整信息";
        return false;
      } else if (this.phone == "") {
        this.errMSg += "请填写完整信息";
        return false;
      } else if (this.serverTime == "") {
        this.errMSg += "请填写完整信息";
        return false;
      } else if (this.serverType == "") {
        this.errMSg += "请填写完整信息";
        return false;
      } else if (this.stay == "") {
        this.errMSg += "请填写完整信息";
        return false;
      } else if (this.categoryId == "") {
        this.errMSg += "请填写完整信息";
        return false;
      }
      return true;
    },
    //私密还是非私密
    changetStatus() {
      var s = null;
      if (this.isPriva == false) {
        s = 0;
      } else if (this.isPriva == true) {
        s = 1;
      }
      localStorage.setItem('isPriva', s)
      popmessage({ type: "success", str: "修改成功" });
    },
    //发布信息
    PostStatus() {
      if (this.validate()) {
        const parmas = {
          serverId: this.serverId,
          serverArea: this.serverArea,
          treatment: this.treatment,
          phone: this.phone,
          workDate: this.serverTime,
          type: this.type,
          categoryId: this.categoryId,
          stay: this.stay,
          status: 4,
        };
        postStatus(parmas).then((response) => {
          if (response.data.code === 200) {
            popmessage({ type: "success", str: "发布成功" });
          }
        });
      } else {
        alert(this.errMSg);
      }
    },
    /**省市区三级联动 */
    addressChoose(value) {
      this.serverArea =
        CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]];
    },
  },
  components: {
    IconMenu,
    Money,
    Location,
  },
};
</script>
<style scoped>
.endPortrait {
  height: 2rem;
  width: 5rem;
  background-color: rgb(245, 245, 245);
  padding-left: 1rem;
  margin: 0;
}

.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;
}

/* tips面板 */
#tips {
  overflow: hidden;
  margin: 0 auto;
  text-align: start;
  background-color: #e7f3ec;
  cursor: pointer;
  width: 90%;
  height: auto;
  padding: 0;
  margin-top: 1.3rem;
  border-radius: 1rem;
}

#tips h4 {
  padding: 0;
  margin: 0;
  padding-top: 0.5rem;
  padding-left: 2rem;
  font-size: 1.2rem;
  display: inline-block;
}

#serveArea {
  margin-bottom: 2rem;
}

#tipsMsg {
  transition: all 0.4s ease;
  display: none;
  height: auto;
  padding-left: 2rem;
  padding-bottom: 1rem;
  padding-top: 1.5rem;

  white-space: normal;
  word-break: break-all;
  padding-right: 2rem;
}

#arrow {
  padding-left: 50rem !important;
}

/* 填写信息样式
 */
#choseMsg {
  width: 80%;
  border: 1px solid rgb(112, 110, 110);
  border-radius: 2rem;
  text-align: start;
  margin: 0 auto;
  margin-top: 2rem;
  padding-left: 5rem;
}

#choseMsg span {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 400;
  padding-right: 1rem;
  margin-top: 1rem;
}

#choseMsg select {
  width: 7rem;
  height: 1.7em;
  font-size: 1rem;
  margin-top: 1rem;
  margin-right: 3rem;
}

#choseMsg .theIn {
  width: 13rem;
}

#choseMsg input {
  height: 1rem;
  margin-top: 1rem;
}

#emType {
  margin-left: 5.5rem;
}

#contact {
  margin-left: 2rem;
}

#residence {
  margin-bottom: 1rem;
}

#treatment {
  margin-left: 2.4rem;
  height: 2.4rem !important;
}

#salaryIn {
  width: 3rem;
  margin-left: -1rem;
  margin-right: 0.5rem;
}

#salary {
  margin-left: 4.4rem;
}

/* 
我的状态 */
#myStatus {
  padding: 0;
  margin: 0;
  text-align: start;
  margin-top: 2rem;
}

#myStatus #statusTitle {
  margin-left: 3rem;
  font-size: 1.2rem;
  font-weight: 700;
}

#statusRight {
  display: inline-block;
  height: 3rem;
  width: auto;
  overflow: hidden;
  background-color: aqua;
  margin: 0 auto;
  margin-bottom: 0;
  margin-left: 9rem;
}

#statusRight img {}

#statusImg {
  width: 2%;
  height: auto;
  margin-left: 42rem;
}

#msgStatus {
  margin-left: 1rem;
  font-weight: 600;
}

#private {
  margin-left: 42rem;
  font-weight: 500;
  display: inline-block;
  padding-right: 1rem;
  margin-bottom: 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;
}

::v-deep .el-cascader .el-input {
  display: flex;
  cursor: pointer;
}

::v-deep .el-input__wrapper {
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 1px 11px;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  background-image: none;
  border-radius: 0;
  transition: var(--el-transition-box-shadow);
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
}

#areaStyle {
  width: 15rem;
  margin-left: 0.1rem;
  height: 1.3rem !important;
  vertical-align: inherit;
}

::v-deep .el-input__wrapper {
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 1px 11px;
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  transition: var(--el-transition-box-shadow);
}

/* 表格 */

table {
  width: 95%;
  margin: 0 auto;
  margin-top: 2rem;
  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: 1rem;
}

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: 5rem;
  background-color: rgb(245, 245, 245);
  padding-left: 1rem;
  margin: 0;
}

.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 .el-icon {
  --color: inherit;
  height: 1em;
  width: 1em;
  line-height: 1em;
  fill: currentcolor;
  color: var(--color);
  text-align: left;
  font-size: large;
  display: inline-block;
  position: absolute;
  top: 1.1rem;
  left: -0.2rem;
}

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

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: 1.1rem;
  left: -0.2rem;
}

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

/* 输入框的样式 */
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: bold;
  padding-left: 0.5rem;
}

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

table select {
  width: 6rem;
  font-size: 1rem;
  border: none;
}

table select:disabled {
  width: 6rem;
  font-size: 1rem;
  border: none;
  color: black;
  font-weight: 600;
  padding-left: 0.5rem;
}

/* 薪酬样式 */
#salaryInput {
  width: 5rem;
}

label {
  display: inline-block;
  font-size: 1rem;
}
</style>
