<template>
<!-- 具体职责选择框 -->
    <div>
        <div>
            <el-button size="small" @click="showDialog()">选择具体职责</el-button>
        </div>
        
        <el-dialog title="提示" v-model="dialogVisible" width="60%" :before-close="handleClose">
            <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="searchInfo">
        <el-form-item label="所属考核项目">
          <span>
            <el-tag v-if="childInfo.title!=''">{{childInfo.title}}</el-tag>
            <projectDialog @checkedInfo="getCheckedInfo"></projectDialog>
          </span>
          
        </el-form-item>
        <el-form-item label="考核项目名称">
          <el-input
            placeholder="请输入名称"
            v-model="dutySearchInfo.title"
            clearable>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          <el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <el-table :data="dutyList" @sort-change="sortChange" @selection-change="handleSelectionChange">
        <el-table-column align="left" label="所属考核项目" prop="parentTitle"/>
        <el-table-column align="left" label="具体职责名称" prop="title"/>
        <el-table-column align="left" label="考核部门" prop="dumpTitle"/>
        <el-table-column align="left" label="考核人" prop="username"/>
        <el-table-column align="left" fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" round  @click="checked(scope.row)">选中</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          :current-page="dutySearchInfo.page"
          :page-size="dutySearchInfo.pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>

    </div>
        </el-dialog>
        
    </div>
</template>

<script>
import {
  dutylist,
} from '@/api/dataEntry'
import projectDialog from '@/components/projectDialog/index.vue'
    export default {
        components: {
    projectDialog
  },
        data() {
            return {
                
                childInfo:{
                    title:'',
                },
                total:'',
                searchList:{
                    page:1,
                    pagesize:10000,
                },
                dutyclasslist:{},
                dutySearchInfo:{
                    page: 1,
                    pageSize: 10,
                    state:1,
                },
              dialogVisible: false,
              dutyList:null,
            }
        },
        created () {
          this.getdutyList();  
        },
        methods: {
            // 获取选中组件值
    getCheckedInfo(data){
      this.childInfo=data
    },
            // 条件搜索前端看此方法
            onSubmit() {
                this.dutySearchInfo.page = 1
                this.dutySearchInfo.pageSize = 10
                this.dutySearchInfo.parentId=this.childInfo.outId
                this.getdutyList()
            },
            // pagesize改变
            handleSizeChange(val) {
                this.dutySearchInfo.pageSize=val
            },
            // 页码改变
            handleCurrentChange(val) {
                this.dutySearchInfo.page=val
            },
            // 点击按钮事件
            showDialog(){
                this.dialogVisible=true;
            },
            // 获取具体职责列表
            async getdutyList(){
                const res = await dutylist(this.dutySearchInfo)
                this.dutyList=res.data.list;
                this.dutySearchInfo.page=res.data.page;
                this.dutySearchInfo.pageSize=res.data.pageSize;
                this.total=res.data.total;
            },
            // 选中
            checked(row){
                this.$emit('checkedInfo',row)
                this.dialogVisible=false
            },
        }
    }
</script>

<style lang="scss" scoped>

</style>