<template>
  <div class="admin-detail-content">
    <Header title="管理员详情" />
    <div class="input-box">
      <van-field
        label="管理员姓名"
        :disabled="disabled"
        v-model="form.userName"
        placeholder="请输入管理员姓名"
        input-align="right"
      />
      <van-field
        label="手机号码"
        :disabled="disabled"
        v-model="form.phone"
        placeholder="请输入手机号码"
        input-align="right"
      />
      <van-field
        label="固定电话"
        :disabled="disabled"
        v-model="form.telephone"
        placeholder="请输入固定电话"
        input-align="right"
      />
      <van-field
        label="微信"
        :disabled="disabled"
        v-model="form.weChat"
        placeholder="请输入微信"
        input-align="right"
      />
      <van-field
        label="邮箱"
        :disabled="disabled"
        v-model="form.email"
        placeholder="请输入邮箱"
        input-align="right"
      />
    </div>
    <div class="admin-detail-button" v-if="!disabled">
      <van-button type="default" plain @click="onCancel">取消</van-button>
      <van-button type="default" @click="onSubmit">提交</van-button>
    </div>
    <div class="admin-detail-button cancel" v-if="disabled">
      <van-button type="default" @click="onCancel">返回</van-button>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header/index.vue";
export default {
  components: { Header },
  data() {
    return {
      disabled: false,
      form: {},
    };
  },
  mounted() {
    this.adminId = this.$route.query.id;
    // 查询管理员信息
    if (this.$route.query.disabled === "true") {
      this.disabled = true
      // 新增
    } else {
      // 修改
      this.disabled = false
    }
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      let vm = this
      let param = {
        id: this.adminId,
      };
      vm.$https(
        {
          url: "tUser/getById",
          method: "get",
          authType: this.backToken,
        },
        param
      )
        .then((res) => {
          if (res.data.resultCode === "200") {
            this.form = res.data.data
          } else {
            this.$toast(res.data.message)
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    onCancel() {
      this.$router.go(-1)
    },
    // 提交数据
    onSubmit() {
      let vm = this
      let param = {}
      for (let key in this.form) {
        if (this.form[key]) {
          param[key] = this.form[key];
        }
      }
      vm.$https(
        {
          url: "tUser/update",
          method: "put",
          authType: this.backToken,
        },
        param
      )
        .then((res) => {
          if (res.data.resultCode === "200") {
            this.$router.replace({
              path: "/success",
              query: { txt: "信息修改成功", url: "/admin" },
            });
          } else {
            this.$toast(res.data.message);
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.admin-detail-content {
  padding: 50px 24px 0;
  // height: calc(100% - 150px);
  overflow-y: auto;
  .input-box {
    padding-bottom: 32px;
    .van-cell {
      line-height: 40px;
      padding-left: 0;
      padding-right: 0;
      border-bottom: 1px solid #eee;
    }
    .van-cell:after {
      display: none;
    }
  }
  .admin-detail-button {
    padding: 0 24px;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;

    .van-button--normal {
      background: #a4151d;
      border-radius: 4px;
      height: 40px;
      width: 45%;
      color: #fff;
      border: none;
      font-size: 16px;
      &:first-child {
        margin-right: 5%;
      }
    }
    .van-button--plain {
      background: rgba(164, 21, 29, 0.1);
      border: 1px solid #b40011;
      border-radius: 4px;
      color: #b40011;
    }
  }
  .cancel {
    .van-button--normal {
      width: 100%;
    }
  }
  .van-field__control,
  .van-cell__value {
    color: #333;
  }
}
</style>