<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>我的报送任务</span>
      </div>
       <div>
      <el-select
        v-model="listQuery.dept"
        placeholder="报送部门"
       
        @change="handleFilter"
      >
        <el-option
          v-for="item in orgData"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </div>
      <el-table
        v-loading="listLoading"
        :data="taskList"
        border
        fit
        stripe
        highlight-current-row
        max-height="300"
        @row-click="clickRow"
      >
        <el-table-column type="index" width="50" />
        <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" v-if="scope.row.task_">
            <el-tag
              v-if="scope.row.task_.state == '创建中' || scope.row.task_.state == '待发布'"
              type="warning"
              >{{ scope.row.task_.state }}</el-tag
            >
            <el-tag v-else-if="scope.row.task_.state == '执行中'" type="primary">{{
              scope.row.task_.state
            }}</el-tag>
            <el-tag v-else type="success">{{ scope.row.task_.state }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="截止日期">
          <template slot-scope="scope" v-if="scope.row.task_">{{ scope.row.task_.end_date }}</template>
        </el-table-column>
        <el-table-column label="报送率">
          <template slot-scope="scope">{{ scope.row.up_rate }}%</template>
        </el-table-column>
        <el-table-column label="报送部门">
          <template slot-scope="scope">{{ scope.row.dept_.name }}</template>
        </el-table-column>
        <el-table-column label="确认率">
          <template slot-scope="scope">{{ scope.row.confirm_rate }}%</template>
        </el-table-column>
           <el-table-column label="是否审核反馈">
          <template slot-scope="scope"> <el-tag v-if="scope.row.is_yes" effect="plain">是</el-tag>
          <el-tag type="danger" effect="plain" v-else>否</el-tag></template>
        </el-table-column>
         <el-table-column label="审核反馈文件">
            <template slot-scope="scope" v-if="scope.row.file">
            <el-link :href="scope.row.file" type="primary">下载</el-link>
          </template>
      
        </el-table-column>
      </el-table>
    </el-card>
    <el-card style="margin-top:6px">
      <div slot="header" class="clearfix">
        <span>记录详情</span>
      </div>
      <mytaskrecord :query="query" @handleDo="handleDo"></mytaskrecord>
    </el-card>
  </div>
</template>
<script>
import {
  getmytasklist,
} from "@/api/task";
import { getOrgList, getSubOrgList } from "@/api/org";
import checkPermission from "@/utils/permission";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import mytaskrecord from "@/views/supervision/mytaskrecord";
export default {
  components: { Pagination, mytaskrecord },
  data() {
    return {
      taskList: [],
      listQuery: {
        page: 1,
        page_size: 20,
      },
      listLoading: true,
      query:null,
      orgData: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getList();
    this.getOrgList();
  },
  methods: {
    checkPermission,
    getList() {
      this.listLoading = true;
      getmytasklist(this.listQuery).then((response) => {
        if (response.data) {
          this.taskList = response.data;
        }
        this.listLoading = false;
      });
    },
     getOrgList() {
      if (this.checkPermission(["record_confirm"])) {
        getOrgList({ can_supervision: true }).then((res) => {
          this.orgData = res.data;
        });
      } else {
        getSubOrgList().then((res) => {
          this.orgData = res.data;
        });
      }
    },
    clickRow(obj){
      this.query = {
        dept:obj.dept,
        task:obj.task
      }
    },
     handleFilter() {
      this.listQuery.page = 1;
      
      this.getList();
    },
    handleDo(val){
      this.getList()
    }
  },
};
</script>
