<template>
  <div>

    <!-- 标题 -->
    <el-row>
      <el-col
        :span="24"
        class="first-row"
      >
        <div class="tag">人次系数</div>
      </el-col>
    </el-row>

    <!-- 分割线 -->
    <hr style="background-color: #CCCCCC;height: 1px;border: 0;">

    <!-- 主体内容 -->
    <el-tabs>
      <!-- 基础系数区域 -->
      <el-tab-pane label="基础系数">
        <el-row>
          <el-col
            v-for="item in list"
            :key="item.id"
            :span="9"
            style="marginTop: 32px"
          >
            <el-col :span="8">
              <span>{{item.id-1}}、{{item.xs_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.xs2}}</el-button>

          </el-col>
        </el-row>
      </el-tab-pane>

      <!-- 过夜游客区域 -->
      <el-tab-pane label="过夜游客各乡镇基数">
        <el-row>

          <el-col
            :span="8"
            style="marginTop: 32px;lineHeight:100%"
          >
            <el-col :span="12">
              <span>1、双溪镇</span>
            </el-col>

            <el-input
              class="input-new-tag"
              v-if="show"
              v-model="inputValue_place"
              v-fo
              size="small"
              @blur="handleInputConfirm_place(1)"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput_place(1)"
            >{{placeInfo.xs}}</el-button>
          </el-col>

          <el-col
            :span="8"
            style="marginTop: 32px;lineHeight:100%"
          >
            <el-col :span="12">
              <span>2、香田乡</span>
            </el-col>

            <el-input
              class="input-new-tag"
              v-if="show2"
              v-model="inputValue_place"
              v-fo
              size="small"
              @blur="handleInputConfirm_place(2)"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput_place(2)"
            >{{placeInfo.xs2}}</el-button>
          </el-col>

          <el-col
            :span="8"
            style="marginTop: 32px;lineHeight:100%"
          >
            <el-col :span="12">
              <span>3、宝峰镇</span>
            </el-col>

            <el-input
              class="input-new-tag"
              v-if="show3"
              v-model="inputValue_place"
              v-fo
              size="small"
              @blur="handleInputConfirm_place(3)"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput_place(3)"
            >{{placeInfo.xs3}}</el-button>
          </el-col>

          <el-col
            :span="8"
            style="marginTop: 32px;lineHeight:100%"
          >
            <el-col :span="12">
              <span>4、高湖镇</span>
            </el-col>

            <el-input
              class="input-new-tag"
              v-if="show4"
              v-model="inputValue_place"
              v-fo
              size="small"
              @blur="handleInputConfirm_place(4)"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput_place(4)"
            >{{placeInfo.xs4}}</el-button>
          </el-col>

          <el-col
            :span="8"
            style="marginTop: 32px;lineHeight:100%"
          >
            <el-col :span="12">
              <span>5、三爪仑乡</span>
            </el-col>

            <el-input
              class="input-new-tag"
              v-if="show5"
              v-model="inputValue_place"
              v-fo
              size="small"
              @blur="handleInputConfirm_place(5)"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput_place(5)"
            >{{placeInfo.xs5}}</el-button>
          </el-col>

          <el-col
            :span="8"
            style="marginTop: 32px;lineHeight:100%"
          >
            <el-col :span="12">
              <span>6、中源乡</span>
            </el-col>

            <el-input
              class="input-new-tag"
              v-if="show6"
              v-model="inputValue_place"
              v-fo
              size="small"
              @blur="handleInputConfirm_place(6)"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput_place(6)"
            >{{placeInfo.xs6}}</el-button>
          </el-col>

          <el-col
            :span="8"
            style="marginTop: 32px;lineHeight:100%"
          >
            <el-col :span="12">
              <span>7、水口乡</span>
            </el-col>

            <el-input
              class="input-new-tag"
              v-if="show7"
              v-model="inputValue_place"
              v-fo
              size="small"
              @blur="handleInputConfirm_place(7)"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput_place(7)"
            >{{placeInfo.xs7}}</el-button>
          </el-col>

          <el-col
            :span="8"
            style="marginTop: 32px;lineHeight:100%"
          >
            <el-col :span="12">
              <span>8、雷公尖乡</span>
            </el-col>

            <el-input
              class="input-new-tag"
              v-if="show8"
              v-model="inputValue_place"
              v-fo
              size="small"
              @blur="handleInputConfirm_place(8)"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput_place(8)"
            >{{placeInfo.xs8}}</el-button>
          </el-col>

          <el-col
            :span="8"
            style="marginTop: 32px;lineHeight:100%"
          >
            <el-col :span="12">
              <span>9、仁首镇</span>
            </el-col>

            <el-input
              class="input-new-tag"
              v-if="show9"
              v-model="inputValue_place"
              v-fo
              size="small"
              @blur="handleInputConfirm_place(9)"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput_place(9)"
            >{{placeInfo.xs9}}</el-button>
          </el-col>

          <el-col
            :span="8"
            style="marginTop: 32px;lineHeight:100%"
          >
            <el-col :span="12">
              <span>10、璪都镇</span>
            </el-col>

            <el-input
              class="input-new-tag"
              v-if="show10"
              v-model="inputValue_place"
              v-fo
              size="small"
              @blur="handleInputConfirm_place(10)"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput_place(10)"
            >{{placeInfo.xs10}}</el-button>
          </el-col>

          <el-col
            :span="8"
            style="marginTop: 32px;lineHeight:100%"
          >
            <el-col :span="12">
              <span>11、官庄镇</span>
            </el-col>

            <el-input
              class="input-new-tag"
              v-if="show11"
              v-model="inputValue_place"
              v-fo
              size="small"
              @blur="handleInputConfirm_place(11)"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput_place(11)"
            >{{placeInfo.xs11}}</el-button>
          </el-col>

        </el-row>

      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      list: [], //基础系数数据
      inputValue: "", //基础系数输入框绑定数据
      form: {}, //修改基础系数请求参数

      placeInfo: {}, //过夜游客基数数据
      inputValue_place: "", //过夜游客基数输入框绑定数据

      show: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      show7: false,
      show8: false,
      show9: false,
      show10: false,
      show11: false,
    };
  },
  mounted() {
    this.getData();
    //  this.getData_place();
  },
  methods: {
    // 获取 基础系数 数据
    async getData() {
      let res = await this.$axios.post("/bigData2/tourqueryTourx.action");
      // console.log(res);
      if (res.status == 200) {
        res.data.data.forEach((element, index) => {
          element.show = false;
          return element;
        });
        let newList = [];
        let newList2 = [];
        res.data.data.forEach((element, index) => {
          if (index !== 0) {
            newList.push(element);
          } else {
            newList2.push(element);
          }
        });
        this.list = newList;
        this.placeInfo = newList2[0];
        // console.log(this.list);
        // console.log(this.placeInfo);
      } else {
        console.log("获取 基础系数数据 失败");
      }
    },
    // 修改 基础系数 数据
    async editData() {
      let res = await this.$axios({
        url: "/bigData2/tourupdateTx.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();
    },
    // 基础系数区域 失去焦点 切换回按钮 并更新数据
    handleInputConfirm(i) {
      i.show = false;
      i.xs2 = this.inputValue;
      this.form = { ...i };
      this.editData();
      this.inputValue = "";
    },
    // 基础系数区域 点击按钮 切换输入框 并聚焦
    showInput(i) {
      i.show = true;
    },

    // 修改 过夜游客基数 数据
    async editData2() {
      let res = await this.$axios({
        url: "/bigData2/tourupdateTx.action",
        method: "post",
        params: this.placeInfo,
        // 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();
    },
    // 过夜游客区域 失去焦点 切换回按钮 并更新数据
    handleInputConfirm_place(i) {
      if (i == 1) {
        this.placeInfo.xs = this.inputValue_place;
        this.show = false;
      } else if (i == 2) {
        this.placeInfo.xs2 = this.inputValue_place;
        this.show2 = false;
      } else if (i == 3) {
        this.placeInfo.xs3 = this.inputValue_place;
        this.show3 = false;
      } else if (i == 4) {
        this.placeInfo.xs4 = this.inputValue_place;
        this.show4 = false;
      } else if (i == 5) {
        this.placeInfo.xs5 = this.inputValue_place;
        this.show5 = false;
      } else if (i == 6) {
        this.placeInfo.xs6 = this.inputValue_place;
        this.show6 = false;
      } else if (i == 7) {
        this.placeInfo.xs7 = this.inputValue_place;
        this.show7 = false;
      } else if (i == 8) {
        this.placeInfo.xs8 = this.inputValue_place;
        this.show8 = false;
      } else if (i == 9) {
        this.placeInfo.xs9 = this.inputValue_place;
        this.show9 = false;
      } else if (i == 10) {
        this.placeInfo.xs10 = this.inputValue_place;
        this.show10 = false;
      } else {
        this.placeInfo.xs11 = this.inputValue_place;
        this.show11 = false;
      }
      this.editData2();
      this.inputValue_place = "";
    },
    // 过夜游客区域 点击按钮 切换输入框 并聚焦
    showInput_place(i) {
      if (i == 1) {
        this.show = true;
      } else if (i == 2) {
        this.show2 = true;
      } else if (i == 3) {
        this.show3 = true;
      } else if (i == 4) {
        this.show4 = true;
      } else if (i == 5) {
        this.show5 = true;
      } else if (i == 6) {
        this.show6 = true;
      } else if (i == 7) {
        this.show7 = true;
      } else if (i == 8) {
        this.show8 = true;
      } else if (i == 9) {
        this.show9 = true;
      } else if (i == 10) {
        this.show10 = true;
      } else {
        this.show11 = true;
      }
    },
  },
};
</script>

<style scoped>
.first-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}
.tag {
  width: 108px;
  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;
}
</style>