<template>
  <div>
    <!-- 标题 -->
    <el-row>
      <el-col
        :span="24"
        class="first-row"
      >
        <div class="tag">旅游人数预警</div>
      </el-col>
    </el-row>

    <div style="margin: 20px 0;"></div>
    <hr style="background-color: #CCCCCC;height: 1px;border: 0;">

    <!-- 景点列表 -->
    <el-row>
      <el-col
        v-for="item in list"
        :key="item.id"
        :span="8"
        style="marginTop: 32px;lineHeight:100%"
      >
        <el-col :span="12">
          <span>{{item.place_index}}、{{item.place_name}}</span>
        </el-col>

        <el-input
          class="input-new-tag"
          v-if="item.show"
          v-model="inputValue"
          v-fo
          size="small"
          @blur="handleInputConfirm(item)"
        >
        </el-input>
        <el-button
          v-else
          class="button-new-tag"
          size="small"
          @click="showInput(item)"
        >{{item.maxnum}}</el-button>
        人

      </el-col>
    </el-row>

    <div style="margin: 40px 0;"></div>

    <!-- 分页器 -->
    <el-row>

      <div class="pagination_smoke">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="totalCount"
          :page-size="pageSize"
          :current-page.sync="curPage"
          @current-change="changeCurPage"
        >
        </el-pagination>
      </div>

    </el-row>

  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      inputValue: "", // 输入框绑定数据
      list: [], // 景点列表
      form: {
        place_name: "", // 景点名称
        maxnum: "", // 最大容量 单位：人
      },
      curPage: 1, // 当前页
      pageSize: 21, // 每页记录数
      totalCount: null, // 总条数
      // place_name: "", // 景点选择框绑定数据
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取乡镇列表列表数据
    async getData() {
      let res = await this.$axios.post("/bigData2/tourqueryTourPlace.action");
      // console.log(res);
      if (res.status == 200) {
        let newArr = [];
        res.data.data.forEach((element, index) => {
          newArr.push({
            id: element.id,
            maxnum: element.maxnum,
            place_name: element.place_name,
            show: false,
            place_index: index + 1,
          });
        });
        if (this.curPage == 1) {
          this.totalCount = newArr.length;
          this.list = newArr.splice(0, 21);
        } else {
          this.totalCount = newArr.length;
          this.list = newArr.splice(21, 15);
        }
      } else {
        console.log("获取 活动策划列表数据 失败");
      }
    },

    // 修改景点数据
    async amendPlaceNum() {
      let res = await this.$axios({
        url: "/bigData2/tourupdateMaxt.action",
        method: "post",
        params: this.form,
        // headers: {
        //   "Admin-Token": sessionStorage.getItem("token"),
        // },
      });
      // console.log(res);
      if (res.data.statusCode == 200) {
        this.$message({
          showClose: true,
          message: "修改成功",
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: "修改失败",
          type: "error",
        });
      }
      this.getData();
    },

    // 点击按钮 切换输入框 并聚焦
    showInput(i) {
      i.show = true;
    },
    // 失去焦点或者回车 切换回按钮框 并更新数据
    handleInputConfirm(i) {
      i.maxnum = this.inputValue;
      this.form.place_name = i.place_name;
      this.form.maxnum = i.maxnum;
      i.show = false;
      this.amendPlaceNum();
      this.inputValue = "";
    },
    // 换页逻辑
    changeCurPage(val) {
      // console.log(`当前页: ${val}`);
      this.curPage = val;
      this.getData();
    },
  },
};
</script>

<style scoped>
.first-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}
.tag {
  width: 208px;
  height: 40px;
  font-size: 24px;
  font-family: Microsoft YaHei-3970(82674968);
  font-weight: bold;
  color: #000000;
  line-height: 54px;
}
.input-new-tag {
  margin-right: 10px;
  width: 90px;
  vertical-align: middle;
}
.button-new-tag {
  margin-right: 10px;
  width: 90px;
  height: 32px;
  vertical-align: middle;
}
.pagination_smoke {
  position: absolute;
  top: 60px;
  left: 565px;
}
</style>