<template>
  <div>
    <div class="form-wrapper">
      <el-form label-width="200px" :model="detail">
        <el-form-item label="意向项目：">
          <el-input v-model="detail.intention"></el-input>
        </el-form-item>
        <el-form-item label="客户照片：">
          <el-upload
                  class="avatar-uploader"
                  :headers="uploadHeaders"
                  :action="upFileUrl"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
      </el-form-item>
        <el-form-item label="客户姓名：">
          <el-input v-model="detail.name"></el-input>
        </el-form-item>
        <el-form-item label="客户电话：">
          <el-input v-model="detail.phone"></el-input>
        </el-form-item>
        <el-form-item label="客户性别：">
          <el-radio-group v-model="detail.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="预约到访时间：">
          <el-date-picker
                  v-model="detail.appointmentTime"
                  type="datetime"
                  placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="到访人数：">
          <el-input v-model="detail.visiteNum"></el-input>
        </el-form-item>
        <el-form-item label="客户描述：">
            <el-input type="textarea" :rows="5"  v-model="detail.describe"></el-input>
        </el-form-item>
        <el-form-item label="物业类型：">
          <el-input v-model="detail.realtyManageType"></el-input>
        </el-form-item>
        <el-form-item label="需求类型：">
          <el-input v-model="detail.demandType"></el-input>
        </el-form-item>
        <el-form-item label="价格区间：">
          <el-input v-model="detail.priceRange"></el-input>
        </el-form-item>
        <el-form-item label="报备日期：">
          <el-date-picker
                  v-model="detail.reportDate"
                  type="datetime"
                  placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="detail.verifyStatus" placeholder="请选择">
            <el-option v-for="(item,i) in gridData || []" :key="i" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="归属置业顾问：">
          <p style="margin:0">{{detail.consultantName}}<span @click="dialogTableVisible=true" class="choose">请选择</span></p>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">修改并审核通过</el-button>
          <el-button @click="$router.go(-1)">驳回</el-button>
        </el-form-item>
    <el-dialog title="选择置业顾问" :visible.sync="dialogTableVisible">
      <el-table :data="consultantList">
        <el-table-column property="name" label="姓名"></el-table-column>
        <el-table-column property="phone" label="电话"></el-table-column>
        <el-table-column property="department" label="部门"></el-table-column>
        <el-table-column property="post" label="岗位"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDel(scope.row)" size="small">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
          <el-pagination
                  @size-change="dialogHandleSizeChange"
                  @current-change="dialogHandleCurrentChange"
                  :current-page.sync="dialogForm.pageNumber"
                  :page-size="dialogForm.pageSize"
                  layout="total, prev, pager, next"
                  :total="dialogTotal">
          </el-pagination>
    </el-dialog>
      </el-form>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import apis from "../../config/api";
import E from "wangeditor";

const { mapActions: mapPersonActions } = createNamespacedHelpers("persons");
const {
  mapState: mapBuildingState,
  mapActions: mapBuildingActions
} = createNamespacedHelpers("building");
export default {
  name: "consultantEdit",
  data() {
    return {
      upFileUrl: apis.file.upload.url,
      detail: {
        customerId: '',
        consultantName: '',
        name: undefined,
        company: undefined,
        department: undefined,
        post: undefined,
        tel: undefined,
        photo: undefined,
        verifyStatus: '0',
        buildings: [],
        realtyConsultant: '',
        sex: ''
      },
      dialogForm: {
        pageNumber: 1,
        pageSize: 100
      },
      dialogTotal: 0,
      consultantList: [],
      imageUrl: '',
      dialogVisible: false,
      dialogImageUrl: "",
      dialogTableVisible: false, //选择置业顾问弹框
      consultant:"",
      gridData: [
        {
          name: "未通过",
          value: 0
        },
        {
          name: "已通过",
          value: 1
        },
        {
          name: "已驳回",
          value: 2
        }
      ]
    };
  },
  created() {
    this.init();
    this.getConsultantsList()
  },
  computed: {
    ...mapBuildingState({
      buildings: x => x.buildings
    }),
    uploadHeaders() {
      const token = localStorage.getItem("x-token") || "";
      return {
        Authorization: `Bearer ${token}`
      };
    }
  },
  methods: {
    ...mapBuildingActions(["getBuildings"]),
    ...mapPersonActions(["getConsultant", "editConsultant"]),

    init() {
      this.detail.customerId = this.$route.query.id
      if (this.detail.customerId !== undefined) {
        this.$store.dispatch('customer/getRecommendCustomersGetById',this.detail).then(data => {
          this.detail = data;
          this.dialogImageUrl = data.picture
          this.imageUrl = data.picture
        }).catch((err) => {
          this.$notify.error(err.msg || err.message);
        });
      }
    },
    handleDel(row) {
      this.$confirm("确定选择此置业顾问?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "选择成功!"
          });
          this.detail.realtyConsultant = row.personId
          this.detail.consultantName = row.name
          this.dialogTableVisible = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消选择"
          });
        });
    },
    beforeImgUpload(file) {
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
        return false;
      }
      // if (file.size / 1024 > 300) {
      //   this.$message.error('图片大小不允许超过300k!')
      //   return false
      // }
      this.loading = this.$loading({
        lock: true,
        text: "上传中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      return true;
    },
    handleAvatarSuccess(res) {
      this.imageUrl = res.data
      this.detail.picture = res.data
      this.hideLoadding();
    },
    handleRemove(file, fileList) {
      this.imgList = fileList;
    },
    submitForm() {
      this.showLoadding("保存中...");
      this.$store.dispatch('customer/getRecommendCustomersUpdate',this.detail)
        .then(res => {
          if (res.personId) {
            this.detail = res;
          }

          this.hideLoadding();
          this.$notify.info("保存成功");
          this.$router.go(-1)
        })
        .catch(err => {
          this.hideLoadding();
          this.$notify.error(err.msg || err.message);
        });
    },

    showLoadding(text) {
      this.loading = this.$loading({
        text,
        lock: true,
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)"
      });
    },

    hideLoadding() {
      if (this.loading) this.loading.close();
    },
    getConsultantsList() {
      this.$store.dispatch('persons/getConsultants', this.dialogForm).then((res) => {
        this.consultantList = res.records
        this.dialogForm.pageNumber = res.current
        this.dialogForm.pageSize = res.size
        this.dialogTotal = res.total
      }).catch((err)=> {
        this.$notify.error(err.msg || err.message);
        console.log('persons/getConsultants err')
      })
    },
    dialogHandleSizeChange(value) {
      this.dialogForm.pageSize = value
      this.getConsultantsList()
    },
    dialogHandleCurrentChange(value) {
      this.dialogForm.pageNumber = value
      this.getConsultantsList()
    }
  },
};
</script>

<style lang="scss" scoped>
.form-wrapper {
  width: 60%;
}
.choose {
  color: blue;
  margin-left: 15px;
}
</style>

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
