<template>
  <el-card
    shadow="never"
    class="aui-card--fill"
  >
    <div class="memberManageDetail">
      <div class="title"><span
          v-if="type=='xiangqing'"
          class="substyle"
        >详情 </span> </div>
    </div>

    <div class="content">
      <el-form
        ref="dataForm"
        :model="dataForm"
        label-position="left"
        label-width="150px"
      >
        <el-form-item label="单位">
          <el-input
            disabled
            v-model="dataForm.company"
            placeholder="暂无"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input
            disabled
            placeholder="暂无"
            v-model="dataForm.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group
            disabled
            v-model="dataForm.sex"
          >
            <el-radio label="1">男</el-radio>
            <el-radio label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="职位">
          <el-input
            disabled
            placeholder="暂无"
            v-model="dataForm.position"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input
            disabled
            placeholder="暂无"
            v-model="dataForm.mobile"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input
            disabled
            placeholder="暂无"
            v-model="dataForm.email"
          ></el-input>
        </el-form-item>

        <el-form-item label="上传日期">
          <el-input
            disabled
            placeholder="暂无"
            v-model="dataForm.updateDate"
          ></el-input>
        </el-form-item>

        <el-form-item label="所属市区级">

          <el-input
            disabled
            placeholder="暂无"
            v-model="dataForm.areaName"
          ></el-input>
        </el-form-item>

        <el-form-item label="所属委员会">
          <el-input
            disabled
            placeholder="暂无"
            v-model="dataForm.committeeName"
          ></el-input>
        </el-form-item>

      </el-form>

      <div class="footer">
        <el-button
          style="border:1px solid #17B3A3;color:#17B3A3;width:100px;margin-left:170px"
          @click="goback"
        >
          返回
        </el-button>

      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "memberManageDetail",
  data() {
    return {
      type: this.$route.query.type,
      dataForm: {
        id: "",
        name: "",
        company: "", //单位
        sex: "1",
        position: "", //职位
        mobile: "",
        email: "",
        auditStatus: "1", //审核状态
        location: "", //所属市区级
        committee: "", //所属委员会
        uploadDate: "", //上传日期
      },
    };
  },
  created() {
    this.dataForm.id = this.$route.query.id;
    this.init();
  },
  methods: {
    //返回按钮事件
    goback() {
      this.$router.go(-1);
    },
    init() {
      console.log(this.$route.query.id);
      this.dataForm.id = this.$route.query.id;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        }
      });

      console.log("ppp", this.dataForm.sex);
      console.log("pppo", typeof this.dataForm.sex);
    },
    // 获取信息
    getInfo() {
      this.$http
        .get(`/user/user/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
          console.log("ppppppp", this.dataForm);
          console.log("ppp", this.dataForm.sex);
          this.dataForm.sex = this.dataForm.sex + "";
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-form {
  width: 50%;
  padding-left: 20px;
}
/deep/.el-input.is-disabled .el-input__inner {
  color: #000 !important;
  background: #fff;
}

.memberManageDetail {
  width: 100%;
  font-size: 18px;
  .title {
    width: 99%;
    margin: 0 auto;
    margin-bottom: 50px;

    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;

    .substyle {
      border-left: 5px solid #43cc93;
      padding-left: 10px;
    }
  }
}
.footer {
  width: 60%;
}
</style>