<template>
  <el-card
    shadow="never"
    class="aui-card--fill"
  >
    <div class="memberManageExamine">
      <div class="title"><span class="substyle"><span v-if="type=='shenhe'">审核</span> <span v-if="type=='xiugai'">修改</span> </span> </div>
    </div>

    <div class="content">
      <el-form
        ref="dataForm"
        :model="dataForm"
        :rules="dataRule"
        label-position="left"
        label-width="150px"
      >
        <el-form-item
          label="单位"
          prop="company"
        >
          <el-input v-model="dataForm.company"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="dataForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group 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 v-model="dataForm.position"></el-input>
        </el-form-item>
        <el-form-item
          label="联系电话"
          prop="mobile"
        >
          <el-input v-model="dataForm.mobile"></el-input>
        </el-form-item>
        <el-form-item
          label="邮箱"
          prop="email"
        >
          <el-input v-model="dataForm.email"></el-input>
        </el-form-item>

        <el-form-item label="上传日期">
          <el-input v-model="dataForm.updateDate"></el-input>
        </el-form-item>
        <el-form-item
          required
          prop="ifCheck"
          v-show="type=='shenhe'"
          label="审核状态"
        >

          <el-radio-group
            v-model="dataForm.ifCheck"
            @change="changeAuditStatus"
          >
            <el-radio label="2">不通过</el-radio>
            <el-radio label="1">通过</el-radio>
          </el-radio-group>

        </el-form-item>

        <el-form-item
          required
          prop="areaName"
          v-if="dataForm.ifCheck==1"
          label="所属市区级"
        >
          <!--   <el-select
            style="width:100%"
            v-model="dataForm.areaName"
            placeholder="请选择所属市区级"
          >
            <el-option
              v-for="item in optionsOfLocation"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
          <el-cascader
            style="width:100%"
            v-model="dataForm.areaId"
            placeholder="请选择所属市区级"
            :options="optionsOfLocation"
            :props="props"
            ref="myCascader"
            @change="changearea"
            clearable
          ></el-cascader>
        </el-form-item>

        <el-form-item
          required
          prop="committeeId"
          v-if="dataForm.ifCheck==1"
          label="所属委员会"
        >
          <el-select
            style="width:100%"
            @change="changename"
            v-model="dataForm.committeeId"
            placeholder="请选择所属委员会"
            clearable
          >
            <el-option
              v-for="item in optionsOfCommittee"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>

      <div class="footer">
        <el-button
          style="margin-right:40px;border:1px solid #17B3A3;color:#17B3A3;width:100px"
          @click="goback"
        >
          返回
        </el-button>
        <el-button
          style="background:#17B3A3;color:#fff;width:100px"
          @click="dataFormSubmitHandle()"
        >
          <span v-if="type=='shenhe'"> 完成</span>
          <span v-if="type=='xiugai'"> 保存</span>
        </el-button>
      </div>
    </div>

  </el-card>
</template>

<script>
import debounce from "lodash/debounce";
export default {
  name: "memberManageExamine",
  data() {
    return {
      type: this.$route.query.type,
      props: {
        checkStrictly: true,
        value: "id",
        label: "name",
        children: "children",
      },
      dataForm: {
        id: "",
        name: "",
        company: "", //单位
        sex: "1",
        /*  position: "", //职位
        mobile: "",
        email: "",
        ifCheck: 1, //审核状态
        location: "", //所属市区级
        committee: "", //所属委员会
        uploadDate: "", //上传日期 */
      },
      optionsOfLocation: [
        /*  {
          value: "宁波市",
          label: "宁波市",
        },
        {
          value: "海曙区",
          label: "海曙区",
        },
        {
          value: "鄞州区",
          label: "鄞州区",
        },
        {
          value: "北仑区",
          label: "北仑区",
        },
        {
          value: "镇海区",
          label: "镇海区",
        }, */
        /* {
          value: "ningbo",
          label: "宁波市",
          children: [
            {
              value: "haishu",
              label: "海曙区",
            },
            {
              value: "yingzhou",
              label: "鄞州区",
            },
            {
              value: "beilun",
              label: "北仑区",
            },
            {
              value: "zhenhai",
              label: "镇海区",
            },
          ],
        }, */
      ],
      optionsOfCommittee: [],
    };
  },
  computed: {
    dataRule() {
      return {
        /*   company: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ], */
        email: [
          {
            required: true,
            trigger: "blur",
            validator: this.checkEmail,
          },
        ],
        mobile: [
          {
            required: true,
            trigger: "blur",
            validator: this.checkPhone,
          },
        ],
        ifCheck: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        areaName: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        committeeId: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  created() {
    /*  if (this.$route.query.type == "xiugai") {
      this.dataForm.ifCheck = 2;
    } */
    this.init();
  },
  methods: {
    checkPhone(rule, value, callback) {
      if (!value) {
        return callback(new Error("请输入正确的手机号"));
      } else if (value == null) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^((0\d{2,3}-\d{7,8})|(1[35789]\d{9}))$/;
        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号或座机号"));
        }
      }
    },

    checkEmail(rule, value, callback) {
      if (!value) {
        return callback(new Error("请输入正确的邮箱号"));
      } else if (value == null) {
        return callback(new Error("邮箱号不能为空"));
      } else {
        const reg = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/;

        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的邮箱号"));
        }
      }
    },
    init() {
      this.dataForm.id = this.$route.query.id;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },

    // 获取信息

    ///committee/committee/list
    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,
          };
          this.dataForm.sex = this.dataForm.sex + "";
          if (this.dataForm.ifCheck == 0) {
            this.dataForm.ifCheck = "2";
          } else {
            this.dataForm.ifCheck = this.dataForm.ifCheck + "";
          }

          console.log(this.dataForm);
        })
        .catch(() => {});

      this.$http
        .get("/committee/committee/list")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }

          this.optionsOfCommittee = res.data;
        })
        .catch(() => {});

      this.$http
        .get("/area/area/list")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.optionsOfLocation = this.getTreeData(res.data);

          console.log(res.data);
        })
        .catch(() => {});
    },
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },

    // 表单提交
    dataFormSubmitHandle: function () {
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          return false;
        }

        this.$confirm("确定提交吗？")
          .then((_) => {
            if (this.dataForm.ifCheck == 1) {
              this.dataForm.member = 1;
            } else if (this.dataForm.ifCheck == 2) {
              this.dataForm.member = 2;
            }

            console.log("data", this.dataForm);
            this.$http[!this.dataForm.id ? "post" : "put"](
              "/user/user/",
              this.dataForm
            )
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg);
                }
                this.$message({
                  message: this.$t("prompt.success"),
                  type: "success",
                  /*   onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }, */
                });
              })
              .catch(() => {});
          })
          .then(() => {
            /*  if (this.type == "xiugai") {
              this.$router.push({ path: "/member" });
            } else {
              this.$router.push({ path: "/shenhe" });
            } */
            this.$router.go(-1);
          })
          .catch((_) => {});
      });
    },
    /*  submitForm(formName) {
      this.$confirm("确定提交吗？")
        .then((_) => {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert("submit!");
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        })
        .catch((_) => {});
    }, */

    changeAuditStatus(value) {
      this.dataForm.ifCheck = value;
    },
    changename(value) {
      this.optionsOfCommittee.forEach((ele) => {
        if (value == ele.id) {
          this.dataForm.committeeName = ele.name;
        }
      });
    },
    changearea(value) {
      console.log(value);
      if (value.length > 0) {
        this.dataForm.areaId = value[value.length - 1];

        let areaNames = this.$refs.myCascader.getCheckedNodes()[0].pathLabels;
        this.dataForm.areaName = areaNames[areaNames.length - 1];
      }

      // console.log(this.$refs.myCascader.getCheckedNodes()[0].pathLabels);
    },
    //返回按钮事件
    goback() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-form {
  width: 50%;
  padding-left: 20px;
}

.memberManageExamine {
  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%;
  margin: 0 auto;
}
</style>