<template>
  <div class="app-container">
    <el-tabs>
      <el-tab-pane label="认证项目">
        <div>
          <el-button type="primary" @click="genProject0" 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
          max-height="600"
        >
          <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">{{ 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="操作">
        <template slot-scope="scope">
          <el-button-group>
          <el-button
            v-if="scope.row.status == '创建中'"
            type="warning"
            size="small"
            :disabled="!checkPermission(['project_assign'])"
            @click="handleNext(scope)"
          >转策划</el-button>
          <el-button
            type="primary"
            size="small"
            :disabled="!checkPermission(['project_update'])"
            @click="handleUpdate(scope)"
          >编辑</el-button>
          <el-button
            type="danger"
            size="small"
            :disabled="!checkPermission(['project_delete'])"
            @click="handleDelete(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_"
        />
      </el-tab-pane>
            <el-tab-pane label="待处理业务">
        <div>
          <el-button type="primary" @click="genProject" size="mini">生成项目</el-button>
        </div>
        <div style="margin-top:10px">
          <template>
            已选择<span style="color:red;font-weight:bold">{{certapps_data.length}}</span>条已受理业务
          </template>
        </div>
        <el-table
        ref="projectTable"
          v-loading="listLoading"
          :data="certappData.results"
          style="width: 100%;margin-top:10px;"
          border
          fit
          stripe
          highlight-current-row
          max-height="600"
          @selection-change="handleSelectionChange"
        >
          <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">
              <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">{{ 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>
        <pagination
          v-show="certappData.count>0"
          :total="certappData.count"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.page_size"
          @pagination="getCertappList_"
        />
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="dialogvisible_project" title="创建项目">
      <el-form ref="elForm" :model="formData" label-width="80px" label-position="right" :rules="rules">
        <div v-if="certapps_data.length > 0">已选择<span style="color:red;font-weight:bold">{{certapps_data.length}}</span>条已受理业务</div>
        <el-form-item label="受审核方" prop="auditee">
          <el-input placeholder="请选择受审核方" readonly clearable v-model="formData.auditee_v.name">
              <el-button slot="append" icon="el-icon-search" @click="choose(0)" v-if="certapps_data.length == 0"></el-button>
            </el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="auditee_v.linkman_name">
          <el-input v-model="formData.auditee_v.linkman_name"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="auditee_v.linkman_mobile">
          <el-input v-model="formData.auditee_v.linkman_mobile"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="username">
          <el-input v-model="formData.remark" type="textarea"
  :autosize="{ minRows: 6, maxRows: 10}"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogvisible_project=false">取消</el-button>
        <el-button type="primary" @click="confirm('Form')">确认</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>
import { getCertappList } from "@/api/certapp";
import { getProjectList, createProject, nextProject } 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";
export default {
  components: { Pagination, Treeselect },
  data() {
    return {
      certapps_data:[],
      certappData: [],
      listLoading: true,
      listQuery: {
        page:1,
        page_size:20,
        status: "已受理",
      },
      listQuery_project: {
        page:1,
        page_size:20
      },
      deptOptions: [],
      field_list: [],
      projectData:{count:0,results:[]},
      formData:{
        certapps:[],
        auditee_v:{},
        auditee:null
      },
      dialogvisible_project:false,
            rules: {
        auditee: [
          {
            required: true,
            message: "请选择受审核方",
            trigger: "change",
          },
        ],
        
      },
    };
  },
  watch:{
    certapps_data:function(val){
      let certapps = []
        for(let i=0;i<val.length;i++){
          certapps.push(val[i].id)
      }
      this.formData.certapps = certapps
    }
  },
  created() {
    this.getCertappList_();
    this.getProjectList_()
  },
  methods: {
    checkPermission,
    getCertappList_() {
      this.listLoading = true;
      getCertappList(this.listQuery).then((response) => {
        if (response.data) {
          this.certappData = response.data;
        }
        this.listLoading = false;
      });
    },
    getProjectList_() {
      this.listLoading = true;
      getProjectList(this.listQuery_project).then((response) => {
        if (response.data) {
          
          this.projectData = response.data;

        }
        this.listLoading = false;
      });
    },
    getdeptOptions() {
      getOrgList().then((res) => {
        this.deptOptions = genTree(res.data);
      });
    },
    resetFilter() {
      this.listQuery = {
        status: "已受理",
      };
      this.getCertappList_();
    },
    handleFilter() {
      this.getCertappList_();
    },
    genProject() {
      if(this.certapps_data.length >0){
        this.dialogvisible_project = true
        this.formData.auditee = this.certapps_data[0].applicant
        this.formData.auditee_v = this.certapps_data[0].applicant_v
      }else{
        this.$message.warning('请先选择已受理业务')
      }
    },
    genProject0() {
      this.$refs['projectTable'].clearSelection()
      this.dialogvisible_project = true
    },
    handleSelectionChange(val){
      this.certapps_data = val
    },
    confirm(){
        this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        createProject(this.formData).then(res=>{
          this.getCertappList_()
          this.getProjectList_()
          this.dialogvisible_project = false
          this.$message.success('成功')
        })
      })
    },
    handleNext(scope) {
      if(scope.row.certapps.length == 0){
        this.$message.error('该项目不包含业务,无法继续!')
      }else{
        this.$confirm("确定转入策划派差吗?", "提示", {
        type: "warning",
      }).then(() => {
        nextProject(scope.row.id, {}).then(res=>{
          this.$message.success('成功')
          this.getProjectList_()
        })
      }).catch(()=>{

      });
      }
    }
  },
};
</script>
