<template>
  <div>
    <!-- 标题 -->
    <el-row class="first-row">
      <div class="tag">智慧服务</div>
    </el-row>

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

    <el-tabs>
      <!-- 智慧厕所区域 -->
      <el-tab-pane label="智慧厕所">
        <!-- 增加按钮和搜索框 -->
        <el-row style="marginTop:10px">
          <el-col :span="3">
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="handleAdd"
            >添加厕所</el-button>
          </el-col>
          <el-col
            :span="2"
            style="fontSize:15px;marginTop:10px"
          >筛选条件:
          </el-col>
          <el-col
            :span="4"
            style="marginLeft:-40px"
          >
            <el-input
              placeholder="请输入编号或者厕所名称"
              suffix-icon="el-icon-search"
              clearable
              v-model="keyword"
              @change="getData()"
            >
            </el-input>
          </el-col>
        </el-row>
        <div style="margin: 20px 0;"></div>
        <hr style="background-color: #CCCCCC;height: 1px;border: 0;">
        <!-- 表格区域 -->
        <el-row>
          <el-table
            :data="tableData"
            highlight-current-row
            height="450"
            v-loading="loading"
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
          >
            <el-table-column
              prop="itemNo"
              label="项目编号"
              align="center"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="厕所名称"
              align="center"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="addrDesc"
              label="地址"
              align="center"
              width="190"
            >
            </el-table-column>

            <el-table-column
              prop="area"
              label="厕所面积/㎡"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="level"
              label="建设等级"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="numOfMan"
              label="男厕位/个"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="numOfWoman"
              label="女厕所/个"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="numOfBarrierFree"
              label="无障碍厕位/个"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="numOfThird"
              label="第三卫生间/个"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="numOfCommon"
              label="男女通用厕位/个"
              align="center"
              width="130"
            >
            </el-table-column>

            <el-table-column
              label="操作"
              align="center"
              width="150"
            >
              <template slot-scope="{ row }">
                <el-button
                  type="warning"
                  size="mini"
                  @click="editToilet(row)"
                >编辑</el-button>
                <el-button
                  type="danger"
                  size="mini"
                  @click="deleteToilet(row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <div style="margin: 20px 0;"></div>
        <!-- 分页器 -->
        <el-row>
          <div class="pagination_smoke">
            <el-pagination
              background
              layout="total,prev, pager, next"
              :total="totalCount"
              :page-size="pageSize"
              :current-page.sync="curPage"
              @current-change="getData"
            >
            </el-pagination>
          </div>

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

      <!-- 智慧停车区域 -->
      <el-tab-pane label="智慧停车">
        <!-- 增加按钮和搜索框 -->
        <el-row style="marginTop:10px">
          <el-col :span="3">
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="handleAdd2"
            >添加停车场</el-button>
          </el-col>
          <el-col
            :span="2"
            style="fontSize:15px;marginTop:10px"
          >筛选条件:
          </el-col>
          <el-col
            :span="4"
            style="marginLeft:-40px"
          >
            <el-input
              placeholder="请输入名称"
              suffix-icon="el-icon-search"
              clearable
              v-model="keyword2"
              @change="getData2()"
            >
            </el-input>
          </el-col>
        </el-row>

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

        <!-- 表格区域 -->
        <el-row>
          <el-table
            :data="tableData2"
            highlight-current-row
            height="450"
            v-loading="loading"
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
          >
            <el-table-column
              prop="name"
              label="名称"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="addrDesc"
              label="地址"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="openTime"
              label="营业时间"
              align="center"
              width="200"
            >
            </el-table-column>

            <el-table-column
              prop="capacity"
              label="容量/辆"
              align="center"
              width="150"
            >
            </el-table-column>

            <el-table-column
              label="操作"
              align="center"
            >
              <template slot-scope="{ row }">
                <el-button
                  type="warning"
                  size="mini"
                  @click="editPark(row)"
                >编辑</el-button>
                <el-button
                  type="danger"
                  size="mini"
                  @click="deletePark(row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>

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

        <!-- 分页器 -->
        <el-row>
          <div class="pagination_smoke">
            <el-pagination
              background
              layout="total,prev, pager, next"
              :total="totalCount2"
              :page-size="pageSize2"
              :current-page.sync="curPage2"
              @current-change="getData2"
            >
            </el-pagination>
          </div>

        </el-row>

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

    <!-- 新增或编辑 厕所 弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      center
      top="3vh"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        style="width:80%"
        label-width="130px"
      >
        <el-form-item
          label="项目编号"
          prop="itemNo"
        >
          <el-input
            v-model="form.itemNo"
            placeholder="请输入项目编号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="厕所名称"
          prop="name"
        >
          <el-input
            v-model="form.name"
            placeholder="请输入厕所名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="地址"
          prop="addrDesc"
        >
          <el-input
            v-model="form.addrDesc"
            placeholder="请输入地址"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="厕所面积/㎡"
          prop="area"
        >
          <el-input
            v-model="form.area"
            placeholder="请输入厕所面积"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="建设等级"
          prop="level"
        >
          <el-input
            v-model="form.level"
            placeholder="请输入建设等级"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="男厕位/个"
          prop="numOfMan"
        >
          <el-input
            v-model="form.numOfMan"
            placeholder="请输入数量"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="女厕位/个"
          prop="numOfWoman"
        >
          <el-input
            v-model="form.numOfWoman"
            placeholder="请输入数量"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="无障碍厕位/个"
          prop="numOfBarrierFree"
        >
          <el-input
            v-model="form.numOfBarrierFree"
            placeholder="请输入数量"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="第三卫生间/个"
          prop="numOfThird"
        >
          <el-input
            v-model="form.numOfThird"
            placeholder="请输入数量"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="男女通用厕位/个"
          prop="numOfCommon"
        >
          <el-input
            v-model="form.numOfCommon"
            placeholder="请输入数量"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="经纬度"
          prop="longitudeAndLatitude"
        >
          <el-input
            v-model="form.longitudeAndLatitude"
            placeholder="请输入经纬度"
          ></el-input>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="handleAddOrUpdata('form')"
        >确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 新增或编辑 停车 弹窗 -->
    <el-dialog
      :title="title2"
      :visible.sync="dialogFormVisible2"
      :close-on-click-modal="false"
      center
      style="width:90%"
    >
      <el-form
        :model="form2"
        :rules="rules2"
        ref="form2"
        style="width:80%"
        label-width="80px"
      >
        <el-form-item
          label="名称"
          prop="name"
        >
          <el-input
            v-model="form2.name"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="地址"
          prop="addrDesc"
        >
          <el-input
            v-model="form2.addrDesc"
            placeholder="请输入地址"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="时间"
          prop="openTime"
        >
          <el-input
            v-model="form2.openTime"
            placeholder="请输入营业时间"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="容量/辆"
          prop="capacity"
        >
          <el-input
            v-model="form2.capacity"
            placeholder="请输入容量"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="经纬度"
          prop="longitudeAndLatitude"
        >
          <el-input
            v-model="form2.longitudeAndLatitude"
            placeholder="请输入经纬度"
          ></el-input>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="handleAddOrUpdata2('form2')"
        >确 定</el-button>
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Serve",
  data() {
    return {
      keyword: "", //智慧厕所搜索框绑定值
      tableData: [], //智慧厕所列表数据
      loading: false, //加载效果
      curPage: 1, // 智慧厕所当前页
      pageSize: 5, // 智慧厕所每页记录数
      totalCount: null, // 智慧厕所总条数
      dialogFormVisible: false, //智慧厕所弹窗控制
      //智慧厕所弹窗表格绑定数据
      form: {
        itemNo: "",
        name: "",
        addrDesc: "",
        area: "",
        level: "",
        numOfMan: "",
        numOfWoman: "",
        numOfBarrierFree: "",
        numOfThird: "",
        numOfCommon: "",
        longitudeAndLatitude: "",
      },
      //智慧厕所弹窗表格验证规则
      rules: {
        itemNo: [
          { required: true, message: "请输入项目编号", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入厕所名称", trigger: "blur" }],
        addrDesc: [{ required: true, message: "请输入地址", trigger: "blur" }],
        area: [{ required: true, message: "请输入厕所面积", trigger: "blur" }],
        level: [{ required: true, message: "请输入建设等级", trigger: "blur" }],
        numOfMan: [{ required: true, message: "请输入数量", trigger: "blur" }],
        numOfWoman: [
          { required: true, message: "请输入数量", trigger: "blur" },
        ],
        numOfBarrierFree: [
          { required: true, message: "请输入数量", trigger: "blur" },
        ],
        numOfThird: [
          { required: true, message: "请输入数量", trigger: "blur" },
        ],
        numOfCommon: [
          { required: true, message: "请输入数量", trigger: "blur" },
        ],
        longitudeAndLatitude: [
          { required: true, message: "请输入经纬度", trigger: "blur" },
        ],
      },
      title: "", //智慧厕所弹窗标题

      keyword2: "", //智慧停车搜索框绑定值
      tableData2: [], //智慧停车列表数据
      curPage2: 1, // 智慧停车当前页
      pageSize2: 7, // 智慧停车每页记录数
      totalCount2: null, // 智慧停车总条数
      dialogFormVisible2: false, //智慧停车弹窗控制
      //智慧停车弹窗表格绑定数据
      form2: {
        name: "",
        addrDesc: "",
        openTime: "",
        capacity: "",
        longitudeAndLatitude: "",
      },
      //智慧停车弹窗表格验证规则
      rules2: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        addrDesc: [{ required: true, message: "请输入地址", trigger: "blur" }],
        openTime: [
          { required: true, message: "请输入营业时间", trigger: "blur" },
        ],
        capacity: [{ required: true, message: "请输入容量", trigger: "blur" }],
        longitudeAndLatitude: [
          { required: true, message: "请输入经纬度", trigger: "blur" },
        ],
      },
      title2: "", //智慧停车弹窗标题
    };
  },
  mounted() {
    this.getData();
    this.getData2();
  },
  methods: {
    //获取智慧厕所列表数据
    async getData(val = 1) {
      this.loading = true;
      this.curPage = val;
      let params = {
        curPage: this.curPage,
        pageSize: this.pageSize,
        keyword: this.keyword,
      };
      let res = await this.$axios({
        url: "/diseaseRight/toilet/page",
        method: "get",
        params,
      });
      //   console.log(res);
      if (res.data.success) {
        this.tableData = res.data.data.list;
        this.totalCount = res.data.data.totalCount;
      } else {
        console.log("获取 智慧厕所列表数据 失败");
      }
      this.loading = false;
    },
    // 添加厕所按钮回调
    handleAdd() {
      this.dialogFormVisible = true;
      this.title = "添加";
      this.$nextTick(() => {
        this.$refs.form.resetFields();
        this.form = {
          itemNo: "",
          name: "",
          addrDesc: "",
          area: "",
          level: "",
          numOfMan: "",
          numOfWoman: "",
          numOfBarrierFree: "",
          numOfThird: "",
          numOfCommon: "",
          longitudeAndLatitude: "",
        };
      });
    },
    // 编辑厕所按钮回调
    editToilet(row) {
      this.dialogFormVisible = true;
      this.title = "编辑";
      this.$nextTick(() => {
        this.$refs.form.resetFields();
        this.form = { ...row };
      });
    },
    // 添加或编辑 厕所 请求
    handleAddOrUpdata(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          if (this.form.id) {
            // 编辑请求
            let res = await this.$axios({
              method: "put",
              url: "/diseaseRight/toilet/update",
              headers: {
                "Admin-Token": sessionStorage.getItem("token"),
              },
              data: this.form,
            });
            // console.log(res);
            if (res.data.success) {
              this.getData(this.curPage);
              this.$message.success("编辑成功!");
            } else {
              this.$message.error(res.data.message);
            }
          } else {
            // 添加请求
            let res = await this.$axios({
              method: "post",
              url: "/diseaseRight/toilet/save",
              headers: {
                "Admin-Token": sessionStorage.getItem("token"),
              },
              data: this.form,
            });
            // console.log(res);
            if (res.data.success) {
              this.getData(1);
              this.$message.success("添加成功!");
            } else {
              this.$message.error(res.data.message);
            }
          }
        } else {
          console.log("提交失败!!");
          return false;
        }
      });
    },
    // 删除厕所按钮回调
    deleteToilet(row) {
      this.$confirm("确定删除吗?", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      })
        .then(async () => {
          let res = await this.$axios({
            method: "delete",
            url: "/diseaseRight/toilet/delete",
            headers: {
              "Admin-Token": sessionStorage.getItem("token"),
            },
            data: [row.id],
          });
          // console.log(res);
          if (res.data.success) {
            this.$message.success("删除成功");
            let totalPage = Math.ceil((this.totalCount - 1) / this.pageSize);
            let currentPage =
              this.curPage > totalPage ? totalPage : this.curPage;
            this.curPage = currentPage < 1 ? 1 : currentPage;
            this.getData(this.curPage);
          } else {
            this.$message.error("删除失败!");
          }
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },

    //获取智慧停车列表数据
    async getData2(val = 1) {
      this.loading = true;
      this.curPage2 = val;
      let params = {
        curPage: this.curPage2,
        pageSize: this.pageSize2,
        keyword: this.keyword2,
      };
      let res = await this.$axios({
        url: "/diseaseRight/parking/page",
        method: "get",
        params,
      });
      //   console.log(res);
      if (res.data.success) {
        this.tableData2 = res.data.data.list;
        this.totalCount2 = res.data.data.totalCount;
      } else {
        console.log("获取 智慧停车列表数据 失败");
      }
      this.loading = false;
    },
    // 添加停车场按钮回调
    handleAdd2() {
      this.dialogFormVisible2 = true;
      this.title2 = "添加";
      this.$nextTick(() => {
        this.$refs.form2.resetFields();
        this.form2 = {
          name: "",
          addrDesc: "",
          openTime: "",
          capacity: "",
          longitudeAndLatitude: "",
        };
      });
    },
    // 编辑停车场按钮回调
    editPark(row) {
      this.dialogFormVisible2 = true;
      this.title2 = "编辑";
      this.$nextTick(() => {
        this.$refs.form2.resetFields();
        this.form2 = { ...row };
      });
    },
    // 添加或编辑 停车场 请求
    handleAddOrUpdata2(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.dialogFormVisible2 = false;
          if (this.form2.id) {
            // 编辑请求
            let res = await this.$axios({
              method: "put",
              url: "/diseaseRight/parking/update",
              headers: {
                "Admin-Token": sessionStorage.getItem("token"),
              },
              data: this.form2,
            });
            // console.log(res);
            if (res.data.success) {
              this.getData2(this.curPage2);
              this.$message.success("编辑成功!");
            } else {
              this.$message.error(res.data.message);
            }
          } else {
            // 添加请求
            let res = await this.$axios({
              method: "post",
              url: "/diseaseRight/parking/save",
              headers: {
                "Admin-Token": sessionStorage.getItem("token"),
              },
              data: this.form2,
            });
            // console.log(res);
            if (res.data.success) {
              this.getData2(1);
              this.$message.success("添加成功!");
            } else {
              this.$message.error(res.data.message);
            }
          }
        } else {
          console.log("提交失败!!");
          return false;
        }
      });
    },
    // 删除停车场按钮回调
    deletePark(row) {
      this.$confirm("确定删除吗?", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      })
        .then(async () => {
          let res = await this.$axios({
            method: "delete",
            url: "/diseaseRight/parking/delete",
            headers: {
              "Admin-Token": sessionStorage.getItem("token"),
            },
            data: [row.id],
          });
          // console.log(res);
          if (res.data.success) {
            this.$message.success("删除成功");
            let totalPage = Math.ceil((this.totalCount2 - 1) / this.pageSize2);
            let currentPage =
              this.curPage2 > totalPage ? totalPage : this.curPage2;
            this.curPage2 = currentPage < 1 ? 1 : currentPage;
            this.getData2(this.curPage2);
          } else {
            this.$message.error("删除失败!");
          }
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
  },
};
</script>

<style scoped>
.first-row {
  display: flex;
  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;
}
.pagination_smoke {
  text-align: center;
}
</style>