<template>
  <div class="app-container">
     <el-card
    style="margin-top: 10px"
    >
   <div>
            <el-input
              v-model="listQuery.content_name"
              placeholder="材料名称"
              style="width: 200px"
              class="filter-item"
              @keyup.enter.native="handleFilter"
            />
    
 
          
             <el-select
              v-model="listQuery.state"
              placeholder="记录状态"
              clearable
              style="width:140px"
              class="filter-item"
              @change="handleFilter"
            >
              <el-option
                v-for="item in stateOptions"
                :key="item.key"
                :label="item.name"
                :value="item.key"
              />
            </el-select>
            
            <el-select
              v-model="listQuery.belong_dept"
              placeholder="上报部门"
              clearable
              style="width:140px"
              class="filter-item"
              @change="handleFilter"
            >
              <el-option
                v-for="item in orgData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
              <el-date-picker
      v-model="listQuery.date_gt"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="上报时间">
    </el-date-picker>
      <el-date-picker
      v-model="listQuery.date_lt"
      type="date"
      value-format="yyyy-MM-dd"
       @change="handleFilter"
      placeholder="上报时间">
    </el-date-picker>
          </div> 
           </el-card>
    <el-card
    style="margin-top: 10px"
    >
    <el-table
      v-loading="listLoading"
      :data="recordList.results"
      border
      fit
      stripe
      highlight-current-row
      max-height="600"
      :default-sort = "{prop: 'date', order: 'descending'}"
    >
      <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" >{{ scope.row.content_.name }}</template>
      </el-table-column>
       <el-table-column  sortable label="上报时间">
        <template  slot-scope="scope" >{{ scope.row.up_date }}</template>
      </el-table-column>
      <el-table-column label="上报人" >
        <template slot-scope="scope" v-if="scope.row.up_user">{{ scope.row.up_user_.name }}</template>
      </el-table-column>
      <el-table-column  sortable label="截止时间">
        <template slot-scope="scope">{{ scope.row.end_date }}</template>
      </el-table-column>
      
      
       <el-table-column label="上报备注">
        <template slot-scope="scope">{{ scope.row.note }}</template>
      </el-table-column>
       <el-table-column label="上报说明">
        <template slot-scope="scope">{{ scope.row.noteb }}</template>
      </el-table-column>
       
         <el-table-column label="上报单位">
        <template slot-scope="scope" >{{ scope.row.belong_dept_.name }}</template>
      </el-table-column>
       <el-table-column label="记录状态">
        <template slot-scope="scope">
                      <el-tag type="danger" v-if="scope.row.state == '待上报'">{{ scope.row.state }}</el-tag>
                      <el-tag type="warning" v-else-if="scope.row.state == '待整改'">{{ scope.row.state }}</el-tag>
                      <el-tag type="success" v-else-if="scope.row.state == '已确认'">{{ scope.row.state }}</el-tag>
                      <el-tag v-else-if="scope.row.state == '已上报'">{{ scope.row.state }}</el-tag>
                    </template>
      </el-table-column>
       <el-table-column label="上报文件">
         
        <template slot-scope="scope" v-if="scope.row.files">
            <el-link v-if="scope.row.files.length>1" @click="handleRecord({action:'view', record:scope.row})">有
              <span style="color:red">{{scope.row.files.length}}</span>
              个文件</el-link>
           <div v-else v-for="item in scope.row.files_" v-bind:key="item.id">
           <el-link :href="item.path" target="_blank" type="primary">{{ item.name }}</el-link>
    </div>
       </template>
      </el-table-column>
<el-table-column align="center" label="操作" width="220px" fixed="right">
                    <template slot-scope="scope">
                      <el-button
                        v-if="
                          scope.row.state == '待上报' &&
                          checkPermission(['record_update'])
                        "
                        type="primary"
                        size="small"
                        @click="handleRecord({action:'update', record:scope.row})"
                        >编辑</el-button
                      >
                      <el-button
                        v-if="
                          (scope.row.state == '待上报' || scope.row.state == '待整改')&&
                          checkPermission(['record_up'])
                        "
                        type="primary"
                        size="small"
                        @click="handleRecord({action:'up', record:scope.row})"
                        >上报</el-button
                      >
                      <el-button
                        v-if="
                          scope.row.state == '已上报' &&
                          checkPermission(['record_confirm'])
                        "
                        type="primary"
                        size="small"
                        @click="handleRecord({action:'confirm', record:scope.row})"
                        >确认</el-button
                      >
                      <el-button
                        v-if="
                          scope.row.state == '已上报' &&
                          checkPermission(['record_reject'])
                        "
                        type="danger"
                        size="small"
                        @click="handleRecord({action:'reject', record:scope.row})"
                        >驳回</el-button
                      >
                      <el-button
                        v-if="checkPermission(['record_view'])"
                        size="small"
                        @click="handleRecord({action:'view', record:scope.row})"
                        >查看</el-button
                      >
                    </template>
                  </el-table-column>
    </el-table>
     <pagination
        v-show="recordList.count > 0"
        :total="recordList.count"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.page_size"
        @pagination="getList"
      />
</el-card>
  <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 { getOrgList } from "@/api/org";
import {getRecordList} from "@/api/record";
import { genTree } from "@/utils";
import checkPermission from "@/utils/permission";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import recorddo from "@/views/supervision/recorddo";
const defaultrecord = {
  name: ""
};
export default {
  components: { Pagination, recorddo },
  data() {
    return {
     record: defaultrecord,
     recordList: {
        count: 0,
      },
      
      orgData: [],
      drawer:false,
      stateOptions: [
        { key: "待上报", name: "待上报" },
        { key: "已上报", name: "已上报" },
        { key: "已确认", name: "已确认" },
        { key: "待整改", name: "待整改" },
      ],
       pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value7: '',
      listQuery: {
        page: 1,
        page_size: 20,
      },
      listLoading: false,
      dialogVisible: false,
      dialogType: "new",
      rule1: {
        name: [{ required: true, message: "请输入", trigger: "blur" }]
      },
    };
  },
  computed: {},
  watch: {
  },
  created() {
    this.getList();
    this.getOrgList();
  },
  methods: {
    checkPermission,
    getList(){
      
      getRecordList(this.listQuery).then((response)=>{
       
          this.recordList=response.data
        

      })
    }
   ,
    getOrgList() {
      getOrgList({ pid: 1 }).then((res) => {
        this.orgData = genTree(res.data)
      });
    },
    
    handleOrgClick(obj, node, vue) {
      this.listQuery.page = 1;
      this.listQuery.dept_id = obj.id;
      this.getList();
    },
 handleFilter() {
  
      this.listQuery.page = 1;
      this.getList();
    },
    resetFilter() {
      this.listQuery = {
        page: 1,
        page_size: 20,
      }
      this.getList();
    },
   
   handleRecord(data){
      this.data = data;
      this.drawer = true;
    },
    
  },
};
</script>
