<template>
  <div class="app-container">
    
        <el-card style="margin-top:6px">
          <div slot="header" class="clearfix">
            <span>我的项目</span>
          </div>
          <el-row :gutter="6">
      <el-col :xs="24" :md="6">
          <el-input
            v-model="listQuery.search"
            placeholder="受审核方/所属计划"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
      </el-col>
      <el-col :xs="24" :md="6">
          <el-button-group>
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >搜索</el-button>
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-refresh-left"
            @click="resetFilter"
          >重置</el-button>
          </el-button-group>
      </el-col>
        </el-row>
        <el-table
          v-loading="listLoading"
          :data="projectData.results"
          style="width: 100%;margin-top:6px"
          border
          fit
          stripe
          highlight-current-row
          height="300"
          @row-click = "handleRclick"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="项目号">
            <template slot-scope="scope" v-if="scope.row.number">{{ scope.row.number }}</template>
          </el-table-column>
          <el-table-column label="所属计划">
            <template slot-scope="scope" v-if="scope.row.plan">{{ scope.row.plan_.name }}</template>
          </el-table-column>
          <el-table-column label="受审核方" >
            <template slot-scope="scope">{{ scope.row.auditee_v.name }}</template>
          </el-table-column>
          <el-table-column label="业务信息" >
            <template slot-scope="scope" v-if="scope.row.certapps">
              <el-tag
                v-for="(item, index) in scope.row.certapps"
                :key="index"
                style="margin:2px"
              >{{item}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="当前状态">
            <template slot-scope="scope">{{ scope.row.status}}</template>
          </el-table-column>
          <el-table-column label="审核组成员">
            <template slot-scope="scope" v-if="scope.row.members">
              <!-- <el-tooltip effect="dark" :content="item.identity_?item.identity_.name:'组员' " placement="top-start" > -->
            <el-tag  style="margin:2px" :type="item.is_leader?'danger':''" effect="plain" v-for="(item, index) in scope.row.members" :key="index">
              {{item.user_.name}}
            
            </el-tag>
            <!-- </el-tooltip> -->
            </template>
          </el-table-column>
          <el-table-column label="创建日期" width="190">
            <template slot-scope="scope">
              <span>{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300" fixed="right">
            <template slot-scope="scope">
              <el-button-group>
                <el-button
                  type="primary"
                  size="small"
                  :disabled="!checkPermission(['project_update'])"
                  @click="handleTask(scope)"
                >处理</el-button>
                <el-button
                  type="danger"
                  size="small"
                  :disabled="!checkPermission(['project_delete'])"
                  @click="handleDetailProject(scope)"
                >详情</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="projectData.count>0"
          :total="projectData.count"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.page_size"
          @pagination="getProjectList_"
        />
        </el-card>
        <el-card style="margin-top:6px">
          <div slot="header" class="clearfix">
            <span>项目下我的业务</span>
          </div>
          <el-table
          v-loading="listLoading2"
          :data="certappData"
          style="width: 100%;margin-top:6px"
          border
          fit
          stripe
          highlight-current-row
          height="300"
        >
          <el-table-column type="index" width="55"></el-table-column>
          <el-table-column label="申请单号">
            <template slot-scope="scope" v-if="scope.row.number">{{ scope.row.number }}</template>
          </el-table-column>
          <el-table-column label="认证领域/分类">
            <template slot-scope="scope">
            <el-tag >{{scope.row.cert_field_.name}}</el-tag>
            <el-tag v-if="scope.row.cccpv_class_" type="warning" style="margin:2px">{{scope.row.cccpv_class_.name}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="申请信息" width="300px">
            <template slot-scope="scope">
              <div><span style="color:darkblue;font-weight:bold">申请方</span>:{{ scope.row.applicant_v.name }}</div>
              <div v-if="scope.row.manufacture"><span style="color:darkblue;font-weight:bold">制造商</span>:{{ scope.row.manufacture_v.name }}</div>
              <div v-if="scope.row.factory"><span style="color:darkblue;font-weight:bold">生产厂</span>:{{ scope.row.factory_v.name }}</div>
            </template>
          </el-table-column>
          <el-table-column label="当前状态">
            <template slot-scope="scope">
              {{ scope.row.status}}
            </template>
          </el-table-column>
          <el-table-column label="审核组成员">
            <template slot-scope="scope" v-if="scope.row.members">
              <el-tooltip effect="dark" :content="item.identity_?item.identity_.name:'' " placement="top-start" v-for="(item, index) in scope.row.members" :key="index">
            <el-tag  style="margin:2px" :type="item.is_leader?'danger':''" effect="plain" >
              {{item.user_.name}}
            
            </el-tag>
            </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="创建日期" width="190">
            <template slot-scope="scope">
              <span>{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300" fixed="right">
            <template slot-scope="scope">
              <el-button-group>
                <el-button
                  type="primary"
                  size="small"
                  :disabled="!checkPermission(['certapp_feedback'])"
                  @click="handleCertappFeedback(scope)"
                >反馈</el-button>
                <el-button
                  type="danger"
                  size="small"
                  :disabled="!checkPermission(['certapp_detail'])"
                  @click="handleCertappDetail(scope)"
                >详情</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
        </el-card>
  </div>
</template>
<script>
import { getProjectList } from "@/api/project";
import { getAuditTaskList, getAuditCertappList } from "@/api/audit"
import Pagination from "@/components/Pagination";
import checkPermission from "@/utils/permission";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { genTree } from "../../utils";
import router from '@/router';
import store from '@/store'
export default {
  components: { Pagination, Treeselect },
  data() {
    return {
      listLoading: false,
      listLoading2: false,
      listQuery: {
        page: 1,
        page_size: 20,
      },
      projectData: { count: 0, results: [] },
      certappData: []
    };
  },
  watch: {
  },
  created() {
    this.getProjectList_();
  },
  methods: {
    checkPermission,
    getProjectList_() {
      this.listLoading = true;
      getAuditTaskList(this.listQuery).then((response) => {
        if (response.data) {
          this.projectData = response.data;
        }
        this.listLoading = false;
      });
    },
    resetFilter() {
      this.listQuery = {
        page: 1,
        page_size: 20,
      }
      this.getProjectList_()
    },
    handleFilter() {
      this.getProjectList_();
    },
    handleTask(scope) {
      this.$router.push({
        name: "AuditProject",
        params: { id: scope.row.id },
      });
    },
    handleRclick(row, column, event){
      this.listLoading2 = true
      getAuditCertappList({project:row.id, pageoff:true}).then(res=>{
        this.certappData = res.data
        this.listLoading2 = false
      }).catch(e=>{this.listLoading2=false})
    },
    handleCertappFeedback(scope) {
      this.$router.push({
        name: "Certappfeedback",
        params: { id: scope.row.id },
      });
    },
    handleCertappDetail(scope) {
this.$router.push({
        name: "Certappdetail",
        params: { id: scope.row.id },
      });
    }
  },
};
</script>
