<template>
  <div class="app-container">
    <el-card>
      <div>
        <el-input
          v-model="listQuery.search"
          placeholder="任务名/材料名"
          style="width: 140px"
          @keyup.enter.native="handleFilter"
        />
        
        <el-select
          v-model="listQuery.state"
          placeholder="记录状态"
          clearable
          style="width: 140px"
          @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
          @change="handleFilter"
        >
          <el-option
            v-for="item in orgData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      
        <el-button type="primary" icon="el-icon-search" @click="handleFilter"
          >搜索</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-refresh-left"
          @click="resetFilter"
          >重置</el-button
        >
      </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"
        @sort-change="changeTableSort"
      >
        <el-table-column type="index" width="50" />

      
        <el-table-column
          label="材料名称"
          sortable="custom"
          prop="content__sortnum"
        >
          <template slot-scope="scope" v-if="scope.row.content_name">{{ scope.row.content_name }}</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 label="报送说明">
          <template slot-scope="scope" v-if="scope.row.noteb">{{ scope.row.noteb }}</template>
        </el-table-column>
        <el-table-column
          label="报送单位"
          sortable="custom"
          prop="belong_dept__sort"
        >
          <template slot-scope="scope" v-if="scope.row.belong_dept_">{{
            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 == '待发布'
              "
              >{{ 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(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>
      <pagination
        v-show="recordList.count > 0"
        :total="recordList.count"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.page_size"
        @pagination="getList"
      />
    </el-card>
   <el-drawer
      :visible.sync="drawerLiminted"
      :with-header="false"
      size="40%">
    <div class="drawerTitle">资质能力报送记录</div>
    <el-form   class="drawerBody"  v-if="record.content_">
      <el-form-item label="材料名称">
        {{ record.content_.name }}
      </el-form-item>
      <el-form-item label="材料详情" v-if="record.content_">
        {{ record.content_.desc }}
      </el-form-item>
      <el-form-item label="报送状态">
        {{ record.state }}
        <el-tag v-if="record.is_self" style="margin-left: 2px" effect="plain">主动报送</el-tag>
      </el-form-item>
      <el-form-item label="所属任务" v-if="record.task_">
        {{ record.task_.name }}/{{ record.task_.end_date }}
      </el-form-item>
      <el-form-item label="执行组织" v-if="record.belong_dept_">
        {{ record.belong_dept_.name }}
      </el-form-item>
      <el-form-item label="报送人" v-if="record.up_user_">
        {{ record.up_user_.name }}/{{ record.up_date }}
      </el-form-item>
      <el-form-item label="文件列表">
      </el-form-item>
      <div
      class="recordfiles"
        v-for="(item, index) in record.files_"
        v-bind:key="item.id"
      >
        <el-link :href="item.path" target="_blank" type="primary">{{
          item.name
        }}</el-link>
      </div>
    </el-form>
   </el-drawer>
  </div>
</template>
<script>
import { getOrgList, getSubOrgList } from "@/api/org";
import { getRecordList } from "@/api/ability";
import checkPermission from "@/utils/permission";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
export default {
  components: { Pagination},
  data() {
    return {
      record: {},
      recordList: {
        count: 0,
      },

      can_doself: true,
       stateOptions: [
       
        { 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]);
            },
          },
        ],
      },
      listQuery: {
        page: 1,
        page_size: 20,
        belong_dept: this.$store.state.user.dept
      },
      listLoading: false,
      dialogVisible: false,
      drawerLiminted:false,
      dialogType: "new",
      orgData:[],
      rule1: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getState();
    this.getGroup();
  },
  methods: {
    checkPermission,
    getGroup() {
        if (this.checkPermission(["record_confirm"])) {
        getOrgList({ can_supervision: true }).then((res) => {
          this.orgData = res.data;
        });
      } else {
        getSubOrgList().then((res) => {
          this.orgData = res.data;
        });
      }
      },
    getState() {
      if(this.checkPermission(["record_confirm"])){
        this.listQuery = {
          page:1,
          page_size:20
        }
      }
      if (this.$route.params.state) {
        this.listQuery.state = this.$route.params.state;
      }
      this.getList();
    },
    getList() {
       
      getRecordList(this.listQuery).then((response) => {
        this.recordList = response.data;
      });
    },
   
    changeTableSort(val) {
      if (val.order == "ascending") {
        this.listQuery.ordering = val.prop;
      } else {
        this.listQuery.ordering = "-" + val.prop;
      }
      this.getList();
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    resetFilter() {
      this.listQuery = {
        page: 1,
        page_size: 20,
        belong_dept: this.$store.state.user.dept
      };
      this.getList();
    },
    handleRecord(item){
      this.drawerLiminted = true;
      this.record = item;
    },

    
  },
};
</script>
<style lang="scss">
.el-transfer-panel {
  width: 470px;
}
.el-transfer__buttons {
  padding: 0 2px;
  .el-button {
    display: block;
  }
}
.drawerTitle{
  padding: 20px 0 20px 20px;
}
.drawerBody{
  padding-left: 20px;
}
.recordfiles{
  margin: 2px;
}
</style>
