<template>
  <div class="app-container">
    <el-tabs
      v-if="user.advisorInfo"
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane label="投顾信息" name="first">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-position="left"
          label-width="120px"
          hide-required-asterisk
        >
          <el-form-item label="登陆账号" prop="staffNo">
            <div>{{ form.staffNo }}</div>
          </el-form-item>
          <el-form-item label="员工号" prop="upId">
            <div>{{ form.upId }}</div>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <div>{{ form.name }}</div>
          </el-form-item>
          <el-form-item label="投顾执业证号" prop="license">
            <el-input
              v-model="form.license"
              :disabled="
                form.status === 2 || form.status === 3 || form.status === 5
              "
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="投顾手机号" prop="phone">
            <el-input
              v-model="form.phone"
              :disabled="
                form.status === 2 || form.status === 3 || form.status === 5
              "
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="投顾所在营业部" prop="deptName">
            <div>{{ form.deptName }}</div>
          </el-form-item>
          <el-form-item label="展业姓名" prop="showName">
            <el-input
              v-model="form.showName"
              :disabled="
                form.status === 2 || form.status === 3 || form.status === 5
              "
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group
              v-model="form.sex"
              :disabled="
                form.status === 2 || form.status === 3 || form.status === 5
              "
              style="width: 178px"
            >
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="展示头像">
            <div>
              <el-upload
                :show-file-list="false"
                :on-success="handleSuccess"
                :on-error="handleError"
                :headers="headers"
                action="/admin/common/file/upload"
                :before-upload="beforeUpload"
                :disabled="
                  form.status === 2 || form.status === 3 || form.status === 5
                "
              >
                <el-button
                  size="small"
                  :disabled="
                    form.status === 2 || form.status === 3 || form.status === 5
                  "
                  type="primary"
                  >选择图片</el-button
                >
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </div>
            <img :src="form.avatar" width="70" height="70" />
            <img
              :src="form.avatar"
              style="
                width: 70px;
                height: 70px;
                border-radius: 50%;
                margin-left: 15px;
              "
            />
            <!-- <el-image
              :src="form.avatar"
              style="
                width: 70px;
                height: 70px;
              "
            ></el-image>
            <el-image
              :src="form.avatar"
              style="
                width: 70px;
                height: 70px;
                border-radius: 50%;
                margin-left: 15px;
              "
            ></el-image> -->
          </el-form-item>
          <el-form-item label="个人简介" prop="profile">
            <el-input
              v-model="form.profile"
              type="textarea"
              maxlength="200"
              show-word-limit
              :rows="5"
              :disabled="
                form.status === 2 || form.status === 3 || form.status === 5
              "
              placeholder="请输入个人简介"
            />
          </el-form-item>
          <el-form-item label="展示标签" prop="tagList">
            <el-checkbox-group
              v-model="tg"
              :max="3"
              :disabled="
                form.status === 2 || form.status === 3 || form.status === 5
              "
            >
              <el-checkbox
                v-for="tag in tgType"
                :key="tag.id"
                :label="tag.id"
                >{{ tag.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <div class="dialog-footer" style="margin-left: 120px">
          <el-button
            v-if="form.status === 1"
            size="mini"
            type="primary"
            @click="doSubmit"
            >提交审核</el-button
          >
          <el-button
            v-if="form.status === 2"
            size="mini"
            type="primary"
            disabled
            >审核中</el-button
          >
          <el-button
            v-if="form.status === 4"
            size="mini"
            type="primary"
            @click="doSubmit"
            >重新提交</el-button
          >
          <div v-if="form.status === 4" style="margin-top:10px;">
            驳回理由: {{ form.reason }}
          </div>
          <el-button
            v-if="form.status === 3"
            size="mini"
            type="success"
            disabled
            >审核通过</el-button
          >
          <el-button
            v-if="form.status === 5"
            size="mini"
            type="success"
            disabled
            >已下架</el-button
          >
        </div>
      </el-tab-pane>

      <el-tab-pane label="修改密码" name="second">
        <update-password />
      </el-tab-pane>
      <!-- <div class="picture-loading">
        <el-image
          src="http://61.178.60.236:8888/group0/M00/00/0C/wKgZJWHWQoWAcRSkAAA0TvTsATU852.png"
          style="
            width: 70px;
            height: 70px;
          "
        />
        <el-image
          src="http://61.178.60.236:8888/group0/M00/00/0C/wKgZJWHWQuSAa9NXAAEy8pFhLZo018.jpg"
          style="
            width: 70px;
            height: 70px;
          "
        />
        <el-image
          src="http://61.178.60.236:8888/group0/M00/00/0C/wKgZJWHWQv6AVQwMAAGV1iK5Yes714.jpg"
          style="
            width: 70px;
            height: 70px;
          "
        />
      </div> -->
    </el-tabs>
    <personalCenter v-if="!user.advisorInfo" />
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import {
  saveTgInfo,
  operateTgInfo,
  getTgInfo,
  updateTgStatus
} from "@/api/adviser";
import { queryTagList } from "@/api/tag";
// import { getInfo } from '@/api/login'
import { mapGetters } from "vuex";
import personalCenter from "./center/personalCenter";
import updatePassword from "./center/updatePass";

export default {
  components: {
    personalCenter,
    updatePassword
  },
  data() {
    return {
      activeName: "first",
      form: {},
      tg: [],
      headers: {
        Authorization: "Bearer " + getToken(),

        "X-File-Size": 0
      },
      rules: {
        // name: [
        //   { required: true, message: '请输入展业姓名', trigger: 'blur' },
        //   {
        //     min: 2,
        //     max: 10,
        //     message: '长度在 2 到 10 个字符',
        //     trigger: 'blur'
        //   }
        // ],
        profile: [
          { required: true, message: "请输入个人简介", trigger: "blur" },
          {
            min: 3,
            max: 200,
            message: "长度在 3 到 200 个字符",
            trigger: "blur"
          }
        ]
        // confirmPass: [
        //   { required: true, validator: confirmPass, trigger: 'blur' }
        // ]
      },
      tgType: []
    };
  },
  created() {
    console.log(this.user);
    if (this.user.advisorInfo) {
      this.getTgType();
      this.GetTgInfo();
      this.activeName = "first";
    } else {
      this.activeName = "second";
    }

    // this.$nextTick(() => {
    // })
    // if (this.user.tgInfo) {
    //   this.form = this.user.tgInfo
    //   this.form.tagList.forEach(v => {
    //     this.tg.push(v.id)
    //   })
    // }
    // this.form.status = 3
    // console.log('user ==>', this.user)
    // console.log(this.updateAvatarApi)
  },
  computed: {
    ...mapGetters(["user", "updateAvatarApi"])
  },
  methods: {
    async GetTgInfo() {
      const params = {};
      params.id = this.user.advisorInfo && this.user.advisorInfo.id;
      const data = await getTgInfo(params);
      if (data.code === 0) {
        this.form = data.data;
        this.form.tagList.forEach(v => {
          this.tg.push(v.id);
        });
        // if (!this.form.deptName || !this.form.deptName.trim()) {
        //   this.form.deptName = this.form.name
        // }
      } else {
        this.$message.error(data.message);
      }
      // console.log(data)
    },
    async getTgType() {
      const data = await queryTagList({
        current: 1,
        status: 1,
        type: 0,
        size: 10000
      });
      if (data.code === 0) {
        this.tgType = data.data.list;
      } else {
        this.$message.error(data.message);
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSuccess(response, file, fileList) {
      if (response.code === 0) {
        console.log(file);
        console.log(fileList);
        if (!this.form || !this.form.avatar) {
          this.$set(this.form, "avatar", response.data.url);
        }
        setTimeout(() => {
          this.form.avatar = response.data.url;
        }, 100);
        this.$notify({
          title: "头像上传成功",
          type: "success",
          duration: 2500
        });
      } else {
        this.$message.error(response.message);
      }
    },
    beforeUpload(file) {
      if (
        file.type !== "image/jpeg" &&
        file.type !== "image/jpg" &&
        file.type !== "image/png"
      ) {
        this.$message.error("上传只支持jpg格式和png格式!");
        return false;
      }
      const isLt = file.size / 1024 < 500;
      if (!isLt) {
        this.$message.error("图片大小不能超过500kb!");
      }
      this.headers["X-File-Size"] = file.size;
      return isLt;
    },
    // 监听上传失败
    handleError(e, file, fileList) {
      const msg = JSON.parse(e.message);
      this.$notify({
        title: msg.message,
        type: "error",
        duration: 2500
      });
    },
    async doSubmit() {
      if (!this.form.license || !this.form.license.trim()) {
        return this.$message.error("请输入投顾执业证号");
      }
      const licens = /^[A-Za-z0-9]+$/;
      if (!licens.test(this.form.license)) {
        return this.$message.error("执业证号仅限数字和字母");
      }
      if (this.form.license.length > 14) {
        return this.$message.error("执业证号仅限14位");
      }

      if (!this.form.phone || !this.form.phone.trim()) {
        return this.$message.error("请输入投顾手机号");
      } else if (this.form.phone.length !== 11) {
        return this.$message.error("手机号必须为11位");
      }
      const mun = /^[0-9]*$/;
      if (!mun.test(this.form.phone)) {
        return this.$message.error("手机号必须为纯数字");
      }

      if (!this.form.showName.trim()) {
        return this.$message.error("请输入展业姓名");
      }
      const showName = /^[\u4e00-\u9fa5_a-zA-Z]+$/;
      if (!showName.test(this.form.showName.trim())) {
        return this.$message.error("仅限中文和字母");
      }
      if (this.form.showName.length < 2 || this.form.showName.length > 100) {
        return this.$message.error("展业姓名的长度在 2 到 10 个字符");
      }
      if (!this.form.sex) {
        return this.$message.error("请选择性别");
      }
      if (!this.form.avatar) {
        return this.$message.error("请选择图片");
      }
      if (!this.form.profile || !this.form.profile.trim()) {
        return this.$message.error("请输入个人简介");
      }
      if (
        this.form.profile &&
        (this.form.profile.length < 3 || this.form.profile.length > 500)
      ) {
        return this.$message.error("填入个人简介的字数为 3 到 200 个字符");
      }
      if (this.tg.length === 0) {
        return this.$message.error("请选择展示标签");
      }
      this.$confirm("确认提交审核? 审核通过后再无法自行修改。", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const params = {};
          params.id = this.form.id;
          params.profile = this.form.profile;
          params.avatar = this.form.avatar;
          params.sex = this.form.sex;
          params.showName = this.form.showName;
          params.license = this.form.license;
          params.phone = this.form.phone;
          params.tags = [...this.tg];
          // this.form.tagList.forEach(val => {
          //   params.tags.push(val.id)
          // })
          // console.log(params)
          // return
          const data = await saveTgInfo(params);
          if (data.code === 0) {
            // this.$message.success('提交成功')
            // 修改状态
            const {
              code: statusCode,
              message: statusMessage
            } = await updateTgStatus({
              id: this.form.id,
              // 提交
              event: 101
            });
            if (statusCode == 0) {
              this.$message.success("提交成功");
              this.GetTgInfo();
            } else {
              this.$message.error(statusMessage);
            }
          } else {
            this.$message.error(data.message);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 修改投顾状态
    async doInfo() {
      const params = {};
      params.id = this.form.id;
      params.reason = this.form.reason;
      params.status = 2;
      params.tagList = [];
      this.tgType.forEach(val => {
        this.tg.forEach(v => {
          if (v === val.id) {
            params.tagList.push(val);
          }
        });
      });
      const data = await operateTgInfo(params);
      if (data.code === 0) {
        this.$message.success("成功");
        this.GetTgInfo();
      } else {
        this.$message.error(data.message);
      }
      // console.log(params)
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.app-container {
  min-width: 800px;
}
.picture-loading {
  overflow: hidden;
  margin-top: 30px;
  position: relative;
  left: -100000000000px;
}
</style>
