<template>
  <div id="">
    <el-dialog
      :visible.sync="dialogVisible"
      width="560px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">业务员</div>
        <div class="rightBoxs">
          <img src="@/assets/images/Close@2x.png" alt="" @click="close" />
        </div>
      </div>
      <div>
        <el-form
          label-position="right"
          label-width="110px"
          :model="listData"
          :rules="rules"
          ref="listData"
          :disabled="disabled"
        >
          <el-form-item
            v-for="(items, indexs) in listitem"
            :key="indexs"
            :label="items.label"
            :prop="items.prop"
          >
            <div v-if="items.scope === 'header_img'" class="header_img">
              <el-image
                class="imageStyBoxShow"
                :src="$methodsTools.splitImgHost(listData[items.prop])"
                :preview-src-list="[
                  $methodsTools.splitImgHost(listData[items.prop]),
                ]"
              >
              </el-image>
              <label for="imgs"
                ><i class="btns" v-if="!disabled">更换头像</i></label
              >
              <input
                id="imgs"
                type="file"
                style="display: none"
                @change="uploadImg"
              />
            </div>
            <el-input v-else v-model="listData[items.prop]"></el-input>
          </el-form-item>
        </el-form>
        <p class="title_i">创建新账户时，默认密码为身份证号末6位</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button
          type="primary"
          :loading="disabledBtn"
          v-if="!disabled"
          @click="submit('listData')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 弹窗字段
      listitem: [
        {
          label: "头像",
          prop: "adverUrl",
          scope: "header_img",
        },
        {
          label: "业务员ID",
          prop: "sort",
        },
        {
          label: "姓名",
          prop: "name",
        },
        {
          label: "职务",
          prop: "sort",
        },
        {
          label: "手机号码",
          prop: "tel",
        },
        {
          label: "身份证号",
          prop: "idCard",
        },
        {
          label: "微信号",
          prop: "wx",
        },
      ],
      dialogVisible: false,
      disabledBtn: false,
      disabled: false,
      //   弹窗数据
      listData: {},
      //表单验证
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        tel: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
        ],
        idCard: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: "blur",
          },
        ],
        wx: [
          {
            required: true,
            message: "请输入微信号",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    uploadImg(e) {
      var file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      if (file.size > 0.3 * 1024 * 1024) {
        this.$message.warning("图片不得大于300kb");
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      if (type[0] != "jpg" && type[0] != "png" && type[0] != "jpeg") {
        this.$message.warning("上传格式需为：.jpg/.png/.jpeg");
        e.target.value = "";
        return;
      }
      this.$upload
        .upload(file, 0)
        .then((res) => {
          this.$set(this.listData, "adverUrl", res);
        })
        .finally(() => {
          e.target.value = "";
        });
    },
    showBox(e) {
      if (e) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
      this.dialogVisible = true;
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.rulesTableSumbit();
        } else {
          return false;
        }
      });
    },
    rulesTableSumbit() {
      this.disabledBtn = true;
      setTimeout(() => {
        this.$message.success("修改成功");
        this.disabledBtn = false;
        this.dialogVisible = false;
        this.search();
      }, 500);
    },
    close() {
      this.$refs.listData.clearValidate();
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.header_img {
  & > .imageStyBoxShow {
    border-radius: 50%;
    overflow: hidden;
    width: 60px;
    height: 60px;
    margin-right: 10px;
    border: 1px solid #999;
  }
  .btns {
    border: 1px solid #333;
    color: #333;
    padding: 4px 6px;
    font-style: normal;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
  }
}
.title_i {
  text-align: center;
  font-size: 12px;
  color: rgba(134, 144, 156, 1);
}
</style>
