<template>
  <div class="box-center">
    <!-- <div class="add-button">
          <el-button type="primary">筛选</el-button>
    </div> -->
    <div class="booxtop">
       <div class="app-topbox">

           <div class="div-labox" v-if="orgType!=3">
              <div class="labeltext">楼盘选择：</div>
              <el-select
               class="div-inpbox"
                v-model="searchForm.projectId"
                @change="houseChange"
                placeholder="请选择"
                filterable
              >
                <el-option
                  v-for="item in houseList"
                  :key="item.id"
                  :label="item.propertyName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
           </div>

           <div class="div-labox">
              <div class="labeltext">
                <!-- 时间： -->
                <el-select
                  v-model="searchForm.timeType"
                  @change="houseChange"
                  placeholder="请选择"
                  style="width: 125px"
                >
                  <el-option
                    v-for="item in timeTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="toptimeqhuan">
                  <el-button
                  class="btn"
                  :type="searchForm.dateType == null?'primary':''"
                  @click="tabtimetap(null)"
                >
                  全部
                </el-button>
                <el-button
                  class="btn"
                  :type="searchForm.dateType == 0?'primary':''"
                  @click="tabtimetap(0)"
                >
                  今日
                </el-button>
                <el-button
                   class="btn"
                  :type="searchForm.dateType == 2?'primary':''"
                  @click="tabtimetap(2)"
                >
                  近7天
                </el-button>
                <el-button
                   class="btn"
                  :type="searchForm.dateType == 6?'primary':''"
                  @click="tabtimetap(6)"
                >
                  近30天
                </el-button>
              </div>
              <el-date-picker
                v-model="time"
                type="daterange"
                class="div-inpbox"
                range-separator="-"
                start-placeholder="开始日期"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd"
                end-placeholder="结束日期"
                @change="timeChange"
              >
              </el-date-picker>
           </div>
       </div>
       <div class="app-topbox">
           <div class="div-labox" >
              <div class="labeltext">客户名称：</div>
               <el-input class="div-inpbox" maxlength="10" clearable v-model="searchForm.name"></el-input>
           </div>
            <div class="div-labox" >
              <div class="labeltext">置业顾问：</div>
              <el-select
                v-model="searchForm.accountId"
                clearable
                filterable
                placeholder="请选择"
                class="div-inpbox"
              >
                <el-option
                  v-for="item in accountList"
                  :key="item.accountId"
                  :label="item.name"
                  :value="item.accountId"
                >
                </el-option>
              </el-select>
           </div>
            <div class="div-labox" >
              <div class="labeltext">画像标签：</div>
              <el-select
                class="div-inpbox"
                multiple
                clearable
                filterable
                collapse-tags
                v-model="searchForm.keywordsId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in keywordsList"
                  :key="item.keywordsId"
                :label="item.isInterval==0?item.name+'-'+item.endName+item.unit:item.name"
                  :value="item.keywordsId"
                >
                </el-option>
              </el-select>
           </div>

            <div class="div-labox" >
              <div class="labeltext">客户等级：</div>
              <el-select
                v-model="searchForm.level"
                clearable
                filterable
                placeholder="请选择"
                class="div-inpbox"
              >
                <el-option
                  v-for="item in levelList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
           </div>
            <div class="div-labox" >
              <div class="labeltext">接待时长：</div>
              <el-select
                clearable
                filterable
                v-model="searchForm.recDurationInterval"
                placeholder="请选择"
                class="div-inpbox"
              >
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
           </div>
            <div class="div-labox" >
              <div class="labeltext">到访次数：</div>
               <el-select
                  v-model="searchForm.visitRecord"
                  clearable
                  filterable
                  placeholder="请选择"
                  class="div-inpbox"
                >
                  <el-option
                    v-for="item in options4"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
           </div>
                     <div class="div-labox" >
              <div class="labeltext">客户阶段：</div>
               <el-select
                  v-model="searchForm.clientStage"
                  clearable
                  filterable
                  placeholder="请选择"
                  class="div-inpbox"
                >
                  <el-option
                    v-for="item in clientStagelist"
                    :key="item.id"
                    :label="item.stageName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
           </div>



       </div>
       <div class="app-topbox">
           <div class="div-labox" >
              <div class="labeltext"></div>
              <el-button type="primary" @click="screen">筛选</el-button>
               <el-button @click="clearScreen">清空筛选条件</el-button>
           </div>
          <div style="margin-left: auto;margin-right:10px;" v-if="cus_index_downLoad">
          <el-button @click="downLoad">导出</el-button>
        </div>
       </div>
    </div>


    <!-- 表格 -->
    <div class="cen-tab">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="name" label="客户" align="center">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="agentName" label="置业顾问" width="110" align="center">
        </el-table-column>
        <el-table-column prop="level" label="客户等级" align="center">
          <template slot-scope="{ row }">
            {{
              row.level == 1
                ? "A"
                : row.level == 2
                ? "B"
                : row.level == 3
                ? "C"
                : row.level == 4
                ? "D"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column prop="clientStageName" label="客户阶段" align="center">
          <template slot-scope="{ row }">
            {{row.clientStageName|| '--'}}
          </template>
        </el-table-column>
        <el-table-column prop="visitRecord" label="到访次数" align="center">
          <template slot-scope="{ row }">
            {{ row.visitRecord || "0" }}
          </template>
        </el-table-column>
        <el-table-column prop="mm" label="接待时长" align="center">
        </el-table-column>
        <el-table-column prop="fraction" label="销讲执行率" align="center">
          <template slot-scope="{ row }"> {{ row.fraction || "0" }}% </template>
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="添加时间"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="最近到访时间"
          width="200"
          align="center"
        >
          <template slot-scope="{ row }">
            {{ row.createTime || "暂无" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="250" fixed="right">
          <template slot-scope="{row}">
            <!-- <el-button type="text" v-if="cus_index_detail">客户详情</el-button> -->
            <el-button type="text" @click="Receivedetailsabout(row)" v-if="cus_index_visit">接待详情</el-button>
            <!-- <el-button type="text">更多</el-button> -->
            <el-button type="text" @click="tranfser(row)" v-if="cus_index_take">转交</el-button>
            <!-- <el-button type="text" v-if="cus_index_del">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 30, 50]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>


  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { exportMethodPost} from "@/util/util";
export default {
  data() {
    return {
      TimetoAhoose: 2,
      time: [],
      houseList: [],
      options: [],
      keywordsList: [],
      accountList: [],
      levelList: [
        {
          value: "1",
          label: "A",
        },
        {
          value: "2",
          label: "B",
        },
        {
          value: "3",
          label: "C",
        },
        {
          value: "4",
          label: "D",
        },
      ],
      options3: [
        {
          value: "1",
          label: "0-15分钟",
        },
        {
          value: "2",
          label: "15-30分钟",
        },
        {
          value: "3",
          label: "30-60分钟",
        },
        {
          value: "4",
          label: "60-90分钟",
        },
        {
          value: "5",
          label: "90分钟以上",
        },
      ],
      options4: [
        {
          value: "1",
          label: "首次到访",
        },
        {
          value: "2",
          label: "2次到访",
        },
        {
          value: "3",
          label: "3次到访",
        },
        {
          value: "4",
          label: "三次以上",
        },
      ],
      timeTypeList: [
        {
          value: "0",
          label: "添加时间",
        },
        {
          value: "1",
          label: "最近到访时间",
        },
      ],
      options5: [
        {
          value: null,
          label: "全部",
        },
        {
          value: "1",
          label: "已标注",
        },
        {
          value: "2",
          label: "未标注",
        },
      ],
      currentPage: 1,
      size: 10,
      total: 10,
      value: "",
      input: "",
      tableData: [],
      tophove: "",
      orgType:localStorage.getItem('orgType'),
      type: "0",
      searchForm: {
        name: "",
        keywordsId: [],
        markAdvisor: null,
        level: "",
        recDurationInterval: "",
        visitRecord: "",
        staDate: "",
        endDate: "",
        dateType: null,
        projectId: "",
        timeType: "0",
        clientStage:''
      },
      clientStagelist:[],

    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  created() {
    this.cus_index_detail = this.permissions["cus_index_detail"];
    this.cus_index_take = this.permissions["cus_index_take"];
    this.cus_index_del = this.permissions["cus_index_del"];
    this.cus_index_visit = this.permissions["cus_index_visit"];
    this.cus_index_downLoad = this.permissions["cus_index_downLoad"];
  },
  mounted() {
      // 获取楼盘列表
    this.zkhousePage();
  },
  methods: {
    downLoad(){
      // this.searchForm
      exportMethodPost('autoSR/customer/customerManagementExport','客户管理',this.searchForm)
    },
    // 跳转接待详情
    Receivedetailsabout(row){
      this.$api.http.findByCusIdcusId({cusId:row.id}).then((res) => {
        if(res.data.length==0){
          this.$message({
            message: '无录音',
            type: 'warning'
          });
        }else{
            this.$router.push({
              path: "/Receive/index",
              query: { flag: row.id ,AudioIdx:0},
            });
        }
      })
    },
    // 转交
    tranfser(row){
      console.log(row);
    },
    // 接待记录列表
    findbypage() {
      let obj = {
        current: this.currentPage,
        size: this.size,
        ...this.searchForm,
      };
      obj.keywordIds = obj.keywordsId.join(",");
      (obj.dateType = this.searchForm.staDate
        ? null
        : this.searchForm.dateType),
        this.$api.api.customerManagement(obj).then((res) => {
          // console.log(res)
          this.tableData = res.data.records;
          this.total = res.data.total;
        });
    },
    clearScreen() {
      this.currentPage = 1;
      this.searchForm = {
        name: "",
        keywordsId: [],
        markAdvisor: null,
        level: "",
        recDurationInterval: "",
        visitRecord: "",
        staDate: "",
        endDate: "",
        dateType:null,
        searchForm: "",
        timeType: "0",
        projectId:this.orgType==3? localStorage.getItem('houseId'):this.houseList[0].id,
      };
      this.findbypage();
    },
    houseChange() {
      this.findbypage();
      this.findKeywords();
      // 获取置业顾问列表
      this.findUserListByHouseId();
      this.getclientStage()
    },
    getclientStage() {
      let obj = {
        houseId: this.searchForm.projectId,
      };
      this.$api.api.lifeTrackDefineList(obj).then((res) => {
        this.clientStagelist = res.data;
      });
    },


    timeChange(e) {
      this.searchForm.dateType=null
      this.searchForm.staDate = e[0];
      this.searchForm.endDate = e[1];
      this.houseChange();
    },
    screen() {
      this.currentPage = 1;
      this.findbypage();
    },
    findKeywords() {
      this.$api.api
        .findKeywords({
          dateType: this.searchForm.staDate ? null : this.searchForm.dateType,
          statDateStart: this.searchForm.staDate,
          statDateEnd: this.searchForm.endDate,
          projectId: this.searchForm.projectId,
          type: this.type,
        })
        .then((res) => {
          this.keywordsList = res.data;
        });
    },
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          this.houseList = res.data;
          if(localStorage.getItem('orgType')==3){
            this.searchForm.projectId=localStorage.getItem('houseId')
          }else{
            this.searchForm.projectId = res.data[0].id;
          }
          this.houseChange();
        });
    },
    // 置业顾问列表
    async findUserListByHouseId() {
      let result = await this.$api.api.findUserListByHouseId({
        orgType: localStorage.getItem("orgType"),
        projectId: this.searchForm.projectId,
      });
      this.accountList = result.data;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.findbypage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.findbypage();
    },
    tabtimetap(idx) {
      this.searchForm.staDate = "";
      this.searchForm.endDate = "";
      // this.$set(this, "time", null);
      this.searchForm.dateType = idx;
    this.houseChange();
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var yyyy = date.getFullYear() + "-";

      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";

      // var dd = date.getDate() + ' ';
      var dd =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      return yyyy + MM + dd;
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 98%;
  margin: 0 auto;
  margin-top: 6px;
  padding: 16px;
  min-width: 1000px;
  padding-bottom: 20px;
  background: #ffffff;
  border-radius:4px;
  font-size: 14px;
}
.booxtop{
  width: 100%;
  padding-bottom: 20px;
  background: #F7F8FA;
  border-radius: 2px;
  margin-top: 0px;
  padding-right: 20px;
  .app-topbox {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .div-labox{
      margin-right: 40px;
      margin-top: 20px;
      height: 32px;
      display: flex;
      align-items: center;
      .labeltext{
        min-width: 85px;
        text-align: right;
        line-height: 32px;
      }
      .div-inpbox{
        width: 220px;
      }
      .toptimeqhuan {
        height: 30px;
        display: flex;
        align-items: center;
        margin-left: 20px;
      }
      .toptimeqhuan div {
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        margin-right: 15px;
        border-radius: 4px;
        border: 1px solid #e0e0e0;
      }
            .toptimeqhuan .btn {
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
        // line-height: 30px;
        font-size: 14px;
        margin-right: 15px;
        border-radius: 4px;
        border: 1px solid #e0e0e0;
      }
    }
  }
}
.cen-tab {
  width: 100%;
  padding: 15px;
  margin-top: 15px;
}
.tophove {
  color: #ffffff;
  background: #2671e2;
}


</style>
