<template>
  <div>
    <div>
      <div class="searchProject">
        <div>
          <span>
            <el-input v-model="projectNum.input" placeholder="项目名称"></el-input>
          </span>
          <span>
            <el-button type="primary" plain round @click="searchInput" size="small">搜索</el-button>
            <el-button type="info" plain round @click="resetInput" size="small">重置</el-button>
          </span>
        </div>
      </div>
      <el-table
        :data="projectList"
        style="width: 100% text-align:center;"
        border
        :header-cell-style="{'background-color': '#fafafa',
    'font-weight':'800'}"
      >
        <el-table-column
          prop="projectCode"
          label="项目编号"
          min-width="80"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="projectName"
          label="项目名称"
          min-width="80"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="address"
          label="项目地址"
          min-width="80"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="regionName"
          label="区域名称"
          min-width="80"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="userName"
          label="区域主管"
          min-width="80"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="操作" min-width="80" align="center" :show-overflow-tooltip="true">
          <template slot-scope="{row,$index}">
            <div>
              <el-button
                type="primary"
                plain
                round
                @click="projectChangeRegion(row,$index)"
                size="small"
              >项目更换区域</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagenation">
        <span>
          <el-pagination
            background
            layout="prev, pager, next, sizes, total, jumper"
            :total="projectNum.total"
            @current-change="click"
            :page-sizes="[10]"
            :page-size="10"
          ></el-pagination>
        </span>
      </div>
    </div>
    <div>
      <el-dialog
        title="项目更换区域"
        width="680px"
        :visible.sync="projectIsShow"
        :before-close="changeRegionClose"
        append-to-body
      >
        <div class="selctRegion">
          <div>
            <span>请选择区域:</span>
            <span>
              <el-select v-model="changeRegion" placeholder="请选择区域">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.areaName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="selectButton">
          <el-button type="primary" size="mini" round @click="EditrConfirm">确认</el-button>
          <el-button type="primary" size="mini" round plain @click="changeRegionClose">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      projectNum: {
        isTrue: false,
        pageSize: 10,
        pageNum: 1,
        total: 0,
        indexNum: 2,
        input: "",
        isInput: false
      },
      projectList: [],
      projectData: {},
      projectIsShow: false,
      oldProjectData: {},
      options: [],
      changeRegion: ""
    };
  },
  mounted() {},
  methods: {
    getProjectList(row) {
      this.projectData = row;
      this.getProjectList2();
    },
    getProjectList2() {
      var _this = this;
      var parameters = this.projectNum;
      var url = "business/project/list";
      var param = {
        regionId: this.projectData.id,
        projectStatus: parameters.indexNum,
        pageNum: parameters.pageNum,
        pageSize: parameters.pageSize
      };
      if (parameters.isInput) param.condition = parameters.input;
      this.axios.post(url, param).then(res => {
        var data = res.data;
        parameters.total = data.total;
        _this.projectList = data.rows;
      });
    },
    handleClick(index) {
      this.projectNum.indexNum = index;
      this.getProjectList2();
    },
    projectClose() {
      this.projectNum = {
        pageSize: 10,
        pageNum: 1,
        total: 0,
        data: {},
        indexNum: 2,
        input: "",
        isInput: false
      };
    },
    click(e) {
      this.projectNum.pageNum = e;
      this.getProjectList2();
    },
    searchInput() {
      this.projectNum.pageNum = 1;
      this.projectNum.isInput = true;
      this.getProjectList2();
    },
    resetInput() {
      this.projectNum = {
        pageSize: 10,
        pageNum: 1,
        total: 0,
        data: {},
        indexNum: 2,
        input: "",
        isInput: false
      };
      this.getProjectList2();
    },
    projectChangeRegion(r, i) {
      this.oldProjectData = r;
      this.projectIsShow = true;
      var url = "enterprise/region/project/regions";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("mtCompanyId"))
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.options = res.data;
        }
      });
    },
    changeRegionClose() {
      this.changeRegion = null;
      this.projectIsShow = false;
    },
    EditrConfirm() {
      if (!this.changeRegion)
        return this.$message({ type: "warning", message: "请选择区域" });
      var oldProjectData = this.oldProjectData;
      var _this = this;
      var p1 = new Promise((resolve, reject) => {
        var url = "business/project/relevance/list";
        var param = {
          pageNum: 1,
          pageSize: 10,
          projectId: _this.oldProjectData.id,
          workerId: _this.projectData.userId
        };
        _this.axios.post(url, param).then(res => {
          var data = res.data;
          var a;
          if (res.statusCode === "1") {
            a = !data ? false : !data.rows ? false : true;
          } else if (res.statusCode === "9") {
            a = false;
          } else {
            _this.$message.error(res.message);
          }
          if (a) {
            reject();
          } else {
            resolve();
          }
        });
      });
      p1.then(function() {
        var url = "business/project/modify";
        var param = {
          id: oldProjectData.id,
          startDate: oldProjectData.startDate,
          endDate: oldProjectData.endDate,
          // districtName: _this.changeRegion,
          district: oldProjectData.district,
          regionId:_this.changeRegion,
          projectName: oldProjectData.projectName,
          projectUsage: oldProjectData.projectUsage,
          projectAddress: oldProjectData.address,
          projectCode: oldProjectData.projectCode,
          projectNum: oldProjectData.num,
          ppCompanyId: oldProjectData.ppCompanyId,
          ppContactId: oldProjectData.ppContactId,
          save: oldProjectData.save
        };
        _this.axios.post(url, param).then(res => {
          if (res.statusCode === "1") {
            _this.$message({ type: "success", message: "更换区域成功" });
            _this.changeRegion = null;
            _this.projectIsShow = false;
            _this.getProjectList2();
          }
        });
      });
      p1.catch(function() {
        _this.$message.error(
          "该项目区域主管有关联电梯,请前往成员管理解除现区域主管关联的电梯"
        );
      });
    },
    EidtorClose() {}
  }
};
</script>
<style lang="stylus">
.searchProject {
  padding: 10px 0;

  >div {
    display: flex;
    justify-content: flex-start;
    width: 580px;

    >span {
      display: inline-block;
      width: 260px;
    }
  }
}

.selctRegion {
  >div {
    display: flex;
    justify-content: flex-start;
    padding-bottom: 20px;

    >span {
      display: inline-block;
    }

    >span:first-child {
      line-height: 30px;
      padding-right: 10px;
    }
  }
}

.selectButton {
  text-align: right;
}
</style>