<template>
  <div class="app-container">
   <el-card
    style="margin-top: 10px"
    >
    <el-row>
  <el-button type="primary" @click="centerDialogVisible = true" plain>主动上报</el-button>
  <el-dialog
  title="提示"
  :visible.sync="centerDialogVisible"
  width="50%"
  center>
  <el-transfer
      v-model="contents"
      :data="contentOptions"
      :titles="['材料清单', '选择的清单']"
      :props="{ key : 'id' , label: 'name' }"
    />
  <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="contentup()">确认</el-button>
      
  </span>
</el-dialog>
  </el-row>
  </el-card>
    <el-card
    style="margin-top: 10px"
    >
    <el-row>
    <el-col :span="24">
    <el-tabs v-model="activeName"  @tab-click="handleClick">
    <el-tab-pane label="待上报" name="first" lazy>
    </el-tab-pane>
     <el-tab-pane label="已上报" name="second" lazy>
      </el-tab-pane>
     <el-tab-pane label="待整改" name="third" lazy>
      </el-tab-pane>
       <el-tab-pane label="已确认" name="forth" lazy>
      </el-tab-pane>
      

    
  </el-tabs>
   
   </el-col>
    
</el-row>
   <el-table
                  v-loading="listLoading"
                  :data="recordList"
                  border
                  fit
                  stripe
                  highlight-current-row
                  max-height="600px"
                >
                  <el-table-column label="序号" type="index" align="center" />
                    <el-table-column label="任务标题">
                    <template slot-scope="scope" v-if="scope.row.task">{{
                      scope.row.task_.name
                    }}</template>
                  </el-table-column>
                  <el-table-column label="材料">
                    <template slot-scope="scope">{{
                      scope.row.content_.name
                    }}</template>
                  </el-table-column>
                  <el-table-column label="状态">
                    <template slot-scope="scope">{{
                      scope.row.state
                    }}</template>
                  </el-table-column>
                  <el-table-column label="上报情况">
                    <template slot-scope="scope"
                      v-if="scope.row.up_user_">{{ scope.row.up_user_.name }}/{{ scope.row.up_date }}</template
                    >
                  </el-table-column>
                    <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        v-if="scope.row.state == '待上报' && checkPermission(['record_update'])"
                        type="primary"
                        size="small"
                        @click="handleUpdate(scope)"
                        >编辑</el-button
                      >
                      <el-button
                        v-if="scope.row.state == '待上报' && checkPermission(['record_up'])"
                        type="primary"
                        size="small"
                        @click="handleUp(scope)"
                        >上报</el-button
                      >
                      <el-button
                        v-if="scope.row.state == '已提交' && checkPermission(['record_confirm'])"
                        type="primary"
                        size="small"
                        @click="handleConfirm(scope)"
                        >确认</el-button
                      >
                      <el-button
                        v-if="scope.state == '已提交' && checkPermission(['record_reject'])"
                        type="danger"
                        size="small"
                        @click="handleReject(scope)"
                        >驳回</el-button
                      >
                      <el-button
                        v-if="checkPermission(['record_view'])"
                        size="small"
                        @click="handleView(scope)"
                        >查看</el-button
                      >
                    </template>
                  </el-table-column>
                
                </el-table>
</el-card>
     
                  <el-dialog
      :visible.sync="dialogVisible"
      title="主动上报"
      :close-on-click-modal="false"
    >
      <taskinit ref="taskinit" @handleChose="chooseComplete"></taskinit>
    </el-dialog>
    <el-drawer title="记录" :visible.sync="drawer" :with-header="false">
      <recorddo
        ref="recorddo"
        :data="data"
        @handleDo="handleDo"
        v-if="drawer"
      ></recorddo>
    </el-drawer>
  </div>
</template>
<script>
import { getRecordList,createself } from "@/api/record";

import { getContentList } from "@/api/content";
import Pagination from "@/components/Pagination";
import taskinit from "@/views/supervision/taskinit";
import checkPermission from "@/utils/permission";
import recorddo from "@/views/supervision/recorddo";
export default {
  components: { Pagination, taskinit, recorddo },
  data() {
    return {
         centerDialogVisible: false,
      dialogVisible: false,
      activeName: "first",
      state:"待上报",
      can_doself:true,
      contents: [],
      contentOptions: [],
      contents: [],
      depts: [],
      listLoading: false,
      recordList: [],
      now: {},
      drawer: false,
    };
  },
  created() {
    this.getContentList();
    this.getRecordList();
  },
  methods: {
   checkPermission,
    getRecordList(){
      
      getRecordList({state:this.state}).then((res) => {
        this.listLoading = false;
        this.recordList = res.data.results;
      });
    },
     getContentList() {
        getContentList({can_doself:this.can_doself}).then(res=>{
            this.contentOptions = res.data
        })
    },
      
     handleClick(tab, event) {
      switch (tab.name) {
        case "first":
          this.state="待上报";
          this.getRecordList();
          break;
        case "second":          
          this.state="已上报";
          this.getRecordList();
          break;
        case "third":
          this.state="待整改";
          this.getRecordList();
          break;
        case "forth":          
          this.state="已确认";
          this.getRecordList();
          break;
      }
    },
  
    handleUpdate(scope) {
      this.data = {
        action: "update",
        record: scope.row,
      };
      this.drawer = true;
    },
     chooseComplete(data) {
      this.dialogVisible = false;
      const rLoading = this.openLoading("正在初始化任务,请稍等...");
      inittask(this.task.id, data).then((res) => {
        rLoading.close();
        this.$message.success("成功");
        this.$router.go(0);
      });
    },
    handleUp(scope) {
      this.data = {
        action: "up",
        record: scope.row,
      };
      this.drawer = true;
    },
    handleDo(data) {
      this.drawer = false;
      this.getRecordList();
    },
    handleView(scope) {
      this.data = {
        action: "view",
        record: scope.row,
      };
      this.drawer = true;
    },
    handleReject(scope) {
      this.data = {
        action: "reject",
        record: scope.row,
      };
      this.drawer = true;
    },
    handleConfirm(scope) {
      this.data = {
        action: "reject",
        record: scope.row,
      };
      this.drawer = true;
    },
    contentup(){
      console.log(this.contents)
         if(this.contents.length>0){
           
          
             createself({contents:this.contents}
        ).then((res) => {
          alert(1)
        });
        }else{
            this.$message.error('请选择清单!')
        }
    },
  },
};
</script>
