<template>
  <div class="realAuthentication">
    <template v-if="!isShowInfo">
      <div class="head-title">
        实名认证
      </div>
      <div class="content">
        <div>
          <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>
        </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="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>
          </div>
          <div class="realDetailList">
            <template v-if="listInfo.BrandModel">
              <div style="margin:20px 0;font-weight:bold;">
                <span class="tradeLine"></span>品牌信息
              </div>
              <el-form label-width="100px">
                <el-form-item label="客户群体:">
                  <span v-for="(item,index) in listInfo.BrandModel.CustomerTypeInfo" :key="index">{{item}}</span>
                </el-form-item>
                <el-form-item label="品牌名称:">{{listInfo.BrandModel.BrandName}}</el-form-item>
                <el-form-item label="店铺数量:">{{listInfo.BrandModel.ShopNum}}</el-form-item>
                <el-form-item label="店铺面积:">
                  <span v-if="listInfo.BrandModel.BuiltUpArea>0">{{listInfo.BrandModel.BuiltUpArea}}</span> -
                  <span v-if="listInfo.BrandModel.EndBuiltUpArea>0">{{listInfo.BrandModel.EndBuiltUpArea}}</span>
                </el-form-item>
                <el-form-item label="品牌定位:">{{listInfo.BrandModel.FullBrandName}}</el-form-item>
                <el-form-item label="扩店区域:">{{listInfo.BrandModel.StoreExpansion}}</el-form-item>
                <el-form-item label="商品性质:">{{listInfo.BrandModel.ProjectType}}</el-form-item>
                <el-form-item label="面积要求:">
                  <span v-if="listInfo.BrandModel.AreaRequirement>0">{{listInfo.BrandModel.AreaRequirement}}-</span>
                  <span v-if="listInfo.BrandModel.EndAreaRequirement>0">
                    {{listInfo.BrandModel.EndAreaRequirement}}</span>㎡
                </el-form-item>
              </el-form>
            </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)">审核通过
          </el-button>
          <el-button size="small" style="margin-top:20px;padding:9px 25px;" type="danger" @click="audit(2)">审核失败
          </el-button>
        </template>
      </div>
    </template>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 15,
          CompanyName: ''
        },
        total: 0,
        loading: false,
        tableData: [], //数据列表
        isShowInfo: false,
        listInfo: {},
        srcList:[]
      };
    },
    created() {
      this.getList();
    },
    methods: {
      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 = '确定审核失败？'
        }
        that.Confirm(str, function () {
          let msg = {
            CompanyId: that.listInfo.CompanyId,
            CompanyStatus: type
          }
          that.apipost("/api/Trade/UpdateCompanyStatus", msg, res => {
            if (res.data.resultCode == 1) {
              that.isShowInfo = false;
              that.getList();
            }
          })
        });
      },
    },
    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%;
  }

</style>
