<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;
    width: 60%;
  }

  .realAuthentication .realDetailList {
    padding-right: 100px;
  }

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

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

</style>
