<template>
  <div>
    <span>企业管理/待审核企业</span>
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="150px" style="background-color: rgb(238, 241, 246)">
        <span @click="choseall()">全部</span>
        <div v-for="(companyStatus,index1) in companystatusList" :key="index1">
          <span @click="chosetype(index1)" v-if="companyStatus==0">待审核企业</span>
          <span @click="chosetype(index1)" v-if="companyStatus==1">审核通过企业</span>
          <span @click="chosetype(index1)" v-if="companyStatus==2">审核未通过企业</span>
        </div>
      </el-aside>

      <el-container>
        <el-main>
          <!--企业审核列表-->
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              label="序号"
              width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.companyId }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              label="注册人姓名"
              width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.registrantName }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              label="注册人手机号码"
              width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.registrantPhone }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              label="职位"
              width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.registrantPosition }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              label="公司名称"
              width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.companyName }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              label="地址"
              width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.companyAddress }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              label="注册日期"
              width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.registrantDate }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              label="社会统一信用代码"
              width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.name }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              label="公司营业执照"
              width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.businessLicense }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              label="审核状态"
              width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <div slot="reference" class="name-wrapper">
                    <span v-if="scope.row.reviewStatus==0">待审核</span>
                    <span v-if="scope.row.reviewStatus==1">审核通过</span>
                    <span v-if="scope.row.reviewStatus==2">审核未通过</span>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <span v-if="scope.row.reviewStatus==0 || scope.row.reviewStatus==1">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleNotEdit(scope.row)">审核不通过</el-button>
                </span>
                <span v-if="scope.row.reviewStatus==0 || scope.row.reviewStatus==2">
                 <el-button
                   size="mini"
                   @click="handleEdit(scope.row)">审核通过</el-button>
                </span>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="ruleForm.pageNum"
            :page-sizes="[5, 7, 9, 11]"
            :page-size="ruleForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>


  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {reviewStatus, selectcompanyList, selectcompanystatus} from "@/api/background/company";

export default {
    name: "Company",
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"
      return {
        tableData:[],
        ruleForm:{
          pageNum:1,
          pageSize:5,
          reviewStatus:''
        },
        total:0,
        companyStatus:{},
        companystatusList:[]
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      //查询企业列表
      getList(){
        selectcompanyList(this.ruleForm).then(response=>{
          console.log(response)
          this.tableData=response.data.companytotalList
          this.total=response.data.total
        })
      },
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.ruleForm.pageSize=val
        this.getList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.ruleForm.pageNum=val
        this.getList()
      },
      //产品类型
      getcompanystatusList(){
        selectcompanystatus().then(response=>{
          this.companystatusList=response.data
        })
      },
      //选择类型
      chosetype(index){
        this.ruleForm.reviewStatus=this.companystatusList[index]
        this.getList()
      },
      //选择全部
      choseall(){
        this.ruleForm.reviewStatus=''
        this.getList()
      },
      //审核不通过
      handleNotEdit(row){
        row.reviewStatus=2
        reviewStatus(row).then(response=>{
          alert(response.msg)
          if (response.code==200){
            this.getList()
            this.getcompanystatusList()
          }
        })
      },
      //审核通过
      handleEdit(row){
        row.reviewStatus=1
        reviewStatus(row).then(response=>{
          alert(response.msg)
          if (response.code==200){
            this.getList()
            this.getcompanystatusList()
          }
        })
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.getList()
      this.getcompanystatusList()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
