<template>
  <div>
    <!--列表-->
  <div v-if="!toDetail" class="supplier">
    <div class="search-supplier">
      <div class="title_wrap">
        <div class="enterprise_title">
          评价结果
        </div>
      </div>
      <div class="content-supplier">
        <el-form :model="formdata" label-width="82px" label-position="right"  :inline="true" >
          <el-row>
            <el-col :span="8">
              <el-form-item label="分供方名称">
                <el-input v-model="formdata.customerName" placeholder="请输入分供方名称" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="品类">
                <el-select v-model="formdata.name1" placeholder="请选择" :collapse-tags="true" clearable>
                  <!--<el-option v-for="(item,index) in suppliertype" :label="item.dictLabel" :value="item.dictValue" :key="index"></el-option>-->
                  <el-option label="物资" value="1"></el-option>
                  <el-option label="设备" value="2"></el-option>
                  <el-option label="劳务分包" value="3"></el-option>
                  <el-option label="专业分包" value="4"></el-option>
                  <el-option label="专业服务" value="5"></el-option>
                  <el-option label="租赁" value="6"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="评价类型">
                <el-select v-model="formdata.name2" placeholder="请选择" :collapse-tags="true" clearable>
                  <!--<el-option v-for="(item,index) in suppliertype" :label="item.dictLabel" :value="item.dictValue" :key="index"></el-option>-->
                  <el-option label="系统采集" value="1"></el-option>
                  <el-option label="采购方录入" value="2"></el-option>
                  <el-option label="分供方录入" value="3"></el-option>
                  <el-option label="第三方接入" value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="规则类型">
                <el-select v-model="formdata.customerState" placeholder="请选择" :collapse-tags="true" clearable>
                  <el-option label="信用" value="1"></el-option>
                  <el-option label="履约" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="评价维度">
                <el-select v-model="formdata.creditLevel"  placeholder="请选择" :collapse-tags="true" clearable>
                  <el-option label="信用维度" value="1"></el-option>
                  <el-option label="物资" value="2"></el-option>
                  <el-option label="设备" value="3"></el-option>
                  <el-option label="劳务分包" value="4"></el-option>
                  <el-option label="专业分包" value="5"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="评价状态">
                <el-select v-model="formdata.credential"  placeholder="请选择" :collapse-tags="true" clearable>
                  <el-option label="待确认" value="1"></el-option>
                  <el-option label="已生效" value="2"></el-option>
                  <el-option label="已拒绝" value="3"></el-option>
                  <el-option label="待提交" value="4"></el-option>
                  <el-option label="审批中" value="5"></el-option>
                  <el-option label="已驳回" value="6"></el-option>
                  <el-option label="已作废" value="7"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="是否申诉">
                <el-select v-model="formdata.customerState" placeholder="请选择" :collapse-tags="true" clearable>
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="创建时间">
                <!--<el-date-picker-->
                  <!--v-model="formdata.times"-->
                  <!--type="daterange"-->
                  <!--value-format="yyyy-MM-dd"-->
                  <!--range-separator="至"-->
                  <!--start-placeholder="年/月/日"-->
                  <!--end-placeholder="年/月/日">-->
                <!--</el-date-picker>-->
                <el-select v-model="formdata.name4"  placeholder="请选择" :collapse-tags="true" clearable>
                  <el-option label="近一天" value="1"></el-option>
                  <el-option label="近三天" value="2"></el-option>
                  <el-option label="近一周" value="3"></el-option>
                  <el-option label="近半月" value="4"></el-option>
                  <el-option label="自定义" value="5"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="评价周期">
                <el-select v-model="formdata.name3"  placeholder="请选择" :collapse-tags="true" clearable>
                  <el-option label="近一天" value="1"></el-option>
                  <el-option label="近三天" value="2"></el-option>
                  <el-option label="近一周" value="3"></el-option>
                  <el-option label="近半月" value="4"></el-option>
                  <el-option label="自定义" value="5"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="  ">
            <el-button type="primary" size="small" @click="getSearch">查询</el-button>
            <el-button size="small" @click="clears">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="table-supplier">
      <div class="total-title">
        <div class="totals">共{{total}}条</div>
        <p class="total-dc" @click="customerExport">
          <img src="@/assets/images/EXCEL.png" alt="">
          <span class="excel">导出EXCEL</span>
        </p>
      </div>
      <div class="table-item-jf table-item-jf1 empty-table" v-if="total == 0 && !isSkeleton">
        <img class="item-jf-img" src="@/assets/images/kong.png" alt="">
        <div class="item-jf-titel">暂无相关数据</div>
        <div class="item-jf-text">抱歉，暂无数据，试试更换搜索条件吧</div>
      </div>
      <skeleton v-if="isSkeleton"></skeleton>

      <div class="table-item-jf table-item" v-if="!isSkeleton&&tableData.length>0">
        <el-table :data="tableData" :header-cell-style="{ background:'#f0f3fa',color: 'rgba(35,35,35,0.8)'}"
                  v-sticky-header.always="{offsetTop : '-16px',offsetBottom : '-15px'}" class="table-item1 fixed-table" border highlight-current-row
                  :header-row-class-name="setHeaderRow" :cell-class-name="setCellClass" :row-class-name="setRowClass" :header-cell-class-name="setCellClass"
                  ref="theOwnerListTable">

          <el-table-column type="index" label="序号" width="60" :resizable="false">
            <template slot-scope="scope">
              <span>{{(queryParams.pageNum - 1) *queryParams.pageSize + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="供应商名称" prop="name1" width="200" :resizable="false"></el-table-column>
          <el-table-column label="所属组织" prop="name2" width="260" :resizable="false">
            <template slot-scope="scope">
              <el-tooltip placement="top" v-if="scope.row.name2&&scope.row.name2.length>15">
                <div slot="content">{{scope.row.name2}}</div>
                <div :class="{'renling':scope.row.name2&&scope.row.name2.length>15}">
                  {{scope.row.name2}}
                </div>
              </el-tooltip>
              <div v-else>
                {{scope.row.name2}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="项目" prop="name3" width="260" :resizable="false">
            <template slot-scope="scope">
              <el-tooltip placement="top" v-if="scope.row.name3&&scope.row.name3.length>15">
                <div slot="content">{{scope.row.name3}}</div>
                <div :class="{'renling':scope.row.name3&&scope.row.name3.length>15}">
                  {{scope.row.name3}}
                </div>
              </el-tooltip>
              <div v-else>
                {{scope.row.name3}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="所属区域" prop="name4" width="80" :resizable="false"></el-table-column>
          <el-table-column label="品类" prop="name5" width="145" :resizable="false"></el-table-column>
          <el-table-column label="评价时间" prop="name6" width="108" :resizable="false"></el-table-column>
          <el-table-column label="考核人" prop="name7" width="69" :resizable="false"></el-table-column>
          <el-table-column label="评价数据类型" prop="name8" width="108" :resizable="false"></el-table-column>
          <el-table-column label="数据来源" prop="name9" width="82" :resizable="false"></el-table-column>
          <el-table-column label="评价数据生效时间" prop="name10" width="156" :resizable="false"></el-table-column>
          <el-table-column label="数据状态" prop="name11" width="82" :resizable="false"></el-table-column>
          <el-table-column label="操作" width="110" fixed="right" :resizable="false">
            <template slot-scope="scope">
              <span class="wordprimary" @click="showDetail(scope.row)">查看评价结果</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
    <!--详情-->
    <div v-if="toDetail">
      <resiltdetail @closedetail='closedetail'></resiltdetail>
    </div>
  </div>

</template>

<script>
  import '@/assets/styles/public.scss'
  import '@/assets/styles/supplierlist.scss'
  import resiltdetail from './resultdetail'

  export default {
    name: 'result',
    components:{resiltdetail},
    data(){
      return{
        formdata:{},
        total:10,
        queryParams: {
          // customerId: this.companyId,
          // customerName: this.companyName,

          pageNum: 1,
          pageSize: 50,
        },
        isSkeleton:false,
        tableData:[
          {name1:'北京达三江电器设备厂',name2:'中建一局集团第二建筑有限公司第一事业部',name3:'大兴新城西片区起步区(八村安置房)北区DX00-0408-0003地块R2二类居住用地项目',name4:'--',name5:'物资-周转材料',name6:'2024年3月',name7:'刘叔旺', name8:'采购方录入', name9:'云智评',name10:'2024-09-18 15:21:36', name11:'已生效'},
          {name1:'徐州讯隆商贸有限公司',name2:'中建一局集团第二建筑有限公司江苏分公司', name3:'济宁复兴之路文化科技项目办公及配套区工程',name4:'--', name5:'物资-木材及制品',name6:'2024年3月',name7:'刘叔旺', name8:'采购方录入', name9:'云智评',name10:'2024-09-18 15:22:07', name11:'已生效'},
          {name1:'济宁华东新型材料有限公司',name2:'中建一局集团第二建筑有限公司江苏分公司', name3:'济宁复兴之路文化科技项目办公及配套区工程',name4:'--', name5:'物资-周转材料',name6:'2024年3月',name7:'刘叔旺', name8:'采购方录入', name9:'云智评',name10:'2024-09-18 15:22:54', name11:'已生效'},
          {name1:'山东卡道电伴热有限公司',name2:'中建一局集团第二建筑有限公司江苏分公司', name3:'济宁复兴之路文化科技项目办公及配套区工程',name4:'--', name5:'物资-周转材料',name6:'2024年3月',name7:'刘叔旺', name8:'采购方录入', name9:'云智评',name10:'2024-09-18 10:41:32', name11:'已生效'},
          {name1:'济宁华东新型材料有限公司',name2:'中建一局集团第二建筑有限公司江苏分公司', name3:'济宁复兴之路文化科技项目办公及配套区工程',name4:'--', name5:'物资-周转材料',name6:'2024年3月',name7:'刘叔旺', name8:'采购方录入', name9:'云智评',name10:'2024-09-18 11:03:30', name11:'已生效'},
          {name1:'山东胜峰建筑工程有限公司',name2:'中建一局集团第二建筑有限公司江苏分公司', name3:'济宁复兴之路文化科技项目办公及配套区工程',name4:'--', name5:'物资-周转材料',name6:'2024年3月',name7:'刘叔旺', name8:'采购方录入', name9:'云智评',name10:'2024-09-18 11:06:16', name11:'已生效'},
          {name1:'山东胜峰建筑工程有限公司',name2:'中建一局集团第二建筑有限公司江苏分公司', name3:'济宁复兴之路文化科技项目办公及配套区工程',name4:'--', name5:'物资-木材及制品',name6:'2024年3月',name7:'刘叔旺', name8:'采购方录入', name9:'云智评',name10:'2024-09-18 16:45:51', name11:'已生效'},
          {name1:'山东胜峰建筑工程有限公司',name2:'中建一局集团第二建筑有限公司江苏分公司', name3:'济宁复兴之路文化科技项目办公及配套区工程',name4:'--', name5:'物资-周转材料',name6:'2024年3月',name7:'刘叔旺', name8:'采购方录入', name9:'云智评',name10:'2024-09-18 13:22:02', name11:'已生效'},
          {name1:'山东胜峰建筑工程有限公司',name2:'中建一局集团第二建筑有限公司江苏分公司', name3:'济宁复兴之路文化科技项目办公及配套区工程',name4:'--', name5:'物资-周转材料',name6:'2024年3月',name7:'刘叔旺', name8:'采购方录入', name9:'云智评',name10:'2024-09-18 10:39:46', name11:'已生效'},
          {name1:'山东胜峰建筑工程有限公司',name2:'中建一局集团第二建筑有限公司江苏分公司', name3:'济宁复兴之路文化科技项目办公及配套区工程',name4:'--', name5:'物资-周转材料',name6:'2024年3月',name7:'刘叔旺', name8:'采购方录入', name9:'云智评',name10:'2024-09-18  13:22:02', name11:'已生效'},
        ],
        toDetail:false,
      }
    },
    methods:{
      showDetail(){
        this.toDetail = true
      },
      closedetail(){
        this.toDetail = false
      },
      getSearch(){
        this.formdata.pageNum = 1
        // this.customerAll()
      },
      clears() {
      },
      customerExport(){},
      setHeaderRow() {
        return "owner-table-list-header";
      },
      setCellClass({ row, column, rowIndex, columnIndex }) {
        if (columnIndex == 1) {
          return "enterprise-name-column";
        }
      },
      setRowClass({ row, rowIndex }) {
        return "enterprise-name-row";
      },
    }
  }
</script>

<style lang="scss" scoped>
.renling{
  width: 235px;
}
</style>
