<!--资格申请-添加-->
<template>
  <div class="addPage">
    <div v-if="pageType==1">
      <div class="addPage_title">
        <p>供应商详情</p>
        <P></P>
        <p class="button-p reset-button-one" @click="backPage">返回</p>
      </div>
      <div class="addPage_b">
        <!--申请3-->
        <div v-if="pageType==1" class="apply_tree">
          <div v-if="form.state!=1" class="apply_tree_t">
            <img  src="@/assets/ZDimages/gasManage3_0/icon_sml_lxr.png"/>
            <i>请认真核对提交的供应商信息，确认无误后点击提交进行审核。</i>
          </div>
          <div class="apply_tree_m">
            <li>
              <img  src="@/assets/ZDimages/gasManage3_0/icon_xxjl_gs.png"/>
              <div class="apply_tree_m_r">
                <i>供应商名称：</i>
                <p>{{form.companyName}}</p>
                <i>经营地址：</i>
                <p>{{form.businessAddress}}</p>
              </div>
            </li>
            <i></i>
            <li>
              <img  src="@/assets/ZDimages/gasManage3_0/icon_xxjl_lxr.png"/>
              <div class="apply_tree_m_r">
                <i>联系人：</i>
                <p>{{form.contacts}}</p>
                <i>联系方式：</i>
                <p>{{form.phone}}</p>
              </div>
            </li>
          </div>
          <div class="apply_tree_b">
            <li v-for="(item2,index2) in form.qpSupplierCredentialsVos">
              <div class="apply_tree_b_t">{{item2.naturalName}}：</div>
              <div class="apply_tree_b_m"><img  :src="item2.naturalUrl"/></div>
              <div class="apply_tree_b_b"><i style="color: #333333;font-style: normal;">有效期</i>：{{item2.startTime}}至{{item2.endTime}}</div>
            </li>
          </div>
        </div>
      </div>
      <!--  列表信息  -->
      <div  class="addPage_list">
        <template>
          <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <!--运输人员-->
            <el-tab-pane name="1">
              <span slot="label">运输人员<i style="font-style: normal">（{{total}}）</i></span>
              <el-table border v-loading="loading" :data="tableData" height="300">
                <el-table-column label="姓名" align="left" prop="userName"/>
                <el-table-column label="联系方式" align="left" prop="phone"></el-table-column>
                <el-table-column label="添加时间" align="left" prop="createTime"></el-table-column>
                <el-table-column label="证照信息" align="left" prop="creatTime">
                  <template slot-scope="scope">
                    <span  @click="handleClick('3',scope.row,'detail')" style="color: #0183FA;">查看</span>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                :total="total"
                layout="total, prev, pager, next, sizes, jumper"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </el-tab-pane>
            <!--运输车辆-->
            <el-tab-pane  name="2">
              <span slot="label">运输车辆<i style="font-style: normal">（{{total2}}）</i></span>
              <el-table border v-loading="loading" :data="tableData2" height="300">
                <el-table-column label="车辆号牌" align="left" prop="carCode"/>
                <el-table-column label="添加时间" align="left" prop="createTime"></el-table-column>
                <el-table-column label="证照信息" align="left" prop="createTime">
                  <template slot-scope="scope">
                    <span @click="handleClick('2',scope.row,'detail')"  style="color: #0183FA;">查看</span>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                :total="total2"
                layout="total, prev, pager, next, sizes, jumper"
                :page.sync="queryParams2.pageNum"
                :limit.sync="queryParams2.pageSize"
                @pagination="getList2"
              />
            </el-tab-pane>
            <!--气瓶信息-->
            <el-tab-pane label="气瓶信息" name="3">
              <span slot="label">气瓶信息<i style="font-style: normal">（{{total3}}）</i></span>
              <el-table border v-loading="loading" :data="tableData3" height="300">
                <el-table-column label="气体名称" align="left" prop="airName"/>
                <el-table-column label="气体级别/规格" align="left" prop="configName"></el-table-column>
                <el-table-column label="气体组分" align="left" prop="airConstituents"></el-table-column>
                <el-table-column label="添加时间" align="left" prop="createTime"></el-table-column>
              </el-table>
              <pagination
                :total="total3"
                layout="total, prev, pager, next, sizes, jumper"
                :page.sync="queryParams3.pageNum"
                :limit.sync="queryParams3.pageSize"
                @pagination="getList3"
              />
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
      <div class="record">
        <div class="record_title">审核记录</div>
        <el-table border v-loading="loading" :data="tableData4" height="300">
          <el-table-column label="审核人" align="left" prop="auditUser"/>
          <el-table-column label="审核内容" align="left" prop="auditTitle"></el-table-column>
          <el-table-column label="审核时间" align="left" prop="auditTime"></el-table-column>
          <el-table-column label="审核操作" align="left" prop="status">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">待审核</span>
              <span v-if="scope.row.status == 1">通过</span>
              <span v-if="scope.row.status == 2">驳回</span>
            </template>
          </el-table-column>
          <el-table-column label="审核说明" align="left" prop="auditContent"></el-table-column>
        </el-table>
      </div>
    </div>
    <detail-page v-if="pageType==2" :pageData3="pageData3"></detail-page>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import {
  carCheckRecordList,
  getListGood,
  supplierDetail,
  supplierSyntheticalAudit,
  userCheckRecordList
} from '@/api/gasManage3_0/gasManage'
import { Base64 } from 'js-base64'
import detailPage from "./supplierPersonCarDetail.vue"
export default {
  name: "addPage",
  components: {
    detailPage,
  },
  props:{
    pageData2: {},
  },
  data() {
    return {
      activeName:'1',
      pageType:1,
      uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      loading:false,
      form:{

      },
      dateRange:[],
      pageData3:{},

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:20,
        isAudit:1,
        searchValue:'',
        supplierId:'',
      },
      // 车辆查询参数
      queryParams2: {
        pageNum: 1,
        pageSize:20,
        isAudit:1,
        searchValue:'',
        supplierId:'',
      },
      //气瓶查询参数
      queryParams3: {
        pageNum: 1,
        pageSize:20,
        supplierId:'',
      },
      //气瓶查询参数
      queryParams4: {
        pageNum: 1,
        pageSize:20,
        syntheticId:this.pageData2.id
      },
      total:0,
      total2:0,
      total3:0,
      total4:0,
      tableData:[],
      tableData2:[],
      tableData3:[],
      tableData4:[],
      dialogVisible:false,
    };
  },
  created() {

  },
  methods: {
    handleTabClick(tab, event){
      let _this=this;
      console.log(tab.name)
      if(tab.name==1){
        _this.getList()
      }else if(tab.name==2){
        _this.getList2()
      }else if(tab.name==3){
        _this.getList3()
      }

    },
    handleClick(index,row,doType){
      let _this=this;
      if(doType=='detail'){
        _this.pageData3.id=row.id;
        _this.pageData3.type=index;
        _this.pageType=2;
      }else if(doType=='back'){
        _this.pageType=1;
      }
    },
    //返回
    backPage(){
      this.$parent.handleClick('','','back');
    },
    /* 详情 */
    getInfo(id){
      let _this=this;
      supplierDetail(id).then( response => {
        let res=response.data;
        if(response.code==200){
          _this.form=res;
          let arr=[];
          _this.form.qpSupplierCredentialsVos.forEach(function(item,idnex) {
            if(item.naturalUrl && item.startTime && item.endTime){
              arr.push(item)
            }
          })
          _this.form.qpSupplierCredentialsVos=arr
        }
      });

    },
    //运输人员
    getList(){
      let _this=this;
      userCheckRecordList(_this.queryParams).then( response => {
        let res=response.rows;
        _this.tableData=res;
        _this.total=response.total
      });
    },
    //运输车辆
    getList2(){
      let _this=this;
      carCheckRecordList(_this.queryParams2).then( response => {
        let res=response.rows;
        _this.tableData2=res;
        _this.total2=response.total
      });
    },
    //气瓶列表
    getList3(){
      let _this=this;
      getListGood(_this.queryParams3).then( response => {
        let res=response.rows;
        _this.tableData3=res;
        _this.total3=response.total
      });
    },
    //审核列表
    getList4(){
      let _this=this;
      supplierSyntheticalAudit(this.pageData2.id).then( response => {
        let res=response.data;
        _this.tableData4=res;
        _this.total4=response.total
      });
    },



  },
  mounted() {
    this.getInfo(this.pageData2.id);
    this.queryParams.supplierId=this.pageData2.id
    this.queryParams2.supplierId=this.pageData2.id
    this.queryParams3.supplierId=this.pageData2.id
    this.getList()
    this.getList2()
    this.getList3()
    this.getList4()
  }

};
</script>

<style scoped lang="scss">
.addPage {
  flex:1;
  display: flex!important;
  flex-direction: column;
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
  border-radius:10px;
  /*顶部*/
  .addPage_title{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E0E0E0;
    padding-top:20px;
    p:nth-child(1){
      line-height:60px;
      color: #0045AF;
      font-size:18px;
      margin:0 12px 0 20px;
    }
    p:nth-child(2){
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;
      flex: 1;
    }
    p:nth-child(3){
      margin-right:20px;
    }
  }

  .addPage_b{
    flex: 1;
    display: flex!important;
    flex-direction: column;
    /*申请三*/
    .apply_tree{
      width: 900px;
      margin: 0 auto;
      .apply_tree_t{
        display: flex;
        justify-content: center;
        margin-top: 50px;
        >img{
          width: 16px;
          height: 16px;
          margin-right: 10px;
        }
        >i{
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #FA8801;
          line-height: 16px;
          font-style: normal;
        }
      }
      .apply_tree_m{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 50px;
        >li{
          display: flex;
          justify-content: flex-start;
          >img{
            width: 102px;
            height: 122px;
            margin-right: 28px;
          }
          .apply_tree_m_r{
            >i{
              display: block;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              line-height: 16px;
              font-style: normal;
            }
            >p{
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
              line-height: 16px;
              margin-top: 20px;
            }
          }
        }
        >i{
          width: 2px;
          height: 100px;
          background: #E0E0E0;
          margin: 0 66px;
        }
      }
      .apply_tree_b{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 50px;
        >li{
          list-style-type: none;
          margin-left: 64px;
          .apply_tree_b_t{
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            line-height: 16px;
            margin-bottom: 20px;
          }
          .apply_tree_b_m{
            width: 230px;
            height: 150px;
            border: 1px solid #E0E0E0;
            >img{
              width: 190px;
              height: 138px;
              margin: 6px 20px;
            }
          }
          .apply_tree_b_b{
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
            line-height: 24px;
            margin-top: 24px;
          }
        }
      }
      .sub_btn{
        display: flex;
        justify-content: center;
        margin: 30px 0;
      }
    }
  }
  /*列表*/
  .addPage_list{
    margin: 20px;
    .button-box{
      display: flex;
      justify-content: flex-start;
    }
  }
  /*审核记录*/
  .record{
    margin: 20px;
    .record_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
      line-height: 16px;
      margin-bottom: 20px;
    }
  }
}
</style>
