<template>
  <div style="display: inline-block">
    <el-dialog
      :visible.sync="dialog"
      :close-on-click-modal="false"
      :title="title"
      append-to-body
      width="600px"
      @close="cancel"
    >
      <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="staffNo">
          <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" style="width: 50%" />
        </el-form-item>
        <el-form-item label="投顾手机号" prop="license">
          <el-input v-model="form.phone" style="width: 50%" />
        </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" style="width: 35%" />
        </el-form-item>
        <el-form-item label="性别" prop="sex" v-if="true">
          <el-radio-group v-model="form.sex" 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"
            >
              <el-button size="small" type="primary">选择图片</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过1MB
              </div>
            </el-upload>
          </div>
          <el-image
            :src="form.avatar"
            style="
              width: 70px;
              height: 70px;
            "
          />
          <el-image
            :src="form.avatar"
            style="
              width: 70px;
              height: 70px;
              border-radius: 50%;
              margin-left: 15px;
            "
          />
        </el-form-item>
        <el-form-item label="个人简介" prop="profile">
          <el-input
            v-model="form.profile"
            type="textarea"
            :rows="3"
            placeholder="请输入个人简介"
          />
        </el-form-item>
        <el-form-item label="展示标签" prop="tags">
          <el-checkbox-group v-model="tags" :max="3">
            <el-checkbox v-for="tag in tagList" :key="tag.id" :label="tag.id">{{
              tag.name
            }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          :loading="loading"
          type="primary"
          @click="doSubmit"
          >提交</el-button
        >
        <el-button size="mini" @click="dialog = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import store from '@/store'
import { getToken } from "@/utils/auth";
import { saveTgInfo, getTgInfo } from "@/api/adviser.js";
import { queryTagList } from "@/api/tag.js";

export default {
  data() {
    return {
      loading: false,
      dialog: false,
      title: "编辑信息",
      id: null,
      headers: {
        Authorization: "Bearer " + getToken(),
        "X-File-Size": 0
      },
      tagList: [],
      tags: [],
      staffNo: "",
      form: {
        id: null,
        name: "",
        staffNo: "",
        profile: "",
        sex: "",
        tagList: [],
        license: "",
        userName: "",
        userNo: "",
        showName: "",
        deptName: ""
      },
      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: 500,
        //     message: '长度在 3 到 500 个字符',
        //     trigger: 'blur'
        //   }
        // ]
      }
    };
  },
  mounted() {
    this.getLists();
  },
  watch: {
    dialog(newName) {
      if (newName) {
        this.getInfo();
      }
    }
  },
  methods: {
    // 获取详情
    async getInfo() {
      const data = await getTgInfo({
        id: this.form.id
      });
      if (data.code === 0) {
        this.form = data.data;
        this.staffNo = data.data.staffNo;
        this.tags = [];
        this.form.tagList.forEach(v => {
          this.tags.push(v.id);
        });
      } else {
        this.$message.error(data.message);
      }
      console.log(data.data);
    },
    // 获取标签
    async getLists() {
      const { data } = await queryTagList({
        current: 1,
        size: 1000,
        status: 1,
        type: 0
      });
      this.tagList = data.list;
    },
    cancel() {
      this.resetForm();
    },
    handleSuccess(response, file, fileList) {
      console.log(response);
      console.log(file);
      console.log(fileList);
      setTimeout(() => {
        this.form.avatar = response.data.url;
      }, 100);
      this.$notify({
        title: "头像上传成功",
        type: "success",
        duration: 2500
      });
    },
    beforeUpload(file) {
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        this.$message.error("上传只支持jpeg格式和png格式!");
        return false;
      }
      const isLt = file.size / 1024 < 1024;
      if (!isLt) {
        this.$message.error("上传文件大小不能超过 1MB!");
        return false;
      }
      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.staffNo || !this.form.staffNo.trim()) {
      //   return this.$message.error('请输入员工编号')
      // }
      // if (!this.form.name || !this.form.name.trim()) {
      //   return this.$message.error('请输入姓名')
      // }
      if (!this.form.license || !this.form.license.trim()) {
        return this.$message.error("请输入投顾执业证号");
      }
      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 || !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.trim() &&
        (this.form.profile.length < 3 || this.form.profile.length > 500)
      ) {
        return this.$message.error("填入个人简介的字数为 3 到 500 个字符");
      }
      if (this.tags.length === 0) {
        return this.$message.error("请选择展示标签");
      }
      this.loading = true;
      const data = await saveTgInfo({
        name: this.form.name,
        staffNo: this.form.staffNo,
        avatar: this.form.avatar,
        id: this.form.id,
        sex: this.form.sex,
        profile: this.form.profile,
        showName: this.form.showName,
        license: this.form.license,
        phone: this.form.phone,
        tags: this.tags
      });
      if (data.code === 0) {
        this.dialog = false;
        this.resetForm();
        this.$message.success("修改成功");
        this.loading = false;
        this.$parent.getTgInfoList();
      } else {
        this.loading = false;
        this.$message.error(data.message);
      }
    },
    resetForm() {
      this.$refs["form"].resetFields();
      this.form = {
        id: null,
        name: "",
        staffNo: "",
        profile: "",
        sex: "",
        tagList: [],
        license: "",
        userName: "",
        userNo: "",
        showName: "",
        deptName: ""
      };
      // this.tagList = []
      this.id = null;
      this.tags = [];
      this.loading = false;
      this.dialog = false;
    }
  }
};
</script>

<style scoped></style>
