<template>
  <el-dialog
    class="move-dialog"
    v-dialogDrag
    :visible.sync="isShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="cancelHandle()"
    center
  >
    <div slot="title" style="display: flex; align-items: center">
      <img
        :src="$icons.move"
        style="color: #fff; width: 16px; height: 16px; margin-right: 5px"
      />
      <span style="font-size: 16px">移动联系人</span>
    </div>
    <el-form
      :model="userForm"
      :rules="formRule"
      ref="userForm"
      label-width="80px"
      style="margin-top: 15px"
    >
      <div class="move-form-item">
        <el-form-item label="移动到" prop="type" style="width: 50%">
          <el-select
            v-model="userForm.type"
            filterable
            remote
            :remote-method="getCompany"
            @focus="focusGetCompany"
            placeholder="请选择公司"
            style="width: 70%"
          >
            <el-option
              v-for="item in typeArr"
              :key="item.CompanyId"
              :label="item.CompanyName"
              :value="item.CompanyId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <span
          style="
            color: #409eff;
            font-size: 16px;
            cursor: pointer;
            margin-left: 34px;
          "
          @click="$router.push({ path: '/addCustom' })"
          >创建客户</span
        >
      </div>
      <div class="move-form-item">
        <el-form-item label="姓名" prop="name" style="width: 50%">
          <el-input
            v-model="userForm.name"
            placeholder="请填写姓名"
            style="width: 70%"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex" style="width: 50%">
          <el-radio-group v-model="userForm.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>

      <div class="move-form-item">
        <el-form-item label="手机号" prop="mobile" style="width: 50%">
          <el-input
            v-model="userForm.mobile"
            placeholder="请填写手机号"
            style="width: 70%"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="mail" style="width: 50%">
          <el-input
            v-model="userForm.mail"
            placeholder="请填写邮箱"
            style="width: 70%"
          ></el-input>
        </el-form-item>
      </div>
      <div class="move-form-item">
        <el-form-item label="职位" prop="post" style="width: 50%">
          <el-input
            v-model="userForm.post"
            placeholder="请输入职位"
            style="width: 70%"
          ></el-input>
        </el-form-item>
        <el-form-item label="决策人" prop="desiger" style="width: 50%">
          <el-select
            v-model="userForm.desiger"
            placeholder="请选择"
            style="width: 70%"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="move-form-item">
        <el-form-item label="部门" prop="park" style="width: 50%">
          <el-input
            v-model="userForm.park"
            placeholder="请输入部门"
            style="width: 70%"
          ></el-input>
        </el-form-item>
      </div>

      <el-form-item label="个人名片" prop="carte" style="width: 50%">
        <input
          type="file"
          name="file"
          @change="fileSelected"
          id="fileCard"
          class="true-file"
          style="display: none"
        />
        <el-button
          type="primary"
          size="medium"
          @click.native="clickinput"
          v-if="!userForm.carte"
          >点击上传</el-button
        >
        <div class="img_item" v-if="userForm.carte">
          <el-image
            :src="userForm.carte"
            alt=""
            style="background: #aaa; width: 280px; height: 180px"
            :preview-src-list="userForm.carte.split(',')"
            id="img"
          />
          <i
            class="el-icon-zoom-in"
            style="position: absolute; right: 20px; top: 20px; color: #fff"
            @click="preview"
          ></i>
          <span
            style="
              position: absolute;
              right: 12px;
              bottom: 1px;
              color: #409eff;
              font-size: 16px;
              cursor: pointer;
            "
            @click.stop="clickinput"
            >重新上传</span
          >
        </div>
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: center; margin: 0 0 26px">
      <el-button
        type="primary"
        style="width: 80px; margin-right: 24px"
        @click="saveHandle"
        >确定</el-button
      >
      <el-button style="width: 80px" @click="cancelHandle">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { customInterence, ficcManageInterface } from "@/api/api.js";
export default {
  props: {
    isShow: {
        type: Boolean,
        require: true,
    },
    item:{
        type:Object,
        require:true,
    }
  },
  mounted () {
      this.userForm={
        id: this.item.UserId,
        type: "",
        name: this.item.RealName,
        sex:1,
        mobile: this.item.Mobile,
        mail: this.item.Email,
        remark: "",
        desiger:"",
        carte:'',
        post:''
      }
  },
  data() {
    return {
      userForm: {
        id: "",
        type: "",
        name: "",
        sex: 1,
        mobile: "",
        mail: "",
        remark: "",
        carte: "",
        desiger: "",
        post: "",
        park: "",
      }, //用户表单
      formRule: {
        type: [
          { required: true, message: "移动类型不能为空", trigger: "blur" },
        ],
        name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        sex: [{ required: true, message: "性别不能为空", trigger: "change" }],
        desiger: [
          { required: true, message: "请选择是否为决策人", trigger: "change" },
        ],
      }, //校验
      typeArr: [], //公司列表
    };
  },
  methods: {
      /* 取消弹窗 */
    cancelHandle() {
      this.$emit('update:isShow',false)
      this.userForm = {
        id: "",
        type: "",
        name: "",
        mobile: "",
        mail: "",
        remark: "",
        desiger:'',
        post:''
      };
      this.$refs.userForm.resetFields(); //重置校验
    },
    /* 保存 */
    saveHandle() {
      let SellerId=localStorage.getItem('AdminId')
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          ficcManageInterface
            .moveUserByApplyRecord({
              CompanyId: Number(this.userForm.type),
              BusinessCardUrl:this.userForm.carte,
              DepartmentName:this.userForm.park,
              Email: this.userForm.mail,
              IsMaker:Number(this.userForm.desiger),
              Mobile: this.userForm.mobile,
              Position:this.userForm.post,
              RegionType:"",
              RealName: this.userForm.name,
              Remark: this.userForm.remark,
              SellerId:Number(SellerId),
              Sex:Number(this.userForm.sex),
              UserId: Number(this.userForm.id),
              ApplyRecordId: Number(this.item.ApplyRecordId),
            })
            .then((res) => {
              if (res.Ret === 200) {
                this.$message.success("移动成功！");
                this.cancelHandle()
                this.$parent.getTableData()
              }
            });
        }
      });
    },
    /* 过滤公司 */
    getCompany(query) {
      if (query) {
        customInterence
          .companySearch({
            KeyWord: query,
          })
          .then((res) => {
            if (res.Ret === 200) {
              // 去掉潜在客户一项
              this.typeArr = res.Data.List.filter(item=>item.CompanyName!=='潜在客户') || [];
            }
          });
      } else {
        this.typeArr = [];
      }
    },
    focusGetCompany() {
      customInterence
        .companySearch({
          KeyWord: "##",
        })
        .then((res) => {
          if (res.Ret === 200) {
            this.typeArr = res.Data.List || [];
          }
        });
    },
    // 选择文件上传
    fileSelected() {
      //选择文件上传
      if (document.getElementById("fileCard").files[0]) {
        let hostfile = document.getElementById("fileCard").files[0];
        let size = Math.floor(hostfile.size / 1024 / 1024);
        if (size > 200) {
          this.$message.error("上传文件大小不能大于200M！");
          hostfile = {};
          return false;
        }
        if (
          hostfile.name.toLowerCase().includes(".png") ||
          hostfile.name.toLowerCase().includes(".jpg") ||
          hostfile.name.toLowerCase().includes(".jpeg")
        ) {
          let form = new FormData();
          form.append("file", hostfile); //hostfile.name
          this.uploadloading = true;
          customInterence.upload(form).then((res) => {
            if (res.Ret === 200) {
              // that.$message.success( '上传成功' );
              this.userForm.carte = res.Data.ResourceUrl;
            }
            this.uploadloading = false;
            $("#fileCard").val("");
            hostfile = {};
          });
        } else {
          this.$message.error("上传文件格式不正确！");
        }
      }
    },
    clickinput() {
      //上传模拟点击
      // debugger
      $("#fileCard").click();
    },
    /* 预览 */
    preview() {
      $("#img").click();
    },
  },
};
</script>

<style lang='scss'>
.move-dialog{
.potential_container {
  // reset
  .el-form-item__label {
    font-size: 16px;
    padding-right: 20px !important;
  }
  .potential_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ececec;
    padding: 20px 30px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  }
  .potential_cont {
    min-height: calc(100vh - 260px);
    padding: 20px 30px 80px;
    background: #fff;
    margin-top: 20px;
    position: relative;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  }
}
.move-form-item{
  display: flex;
}
.img_item{
  position: relative;
  width: 280px;
  height: 180px;
}
}
</style>