<template>
  <div class="realAuthentication">
    <template v-if="!isShowInfo">
      <div class="head-title">
        实名认证
      </div>
      <div class="content">
        <div>
          <span style="margin-left: 10px">公司名称</span>
          <div class="searchInput" style="width:250px">
            <el-input @keyup.enter.native="msg.pageIndex=1,getList()" @clear="msg.pageIndex=1,getList()"
              style="display:inline-block;width:225px;height:30px" placeholder="请输入公司名称" v-model="msg.CompanyName"
              size="small" clearable>
            </el-input>
            <span @click="msg.pageIndex=1,getList()" class="el-icon-search"
              style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
          </div>
          <span style="margin-left: 10px">认证用户</span>

          <el-select size="small" v-model="msg.UserId" :filter-method="ChangeListName" filterable  @change="(msg.pageIndex = 1), getList()"
            placeholder="请选择">
            <el-option label="不限" :value="0"></el-option>
            <el-option v-for="item in userList" :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </div>
        <el-table :data="tableData" v-loading="loading" border style="width: 100%;margin:20px 0">
          <el-table-column prop="CompanyId" label="公司id" width="100">
          </el-table-column>
          <el-table-column prop="CompanyName" label="企业名称">
          </el-table-column>
          <el-table-column prop="BusinessLicense" width="150" label="营业执照">
            <template slot-scope="scope">
              <el-image title="点击查看大图" style="width:50px;" :src="scope.row.BusinessLicense"
            :preview-src-list="scope.row.BusinessList"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="UnifiedCode" label="统一社会信用代码">
          </el-table-column>
          <el-table-column prop="CompanyStatus" width="150" label="公司状态">
            <template slot-scope="scope">
              <span v-if="scope.row.CompanyStatus==0" style="color:#1273bc;">待审核</span>
              <span v-if="scope.row.CompanyStatus==1" style="color:green;">审核通过</span>
              <span v-if="scope.row.CompanyStatus==2" style="color:#e95252;">审核拒绝</span>
            </template>
          </el-table-column>
          <el-table-column prop="Mobile" width="150" label="联系电话">
          </el-table-column>
          <el-table-column prop="LegalPerson" width="180" label="法人">
          </el-table-column>
          <el-table-column prop="UserName"  label="认证用户"></el-table-column>
          <el-table-column prop="address" width="150" label="操作">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="审核" placement="top">
                <img @click="getInfo(scope.row,1)" src="../../assets/img/userman/add_remark.png" alt="">
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align:right" background @current-change="handleCurrentChange"
          :page-size="msg.pageSize" :current-page.sync="msg.pageIndex" layout="total,prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </template>
    <template v-else>
      <div class="head-title">
        <span @click="isShowInfo=false" style="color:rgb(64, 158, 255);cursor:pointer;">实名认证</span><span
          style="margin:0 9px;color:#C0C4CC">/</span><span>详情</span>
      </div>
      <div class="content">
        <div class="realDetailInfo">
          <div class="realDetailList">
            <div style="margin:20px 0;font-weight:bold;">
              <span class="tradeLine"></span>公司信息
            </div>
            <el-form label-width="150px">
              <el-form-item label="企业名称:">{{listInfo.CompanyName}}</el-form-item>
              <el-form-item label="法人:">{{listInfo.LegalPerson}}</el-form-item>
              <el-form-item label="统一社会信用代码:">{{listInfo.UnifiedCode}}</el-form-item>
              <el-form-item label="公司状态:">
                <span v-if="listInfo.CompanyStatus==0" style="color:#1273bc;">待审核</span>
                <span v-if="listInfo.CompanyStatus==1" style="color:green;">审核通过</span>
                <span v-if="listInfo.CompanyStatus==2" style="color:#e95252;">审核拒绝</span>
              </el-form-item>
              <el-form-item label="联系电话:">{{listInfo.Mobile}}</el-form-item>
              <el-form-item label="营业执照:">
                 <el-image 
                  style="width: 200px;"
                  :src="listInfo.BusinessLicense" 
                  :preview-src-list="srcList">
                </el-image>
              </el-form-item>
              <el-form-item label="审核备注:" v-if="listInfo.CompanyStatus==2">
                <span>
                  {{listInfo.RejectRemark}}
                </span>
             </el-form-item>
            </el-form>
          </div>
          <div class="realDetailList">
            <template v-if="listInfo.BrandModel ">
              <div style="margin:20px 0;font-weight:bold;">
                <span class="tradeLine"></span>{{listInfo.FirstShopType==1?'品牌信息':'载体信息'}} 
              </div>
              <template v-if="listInfo.FirstShopType==1">
                <el-form label-width="120px" >
                  <el-form-item label="品牌分类:">{{listInfo.BrandModel.ClassName}}</el-form-item>
                  <el-form-item label="品牌全名:">{{listInfo.BrandModel.FullBrandName}}</el-form-item>
                  <el-form-item label="品牌名:">{{listInfo.BrandModel.BrandName}}</el-form-item>
                  <el-form-item label="Logo:">
                    <el-image
                      v-if="listInfo.BrandModel.Logo!=''"
                      style="width: 80px; height: 80px"
                      :src="listInfo.BrandModel.Logo"
                    >
                    </el-image>
                    <span v-else>无</span>
                  </el-form-item>
                  <el-form-item label="介绍图:">
                    <div
                      style="
                        position: relative;
                        margin-right: 20px;
                        display: inline-block;
                      "
                      v-for="(item, index) in listInfo.BrandModel.BannerList"
                      :key="index + '2'"
                    >
                      <el-image
                        style="width: 100px; height: 100px"
                        :src="item"
                        
                      >
                      </el-image>
                    </div>
                  </el-form-item>
                  <el-form-item label="品牌视频:">
                    <el-input
                    v-model="listInfo.BrandModel.VideoUrl"
                    class="w600"
                    size="small"
                    placeholder="请输入内容"
                    disabled
                    v-if="listInfo.BrandModel.VideoUrl != ''"
                  >
                  </el-input>
                  <span   v-if="listInfo.BrandModel.VideoUrl == ''">无</span>
                  <a
                    v-if="listInfo.BrandModel.VideoUrl != ''"
                    class="blue noline"
                    :href="listInfo.BrandModel.VideoUrl"
                    target="_blank"
                    >视频链接</a
                  >
                  </el-form-item>
                  <el-form-item label="店铺数量:">{{listInfo.BrandModel.ShopNum}}</el-form-item>
                  <el-form-item label="建筑面积:">{{listInfo.BrandModel.BuiltUpArea}}~{{listInfo.BrandModel.EndBuiltUpArea}}</el-form-item>
                  <el-form-item label="需求面积:">{{listInfo.BrandModel.AreaRequirement}}~{{listInfo.BrandModel.EndAreaRequirement}}</el-form-item>
                  <el-form-item label="客群定位:">{{listInfo.BrandModel.CustomerType}}</el-form-item>
                  <el-form-item label="品牌定位:">{{listInfo.BrandModel.BrandType}}</el-form-item>
                  <el-form-item label="拓展区域:">{{listInfo.BrandModel.StoreExpansion}}</el-form-item>
                  <el-form-item label="品牌性质:">{{listInfo.BrandModel.ProjectName}}</el-form-item>
  
                  <div class="brandShuxing">
                    <div class="brandShuxing_item">
                      <el-form-item label="店铺开口尺寸" class="is-required">
                        <el-radio v-model="listInfo.BrandModel.IsShopSize" :label="1" disabled>是</el-radio>
                        <el-radio v-model="listInfo.BrandModel.IsShopSize" :label="0" disabled>否</el-radio>
                      </el-form-item>
                      <el-input
                        v-model="listInfo.BrandModel.ShopSize"
                        v-if="listInfo.BrandModel.IsShopSize == 1"
                        size="small"
                        class="w120"
                        placeholder="店铺开口尺寸"
                        maxlength="80"
                        disabled
                      />
                    </div>
                    <div class="brandShuxing_item">
                      <el-form-item label="燃气" class="is-required">
                        <el-radio v-model="listInfo.BrandModel.RanQi" :label="1" disabled>是</el-radio>
                        <el-radio v-model="listInfo.BrandModel.RanQi" :label="0" disabled>否</el-radio>
                      </el-form-item>
                      <el-input
                        v-model="listInfo.BrandModel.RanQiBZ"
                        v-if="listInfo.BrandModel.RanQi == 1"
                        size="small"
                        class="w120"
                        placeholder="燃气备注"
                        maxlength="80"
                        disabled
                      />
                    </div>
                  </div>
                  <div class="brandShuxing">
                    <div class="brandShuxing_item">
                      <el-form-item label="排烟量" class="is-required">
                        <el-radio v-model="listInfo.BrandModel.PaiYan" :label="1" disabled>是</el-radio>
                        <el-radio v-model="listInfo.BrandModel.PaiYan" :label="0" disabled>否</el-radio>
                      </el-form-item>
                      <el-input
                        v-model="listInfo.BrandModel.PaiYanBZ"
                        v-if="listInfo.BrandModel.PaiYan == 1"
                        size="small"
                        class="w120"
                        placeholder="排烟量"
                        maxlength="80"
                        disabled
                      />
                    </div>
                     <div class="brandShuxing_item">
                      <el-form-item label="电量" class="is-required">
                        <el-radio v-model="listInfo.BrandModel.IsDianLiang" :label="1" disabled>是</el-radio>
                        <el-radio v-model="listInfo.BrandModel.IsDianLiang" :label="0" disabled>否</el-radio>
                      </el-form-item>
                      <el-input
                        v-model="listInfo.BrandModel.DianLiang"
                        v-if="listInfo.BrandModel.IsDianLiang == 1"
                        size="small"
                        class="w120"
                        placeholder="电量"
                        maxlength="80"
                        disabled
                      />
                    </div>
                  </div>
                  <div class="brandShuxing">
                    <div class="brandShuxing_item">
                      <el-form-item label="上下水" class="is-required">
                        <el-radio v-model="listInfo.BrandModel.Plumbing" :label="1" disabled>是</el-radio>
                        <el-radio v-model="listInfo.BrandModel.Plumbing" :label="0" disabled>否</el-radio>
                      </el-form-item>
                    </div>
                    <div class="brandShuxing_item">
                      <el-form-item label="管径" class="is-required">
                        <el-radio v-model="listInfo.BrandModel.Caliber" :label="1" disabled>是</el-radio>
                        <el-radio v-model="listInfo.BrandModel.Caliber" :label="0" disabled>否</el-radio>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="brandShuxing">
                    <div class="brandShuxing_item">
                      <el-form-item label="排污" class="is-required">
                        <el-radio v-model="listInfo.BrandModel.Sewage" :label="1" disabled>是</el-radio>
                        <el-radio v-model="listInfo.BrandModel.Sewage" :label="0" disabled>否</el-radio>
                      </el-form-item>
                    </div>
                    <div class="brandShuxing_item">
                      <el-form-item label="空调" class="is-required">
                        <el-radio v-model="listInfo.BrandModel.KongTiao" :label="1" disabled>是</el-radio>
                        <el-radio v-model="listInfo.BrandModel.KongTiao" :label="0" disabled>否</el-radio>
                      </el-form-item>
                    </div>
                    
                  </div>
                  
                  <div class="brandShuxing">
                    
                    <div class="brandShuxing_item">
                      <el-form-item label="新风" class="is-required">
                        <el-radio v-model="listInfo.BrandModel.XinFeng" disabled :label="1">是</el-radio>
                        <el-radio v-model="listInfo.BrandModel.XinFeng" disabled :label="0">否</el-radio>
                      </el-form-item>
                    </div>
                   
                  </div>
                  <div class="brandShuxing">
                    
                    <div class="brandShuxing_item">
                      <el-form-item label="开点意愿:">
                        <el-rate
                          disabled
                          style="margin-top: 10px;"
                          v-model="listInfo.BrandModel.OpenShopWish"
                          score-template="{listInfo.BrandModel.OpenShopWish}"
                          v-if="listInfo.BrandModel.OpenShopWish!=-1"
                          :colors="colors">
                        </el-rate>
                        <span v-else>
                          暂无意愿
                        </span>
                      </el-form-item>
                     
                     
                    </div>
                  </div>
                </el-form>
              </template >  
              <template v-if="listInfo.FirstShopType==2">
                <el-form label-width="120px" >
                  <el-form-item label="载体名称:">{{listInfo.CarrierModel.CarrierName}}</el-form-item>
                  <el-form-item label="开发商:">{{listInfo.CarrierModel.Developers}}</el-form-item>
                  <el-form-item label="Logo:">
                    <el-image
                      v-if="listInfo.CarrierModel.Logo!=''"
                      style="width: 80px; height: 80px"
                      :src="listInfo.CarrierModel.Logo"
                    >
                    </el-image>
                    <span v-else>无</span>
                  </el-form-item>
                  <el-form-item label="介绍图:">
                    <div
                      style="
                        position: relative;
                        margin-right: 20px;
                        display: inline-block;
                      "
                      v-for="(item, index) in listInfo.CarrierModel.BannerList"
                      :key="index + '2'"
                    >
                      <el-image
                        style="width: 100px; height: 100px"
                        :src="item"
                        
                      >
                      </el-image>
                    </div>
                  </el-form-item>
                  <el-form-item label="载体视频:">
                    <el-input
                    v-model="listInfo.CarrierModel.VideoUrl"
                    class="w600"
                    size="small"
                    placeholder="请输入内容"
                    disabled
                    v-if="listInfo.CarrierModel.VideoUrl != ''"
                  >
                  </el-input>
                  <span   v-if="listInfo.CarrierModel.VideoUrl == ''">无</span>
                  <a
                    v-if="listInfo.CarrierModel.VideoUrl != ''"
                    class="blue noline"
                    :href="listInfo.CarrierModel.VideoUrl"
                    target="_blank"
                    >视频链接</a
                  >
                  </el-form-item>
                  <el-form-item label="项目地址:">{{listInfo.CarrierModel.Address}}</el-form-item>
                  <el-form-item label="经纬度:">{{listInfo.CarrierModel.LatAndLon}}</el-form-item>
                  <el-form-item label="开业时间:">{{listInfo.CarrierModel.OpenTime}}</el-form-item>
                  <el-form-item label="项目类型:">{{listInfo.CarrierModel.ProjectName}}</el-form-item>
                  <el-form-item label="商业体量:">{{listInfo.CarrierModel.CarrierSize}}万平方米</el-form-item>
                  <el-form-item label="商业层数:">{{listInfo.CarrierModel.LayersNum}}</el-form-item>
                  <el-form-item label="车位数量:">{{listInfo.CarrierModel.CarNum}}</el-form-item>
                  <el-form-item label="业态规则:">{{listInfo.CarrierModel.CarrierPlan}}</el-form-item>
                  <el-form-item label="招引目标:">{{listInfo.CarrierModel.CarrierTarget}}</el-form-item>
                  <el-form-item label="总体定位:">{{listInfo.CarrierModel.Location}}</el-form-item>
                  <el-form-item label="目标人群:">{{listInfo.CarrierModel.Crowd}}</el-form-item>
                  <el-form-item label="地铁信息:">
                    <div v-if="listInfo.CarrierModel.CarrierMetroList && listInfo.CarrierModel.CarrierMetroList.length>0">
                      <div >
                        {{listInfo.CarrierModel.CarrierMetroList[0].MetroNum}}号线{{listInfo.CarrierModel.CarrierMetroList[0].MetroName}},&nbsp;{{listInfo.CarrierModel.CarrierMetroList[0].Distance}}
                      </div>
                    </div>
                    <div v-else>
                      无
                    </div>
                 
                  </el-form-item>
  
                 
                </el-form>
               
              </template>  
            </template>
          </div>
        </div>
        <template v-if="listInfo.CompanyStatus==0">
          <el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="audit(1),AuditRemark = ''">审核通过
          </el-button>
          <el-button size="small" style="margin-top:20px;padding:9px 25px;" type="danger" @click="auditfail()">审核失败
          </el-button>
        </template>
      </div>
    </template>
    <el-dialog title="审核拒绝" :visible.sync="resondialog2" width="600px">
      <el-form label-width="80px">
        <el-form-item label="拒绝原因" class="is-required">
          <el-input type="textarea" :rows="6" v-model="AuditRemark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="resondialog2 = false">取 消</el-button>
        <el-button @click="audit(2)" size="small" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        resondialog2:false,
        msg: {
          pageIndex: 1,
          pageSize: 15,
          CompanyName: '',
          UserId:0,
        },
        usermsg: {
            pageIndex: 1,
            pageSize: 20,
            Name: '',
            Source: 0,
            MemberGrade: 0,
            Id: 0,
            Moblie: ''
      },
      userList:[],
        total: 0,
        loading: false,
        tableData: [], //数据列表
        isShowInfo: false,
        listInfo: {},
        srcList:[],
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
        AuditRemark:'',
      };
    },
    created() {
      this.getList();
      this.getuserList()

    },
    methods: {
      ChangeListName(val) {
          this.usermsg.Name = val;
          this.getuserList();
      },
      getuserList() {
          this.apipost("/api/user/GetMemberUserDropDownList", this.usermsg, res => {
          if (res.data.resultCode == 1) {
              let pageData = res.data.data.pageData;
              this.userList = pageData;
            
          }
          })
      },
      getList() {
        this.loading = true;
        this.apipost("/api/Trade/GetCompanyPageList", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            let pageData = res.data.data.pageData;
            this.tableData = pageData;
            this.tableData.forEach(x=>{
              x.BusinessList=[];
              x.BusinessList.push(x.BusinessLicense);
            })
          } else {
            this.Error(res.data.message)
          }
        })
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      getInfo(item) {
        this.isShowInfo = true;
        this.apipost("/api/Trade/GetCompany", {
          CompanyId: item.CompanyId
        }, res => {
          if (res.data.resultCode == 1) {
            this.isShowInfo = true;
            this.listInfo = res.data.data;
            this.srcList=[];
            this.srcList.push(this.listInfo.BusinessLicense);
          }
        })
      },
      //审核
      audit(type) {
        let that = this;
        let str = ''
        if (type == 1) {
          str = '确定审核通过？'
        } else {
          str = '确定审核失败？'
        }
        if(type==1){
          that.Confirm(str, function () {
          let msg = {
            CompanyId: that.listInfo.CompanyId,
            CompanyStatus: type,
            Remark:'',
          }
          const loading = that.$loading({
              lock: true,
              text: '审核中...',
              spinner: 'el-icon-loading',
            });
          that.apipost("/api/Trade/UpdateCompanyStatus", msg, res => {
            loading.close();
            if (res.data.resultCode == 1) {
              that.Success(res.data.message)
              that.isShowInfo = false;
              that.getList();
            }else{
              that.Error(res.data.message)
            }
          })
        });
        }else{
          let msg = {
            CompanyId: that.listInfo.CompanyId,
            CompanyStatus: type,
            Remark:that.AuditRemark
          }
          const loading = that.$loading({
              lock: true,
              text: '审核中...',
              spinner: 'el-icon-loading',
            });
          that.apipost("/api/Trade/UpdateCompanyStatus", msg, res => {
            loading.close();
            if (res.data.resultCode == 1) {
                that.resondialog2 = false
              that.Success(res.data.message)
              that.isShowInfo = false;
              that.getList();
            }else{
              that.Error(res.data.message)
            }
          })
   
        }
        
      },
      auditfail(){//失败理由
        this.resondialog2 = true;
        this.AuditRemark = '';
      }
    },
    mounted() {}
  };

</script>
<style>
  .realAuthentication .content .searchInput {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
  }

  .realAuthentication .content .searchInput .el-input__inner {
    border: none;
    outline: none;
    height: 30px;
    line-height: 30px;
  }

  .realAuthentication .content .searchInput {
    line-height: normal;
    display: inline-table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    width: 250px;
    margin-right: 20px;
  }

  .realAuthentication .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

  .realAuthentication .tradeLine {
    display: inline-block;
    width: 3px;
    height: 10px;
    margin-right: 5px;
    background-color: #409EFF;
  }

  .realAuthentication .realDetailInfo {
    display: flex;
    justify-content: space-between;
  }

  .realAuthentication .realDetailList {
    width: 50%;
  }
  .realAuthentication .brandShuxing {
  display: flex;
  justify-content: space-between;
  width: 850px;
}
.realAuthentication .brandShuxing_item {
  display: flex;
  justify-content: space-between;
  width: 50%;
}

</style>
