<template>
  <div class="potential_container">
    <div class="potential_top">
      <a :href="exportUser" download>
        <el-button type="primary" style="width: 80px">导出</el-button>
      </a>
      <div style="width: 720px;">
        <el-select
          v-model="status"
          placeholder="请选择状态"
          style="width: 200px; margin-right: 16px"
          @change="changeStatus"
          clearable
        >
          <el-option
            v-for="item in statusArr"
            :key="item"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-input
          placeholder="姓名/手机号/邮箱"
          v-model="search_txt"
          @input="searchHandle"
          clearable
          style="maxWidth: 500px"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
    </div>
    <div class="potential_cont">
      <el-table
        ref="table"
        :data="tableData"
        v-loading="isShowloadding"
        element-loading-text="数据加载中..."
        border
      >
        <el-table-column prop="RealName" label="姓名" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.RealName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="Mobile" label="手机号码" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.Mobile }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="Email" label="邮箱" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.Email }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="CreatedTime"
          label="注册时间"
          align="center"
          min-width="150px;"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.CreatedTime|formatTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ViewTotal" label="累计阅读次数" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.ViewTotal || "" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="LastViewTimeStr"
          label="最近一次阅读时间"
          align="center"
          min-width="150px;"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.LastViewTimeStr|formatTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="阅读报告列表" align="center">
          <template slot-scope="scope">
            <span
              v-if="scope.row.ViewTotal != 0"
              class="editsty"
              @click="lookReport(scope.row)"
              >点击查看</span
            ></template
          >
        </el-table-column>
        <el-table-column
          prop="CompanyName"
          label="公司"
          align="center"
          min-width="150px;"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.CompanyName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="Source" label="来源" align="center">
          <template slot-scope="scope">
            <span>{{
              scope.row.Source === 1
                ? "研报"
                : scope.row.Source === 2
                ? "pc网页端"
                : scope.row.Source === 3
                ? "查研观向小程序"
                : scope.row.Source === 4
                ? "商品晨报"
                : scope.row.Source === 5
                ? "电话会"
                : scope.row.Source === 6
                ? "弘则研报小程序"
                : ''
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ApplyMethod" label="申请类型" align="center">
          <template slot-scope="scope">
            <span>{{
              scope.row.ApplyMethod === 0
                ? "未申请"
                : scope.row.ApplyMethod === 1
                ? "已付费客户申请"
                : scope.row.ApplyMethod === 2
                ? "非客户申请"
                : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div style="color: #4099ef; font-size: 24px">
              <span
                class="editsty"
                @click.stop="moveHandle(scope.row)"
                style="marginright: 20px"
                >移动</span
              >
              <span class="deletesty" @click.stop="delHandle(scope.row)"
                >删除</span
              >
              <span 
                class="editsty" 
                style="display:inline-block" 
                v-if="scope.row.IsDeal=='0'" 
                @click.stop="handleTag(scope.row)"
              >
                标记
              </span>
            </div>
          </template>
        </el-table-column>
        <div slot="empty" style="line-height: 44px; margin: 60px 0; color: #999">
          <img
            src="~@/assets/img/cus_m/nodata.png"
            alt=""
            style="display: block; width: 160px; height: 128px; margin: auto"
          />
          <span>暂无信息</span>
        </div>
      </el-table>
      <el-col :span="24" class="toolbar">
        <el-pagination
          layout="total,prev,pager,next,jumper"
          background
          :current-page="page_no"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :total="total"
          style="float: right"
        >
        </el-pagination>
      </el-col>
    </div>
    <!-- 移动客户弹窗-->
    <el-dialog
      :visible.sync="isMove"
      :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: 75px 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>
    <!-- 阅读报告弹窗 -->
    <Readia
      :readId="readId"
      :lookRead="isRead"
      :title="readTit"
      @cancelRead="cancelRead"
    >
    </Readia>
  </div>
</template>

<script>
import { customInterence } from "@/api/api.js";
import Readia from "./compontents/ReadDialog.vue";
export default {
  name: "potentialList",
  components: { Readia },
  computed: {
    // 导出地址
    exportUser() {
      let param_token = localStorage.getItem("auth") || "";
      return (
        process.env.API_ROOT +
        "/custom/potential/user/export?ApplyMethod=" +
        this.status +
        "&KeyWord=" +
        this.search_txt +
        "&" +
        param_token
      );
    },
    Role() {
      let role = localStorage.getItem("Role") || "";
      return role;
    },
  },
  data() {
    return {
      // exportUser:process.env.API_ROOT+'/custom/potential/user/export',
      status: "", //状态
      statusArr: [
        {
          name: "未申请",
          id: 1,
        },
        {
          name: "已付费申请试用",
          id: 2,
        },
        {
          name: "非客户申请试用",
          id: 3,
        },
      ], //状态数组
      search_txt: "",
      isShowloadding: false,
      tableData: [], //表格数据
      page_no: 1,
      pageSize: 10,
      total: 1,
      isMove: false,
      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: [], //公司列表
      isRead: false, //报告列表弹窗
      readTit: "阅读报告列表",
      readId: "",
    };
  },
  methods: {
    /* 预览 */
    preview() {
      $("#img").click();
    },
    clickinput() {
      //上传模拟点击
      // debugger
      $("#fileCard").click();
    },
    // 选择文件上传
    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("上传文件格式不正确！");
        }
      }
    },

    //点击标记
    handleTag(item){
      this.$confirm("确定标记该用户吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          customInterence
            .potentialDeal({
              UserId: item.UserId,
            })
            .then((res) => {
              if (res.Ret === 200) {
                this.$message.success("标记成功！");
                this.getTableData();
              }
            });
        })
        .catch(() => {});
    },

    /* 获取表格数据 */
    getTableData() {
      this.isShowloadding = true;
      customInterence
        .potentialList({
          PageSize: this.pageSize,
          CurrentIndex: this.page_no,
          ApplyMethod: this.status || 0,
          KeyWord: this.search_txt,
        })
        .then((res) => {
          if (res.Ret === 200) {
            this.total = res.Data.Paging.Totals;
            this.tableData = res.Data.List;
            console.log(this.tableData);
          } else {
            this.tableData = [];
          }
          this.isShowloadding = false;
        });
    },
    /* 过滤公司 */
    getCompany(query) {
      if (query) {
        customInterence
          .companySearch({
            KeyWord: query,
          })
          .then((res) => {
            if (res.Ret === 200) {
              this.typeArr = res.Data.List || [];
            }
          });
      } else {
        this.typeArr = [];
      }
    },
    focusGetCompany() {
      customInterence
        .companySearch({
          KeyWord: "##",
        })
        .then((res) => {
          if (res.Ret === 200) {
            this.typeArr = res.Data.List || [];
          }
        });
    },
    /* 状态改变 */
    changeStatus() {
      this.page_no = 1; //当前页
      this.getTableData();
    },
    /* 搜索 */
    searchHandle() {
      this.page_no = 1; //当前页
      this.getTableData();
    },
    /* 页码改变 */
    handleCurrentChange(page) {
      this.page_no = page;
      this.getTableData();
    },
    /* 删除用户 */
    delHandle(item) {
      this.$confirm("确定删除该用户吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          customInterence
            .potentialDel({
              UserId: item.UserId,
            })
            .then((res) => {
              if (res.Ret === 200) {
                this.$message.success("删除成功！");
                this.getTableData();
                // let index = this.tableData.indexOf(item);
                // this.tableData.splice(index,1)
              }
            });
        })
        .catch(() => {});
    },
    /* 移动联系人 */
    moveHandle(item) {
      this.userForm = {
        id: item.UserId,
        type: "",
        name: item.RealName,
        sex:1,
        mobile: item.Mobile,
        mail: item.Email,
        remark: "",
        desiger:"",
        carte:'',
        post:''
      };
      this.isMove = true;
    },
    /* 保存 */
    saveHandle() {
      let SellerId=localStorage.getItem('AdminId')
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          customInterence
            .moveUser({
              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),
            })
            .then((res) => {
              if (res.Ret === 200) {
                this.$message.success("移动成功！");
                this.isMove = false;
                this.getTableData();
              }
            });
        }
      });
    },
    /* 取消弹窗 */
    cancelHandle() {
      this.isMove = false;
      this.userForm = {
        id: "",
        type: "",
        name: "",
        mobile: "",
        mail: "",
        remark: "",
        desiger:'',
        post:''
      };
      this.$refs.userForm.resetFields(); //重置校验
    },
    /* 查看阅读报告列表 */
    lookReport(item) {
      console.log(item);
      this.readId = item.UserId;
      this.readTit = item.RealName + "阅读报告列表";
      this.isRead = true;
    },
    /* 关闭阅读报告弹窗 */
    cancelRead() {
      this.readTit = "阅读报告列表";
      this.isRead = false;
    },
  },
  created() {
    /* 销售类型处理 */
    if (this.Role == "ficc_seller" || this.Role == "rai_seller") {
      this.status = 2;
      this.statusArr = [{ name: "已付费申请试用", id: 2 }];
    }
  },
  mounted() {
    this.getTableData();
  },
};
</script>
<style lang='scss' scoped>
.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;
}
</style>