<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>月计划</span>
      </div>
      <div>
        <div>
          <el-button type="primary" @click="handleCreatePlan" size="mini">新建计划</el-button>
        </div>
        <el-table
          v-loading="listLoading"
          :data="projectData.results"
          style="width: 100%;margin-top:10px;"
          border
          fit
          stripe
          highlight-current-row
          height="240"
        >
          <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="受审核方" width="300px">
            <template slot-scope="scope">{{ scope.row.auditee_v.name }}</template>
          </el-table-column>
          <el-table-column label="项目信息" width="300px" :show-overflow-tooltip="true">
            <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">{{ scope.row.create_by_.name}}</template>
          </el-table-column>
          <el-table-column label="创建日期">
            <template slot-scope="scope">
              <span>{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <el-button-group>
                <el-button
                  type="primary"
                  size="small"
                  :disabled="!checkPermission(['plan_update'])"
                  @click="handleUpdatePlan(scope)"
                >编辑</el-button>
                <el-button
                  type="danger"
                  size="small"
                  :disabled="!checkPermission(['plan_delete'])"
                  @click="handleDeletePlan(scope)"
                >删除</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="projectData.count>0"
          :total="projectData.count"
          :page.sync="listQuery_project.page"
          :limit.sync="listQuery_project.page_size"
          @pagination="getProjectList_"
        />
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top:2px">
      <div slot="header" class="clearfix">
        <span>待处理项目</span>
      </div>
      <div>
        <el-table
          v-loading="listLoading"
          :data="projectData.results"
          style="width: 100%;"
          border
          fit
          stripe
          highlight-current-row
          height="280"
        >
          <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="受审核方" width="300px">
            <template slot-scope="scope">{{ scope.row.auditee_v.name }}</template>
          </el-table-column>
          <el-table-column label="项目信息" width="300px" :show-overflow-tooltip="true">
            <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">
              <el-switch v-model="scope.row.can_paichai" disabled></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="下达人">
            <template slot-scope="scope">{{ scope.row.assign_by_.name}}</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="contactCompany(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_project.page"
          :limit.sync="listQuery_project.page_size"
          @pagination="getProjectList_"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
import { getCertappList } from "@/api/certapp";
import { getProjectList, createProject, assginProject } from "@/api/project";
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';
export default {
  components: { Pagination, Treeselect },
  data() {
    return {
      listLoading: true,
      listQuery: {
        status: "已受理",
      },
      listQuery_project: {
        page: 1,
        page_size: 20,
        status:"待策划"
      },
      projectData: { count: 0, results: [] },
    };
  },
  watch: {
  },
  created() {
    this.getProjectList_();
  },
  methods: {
    checkPermission,
    getProjectList_() {
      this.listLoading = true;
      getProjectList(this.listQuery_project).then((response) => {
        if (response.data) {
          this.projectData = response.data;
        }
        this.listLoading = false;
      });
    },
    resetFilter() {
      this.listQuery = {
        status: "已受理",
      };
      this.getCertappList_();
    },
    handleFilter() {
      this.getCertappList_();
    },
    contactCompany(scope) {
      this.$router.push({name:"Contact", query:{auditee:scope.row.auditee, project:scope.row.id}})
    },
    handleCreatePlan(){

    },
    handleUpdatePlan(){

    },
    handleDeletePlan(){

    },
    handleDetailProject(){

    }
  },
};
</script>
