<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 style="margin-left: 8px">
          <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: 1em">
        <div class="label">接待时间：</div>
        <div class="toptimeqhuan">
          <div
            v-for="(data, index) in timeToAhouseList"
            :key="index"
            :class="{ tophove: TimetoAhoose == data.id }"
            @click="tabtimetap(data.id)"
          >
            {{ data.title }}
          </div>
        </div>
        <div style="margin-left: 26px">
          <el-date-picker
            @change="confirmtime"
            v-model="customtime"
            type="daterange"
            range-separator="-"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </div>

      <!-- 违禁标识 -->
      <div class="app-titel" style="margin-top: 1em">
        <div class="div-lab">
          <div class="label">违禁标识：</div>
          <el-select
            clearable
            filterable
            v-model="searchForm.tag"
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in prohibitedSignsList"
              :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
            filterable
            v-model="searchForm.status"
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in processingStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="div-lab">
          <div class="label">置业顾问：</div>
          <div>
            <el-input
              maxlength="10"
              clearable
              v-model="searchForm.name"
            ></el-input>
          </div>
        </div>
      </div>

      <!-- 筛选 -->
      <div class="app-titel" style="margin-top: 1em; padding-left: 100px">
        <el-button type="primary">筛选</el-button>
        <el-link style="margin-left: 1em" :underline="false" type="primary"
          >清空筛选条件</el-link
        >
      </div>
    </div>

    <!-- 表格 -->
    <div class="cen-tab">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="batchId" label="序号" width="70" align="center">
          <template slot-scope="scope">
            <span> {{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="houseName" label="接待编号" align="center">
        </el-table-column>
        <el-table-column
          prop="accountNum"
          label="接待开始时间"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="receptionCount"
          label="顾问"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="activeCustomer"
          label="客户"
          align="center">
        </el-table-column>
        <el-table-column
          prop="prohibitedCustomer"
          label="违禁命中"
          align="center"
          width="140"
        >
        </el-table-column>
        <el-table-column
          prop="sumDuration"
          label="处理状态"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.sumDuration }}
          </template>
        </el-table-column>
        <el-table-column
          prop="fraction"
          label="处理人"
          align="center"
          width="110"
        >
        </el-table-column>
        <el-table-column
          prop="prohibitedZb"
          label="违禁标识"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="addtodigestCount"
          label="无效原因"
          align="center"
          width="140"
        ></el-table-column>
        
        <el-table-column label="操作" align="center" width="100">
          <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="page"
          :page-sizes="[10, 30, 50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      houseList: [], // 可切换的项目列表
      orgType: localStorage.getItem("orgType"), // 组织类型
      prohibitedSignsList: [
        // 违禁标识
        {
          label: "全部",
          value: 0,
        },
        {
          label: "有效违禁",
          value: 1,
        },
        {
          label: "无效违禁",
          value: 2,
        },
      ],
      processingStatusList: [
        // 违禁处理状态
        {
          label: "全部",
          value: "",
        },
        {
          label: "待处理",
          value: "1",
        },
        {
          label: "已处理",
          value: "2",
        },
      ],

      searchForm: {
        projectId: "",
        tag: "", // 选中违禁标识id （暂时使用）
        status: "", // 处理状态筛选id （暂时使用）
        name: "", // 置业顾问名称 （暂时使用）
      },

      timeToAhouseList: [
        // 筛选时间数组
        {
          title: "近7天",
          id: 4,
        },
        {
          title: "近15天",
          id: 5,
        },
        {
          title: "近30天",
          id: 6,
        },
      ],

      TimetoAhoose: 4, // 选中时间的下表

      customtime: [], // 自定义时间选择数据

      tableData: [], // 表格数据
    };
  },

  created() {
    this.zkhousePage();

    if (this.$route.query.date) {
      this.time = this.$route.query.date.split(",");
      this.searchForm.staDate = this.time[0];
      this.searchForm.endDate = this.time[1];
      console.log("时间");
    }
  },

  methods: {
    // 重置入参
    resetParams() {
      // this.searchForm
    },

    // 获取可以选择的项目
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: this.orgType,
        })
        .then((res) => {
          // console.log(res)
          this.houseList = res.data;
          if (this.orgType == 3) {
            this.searchForm.projectId = localStorage.getItem("houseId");
          } else {
            this.searchForm.projectId = res.data[0].id;
          }
          this.houseChange();
        });
    },

    // 项目选择改变的时候
    houseChange() {},

    // 固定类型时间选择
    tabtimetap(index) {},

    // 自定义时间选择
    confirmtime() {},
  },
};
</script>

<style lang="scss" scoped>
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1000px;
  padding-bottom: 100px;

  .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;
        text-align: right;
      }

      .toptimeqhuan {
        height: 30px;
        background: #ffffff;
        display: flex;
        align-items: center;

        div {
          padding-left: 20px;
          padding-right: 20px;
          text-align: center;
          line-height: 30px;
          font-size: 14px;
          border-radius: 4px;
          border: 1px solid #e0e0e0;
        }
        .btn {
          padding-left: 20px;
          padding-right: 20px;
          text-align: center;
          font-size: 14px;
          margin-right: 15px;
          border-radius: 4px;
          border: 1px solid #e0e0e0;
        }
      }

      .div-lab {
        display: flex;
        margin: 5px;
      }
    }
  }

  .cen-tab {
    width: 100%;
    padding: 15px;
    background: #ffffff;
    margin-top: 15px;
  }

  .tophove {
    color: #ffffff;
    background: #409eff;
    border-color: #409eff;
  }

  .div-inp {
    width: 250px;
  }
}
</style>
