<template>

  <div class="box-center">
    <!-- 头 -->
    <div class="app-top">
      <div class="app-titel" style="margin-top: 15px">
        <div class="label">合同结束日期：</div>
        <div>
           <el-date-picker
            @change="confirmtime()"
            v-model="timelist"
            type="daterange"
            range-separator="-"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="label">服务状态：</div>
        <div>
          <el-select v-model="serviceStatus" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="app-titel" style="margin-top: 15px">
        <div class="label">代理商：</div>
        <div>
         <el-input v-model="agentName"></el-input>
        </div>
        <div class="label">运营人员：</div>
        <div >
          <el-input v-model="operationalName"></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="agentName"
            label="代理商"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
             align="center"
           >
          </el-table-column>
          <el-table-column
            prop="linkman"
            label="联系人信息"
             align="center">
          </el-table-column>

          <el-table-column
            prop="operationalName"
            label="运营人员"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="managerPhone"
            label="管理员账号"
             align="center"
           >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="添加日期"
             align="center">
          </el-table-column>

          <el-table-column
            prop="contractStartDate"
            label="合同开始日期"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="contractEndDate"
            label="合同结束日期"
             align="center"
           >
          </el-table-column>
          <el-table-column
            prop="residueTime"
            label="剩余天数"
             align="center">
          </el-table-column>
           <el-table-column
            label="服务状态"
             align="center">
                <template slot-scope="scope">
                   <div v-if="scope.row.residueTime >0">在服务期内</div>
                   <div v-if="scope.row.residueTime <0">过期</div>
                   <div v-if="scope.row.residueTime ==0">过期</div>
                </template>
          </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="agentName">
              <el-input v-model="addagentobj.agentName"></el-input>
          </el-form-item>
          <el-form-item label="合同起止日期：" prop="rulestimelist">
              <el-date-picker
                v-model="addagentobj.rulestimelist"
                 @change="confirmtime2()"
                  type="daterange"
                  range-separator="-"
                  :default-time="['00:00:00', '23:59:59']"
                  :clearable="false"
                  value-format="yyyy-MM-dd"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="联系人：" prop="linkman">
              <el-input v-model="addagentobj.linkman"></el-input>
          </el-form-item>
          <el-form-item label="联系手机：" prop="linkmanPhone">
              <el-input v-model="addagentobj.linkmanPhone"></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="operationalPeople">
              <el-select v-model="addagentobj.operationalPeople" placeholder="请选择">
                  <el-option
                    v-for="item in optionsoperationalPeople"
                    :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="agentName">
              <el-input v-model="editoragentobj.agentName"></el-input>
          </el-form-item>
          <el-form-item label="合同起止日期：" prop="rulestimelist">
              <el-date-picker
                v-model="editoragentobj.rulestimelist"
                 @change="confirmtime3()"
                  type="daterange"
                  range-separator="-"
                  :default-time="['00:00:00', '23:59:59']"
                  :clearable="false"
                  value-format="yyyy-MM-dd"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="联系人：" prop="linkman">
              <el-input v-model="editoragentobj.linkman"></el-input>
          </el-form-item>
          <el-form-item label="联系手机：" prop="linkmanPhone">
              <el-input v-model="editoragentobj.linkmanPhone"></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="operationalPeople">
              <el-select v-model="editoragentobj.operationalPeople" placeholder="请选择">
                  <el-option
                    v-for="item in optionsoperationalPeople"
                    :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 {
      options: [
        {
          value: "0",
          label: "服务器内",
        },
        {
          value: "1",
          label: "已过期",
        },
      ],
      dialogVisible:false,
      dialogVisible2:false,
      dialogVisible3:false,
      timelist:'',
      tableData: [],
      currentPage4:1,
      total:0,//总条数
      pageNum:1,
      pageSize:7,
      contractStartDate:'',//开始时间
      contractEndDate:'',//结束时间
      serviceStatus:'',//状态
      agentName:'',//代理商名称
      operationalName:'',//运营人员姓名
      addagentobj:{
        agentName:'',// 代理商名称
        contractStartDate:'',// 合同开始时间
        contractEndDate:'',// 合同结束时间
        linkman:'',// 联系人
        provinceId:'',// 省id
        cityId:'',// 市id
        address:'',// 详细地址
        operationalPeople:'',// 运营人员id
        managerPhone:'',// 管理员账号
        managerPassword:'',// 管理员账号密码
        linkmanPhone:'',// 联系人手机号
        rulestimelist:[]
      },
      editoragentobj:{
        id:'',
        agentName:'',// 代理商名称
        contractStartDate:'',// 合同开始时间
        contractEndDate:'',// 合同结束时间
        linkman:'',// 联系人
        provinceId:'',// 省id
        cityId:'',// 市id
        address:'',// 详细地址
        operationalPeople:'',// 运营人员id
        linkmanPhone:'',// 联系人手机号
        rulestimelist:[]
      },
      rules:{
         agentName: [
            { required: true, message: '请输入代理商名称', trigger: 'blur' },
          ],
        rulestimelist: [
            { required: true, message: '请选择时间', trigger: 'blur' },
          ],
         linkman: [
            { required: true, message: '请输入联系人名称', trigger: 'blur' },
          ],
          provinceId: [
            { required: true, message: '请输入选择省', trigger: 'blur' },
          ],
          cityId: [
            { required: true, message: '请输入选择市', trigger: 'blur' },
          ],
          address: [
            { required: true, message: '请输入详细地址', trigger: 'blur' },
          ],
          operationalPeople: [
            { required: true, message: '请选择运营人员', trigger: 'blur' },
          ],
          managerPhone: [
            { required: true, message: '请输入管理员账号', trigger: 'blur' },
          ],
          managerPassword: [
            { required: true, message: '请输入管理员账号密码', trigger: 'blur' },
          ],
          linkmanPhone: [
            { required: true, message: '请输入联系人手机号', trigger: 'blur' },
            { min: 11, max: 11, message: '请输入手机号', trigger: 'blur' }
          ],
      },
      editorrules:{
         agentName: [
            { required: true, message: '请输入代理商名称', trigger: 'blur' },
          ],
        rulestimelist: [
            { required: true, message: '请选择时间', trigger: 'blur' },
          ],
         linkman: [
            { required: true, message: '请输入联系人名称', trigger: 'blur' },
          ],
          provinceId: [
            { required: true, message: '请输入选择省', trigger: 'blur' },
          ],
          cityId: [
            { required: true, message: '请输入选择市', trigger: 'blur' },
          ],
          address: [
            { required: true, message: '请输入详细地址', trigger: 'blur' },
          ],
          operationalPeople: [
            { required: true, message: '请选择运营人员', trigger: 'blur' },
          ],
          linkmanPhone: [
            { required: true, message: '请输入联系人手机号', trigger: 'blur' },
            { min: 11, max: 11, message: '请输入手机号', trigger: 'blur' }
          ],
      },
      optionsparentId:[],//省份列表
      optionscityId:[],//市列表
      optionsoperationalPeople:[],//运营人员列表
      replaceagentobj:{
          id:'',
          managerPhone:'',
          managerPassword:''
      },
      ruleser:{
           managerPhone: [
            { required: true, message: '请输入管理员账号', trigger: 'blur' },
          ],
          managerPassword: [
            { required: true, message: '请输入管理员账号密码', trigger: 'blur' },
          ],
      }

    };
  },
  mounted() {
    this.getAgentList()
  },
  methods: {
    confirmtime3(){
        this.editoragentobj.contractStartDate=this.editoragentobj.rulestimelist[0];
        this.editoragentobj.contractEndDate=this.editoragentobj.rulestimelist[1];
    },
    //编辑
    infoeditor(row){
      this.getparentIdList()
      this.clickprovinceId2(row.provinceId)
      this.getAllOperationsStaff()
        this.editoragentobj.agentName=row.agentName;// 代理商名称
        this.editoragentobj.contractStartDate=row.contractStartDate;// 合同开始时间
        this.editoragentobj.contractEndDate=row.contractEndDate;// 合同结束时间
        this.editoragentobj. linkman=row.linkman;// 联系人
        this.editoragentobj. provinceId=row.provinceId;// 省id
        this.editoragentobj.cityId=row.cityId;// 市id
        this.editoragentobj.address=row.address;// 详细地址
        this.editoragentobj. operationalPeople=row.operationalPeople;// 运营人员id
        this.editoragentobj.linkmanPhone=row.linkmanPhone;// 联系人手机号
        this.editoragentobj.rulestimelist=[row.contractStartDate,row.contractEndDate];
        this.editoragentobj.id=row.id;
        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
        });
    },
    //确认编辑
    editor(){
          this.$refs.editoragentobj.validate((valid) => {
          if (valid) {
             this.$api.http.editorAgent(this.editoragentobj).then((res) => {
               if(res.code==0){
                    this.dialogVisible2=false;
                    this.editoragentobj.contractStartDate='';
                    this.editoragentobj.contractEndDate='';
                    this.editoragentobj.id='';
                    this.$refs.editoragentobj.resetFields();
                    this.Screeningofempty()
                    this.getAgentList()
                }else{
                  this.$message.error(res.message);
               }
             });
          } else {
            return false;
          }
        });
    },

        //获取运营人员
    getAllOperationsStaff(){
         this.optionsoperationalPeople=[];
         this.$api.http.getAllOperationsStaff().then((res) => {
          this.optionsoperationalPeople= 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
        });
    },



    //更换
    inforeplace(row){
      this.replaceagentobj.id=row.id;
      this.dialogVisible3=true;
    },
    //确认更换
    replace(){
        this.$refs.replaceagentobj.validate((valid) => {
          if (valid) {
             this.$api.http.updateManagerPhone(this.replaceagentobj).then((res) => {
               if(res.code==0){
                    this.dialogVisible3=false;
                    this.$refs.replaceagentobj.resetFields();
                    this.Screeningofempty()
                    this.getAgentList()
                }else{
                  this.$message.error(res.message);
               }
             });
          } else {
            return false;
          }
        });
    },
     //新增
    infoadd(){
        this.dialogVisible=true;
        this.getparentIdList()
        this.getAllOperationsStaff()
    },
    //新增时间选择
    confirmtime2(){
        this.addagentobj.contractStartDate=this.addagentobj.rulestimelist[0];
        this.addagentobj.contractEndDate=this.addagentobj.rulestimelist[1];
    },
    //确认新增
    add(){
         this.$refs.addagentobj.validate((valid) => {
          if (valid) {
             this.$api.http.AddAgent(this.addagentobj).then((res) => {
               if(res.code==0){
                    this.dialogVisible=false;
                    this.addagentobj.contractStartDate='';
                    this.addagentobj.contractEndDate='';
                    this.$refs.addagentobj.resetFields();
                    this.Screeningofempty()
                    this.getAgentList()
                }else{
                  this.$message.error(res.message);
               }
             });
          } else {
            return false;
          }
        });
    },
     //删除
    toinifodelete(item){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.$api.http.delAgent({id:item.row.id}).then((res) => {
                 if(res.code==0){
                     this.$message({
                      type: 'success',
                      message: '删除成功!'
                    });
                    this.Screeningofempty()
                    this.getAgentList()
                 }else{
                    this.$message.error(res.message);
                 }
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },

      //时间选择
    confirmtime(){
        console.log(this.timelist)
        this.contractStartDate=this.timelist[0];
        this.contractEndDate=this.timelist[1];
    },
    //清空筛选
    Screeningofempty(){
        this.timelist=[];
        this.contractStartDate='';
        this.contractEndDate='';
        this.serviceStatus='';
        this.agentName='';
        this.operationalName='';
        this.getAgentList()
    },
    //筛选
    Screening(){
      this.getAgentList()
    },
      // 获取代理商
    getAgentList() {
      this.tableData=[];
      this.$api.http.getAgentList({
          current: this.pageNum,
          size: this.pageSize,
          contractStartDate:this.contractStartDate,
          contractEndDate:this.contractEndDate,
          serviceStatus:this.serviceStatus,
          agentName:this.agentName,
          operationalName:this.operationalName
        }).then((res) => {
          console.log(res.data);
         this.tableData=res.data.records;
          this.total=res.data.total
        });
    },
     handleSizeChange(val) {
       this.pageSize=val;
        this.getAgentList()
      },
      handleCurrentChange(val) {
        this.pageNum=val;
        this.getAgentList()
      }
  },
};
</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>
