<template>
  <div class="box-center">
    <div class="center-er">
      <div class="app-titel">
        <div class="app-titel-name">
          区域管理
          <div style="margin-left: 20px" v-if="orgType == 0">
            <el-select
              v-model="orgCode"
              filterable
              @change="getTableList"
              placeholder="请选择公司"
            >
              <el-option
                v-for="item in optionsOrg"
                :key="item.id"
                :label="item.name"
                :value="item.orgCode"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <el-button class="app-titel-btn" type="primary" @click="addClick"
          >新增</el-button
        >
      </div>
      <div class="app-box">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column prop="areaName" label="区域名称" width="180">
          </el-table-column>
          <el-table-column prop="provinceName" label="负责区域">
          </el-table-column>
          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <el-button type="text" @click="edit(scope.row)">编辑</el-button>
              <el-button type="text" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <div class="blockbox">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 12, 16, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
          >
          </el-pagination>
        </div>
      </div>
      <el-dialog
        title="新增区域"
        :visible.sync="dialogVisible"
        @close="formClose"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
        >
          <el-form-item label="区域名称" prop="areaName">
            <el-input v-model="ruleForm.areaName"></el-input>
          </el-form-item>
          <el-form-item label="负责省份" prop="provinceItem">
            <el-select
              v-model="ruleForm.provinceItem"
              placeholder="请选择负责省份"
              multiple
              style="width: 100%"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">{{
            editFlag ? "编 辑" : "确 定"
          }}</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 100,
      },
      currentPage: 1,
      dialogVisible: false,
      editFlag: false,
      //公司列表
      optionsOrg: [],
      ruleForm: {
        areaName: "",
        provinceItem: [],
      },
      orgCode: "",
      orgType:localStorage.getItem("orgType"),
      rules: {
        areaName: [
          { required: true, message: "请输入区域名称", trigger: "blur" },
        ],
        provinceItem: [
          { required: true, message: "请选择负责省份", trigger: "change" },
        ],
      },
      options: [],
      roleFlag: "",
    };
  },
  mounted() {
    //    获取公司列表
    this.getCompanyList();
  },
  methods: {
    addClick() {
      this.dialogVisible = true;
      this.editFlag = false;
      this.getArea();
    },
    edit(row) {
      // console.log(row,'编辑')
      this.getArea(row.provinceItem);
      this.editFlag = true;
      this.ruleForm = row;
      this.ruleForm.provinceItem = this.ruleForm.provinceItem.split(",");
      // this.ruleForm.provinceItem.map(item=>item/1)
      console.log(this.ruleForm);
      this.dialogVisible = true;
    },
    del(row) {
      console.log(row, "删除");
      this.$confirm(`是否删除区域?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        distinguishCancelAndClose: true,
        type: "warning",
      }).then(() => {
        axios({
          url: `/autoSR/areamanager/${row.id}`,
          method: "delete",
          // params: {
          //   id: row.id,
          // },
        }).then((res) => {
          if (res.code == 0) {
            this.$message.success("删除成功");
            this.getTableList();
          } else {
            this.$message.warning(res.resMsg);
          }
        });
      });
    },
    add() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // console.log(this.ruleForm)
          if (this.editFlag) {
            axios({
              url: `/autoSR/areamanager`,
              method: "put",
              data: {
                areaName: this.ruleForm.areaName,
                provinceItem: this.ruleForm.provinceItem.join(","),
                id: this.ruleForm.id,
                orgCode: this.orgCode,
              },
            }).then((res) => {
              if (res.code == 0) {
                this.$message.success("编辑成功");
                this.dialogVisible = false;
              }
            });
          } else {
            axios({
              url: `/autoSR/areamanager`,
              method: "post",
              data: {
                areaName: this.ruleForm.areaName,
                provinceItem: this.ruleForm.provinceItem.join(","),
                orgCode: this.orgCode,
              },
            }).then((res) => {
              if (res.code == 0) {
                this.$message.success("添加成功");
                this.dialogVisible = false;
              }
            });
          }
        }
      });
    },
    formClose() {
      this.$refs.ruleForm.resetFields();
      this.getTableList();
      this.ruleForm = {
        areaName: "",
        provinceItem: [],
      };
    },
    //获取table数据、
    getTableList() {
      axios({
        url: `/autoSR/areamanager/list`,
        method: "get",
        params: {
          current: this.page.pageNum,
          size: this.page.pageSize,
          orgCode: this.orgCode,
        },
      }).then((res) => {
        if (res.code == 0) {
          console.log(res)
          this.tableData = res.data.records;
          if (res.data.total != 0 && this.tableData.length == 0) {
            this.page.pageNum--;
            this.getTableList();
          }
          this.page.total = res.data.total;
        }
      });
    },
    //获取公司数据、
    getCompanyList() {
      axios({
        url: `/autoSR/zkorg/findMyOrg`,
        method: "get",
        params: {
          orgType: 0,
        },
      }).then((res) => {
        if (res.code == 0) {
          // console.log(res)
          this.optionsOrg = res.data;
          if (this.orgType == 0) {
            this.orgCode = this.optionsOrg[0].orgCode;
            console.log(this.orgCode,'123')
          }
          if(this.orgType==2){
            this.orgCode=localStorage.getItem('orgCode')
          }
          this.getTableList();
        }
      });
    },
    //获取省份
    getArea(id) {
      axios({
        url: `autoSR/areamanager/findMyProvince`,
        method: "get",
        params: {
          parentId: 0,
          parentIds: id,
          orgCode: this.orgCode,
        },
      }).then((res) => {
        if (res.code == 0) {
          // console.log(res.obj)
          this.options = res.data;
        }
      });
    },
    handleSizeChange(val) {
      console.log("每页条" + val);
      this.page.pageSize = val;
      this.getTableList();
    },
    handleCurrentChange(val) {
      console.log("当前页" + val);
      this.page.pageNum = val;
      this.getTableList();
    },
  },
};
</script>

<style lang="scss" scoped>
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1200px;
  padding-bottom: 100px;
  .center-er {
    width: 100%;
    height: 80vh;
    background: #ffffff;
    border-radius: 4px;

    .app-titel {
      width: 100%;
      background: #ffffff;
      border-radius: 8px;
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      padding-top: 15px;
    }
    .app-titel-name {
      text-align: center;
      line-height: 40px;
      display: flex;
    }
    .app-titel-btn {
      height: 30px;
      margin-top: 5px;
      line-height: 6px;
    }
    .app-box {
      margin-top: 20px;
    }
    .block {
      width: 100%;
      margin-top: 26px;
      /*display: flex;*/
      text-align: center;
    }

    .blockbox {
      margin-left: auto;
    }
  }
}
</style>

