<template>
  <div>
    <!-- <div style="margin:2% 0;display: inline-block;">
      <span>商铺名称：</span>
      <el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入商铺名称" v-model="shopName1">
      </el-input>&nbsp;&nbsp;&nbsp;&nbsp;
    </div> -->
    <div>
      <el-button
        style="margin: 10px 0;"
        size="mini"
        type="primary"
        icon="document"
        :disabled="!isAuth('site:tianjia')"
        @click="addSite"
        >添加站点</el-button
      >
    </div>
    <el-table v-loading="tableDataLoading" :data="typeDatas" row-key="id">
      <el-table-column prop="id" label="编号" width="180" align="center">
      </el-table-column>
      <el-table-column align="center" label="站点名称" prop="stationName">
      </el-table-column>
      <el-table-column label="操作" align="center" width="250">
        <template slot-scope="scope">
          <el-button size="mini" :disabled="!isAuth('site:xiugai')" type="primary" @click="updates(scope.row)">
            修改
          </el-button>
          <el-button size="mini" type="danger" :disabled="!isAuth('site:shanchu')" @click="deletes(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加站点 -->
    <el-dialog
      :title="siteTitle"
      customClass="customWidth"
      :visible.sync="inputVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="骑手站点" prop="ruleName">
          <el-input
            v-model="form.ruleName"
            size="small"
            style="width:220px;"
            placeholder="请输入骑手站点名称"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <div style="width: 100%;display: flex;justify-content:flex-end;">
            <el-button type="primary" @click="submitForm('ruleForm')"
              >确 定</el-button
            >
            <el-button @click="cancelForm('ruleForm')">取 消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div style="text-align: center;margin-top: 10px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="limit"
        :current-page="page"
        layout="total,sizes, prev, pager, next"
        :total="totals"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 10,
      page: 1,
      limit: 10,
      ruleName: "",
      inputVisible: false,
      form: {
        id: "",
        ruleName: ""
      },
      siteTitle: "添加站点",
      tableDataLoading: false,
      totals: 0,
      typeDatas: [],
      rules: {
        ruleName: [
          { required: true, message: "请输入站点名称", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    handleSizeChange(val) {
      this.size = val;
      this.dataSelect();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.dataSelect();
    },
    // 添加站点
    addSite() {
      this.siteTitle = "添加站点";
      this.inputVisible = true;
      this.form.ruleName="";
      this.form.id = "";
    },
    // 确定添加站点
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.form.id) {
            this.$http({
              url: this.$http.adornUrl("admin/riderStation/updateStation"),
              method: "post",
              data: this.$http.adornData({
                id:this.form.id,
                stationName: this.form.ruleName
              })
            }).then(({ data }) => {
              console.log(data, "修改骑手站点");
              if (data.code == 0) {
                this.inputVisible = false;
                this.$message({
                  message: "修改成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.dataSelect();
                  }
                });
                this.dataSelect();
              }else{
                this.$message({
                  message: data.msg,
                  type: "warning",
                  duration: 1500,
                  onClose: () => {
                  }
                });
              }
            });
          } else {
            this.$http({
              url: this.$http.adornUrl("admin/riderStation/saveStation"),
              method: "post",
              data: this.$http.adornData({
                stationName: this.form.ruleName
              })
            }).then(({ data }) => {
              console.log(data, "添加骑手站点");
              if (data.code == 0) {
                this.inputVisible = false;
                this.$message({
                  message: "添加成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.dataSelect();
                  }
                });
                this.dataSelect();
              }else{
                this.$message({
                  message: data.msg,
                  type: "warning",
                  duration: 1500,
                  onClose: () => {
                  }
                });
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancelForm(formName) {
      this.$refs[formName].resetFields();
      this.inputVisible = false;
    },
    //修改站点
    updates(row) {
      this.inputVisible = true;
      this.siteTitle = "编辑站点";
      this.form.ruleName = row.stationName;
      this.form.id = row.id;
    },
    // 删除分类
    deletes(row) {
      this.$confirm(`确定删除此站点?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("admin/riderStation/removeStation"),
            method: "get",
            params: this.$http.adornParams({
              id: row.id
            })
          }).then(({ data }) => {
            if (data.code == 0) {
              if(this.page!=1 && this.typeDatas.length==1){
                this.page=this.page-1
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.dataSelect();
                  }
                });
              }else{
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.dataSelect();
                  }
                });
              }
            } else {
              this.$message({
                message: data.msg,
                type: "error",
                duration: 1500,
                onClose: () => {}
              });
            }
          });
        })
        .catch(() => {});
    },
    // 获取分类数据
    dataSelect() {
      this.tableDataLoading = true;
      this.$http({
        url: this.$http.adornUrl("admin/riderStation/selectStationList"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page,
          size: this.size
        })
      }).then(({ data }) => {
        console.log(data, "骑手站点");
        this.tableDataLoading = false;
        let returnData = data.data.list;
        this.typeDatas = returnData;
        this.totals = data.data.totalCount;
      });
    }
  },
  mounted() {
    this.dataSelect();
  }
};
</script>

<style>
.customWidth {
  width: 500px !important;
}
.el-form-item__error {
  left: 80px;
}
</style>
