<template>
  <div class="list">
    <div class="system-table-search">
      <div class="flex-h">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input v-model="form.name" ></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.tel" ></el-input>
          </el-form-item>
          <el-form-item label="推荐人">
            <el-input v-model="form.consultName" ></el-input>
          </el-form-item>
          <el-form-item label="推荐人电话">
            <el-input v-model="form.consultTel" ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.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="">
            <el-button
                    size="mini"
                    type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>
    <el-table :data="list || []"
              border
              style="width: 100%">
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        label="头像">
        <template slot-scope="scope">
          <div class="header">
            <img :src="scope.row.picture" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="sex"
        width="100"
        label="性别">
        <template slot-scope="scope">{{ scope.row.sex === 1 ? '男' : scope.row.sex === 2 ? '女' : '' }}</template>
      </el-table-column>
      <el-table-column
        prop="intention"
        label="意向项目">
      </el-table-column>
      <el-table-column  label="推荐人">
        <template slot-scope="scope">
          <span>{{scope.row.recommendName }}</span>
          <p>{{scope.row.recommendTel}}</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="reportDate"
        label="推荐时间">
          <template slot-scope="scope">{{ formateDate(scope.row.reportDate) }}</template>
      </el-table-column>
      <el-table-column  label="状态">
        <template slot-scope="scope">
          <span>{{scope.row.verifyStatus == '0' ? '未通过': scope.row.verifyStatus == '1' ? '已通过' : scope.row.verifyStatus == '2' ? '已驳回' : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="200" label="操作">
        <template slot-scope="scope">
          <router-link :to="{ name:'editRecommend', query: { id: scope.row.customerId } }">审核</router-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      small
      style="margin-top:10px;"
      layout="prev, pager, next"
      :current-page.sync="form.pageNumber"
      :pageSize="form.pageSize"
      @current-change="getList"
    >
    </el-pagination>


    <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>-->
            <el-radio v-model="dialogConsultantForm.realtyConsultant" :label="scope.row.personId"></el-radio>
          </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-button type="primary" @click="handleDel" size="small">确定</el-button>
    </el-dialog>


    <el-dialog title="推荐客户" :visible.sync="dialogRecommendedTableVisible">
      <el-table :data="recommendedConsultantList">
        <el-table-column property="name" label="姓名"></el-table-column>
        <el-table-column property="phone" label="电话"></el-table-column>
        <el-table-column property="sex" label="性别">
          <template slot-scope="scope"> {{ scope.row.sex === 1 ? '男' : '女' }}</template>
        </el-table-column>
        <el-table-column property="intention" label="意向项目"></el-table-column>
        <el-table-column property="post" label="推荐时间"></el-table-column>
        <el-table-column fixed="right" label="状态">
          <template slot-scope="scope">
            {{ scope.row.status == 1 ? '报备': scope.row.status == 2 ? '到访' : scope.row.status == 3 ? '认购' : scope.row.status == 4 ? '签约' : '无效' }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
              @size-change="recommendedDialogHandleSizeChange"
              @current-change="recommendedDialogHandleCurrentChange"
              :current-page.sync="recommendedDialogConsultantForm.pageNumber"
              :page-size="recommendedDialogConsultantForm.pageSize"
              layout="total, prev, pager, next"
              :total="recommendedDialogTotal">
      </el-pagination>
    </el-dialog>
  </div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
import dayjs from 'dayjs'
const {
  mapState: mapDynamicState,
  mapActions: mapDynamicActions
} = createNamespacedHelpers("dynamic");
const {
  mapState: mapCustomerState,
  mapActions: mapCustomerActions
} = createNamespacedHelpers("customer");
export default {
  data() {
    return {
      form: {
        pageSize: 10,
        pageNumber: 1,
        name: "",
        consultName: '',
        consultTel: '',
        verifyStatus: '', // 0未通过 1已通过 2已驳
        entryType: 'input'
      },
      list: [],
      total: 0,
      sex: "",
      phone: "",
      picture: "",
      describe: "",
      appointmentTime: "",
      visiteNum: "",
      intention: "",
      buildingId: "",
      realtyManageType: "",
      demandType: "",
      priceRange: "",
      reportDate: "",
      status: "",
      personId: "",
      gridData: [
        {
          name: "未通过",
          value: '0'
        },
        {
          name: "已通过",
          value: '1'
        },
        {
          name: "已驳回",
          value: '2'
        }
      ],
      dialogTableVisible: false, //选择置业顾问弹框
      consultantList: [],
      dialogForm: {
        pageNumber: 1,
        pageSize: 10
      },
      dialogTotal: 0,
      dialogConsultantForm: {
        customerId: '', // 客户Id
        realtyConsultant: '' // 置业顾问
      },
      // 推荐客户
      dialogRecommendedTableVisible: false,
      recommendedConsultantList: [],
      recommendedDialogTotal: 0,
      recommendedDialogConsultantForm: {
        customerId: '', // 客户Id
        pageNumber: 1,
        pageSize: 10
      },
    };
  },
  computed: {
    ...mapCustomerState({
      customers: x => x.customers
    }),
    ...mapDynamicState({
      dynamics: x => x.dynamics
    })
  },
  created() {
    this.getList();
  },
  methods: {
    ...mapCustomerActions(["getCustomers", "getDetail", "getRecommendCustomers"]),
    ...mapDynamicActions([
      "getDynamics",
      "setDetailNull",
      "deleteDynamics",
      "publicDynamic",
      "cancelDynamic"
    ]),
    GetIndex(inx) {
      return (this.currentPage - 1) * this.pageSize + inx + 1;
    },
    formateDate(dt) {
      return !dt ? '' : dayjs(dt).format('YYYY-MM-DD HH:mm')
    },
    getList() {
      this.getRecommendCustomers(this.form).then((res) => {
        this.list = res.records
        this.form.pageSize = res.size
        this.form.pageNumber = res.current
        this.total = res.total
      }).catch(() => {
        console.log('getRecommendCustomers err')
      });
    },

    // 进入积分记录页
    toEditRecommend(row) {
      this.$router.push({
        name: "editRecommend",
        params: { id: row.personId }
      });
    },

    // getList() {
    // this.getCustomers({
    // pageNum: this.currentPage,
    // pageSize: this.pageSize,
    // name: this.name,
    // sex: this.sex,
    // phone: this.phone,
    // picture: this.picture,
    // describe: this.describe,
    // appointmentTime: this.appointmentTime,
    // visiteNum: this.visiteNum,
    // intention: this.intention,
    // buildingId: this.buildingId,
    // realtyManageType: this.realtyManageType,
    // demandType: this.demandType,
    // priceRange: this.priceRange,
    // reportDate: this.reportDate,
    // status: this.status,
    // personId: this.personId
    // });
    // },
    search() {
      this.currentPage = 1;
      this.getList();
    },
    handleDel() {
      this.dialogSubmitForm(this.dialogConsultantForm.customerId, this.dialogConsultantForm.realtyConsultant)
      this.dialogTableVisible = false
    },
    dialogHandleSizeChange(value) {
      this.dialogForm.pageSize = value
      this.getConsultantsList()
    },
    dialogHandleCurrentChange(value) {
      this.dialogForm.pageNumber = 1
      this.dialogForm.pageSize = value
      this.getConsultantsList()
    },
    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(()=> {
        console.log('persons/getConsultants err')
      })
    },
    dialogSubmitForm(customerId, realtyConsultant) {
      console.log('提交', this.dialogConsultantForm)
      this.$store.dispatch('customer/getRecommendCustomersUpdate',{customerId:  customerId, realtyConsultant:  realtyConsultant})
              .then(res => {
                if (res.personId) {
                  this.detail = res;
                }

                this.$notify.info("保存成功");
              })
              .catch(err => {
                this.$notify.error(err.message);
              });
    },
    showDialogConsultants(row) {
      this.dialogTableVisible = true
      this.dialogConsultantForm.customerId = row.customerId
      this.dialogConsultantForm.realtyConsultant = row.realtyConsultant
      this.getConsultantsList()
    },
    getRecommendCustomerList() {
      this.$store.dispatch('customer/recommendCustomerList', this.recommendedDialogConsultantForm).then((res) => {
        this.recommendedConsultantList = res.records
        this.recommendedDialogConsultantForm.pageNumber = res.current
        this.recommendedDialogConsultantForm.pageSize = res.size
        this.recommendedDialogTotal = res.total
      }).catch(()=> {
        console.log('persons/getConsultants err')
      })
    },
    showRecommendCustomerList(row) {
      this.dialogRecommendedTableVisible = true
      this.recommendedDialogConsultantForm.customerId = row.customerId
      this.getRecommendCustomerList()
    },
    recommendedDialogHandleSizeChange(value) {
      this.recommendedDialogConsultantForm.pageSize = value
      this.getRecommendCustomerList()
    },
    recommendedDialogHandleCurrentChange(value) {
      this.recommendedDialogConsultantForm.pageNumber = 1
      this.recommendedDialogConsultantForm.pageSize = value
      this.getConsultantsList()
    },
  }
};
</script>
<style lang="scss" scoped>
.list {
  .header {
    width: 50px;
    height: 50px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.system-table-search {
  width: calc(100% - 40px);
  margin: 16px auto 0;
}

.system-table-search ul > li {
  margin-right: 20px;
  display: flex;
  float: left;
  align-items: center;
  margin-bottom: 10px;
  span {
    margin-right: 10px;
  }
}

.system-table-search ul {
  font-size: 15px;
  white-space: nowrap;
  padding: 0;
}

.flex-h {
  display: flex;
  align-items: center;
}
.el-dialog__body {
  text-align: center;
  .close-btn {
    margin: 20px auto 0 auto;
  }
}

.flex-item {
  flex: 1;
  -webkit-flex: 1;
  position: relative;
  overflow: hidden;
}
</style>


