<template>
  <div class="box-center">
    <!-- 头 -->
    <div class="app-top">
      <div class="app-titel" v-if="orgType!=3">
        <div
          class="label"
          style="color: #32363d; font-weight: 400; font-size: 16px"
        >
          楼盘选择：
        </div>
        <div>
          <el-select
            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>
      <div class="app-titel" style="margin-top: 15px">
        <div class="label" style="margin-left: 20px">时间：</div>
        <div class="toptimeqhuan">
          <div
            :class="{ tophove: searchForm.dateType == 0 }"
            @click="tabtimetap(0)"
          >
            今日
          </div>
          <div
            :class="{ tophove: searchForm.dateType == 1 }"
            @click="tabtimetap(1)"
          >
            昨日
          </div>
          <div
            :class="{ tophove: searchForm.dateType == 2 }"
            @click="tabtimetap(2)"
          >
            近七天
          </div>
        </div>
        <div>
          <el-date-picker
            v-model="time"
            type="daterange"
            class="div-inp"
            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-titel" style="margin-top: 15px">
        <div class="div-lab">
          <div class="label">客户名称：</div>
          <el-input class="div-inp" v-model="searchForm.name"></el-input>
        </div>

        <div class="div-lab">
          <div class="label">客户意向：</div>
          <el-select
            class="div-inp"
            multiple
            clearable
            collapse-tags
            v-model="searchForm.keywordsId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in keywordsList"
              :key="item.keywordsId"
              :label="item.name"
              :value="item.keywordsId"
            >
            </el-option>
          </el-select>
        </div>

        <div class="div-lab">
          <div class="label">录音类型：</div>
          <el-select
            v-model="searchForm.recording"
            clearable
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in recordingList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="div-lab">
          <div class="label">置业顾问：</div>
          <el-select
            v-model="searchForm.accountId"
            clearable
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in accountList"
              :key="item.accountId"
              :label="item.name"
              :value="item.accountId"
            >
            </el-option>
          </el-select>
        </div>

        <div class="div-lab">
          <!-- 默认全部 -->
          <div class="label">标记客户：</div>
          <el-select
            v-model="searchForm.markAdvisor"
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in options5"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="div-lab">
          <div class="label">接待时长：</div>
          <el-select
            clearable
            v-model="searchForm.recDurationInterval"
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="div-lab">
          <div class="label">到访次数：</div>
          <el-select
            v-model="searchForm.visitRecord"
            clearable
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in options4"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="app-titel" style="margin-top: 15px"></div>

      <div class="app-titel" style="margin-top: 15px">
        <!-- <div class="label" style="color: #ffffff">筛选相关：</div> -->
        <div style="margin-left: 20px">
          <el-button style="background: #2671e2; color: #ffffff" @click="screen"
            >筛选</el-button
          >
        </div>
        <div style="margin-left: 20px">
          <el-button @click="clearScreen">清空筛选条件</el-button>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="cen-tab">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column
          prop="staTime"
          label="接待开始时间"
          align="center"
          width="200"
        >
        </el-table-column>
        <el-table-column prop="agentName" label="顾问" align="center">
        </el-table-column>
        <el-table-column prop="name" label="客户" align="center">
        </el-table-column>

        <el-table-column prop="mm" label="录音时长" align="center">
        </el-table-column>
        <el-table-column prop="recording" label="录音类型" align="center">
          <template slot-scope="{ row }">
            {{
              row.recording == 0
                ? "没有录音"
                : row.recording == 1
                ? "部分录音"
                : "完整录音"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="markAdvisor" label="标记客户" align="center">
          <template slot-scope="{ row }">
            {{ row.markAdvisor == 0 ? "已标记" : "未标记" }}
          </template>
        </el-table-column>

        <el-table-column prop="total" 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="address" label="禁忌执行率" align="center">
        </el-table-column> -->
        <!--  scope -->
        <el-table-column label="操作" align="center" width="200" fixed="right">
          <template slot-scope="{ row }">
            <el-button type="text">查看</el-button>
            <el-button type="text">下载文本</el-button>
            <el-button type="text">下载录音</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, 20, 30, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      TimetoAhoose: 2,
      time: [],
      houseList: [],
      orgType:localStorage.getItem('orgType'),
      options: [],
      keywordsList: [],
      accountList: [],
      recordingList: [
        {
          value: "0",
          label: "没有录音",
        },
        {
          value: "1",
          label: "部分录音",
        },
        {
          value: "2",
          label: "完整录音",
        },
      ],
      options3: [
        {
          value: "1",
          label: "0-15分钟",
        },
        {
          value: "2",
          label: "16-30分钟",
        },
        {
          value: "3",
          label: "31-60分钟",
        },
        {
          value: "4",
          label: "61-90分钟",
        },
        {
          value: "5",
          label: "90分钟以上",
        },
      ],
      options4: [
        {
          value: "1",
          label: "首次到访",
        },
        {
          value: "2",
          label: "2次到访",
        },
        {
          value: "3",
          label: "3次到访",
        },
        {
          value: "4",
          label: "三次以上",
        },
      ],
      options5: [
        {
          value: null,
          label: "全部",
        },
        {
          value: "1",
          label: "已标注",
        },
        {
          value: "2",
          label: "未标注",
        },
      ],
      currentPage: 1,
      size: 10,
      total: 10,
      value: "",
      input: "",
      tableData: [],
      tophove: "",
      type: "0",
      searchForm: {
        name: "",
        keywordsId: [],
        recording: "",
        markAdvisor: null,
        recDurationInterval: "",
        visitRecord: "",
        staDate: "",
        endDate: "",
        houseType: "",
        dateType: "0",
        projectId: "",
      },
    };
  },
  mounted() {
    this.tabtimetap(0);
    // 获取楼盘列表
    this.zkhousePage();
  },
  methods: {
    // 接待记录列表
    findbypage() {
      let obj = {
        current: this.currentPage,
        size: this.size,
        type: 1,
        ...this.searchForm,
      };
      obj.keywordIds = obj.keywordsId.join(",");
      (obj.dateType = this.searchForm.staDate
        ? null
        : this.searchForm.dateType),
        this.$api.api.findbypage(obj).then((res) => {
          // console.log(res)
          this.tableData = res.data.records;
          this.total = res.data.total;
        });
    },
    clearScreen() {
      this.currentPage = 1;
      this.searchForm = {
        name: "",
        keywordsId: [],
        recording: "",
        markAdvisor: null,
        recDurationInterval: "",
        visitRecord: "",
        staDate: "",
        endDate: "",
        houseType: "",
        dateType: "0",
        // projectId: this.houseList[0].id,
        projectId:
          this.orgType == 3
            ? localStorage.getItem("houseId")
            : this.houseList[0].id,
      };
      this.findbypage();
    },
    houseChange() {
      this.findbypage();
      this.findKeywords();
      // 获取置业顾问列表
      this.findUserListByHouseId();
    },
    timeChange(e) {
      this.searchForm.staDate = e[0];
      this.searchForm.endDate = e[1];
      this.houseChange();
    },
    screen() {
      this.currentPage = 1;
      console.log(this.searchForm);
      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) => {
          console.log(res);
          this.keywordsList = res.data;
        });
    },
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          // console.log(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.searchForm.projectId = res.data[0].id;
          // 获取接待记录列表
          this.findbypage();
          // 获取客户意向
          this.findKeywords();
          // 获取置业顾问列表
          this.findUserListByHouseId();
        });
    },
    // 置业顾问列表
    async findUserListByHouseId() {
      let result = await this.$api.api.findUserListByHouseId({
        orgType: localStorage.getItem("orgType"),
        projectId: this.searchForm.projectId,
      });
      console.log(result);
      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;
      let num = 24 * 3600 * 1000;
      //	获取当前时间戳转换为日期格式
      if (idx == 0) {
        num = 24 * 3600 * 1000 * 0;
      }
      if (idx == 1) {
        num = 24 * 3600 * 1000 * 1;
      }
      if (idx == 2) {
        num = 24 * 3600 * 1000 * 7;
      }

      this.time = [
        this.timestampToTime(new Date().getTime() - num),
        this.timestampToTime(new Date().getTime()),
      ];
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      // var  date = new Date(timestamp * 1000);//时间戳为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()) + " ";

      // var HH = date.getHours() + ':';
      // var HH = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':';
      //
      // // var mm = date.getMinutes() + ':';
      // var mm = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':';
      //
      // // var ss = date.getSeconds();
      // var ss = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds());

      // return yyyy+MM+dd+HH+mm+ss;
      return yyyy + MM + dd;
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1200px;
  padding-bottom: 100px;
}
.cen-tab {
  width: 100%;
  padding: 15px;
  background: #ffffff;
  margin-top: 15px;
}
.tophove {
  color: #ffffff;
  background: #2671e2;
}
.app-top {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;
  .app-titel {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .label {
      font-size: 14px;
      font-weight: 400;
      color: #32363d;
      line-height: 32px;
      margin-left: 15px;
      min-width: 100px;
    }
    .toptimeqhuan {
      height: 30px;
      background: #ffffff;
      display: flex;
      align-items: center;
    }
    .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;
    }
  }
}
.div-lab {
  display: flex;
  margin: 5px;
}
.div-inp {
  width: 250px;
}
</style>
