<template>

  <div class="box-center">
    <!-- 头 -->
    <div class="app-top">
      <div class="app-titel" style="margin-top: 5px">
        <div v-if="orgType==0" class="label">代理商名称：</div>
        <div v-if="orgType==0">
         <el-input v-model="operatorName"></el-input>
        </div>
        <div class="label">公司名称：</div>
        <div>
         <el-input v-model="name"></el-input>
        </div>
         <div v-if="orgType==0" class="label">运营人员名称：</div>
         <div v-if="orgType==0">
          <el-input v-model="operationStaffName"></el-input>
        </div>
      </div>

      <div class="app-titel" style="margin-top: 15px">
        <div class="label" style="color: #ffffff">筛选相关：</div>
        <div>
          <el-button @click="infoadd()" style="background: #2671e2; color: #ffffff"
            >新增</el-button
          >
        </div>
        <div style="margin-left: 20px">
          <el-button @click="Screening()" style="background: #2671e2; color: #ffffff"
            >筛选</el-button
          >
        </div>
        <div style="margin-left: 20px">
          <el-button @click="Screeningofempty()">清空筛选条件</el-button>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="cen-tab">
        <el-table
          :data="tableData"
          stripe
          height="400"
          style="width: 100%">
          <el-table-column
            prop="name"
            label="公司名称"
            align="center"
          >
          </el-table-column>
          <el-table-column
           v-if="orgType==0"
            prop="operatorName"
            label="代理商"
             align="center"
           >
          </el-table-column>
          <el-table-column
           v-if="orgType==0"
            prop="operationStaffName"
            label="运营人员"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="公司地址"
             align="center"
           >
          </el-table-column>
          <el-table-column
            label="联系人信息"
             align="center">
              <template slot-scope="scope">
                <p>{{scope.row.contactPerson}}:{{scope.row.contactNumber}}</p>
              </template>
          </el-table-column>

          <el-table-column
            prop="managerPhone"
            label="管理员账号"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="houseNum"
            label="服务期楼盘"
             align="center"
           >
          </el-table-column>
         <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div style="color: #2671E2;" @click="infoeditor(scope.row)">编辑</div>
              <div style="color: #2671E2;" @click="inforeplace(scope.row)">更换账号</div>
              <div style="color: #2671E2;" @click="toinifodelete(scope)">删除</div>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;justify-content:flex-end;margin-top: 10px;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[7, 14, 21, 28]"
              :page-size="7"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
        </div>
    </div>


     <el-dialog title="新增公司" :visible.sync="dialogVisible" >
      <el-form :model="addagentobj" label-position="labelPosition" :rules="rules"  ref="addagentobj" label-width="140px" style="width:60%; margin: 0 auto;">
          <el-form-item label="代理商名称：" prop="agentId">
              <el-select v-model="addagentobj.agentId" placeholder="请选择" @change='clickagentId()'>
                <el-option  v-for="item in optionsagentId" :key="item.value"  :label="item.agentName" :value="item.id" ></el-option>
              </el-select>
          </el-form-item>
           <el-form-item label="公司名称：" prop="name">
              <el-input v-model="addagentobj.name"></el-input>
          </el-form-item>
          <el-form-item label="联系人：" prop="contactPerson">
              <el-input v-model="addagentobj.contactPerson"></el-input>
          </el-form-item>
          <el-form-item label="联系手机：" prop="contactNumber">
              <el-input v-model="addagentobj.contactNumber"></el-input>
          </el-form-item>

          <el-form-item label="省：" prop="provinceId">
            <el-select v-model="addagentobj.provinceId" placeholder="请选择" @change='clickprovinceId()'>
              <el-option v-for="item in optionsparentId" :key="item.value" :label="item.name" :value="item.id" >  </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="市：" prop="cityId">
            <el-select v-model="addagentobj.cityId" placeholder="请选择">
              <el-option
                v-for="item in optionscityId"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="详细地址：" prop="address">
              <el-input v-model="addagentobj.address"></el-input>
          </el-form-item>
           <el-form-item label="运营人员：" prop="operationStaff">
              <el-select v-model="addagentobj.operationStaff" placeholder="请选择">
                  <el-option
                    v-for="item in optionsoperationStaff"
                    :key="item.value"
                    :label="item.name"
                    :value="item.accountId"
                  >
                  </el-option>
              </el-select>

          </el-form-item>
           <el-form-item label="管理员账号：" prop="managerPhone">
              <el-input v-model="addagentobj.managerPhone"></el-input>
          </el-form-item>
           <el-form-item label="密码：" prop="managerPassword">
              <el-input  v-model="addagentobj.managerPassword"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add()">保存</el-button>
      </div>
  </el-dialog>


  <el-dialog title="编辑" :visible.sync="dialogVisible2" >
      <el-form :model="editoragentobj" label-position="labelPosition" :rules="editorrules"  ref="editoragentobj" label-width="140px" style="width:60%; margin: 0 auto;">
          <el-form-item label="代理商名称：" prop="operator">
              <el-select v-model="editoragentobj.operator" placeholder="请选择" @change='clickagentId22()'>
                <el-option  v-for="item in optionsagentId" :key="item.value"  :label="item.agentName" :value="item.id" ></el-option>
              </el-select>
          </el-form-item>
           <el-form-item label="公司名称：" prop="name">
              <el-input v-model="editoragentobj.name"></el-input>
          </el-form-item>
          <el-form-item label="联系人：" prop="contactPerson">
              <el-input v-model="editoragentobj.contactPerson"></el-input>
          </el-form-item>
          <el-form-item label="联系手机：" prop="contactNumber">
              <el-input v-model="editoragentobj.contactNumber"></el-input>
          </el-form-item>
          <el-form-item label="省：" prop="provinceId">
            <el-select v-model="editoragentobj.provinceId" placeholder="请选择" @change='clickprovinceId3()'>
              <el-option v-for="item in optionsparentId" :key="item.value" :label="item.name" :value="item.id" >  </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="市：" prop="cityId">
            <el-select v-model="editoragentobj.cityId" placeholder="请选择">
              <el-option
                v-for="item in optionscityId"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="详细地址：" prop="address">
              <el-input v-model="editoragentobj.address"></el-input>
          </el-form-item>
           <el-form-item label="运营人员：" prop="operationStaff">
              <el-select v-model="editoragentobj.operationStaff" placeholder="请选择">
                  <el-option
                    v-for="item in optionsoperationStaff"
                    :key="item.value"
                    :label="item.name"
                    :value="item.accountId"
                  >
                  </el-option>
              </el-select>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="editor()">保存</el-button>
      </div>
  </el-dialog>


  <el-dialog title="更换账号" :visible.sync="dialogVisible3" >
      <el-form :model="replaceagentobj" label-position="labelPosition"  :rules="ruleser"  ref="replaceagentobj" label-width="140px" style="width:60%; margin: 0 auto;">
           <el-form-item label="管理员账号：" prop="managerPhone">
              <el-input v-model="replaceagentobj.managerPhone"></el-input>
          </el-form-item>
           <el-form-item label="密码：" prop="managerPassword">
              <el-input v-model="replaceagentobj.managerPassword"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="replace()">保存</el-button>
      </div>
  </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      addagentobj:{
        agentId:'',// 代理商名称
        name:'',// 公司名称
        contactPerson:'',// 联系人
        contactNumber:'',// 联系人手机号
        provinceId:'',// 省id
        cityId:'',// 市id
        address:'',// 详细地址
        operationStaff:'',// 运营人员id
        managerPhone:'',// 管理员账号
        managerPassword:'',// 管理员账号密码
      },
      rules:{
         agentId: [
            { required: true, message: '请选择代理商', trigger: 'blur' },
          ],
          name: [
            { required: true, message: '请输入公司名称', trigger: 'blur' },
          ],
         contactPerson: [
            { required: true, message: '请输入联系人名称', trigger: 'blur' },
          ],
          contactNumber: [
            { required: true, message: '请输入联系人手机号', trigger: 'blur' },
            { min: 11, max: 11, message: '请输入手机号', trigger: 'blur' }
          ],
          provinceId: [
            { required: true, message: '请输入选择省', trigger: 'blur' },
          ],
          cityId: [
            { required: true, message: '请输入选择市', trigger: 'blur' },
          ],
          address: [
            { required: true, message: '请输入详细地址', trigger: 'blur' },
          ],
          operationStaff: [
            { required: true, message: '请选择运营人员', trigger: 'blur' },
          ],
          managerPhone: [
            { required: true, message: '请输入管理员账号', trigger: 'blur' },
          ],
          managerPassword: [
            { required: true, message: '请输入管理员账号密码', trigger: 'blur' },
          ],
      },
      optionsparentId:[],//省份列表
      optionscityId:[],//市列表
      optionsagentId:[],//代理商列表
      optionsoperationStaff:[],//运营人员列表
      currentPage4:1,
      tableData: [],
      dialogVisible:false,
      dialogVisible2:false,
      dialogVisible3:false,
      currentPage4:1,
      operatorName:'',//代理商名称
      operationStaffName:'',//运营人员名称
      name:'',//公司名称
      total:0,//总条数
      pageNum:1,
      pageSize:7,
      orgType:'',
      replaceagentobj:{
          id:'',
          managerPhone:'',
          managerPassword:''
      },
      ruleser:{
           managerPhone: [
            { required: true, message: '请输入管理员账号', trigger: 'blur' },
          ],
          managerPassword: [
            { required: true, message: '请输入管理员账号密码', trigger: 'blur' },
          ],
      },
      editoragentobj:{
        id:'',
        operator:'',// 代理商名称
        name:'',// 公司名称
        contactPerson:'',// 联系人
        contactNumber:'',// 联系人手机号
        provinceId:'',// 省id
        cityId:'',// 市id
        address:'',// 详细地址
        operationStaff:'',// 运营人员id
      },
      editorrules:{
          operator: [
            { required: true, message: '请选择代理商', trigger: 'blur' },
          ],
          name: [
            { required: true, message: '请输入公司名称', trigger: 'blur' },
          ],
         contactPerson: [
            { required: true, message: '请输入联系人名称', trigger: 'blur' },
          ],
          contactNumber: [
            { required: true, message: '请输入联系人手机号', trigger: 'blur' },
            { min: 11, max: 11, message: '请输入手机号', trigger: 'blur' }
          ],
          provinceId: [
            { required: true, message: '请输入选择省', trigger: 'blur' },
          ],
          cityId: [
            { required: true, message: '请输入选择市', trigger: 'blur' },
          ],
          address: [
            { required: true, message: '请输入详细地址', trigger: 'blur' },
          ],
          operationStaff: [
            { required: true, message: '请选择运营人员', trigger: 'blur' },
          ],
      }
    };
  },
  mounted() {
    this.orgType=localStorage.getItem('orgType')
    this.getcompanyList()
  },
  methods: {
    //编辑
    infoeditor(row){
      this.editoragentobj.id=row.id;
        this.$api.http.gitfindById({id:row.id}).then((res) => {
        this.editoragentobj.operator=res.data.operator;
        this.editoragentobj.name=res.data.name;
        this.editoragentobj.contactPerson=res.data.contactPerson;
        this.editoragentobj.contactNumber=res.data.contactNumber;
        this.editoragentobj.provinceId=res.data.provinceId;
        this.editoragentobj.cityId=res.data.cityId;
        this.editoragentobj.address=res.data.address;
        this.editoragentobj.operationStaff=res.data.operationStaff;
      });
      this.findMyAgent()
      this.getparentIdList()
       this.clickprovinceId2(this.editoragentobj.provinceId)
      this.dialogVisible2=true;
    },
         //获取市
    clickprovinceId2(item){
       this.$api.http.getparentIdList({
          parentId: item
        }).then((res) => {
          this.optionscityId= res.data
        });
    },
     //选择省的时候请求市并清空市
    clickprovinceId3(){
       this.optionscityId=[];
       this.editoragentobj.cityId='';
       this.$api.http.getparentIdList({
          parentId: this.editoragentobj.provinceId
        }).then((res) => {
          this.optionscityId= res.data
        });
    },
    //选择代理商获取运营人员列表并清空运营人员选择
    clickagentId22(){
       this.optionsoperationStaff=[];
       this.editoragentobj.operationStaff='';
       this.$api.http.getAllOperationsStaffByAgent({
          agentId: this.editoragentobj.operator
        }).then((res) => {
          this.optionsoperationStaff= res.data
        });
    },
    //确认编辑
    editor(){
         this.$refs.editoragentobj.validate((valid) => {
          if (valid) {
             this.$api.http.updateOrg(this.editoragentobj).then((res) => {
               if(res.code==0){
                    this.dialogVisible2=false;
                    this.editoragentobj.id='';
                    this.$refs.editoragentobj.resetFields();
                    this.Screeningofempty()
                }else{
                  this.$message.error(res.message);
               }
             });
          } else {
            return false;
          }
        });
    },





     //更换
    inforeplace(row){
       this.replaceagentobj.id=row.id;
       this.dialogVisible3=true;
    },
    //确认更换
    replace(){
        this.$refs.replaceagentobj.validate((valid) => {
          if (valid) {
             this.$api.http.changeAccount(this.replaceagentobj).then((res) => {
               if(res.code==0){
                    this.dialogVisible3=false;
                    this.$refs.replaceagentobj.resetFields();
                    this.Screeningofempty()
                }else{
                  this.$message.error(res.message);
               }
             });
          } else {
            return false;
          }
        });
    },


    //删除
    toinifodelete(item){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.$api.http.delOrg({id:item.row.id}).then((res) => {
                 if(res.code==0){
                     this.$message({
                      type: 'success',
                      message: '删除成功!'
                    });
                    this.Screeningofempty()
                 }else{
                    this.$message.error(res.message);
                 }
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },

      //新增
    infoadd(){
        this.findMyAgent()
        this.getparentIdList()
        this.dialogVisible=true;
    },
    //选择代理商获取运营人员列表并清空运营人员选择
    clickagentId(){
       this.optionsoperationStaff=[];
       this.addagentobj.operationStaff='';
       this.$api.http.getAllOperationsStaffByAgent({
          agentId: this.addagentobj.agentId
        }).then((res) => {
          this.optionsoperationStaff= res.data
        });
    },
    //获取代理商
    findMyAgent(){
       this.$api.http.findMyAgent({orgType:this.orgType}).then((res) => {
         console.log(res.data)
          this.optionsagentId= res.data
        });
    },
     //选择省的时候请求市并清空市
    clickprovinceId(){
       this.optionscityId=[];
       this.addagentobj.cityId='';
       this.$api.http.getparentIdList({
          parentId: this.addagentobj.provinceId
        }).then((res) => {
          this.optionscityId= res.data
        });
    },
    //获取省
    getparentIdList(){
      this.optionsparentId=[];
      this.$api.http.getparentIdList({
          parentId: 0
        }).then((res) => {
          this.optionsparentId= res.data
        });
    },

    //确认新增
    add(){
      this.$refs.addagentobj.validate((valid) => {
          if (valid) {
            this.addagentobj.pid=0;
             this.$api.http.AddaddOrg(this.addagentobj).then((res) => {
               if(res.code==0){
                    this.dialogVisible=false;
                    this.$refs.addagentobj.resetFields();
                    this.Screeningofempty()
                }else{
                  this.$message.error(res.message);
               }
             });
          } else {
            return false;
          }
        });
    },



    //清空筛选
    Screeningofempty(){
        this.operatorName='';
        this.operationStaffName='';
        this.name='';
        this.getcompanyList()
    },
    //筛选
    Screening(){
      this.getcompanyList()
    },
    // 获取列表
    getcompanyList() {
      this.tableData=[];
      let parmest={
          current: this.pageNum,
          size: this.pageSize,
          operatorName:this.operatorName,
          operationStaffName:this.operationStaffName,
          name:this.name,
      }
      this.$api.http.getcompanyList(parmest).then((res) => {
          console.log(res.data);
         this.tableData=res.data.records;
          this.total=res.data.total
        });
    },
    handleSizeChange(val) {
       this.pageSize=val;
        this.getcompanyList()
    },
    handleCurrentChange(val) {
      this.pageNum=val;
      this.getcompanyList()
    },

  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1200px;
  padding-bottom: 100px;
}
.cen-tab{
  width: 100%;
  padding: 15px;
  background: #FFFFFF;
  margin-top: 15px;
}
.tophove {
  color: #ffffff;
  background: #2671e2;
}
.app-top {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;
  .app-titel {
    width: 100%;
    display: flex;
    align-items: center;
    .label {
      font-size: 14px;
      font-weight: 400;
      color: #32363d;
      line-height: 14px;
      margin-left: 15px;
    }
    .toptimeqhuan {
      height: 30px;
      background: #ffffff;
      display: flex;
      align-items: center;
    }
    .toptimeqhuan div {
      padding-left: 20px;
      padding-right: 20px;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      margin-right: 15px;
      border-radius: 4px;
      border: 1px solid #e0e0e0;
    }
  }
}
</style>
