<template>
  <div>
    <div v-show="currentPage == 'chaxun'">
      <div v-show="!showedFuncPanel">
        <div class="m-info">
          <div class="wrap">
            <div class="search">
              <div class="input">
                <el-dropdown
                  class="select"
                  placement="bottom"
                  v-model="searchData.type"
                  @command="(type) => (searchData.type = type)"
                >
                  <span class="select-show">
                    {{ { fangwu: "房屋" }[searchData.type]
                    }}
                  </span>
                </el-dropdown>

                <input
                  type="text"
                  :placeholder="typePlaceholder[searchData.type]"
                  v-model="searchData.keyword"
                  @keyup.enter="handleClickSearchBtn"
                />

                <div
                  class="close-btn"
                  v-if="searchData.keyword != ''"
                  @click="searchData.keyword = ''"
                >
                  <img src="@/assets/img/shequ/close.png" />
                </div>
              </div>
              <div class="btn" @click="handleClickSearchBtn">搜索</div>
            </div>

            <div
              class="m-tb"
              v-if="
                searchData.type == 'fangwu' &&
                searchData.keyword != '' &&
                searchStatus == 'ing'
              "
            >
              <div class="tb">
                <el-table
                  :data="searchFangwu.list"
                  v-loading="searchFangwu.loading"
                  border
                  :max-height="1000"
                  style="width: 100%"
                >
                  <el-table-column
                    label="序号"
                    type="index"
                    align="center"
                    width="50"
                  />
                  <el-table-column
                    prop="houseName"
                    label="房屋名称"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="neighborHoodName"
                    label="所属小区"
                    width="160"
                  >
                  </el-table-column>
                  <el-table-column prop="buildingName" label="所属楼栋">
                  </el-table-column>
                  <el-table-column prop="unitNum" label="单元号">
                  </el-table-column>
                  <el-table-column prop="doorName" label="门牌号">
                  </el-table-column>
                  <el-table-column prop="houseType" label="类型">
                  </el-table-column>
                  <el-table-column prop="purpose" label="用途">
                  </el-table-column>
                  <el-table-column prop="rentFlag" label="房屋状态">
                  </el-table-column>
                  <el-table-column prop="ownerName" label="房主姓名">
                  </el-table-column>
                  <el-table-column
                    prop="ownerPhone"
                    label="房主电话"
                    width="110"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="ownerIdCard"
                    label="身份证"
                    width="170"
                  >
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    fixed="right"
                    header-align="center"
                    align="center"
                    class="operate"
                    width="170"
                  >
                    <template slot-scope="scope">
                      <el-button
                        type="text"
                        style="color: #1c6afd; text-decoration: underline"
                        size="small"
                        @click="handleWatchSearchFangwu(scope.row)"
                        >查看</el-button
                      >
                      <el-button
                        type="text"
                        style="color: #1c6afd; text-decoration: underline"
                        size="small"
                        @click="checkFangwu(scope.row)"
                        >绑定房屋</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <div>
                  <el-pagination
                    @size-change="handleSizeChangeSearchFangwu"
                    @current-change="handleCurrentChangeSearchFangwu"
                    :current-page.sync="searchFangwu.pageNo"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="parseInt(searchFangwu.pageSize)"
                    layout="sizes, prev, pager, next"
                    :total="searchFangwu.total"
                  >
                  </el-pagination>
                </div>
              </div>
            </div>

            <div
              class="m-tb"
              v-if="
                searchData.type == 'xuqiu' &&
                searchData.keyword != '' &&
                searchStatus == 'ing'
              "
            >
              <div class="tb"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="binding-house">
      <span>绑定房屋:</span>
      <span>{{houseName}}</span>
    </div> -->
    <people-more
      v-if="showedPeopleMoreInfo && currentPepeleId"
      :userId="currentPepeleId"
      :gridName="currentPepeleGridName"
      @close="showedPeopleMoreInfo = false"
    />

    <!-- 修改弹出框 -->
    <el-dialog
      :visible.sync="showedFangwuInfo"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="房屋详情"
      width="900px"
      :modal="false"
      @closed="showedFangwuInfo = false"
    >
      <fangwu-info
        ref="fangwu_info"
        @dialogCancle="showedFangwuInfo = false"
      ></fangwu-info>
    </el-dialog>

    <!-- 修改弹出框 -->
    <el-dialog
      :visible.sync="showedXuqiuInfo"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="需求详情"
      width="900px"
      @closed="showedXuqiuInfo = false"
    >
      <xuqiu-info
        ref="xuqiu_info"
        @dialogCancle="showedXuqiuInfo = false"
      ></xuqiu-info>
    </el-dialog>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import barChart from "@/views/modules/shequ/cpts/bar-chart";
import warningList from "@/views/modules/warning/index";
import { mapGetters } from "vuex";
import nextTick from "dai-js/tools/nextTick";
import peopleMore from "@/views/modules/shequ/cpts/people-more";
import fangwuInfo from "@/views/modules/shequ/cpts/fangwu-info";
import xuqiuInfo from "@/views/modules/shequ/cpts/xuqiu-info";
import scrollNotice from "@/views/modules/shequ/cpts/scroll-notice";

export default {
  components: {
    barChart,
    peopleMore,
    fangwuInfo,
    xuqiuInfo,
    warningList,
    scrollNotice,
  },

  data() {
    return {
      searchStatus: "ini", //ing over
      searchData: {
        type: "fangwu",
        keyword: "",
      },

      typePlaceholder: {
        jumin: "请输入姓名或电话或身份证号",
        fangwu: "请输入“小区名称，楼号”，如：亿联小区，1号楼",
        xuqiu: "请输入需求人或需求内容或服务方",
      },

      selectedFuncIdList: [],

      funcList: [
        // {
        //   url: '',
        //   menuId: '',
        //   menuName: '',
        //   icon: '',
        // }
      ],

      showedFuncPanel: false,

      warningChart: {
        loading: false,
        total: "",
        list: [],
      },

      warningTb: {
        pageNo: 1,
        pageSize: window.localStorage.getItem("pageSize") || 20,
        total: 1,
        list: [],
      },

      searchJumin: {
        header: [],
        pageNo: 1,
        pageSize: window.localStorage.getItem("pageSize") || 20,
        total: 1,
        list: [],
      },

      searchFangwu: {
        pageNo: 1,
        pageSize: window.localStorage.getItem("pageSize") || 20,
        total: 1,
        list: [],
      },

      searchXuqiu: {
        header: [
          {
            label: "状态",
            align: "center",
            columnName: "statusName",
            width: "120",
            options: [
              {
                label: "待处理",
                value: "pending",
              },
              {
                label: "已取消",
                value: "canceled",
              },
              {
                label: "已派单",
                value: "assigned",
              },
              {
                label: "已接单",
                value: "have_order",
              },
              {
                label: "已完成",
                value: "finished",
              },
            ],
          },
          {
            label: "所属网格",
            columnName: "gridName",
            align: "center",
            width: "",
            options: [],
          },
          {
            label: "需求类型",
            columnName: "categoryName",
            align: "center",
            width: "",
            options: [],
          },
          {
            label: "需求内容",
            columnName: "content",
            align: "center",
            width: "",
            options: [],
          },
          {
            label: "上报类型",
            columnName: "reportTypeName",
            align: "center",
            width: "120",
            options: [
              {
                label: "社区帮办",
                value: "community",
              },
              {
                label: "楼长帮办",
                value: "building_caption",
              },
              {
                label: "党员帮办",
                value: "party",
              },
              {
                label: "自身上报",
                value: "self_help",
              },
            ],
          },
          {
            label: "上报人",
            columnName: "reportUserName",
            align: "center",
            width: "120",
            options: [],
          },
          {
            label: "上报时间",
            columnName: "reportTime",
            align: "center",
            width: "180",
            options: [],
          },
          {
            label: "需求人",
            columnName: "demandUserName",
            align: "center",
            width: "80",
            options: [],
          },
          {
            label: "服务方",
            columnName: "serviceShowName",
            align: "center",
            width: "120",
            options: [],
          },
          {
            label: "服务时间",
            columnName: "wantServiceTime",
            align: "center",
            width: "180",
            options: [],
          },
        ],
        pageNo: 1,
        pageSize: window.localStorage.getItem("pageSize") || 20,
        total: 1,
        list: [],
      },

      // 显示人员详情
      showedPeopleMoreInfo: false,

      currentPepeleId: "",
      currentPepeleGridName: "",

      // 显示人员详情
      showedFangwuInfo: false,
      showedXuqiuInfo: false,

      noticeList: [
        // {
        //   configId: "20211210153859_f070ac2dd01129da5d9a9f2329fbd9ea1",
        //   noticeContent: "市北区-抚顺第二网格中南国际2号楼低保人员超出预警!",
        // },
      ],

      currentCategoryCode: "",

      currentPage: "chaxun", //查询 预警
      currentNoticeBuildingId: "",
      currentNoticeConfigId: "",
      houseName: null,
      bindingForm: {
        idCard: null,
        homeId: null,
      },
    };
  },
  computed: {
    selectedFuncList() {
      const {
        selectedFuncIdList,
        $store: {
          state: { sidebarMenuList },
        },
      } = this;
      let obj = {};
      sidebarMenuList.forEach((menu) => {
        if (selectedFuncIdList.indexOf(menu.id) !== -1) {
          obj[menu.id] = {
            menuId: menu.id,
            menuName: menu.name,
            icon: menu.icon,
            url: menu.url,
          };
        }
        if (menu.children && menu.children.length > 0) {
          menu.children.forEach((item) => {
            if (selectedFuncIdList.indexOf(item.id) !== -1) {
              obj[item.id] = {
                menuId: item.id,
                menuName: item.name,
                icon: item.icon,
                url: item.url,
              };
            }
          });
        }
      });
      return selectedFuncIdList.map((id) => obj[id]);
    },
    maxTableHeight() {
      // return this.clientHeight - 450;
      return 420;
    },
    ...mapGetters(["clientHeight"]),
  },
  watch: {
    "searchData.keyword": function (val) {
      if (val == "") {
        this.searchStatus = "ini";
      }
    },
  },
  props: {
    bindHouse: {
      type: Object,
      default: {},
    },
  },
  mounted() {
    this.getApiData();
    console.log(
      "dynamicMenuRoutes----------------------------",
      this.$store.state.sidebarMenuList
    );
    this.bindingForm.idCard = this.bindHouse.idCard;
  },
  methods: {
    // 选择房屋
    checkFangwu(val) {
      console.log(val);
      this.bindingForm.homeId = val.houseId;
      this.$confirm("确定绑定此房屋?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(async () => {
          const url = "/epmetuser/icresiuser/bindHome";
          const { bindingForm } = this;
          const res = await requestPost(url, bindingForm);
          if (res.code === 0) {
            this.$message.success('房屋绑定成功')
            this.$emit("closeBindHouse");
          }else{
            this.$message.error(res.msg)
          }
        })
        .catch(() => {});
    },
    changeCategoryCode({ code }) {
      this.currentCategoryCode = code || "";

      this.warningTb.pageNo = 1;
      this.getWarningTb();
    },

    computedWidth(label) {
      const wd = 20 * label.length;
      return wd > 80 ? wd : 80;
    },
    handleFilterSpan(row, item) {
      let _val = "";
      if (item.options && item.options.length > 0) {
        item.options.forEach((n) => {
          if (n.value === row[item.columnName]) _val = n.label;
        });
      }
      return _val || row[item.columnName];
    },

    handleClickSearchBtn() {
      const {
        searchData: { type, keyword },
      } = this;
      if (!keyword) return this.$message.error("请输入搜索条件");
      if (type == "fangwu") {
        this.searchFangwu.pageNo = 1;
        this.searchFangwu.total = 0;
        this.getSearchFangwu();
      }
      this.searchStatus = "ing";
    },

    handleSizeChangeWarning(val) {
      console.log(`每页 ${val} 条`);
      this.warningTb.pageSize = val;
      window.localStorage.setItem("pageSize", val);
      this.getWarningTb();
    },
    handleCurrentChangeWarning(val) {
      console.log(`当前页: ${val}`);
      this.warningTb.pageNo = val;
      this.getWarningTb();
    },
    async handleWatchWarning(rowIndex) {
      let item = this.warningTb.list[rowIndex];
      this.currentPepeleId = item.userId;
      this.currentPepeleGridName = item.gridName;
      await nextTick();
      this.showedPeopleMoreInfo = true;
    },

    async handleWatchSearchJumin(rowIndex) {
      let item = this.searchJumin.list[rowIndex];
      this.currentPepeleId = item.icResiUserId;
      this.currentPepeleGridName = item.GRID_ID;
      await nextTick();
      this.showedPeopleMoreInfo = true;
    },

    handleSizeChangeSearchFangwu(val) {
      console.log(`每页 ${val} 条`);
      this.searchFangwu.pageSize = val;
      window.localStorage.setItem("pageSize", val);
      this.getSearchFangwu();
    },
    handleCurrentChangeSearchFangwu(val) {
      console.log(`当前页: ${val}`);
      this.searchFangwu.pageNo = val;
      this.getSearchFangwu();
    },
    async handleWatchSearchFangwu(row) {
      this.showedFangwuInfo = true;
      await nextTick();
      this.$refs.fangwu_info.initForm("detail", row);
    },

    getApiData() {
      this.getWarningTb();
    },

    async getSearchFangwu() {
      const url = "/gov/org/house/search";
      const {
        searchData: { keyword },
        searchFangwu: { pageSize, pageNo },
      } = this;
      const { data, code, msg } = await requestPost(url, {
        keyword,
        pageSize,
        pageNo,
      });
      if (code === 0) {
        console.log("列表请求成功！！！！！！！！！！！！！！");
        this.searchFangwu.total = data.total || 0;
        this.searchFangwu.list = data.list
          ? data.list.map((item) => {
              return item;
            })
          : [];
      } else {
      }
    },

    async getWarningTb() {
      const url = "/epmetuser/icresiuser/personwarn/rightlist";
      const {
        warningTb: { pageSize, pageNo },
      } = this;
      const { data, code, msg } = await requestPost(url, {
        pageSize,
        pageNo,
        categoryCode: this.currentCategoryCode,
      });
      if (code === 0) {
        console.log("列表请求成功！！！！！！！！！！！！！！");
        this.warningTb.total = data.total || 0;
        this.warningTb.list = data.list
          ? data.list.map((item) => {
              item.typeName = item.type.join("、");
              return item;
            })
          : [];
      } else {
      }
    },
  },
};
</script>

<style lang="scss" src="@/assets/scss/modules/search.scss" scoped></style>
<style lang="scss" scoped>
.logo {
  font-size: 35px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 3px;
}
.binding-house {
  margin: 0 100px 50px;
  span {
    font-size: 20px;
  }
}
</style>
