<gsb-pcpage>
  <div style="padding:10px 20px;">
    <div style="height: auto; max-width: 1500px;">
      <el-card style="background-color: #FFFFFF;padding:10px 10px 30px 10px;margin-top: 20px;">
        <div style="width:100%;line-height: 40px;">
          <div style="float:left;width: auto;">
            <span style="color:2F2F2F;font-size: 14px;" >客户名称： </span>
            <el-input v-model="search.name"  maxlength="20" clearable style="width:160px;height: 36px;" ></el-input>
          </div>
          <div style="float:left;width: auto;margin-left: 40px;">
            <span style="color:2F2F2F;font-size: 14px;" >所属人： </span>
            <el-input v-model="search.owner_name" maxlength="50" clearable style="width:160px;height: 36px;" ></el-input>
          </div>
          <div style="float:left;width: auto;margin-left: 40px;">
            <span style="color:2F2F2F;font-size: 14px;" >来源： </span>
            <el-select v-model="search.ecompanySourceType" style="width:110px;height: 36px;" clearable>
              <el-option
                v-for="item in ecompanySourceTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div style="float:left;width: auto;margin-left: 40px;">
              <span style="color:2F2F2F;font-size: 14px;" >等级： </span>
              <el-select v-model="search.ecompanyLevel" style="width:110px;height: 36px;" clearable>
                <el-option
                  v-for="item in ecompanyLevelList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
        </div>
        <div style="clear:both;height:20px;"></div>
        <div style="width:100%;line-height: 40px;">
          <div style="float:left;width: 400px;">
            <span style="color:2F2F2F;font-size: 14px; float:left;" >创建日期： </span>
            <el-date-picker
              v-model="search.createdBegin"
              type="date"
              placeholder="开始时间"
              style="width:140px;height: 36px;float:left;"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              default-value="">
            </el-date-picker>
            <el-date-picker
              v-model="search.createdEnd"
              type="date"
              style="width:140px;height: 36px;margin-left: 16px;float:left;"
              placeholder="结束时间"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              default-value="">
            </el-date-picker>
          </div>
         
          <div style="float:left;margin-top:5px;margin-left: 40px;">
            <el-button @click="resetSearch" style="float:right;width:68px;height:36px;background-color: #54C4A7;color: #FFFFFF;font-size: 14px;padding-top:10px;" >重置</el-button>
            <el-button @click="opSearch" style="float:right;width:68px;height:36px;background-color: #54C4A7;color: #FFFFFF;font-size: 14px;padding-top:10px;margin-right: 10px;" >搜索</el-button>
          </div>
        </div>
      </el-card>
  
      <el-card style="background-color: #FFFFFF;padding:10px 10px 30px 10px;margin-top: 20px;">
        <div style="margin-top: -15px;">
          <div style="line-height: 36px;padding-bottom: 20px;">
              <span style="float:left;color:#2F2F2F;font-size: 14px;">共{{search.total}}条记录</span>
              <el-button @click="openEdit()" style="float:right;width:100px;height:36px;color: #FFFFFF;font-weight: 400;border-radius: 4px;font-size: 14px;background-color: #59C1A6;padding-top:11px">新增意向</el-button>
          </div>

          <div style="margin-top: 15px;">
            <el-table 
            stripe
            fix="true"
            :data="search.list"
            style="width: 100%;margin-top: 23px;min-height: 500px;"
            empty-text="暂无申请"
            tooltip-effect="light"
            header-cell-style="background-color: #F5F5F5;color: #2F2F2F;font-size: 14px;font-weight:400;"
            row-style="height:50px;" >
              <el-table-column prop="id" label="id" :formatter="onColFormater" align="center" ></el-table-column>
              <el-table-column prop="name" label="客户名称" :formatter="onColFormater"  align="center"  show-overflow-tooltip ></el-table-column>
              <el-table-column prop="credit_code" label="信用代码" :formatter="onColFormater" align="center"  show-overflow-tooltip ></el-table-column>
              <el-table-column prop="contractName" label="联系人" :formatter="onColFormater" align="center" ></el-table-column>
              <el-table-column prop="contractMobile" label="手机号" :formatter="onColFormater" align="center"  ></el-table-column>
              <el-table-column prop="contractPost" label="职位" :formatter="onColFormater" align="center"  show-overflow-tooltip ></el-table-column>
              <el-table-column label="所属人" width="170" align="center" >
                <template slot-scope="scope" align="center">
                  <div v-if="scope.row.owner">
                    <div style="width:170px;text-align: center;">{{scope.row.owner.nickName}}</div>
                    <div style="width:170px;text-align: center;height:1px;margin: 3px 0px;">
                      <div style="widht:120px;height:1px;background-color: #CCCCCC"></div>
                    </div>
                    <div style="width:170px;text-align: center;">{{scope.row.owner.mobile}}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="ecompanyLevelName" label="客户等级" :formatter="onColFormater" align="center"  ></el-table-column>
              <el-table-column prop="ecompanySourceTypeName" label="客户来源" :formatter="onColFormater" align="center"  ></el-table-column>
              <el-table-column prop="created_at" label="创建时间" :formatter="onColFormater" align="center" show-overflow-tooltip  ></el-table-column>
              <el-table-column label="操作" >  
                <template slot-scope="scope">
                  <a @click="openEdit(scope.row)" href="javascript:;" style="text-decoration: none;color:#59C1A6;font-size: 14px;white-space:nowrap;">编辑</a>
                  <a @click="openDetail(scope.row)" href="javascript:;" style="text-decoration: none;color:#59C1A6;font-size: 14px;white-space:nowrap;">详情</a>
                  <a @click="openFollow(scope.row)" href="javascript:;" style="text-decoration: none;color:#59C1A6;font-size: 14px;white-space:nowrap;">跟进</a>
                </template>
              </el-table-column>
            </el-table>
            <div style="width:100%;text-align: center;margin-top: 20px">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="search.currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="search.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="search.total">
              </el-pagination>
            </div>
          </div>
        </div>
      </el-card>

      <el-dialog width="862px" :visible.sync="showEdit">
        <div slot="title">
          <span style="margin-left:9px;margin-top:-3px;;width:72px; height:25px; font-size:18px; font-family:PingFangSC-Regular; font-weight:400; color:rgba(51,51,51,1); line-height:25px;">{{editTitle}}</span>
          <div style="width: 862px; height: 1px;background-color: #E3E3E3;margin: 17px 20px 0px -20px"></div>
        </div>
        <el-form :model="intention" :rules="rules" ref="intention" label-width="100px" label="right" style="padding:0px 100px;" >
          <div style="0px 10px; line-height: 15px;padding-bottom:40px;">
            <div style="width:2px;height:15px;float: left;background-color: #54C4A7"></div>
            <span style="font-size:15px;color: #333333;float: left;font-weight:bold;margin-left: 7px;">客户信息</span>
          </div>

          <el-form-item label="客户名称：" prop="name" >
            <el-select
              v-model="intention.name"
              filterable
              remote
              clearable
              reserve-keyword
              style="width:340px;"
              placeholder="请搜索客户名称"
              @change="nameChange"
              :remote-method="getIntentionNames"
              :loading="nameLoading">
              <el-option
                  v-for="item in nameList"
                  :key="item.entName"
                  :label="item.entName"
                  :value="item.entName">
                  <span style="float: left;width:150px;">{{ item.entName }}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="信用代码：" prop="credit_code">
            <el-input v-model="intention.credit_code" placeholder="请输入信用代码" maxlength="50"  style="width:340px;" clearable ></el-input>
          </el-form-item>
          <el-form-item label="联系人：" prop="contractName">
            <el-input v-model="intention.contractName" placeholder="请输入联系人" maxlength="50"  style="width:340px;" clearable ></el-input>
          </el-form-item>
          <el-form-item label="手机号：" prop="contractMobile">
            <el-input v-model="intention.contractMobile" placeholder="请输入手机号" maxlength="20"  style="width:340px;" clearable ></el-input>
          </el-form-item>
          <el-form-item label="职位：" prop="contractPost">
            <el-input v-model="intention.contractPost" placeholder="请输入职位" maxlength="20"  style="width:340px;" clearable ></el-input>
          </el-form-item>
          <el-form-item label="客户等级：" prop="ecompanyLevel" >
            <el-radio-group v-model="intention.ecompanyLevel" >
              <el-radio v-for="item in ecompanyLevelList" :label="item.value" >
                {{item.label}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="客户来源：" prop="ecompanySourceType" >
            <el-radio-group v-model="intention.ecompanySourceType" >
              <el-radio v-for="item in ecompanySourceTypeList" :label="item.value" >
                {{item.label}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="所在省市：" prop="cityCode" >
            <gsb-cascadeselect v-model="intention.cityCode" :level="2" levelfield="REGION_LEVEL" parentfield="PARENT_CODE" labelField="REGION_NAME"  valueField="REGION_CODE"></gsb-cascadeselect>
          </el-form-item>
        </el-form>
        <div style="margin-left: 226px;">
          <el-button :loading="submitLoading" @click="save" style="width:120px;height:36px; background:#54C4A7; border-radius:4px;color: #FFFFFF;font-size: 16px;padding-top: 10px;">保存</el-button>
        </div>
      </el-dialog>
  
      <el-dialog width="500px" :visible.sync="showDetail" >
          <div slot="title">
            <span style="margin-left:9px;margin-top:-3px;;width:72px; height:25px; font-size:18px; font-family:PingFangSC-Regular; font-weight:400; color:rgba(51,51,51,1); line-height:25px;">意向客户</span>
            <div style="width: 500px; height: 1px;background-color: #E3E3E3;margin: 17px 20px 0px -20px"></div>
          </div>
    
          <div style="padding-left:70px;padding-bottom:30px;margin-top: -15px;">
            <div style="line-height: 16px;">
              <div style="width:2px;height:15px;float: left;background-color: #54C4A7">
              </div>
              <span style="font-size:15px;color: #333333;float: left;font-weight:bold;margin-left: 5px; ">客户信息</span>
            </div>
    
            <div style="clear:both;padding-left: 10px;">
              <div style="clear:both;padding-top: 15px;line-height: 22px;">
                <span style="float:left;width:90px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">ID</span>
                <span style="float:left;text-align:left;padding-left: 10px;font-size: 12px;color:#666666;font-family:PingFangSC-Regular;max-width: 260px;">{{intention.id}}</span>
              </div>
              <div style="clear:both;padding-top: 15px;line-height: 22px;">
                <span style="float:left;width:90px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">客户名称：</span>
                <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 260px;">{{intention.name || "---"}}</span>
              </div>
              <div style="clear:both;padding-top: 15px;line-height: 22px;">
                <span style="float:left;width:90px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">信用代码：</span>
                <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 260px;">{{intention.credit_code || "---"}}</span>
              </div>
              <div style="clear:both;padding-top: 15px;line-height: 22px;">
                <span style="float:left;width:90px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">联系人：</span>
                <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 260px;">{{intention.contractName || "---"}}</span>
              </div>
              <div style="clear:both;padding-top: 15px;line-height: 22px;">
                <span style="float:left;width:90px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">手机号：</span>
                <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 260px;">{{intention.contractMobile || "---"}}</span>
              </div>
              <div style="clear:both;padding-top: 15px;line-height: 22px;">
                <span style="float:left;width:90px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">职位：</span>
                <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 260px;">{{intention.contractPost || "---"}}</span>
              </div>
              <div style="clear:both;padding-top: 15px;line-height: 22px;">
                <span style="float:left;width:90px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">所属人：</span>
                <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 260px;">{{intention.owner_name || "---"}}</span>
              </div>
              <div style="clear:both;padding-top: 15px;line-height: 22px;">
                <span style="float:left;width:90px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">客户等级：</span>
                <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 260px;">{{intention.ecompanyLevelName || "---"}}</span>
              </div>
              <div style="clear:both;padding-top: 15px;line-height: 22px;">
                <span style="float:left;width:90px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">客户来源：</span>
                <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 260px;">{{intention.ecompanySourceTypeName || "---"}}</span>
              </div>
              <div style="clear:both;padding-top: 15px;line-height: 22px;">
                <span style="float:left;width:90px;text-align: left;color: #333333;font-size: 14px;font-weight:400;font-family:PingFangSC-Regular;">所在城市：</span>
                <span style="float:left;text-align:left;padding-left: 10px;font-size: 14px;color:#666666;font-family:PingFangSC-Regular;max-width: 260px;">{{intention.cityName || "---"}}</span>
              </div>
            </div>
          </div>
        </el-dialog>


        <el-dialog width="700px" :visible.sync="showFollow" >
          <div slot="title">
            <span style="margin-left:9px;margin-top:-3px;;width:72px; height:25px; font-size:18px; font-family:PingFangSC-Regular; font-weight:400; color:rgba(51,51,51,1); line-height:25px;">跟进信息</span>
            <div style="width: 700px; height: 1px;background-color: #E3E3E3;margin: 17px 20px 0px -20px"></div>
          </div>

          <div style="text-align: center;margin-top:-5px;">
            <el-radio-group v-model="followtab" @change="followChange" text-color="#FFFFFF" fill ="#59C1A6">
              <el-radio-button label="1">添加跟进</el-radio-button>
              <el-radio-button label="2">跟进列表</el-radio-button>
            </el-radio-group>
          </div>

          <div v-if="followtab == 1" style="margin-left:60px;">
            <div style="margin-left:50px;line-height: 20px;padding-top: 20px;">
                <div style="clear:both;height:15px;"></div>
                <span style="float:left;padding-top:5px;color:#333333;font-size: 14px;">客户意向：</span>
                  <el-select v-model="followInfo.followStatus" placeholder="请选择意向" style="margin-left: 10px;" >
                    <el-option
                      v-for="item in followStatusList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
              </div>
              <div style="margin-left:50px;line-height: 20px;padding-top: 20px;">
                <div style="clear:both;height:15px;"></div>
                <span style="float:left;padding-top:5px;color:#333333;font-size: 14px;">跟进内容：</span>
                <el-input
                  type="textarea"
                  :rows="8"
                  style="float:left;width:370px;margin-left:10px;"
                  placeholder="请输入跟进内容"
                  maxlength="300"
                  v-model="followInfo.content">
                </el-input>
              </div>
              <div style="clear:both;"></div>
              <div slot="footer" style="text-align: center;margin-top: 20px;margin-left: -125px;" >
                <el-button @click="showFollow = false" style="background-color: #EEEEEE;border: 0px;border-radius: 4px;width: 101px;height: 38px;color: #666666;" >取 消</el-button>
                <el-button @click="addFollow" :loading="followLoading" style="background-color: #59C1A6;border: 0px;border-radius: 4px;width: 101px;height: 38px;color: #FFFFFF;" >确 定</el-button>
              </div>
          </div>

          <div v-if="followtab == 2" style="margin-top: -15px;">
            <div style="line-height: 36px;padding-bottom: 20px;">
                <span style="float:left;color:#2F2F2F;font-size: 14px;">共{{followSearch.total}}条记录</span>
            </div>
            <div style="margin-top: 15px;">
              <el-table 
              stripe
              fix="true"
              :data="followSearch.list"
              style="width: 100%;margin-top: 23px;min-height: 400px;"
              empty-text="暂无"
              tooltip-effect="light"
              header-cell-style="background-color: #F5F5F5;color: #2F2F2F;font-size: 14px;font-weight:400;"
              row-style="height:50px;" >
                <el-table-column prop="id" label="ID" :formatter="onColFormater" align="center"  ></el-table-column>
                <el-table-column prop="followStatusName" label="客户意向" :formatter="onColFormater" align="center"  ></el-table-column>
                <el-table-column prop="content" label="跟进内容" :formatter="onColFormater" align="center" show-overflow-tooltip  ></el-table-column>
                <el-table-column prop="created_at" label="跟进时间" :formatter="onColFormater" align="center" ></el-table-column>
              </el-table>
              <div style="width:100%;text-align: center;margin-top: 20px">
                <el-pagination
                  @size-change="handleSizeChangeFollow"
                  @current-change="handleCurrentChangeFollow"
                  :current-page="followSearch.currentPage"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="followSearch.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="followSearch.total">
                </el-pagination>
              </div>
            </div>
          </div>
          
        </el-dialog>
    </div>
  </gsb-pcpage>