<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="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="toup" lazy> </el-tab-pane>
            <el-tab-pane label="已上报" name="uped" lazy> </el-tab-pane>
            <el-tab-pane label="待整改" name="tozg" lazy> </el-tab-pane>
            <el-tab-pane label="已确认" name="confirmed" lazy> </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
      <el-table
        v-loading="listLoading"
        :data="recordList.results"
        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">
            <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.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.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="操作">
          <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="getRecordList"
      />
    </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 { 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: "toup",
      state: "待上报",
      can_doself: true,
      contents: [],
      contentOptions: [],
      contents: [],
      depts: [],
      listLoading: false,
      listQuery: {
        page: 1,
        page_size: 20,
      },
      recordList: {
        count:0
      },
      now: {},
      drawer: false,
    };
  },
  created() {
    this.getTab();
    this.getContentList();
    this.getRecordList();
  },
  methods: {
    checkPermission,
    getTab() {
      if (this.$route.params.tab) {
        this.activeName = this.$route.params.tab;
        this.handleClick({name:this.activeName})
      }
    },
    getRecordList() {
      getRecordList({ state: this.state }).then((res) => {
        this.listLoading = false;
        this.recordList = res.data;
      });
    },
    getContentList() {
      getContentList({ can_doself: this.can_doself }).then((res) => {
        this.contentOptions = res.data;
      });
    },

    handleClick(tab, event) {
      switch (tab.name) {
        case "toup":
          this.state = "待上报";
          this.getRecordList();
          break;
        case "uped":
          this.state = "已上报";
          this.getRecordList();
          break;
        case "tozg":
          this.state = "待整改";
          this.getRecordList();
          break;
        case "confirmed":
          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();
    },
    handleRecord(data){
      this.data = data;
      this.drawer = true;
    },
    contentup() {
      if (this.contents.length > 0) {
        createself({ contents: this.contents }).then((res) => {
          this.centerDialogVisible = false;
        });
      } else {
        this.$message.error("请选择清单!");
      }
    },
  },
};
</script>
