<template>
  <div>
    
    <el-table
      style="margin-top: 6px"
      v-loading="listLoading"
      :data="recordList.results"
      border
      fit
      stripe
      highlight-current-row
      max-height="400"
    >
      <el-table-column type="index" width="50" />

      <el-table-column width="150px" label="任务标题">
        <template slot-scope="scope">
          <span v-if="scope.row.task">{{ scope.row.task_.name }}</span>
          <el-tag type="warning" effect="plain" v-else> 主动报送 </el-tag>
        </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.content_desc }}</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">
          <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.up_user_"
          >{{ scope.row.up_user_.name }}/{{ scope.row.up_date }}</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">
          <el-tag v-if="scope.row.dept_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">
          <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({ 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="操作" fixed="right">
        <template slot-scope="scope">
          <el-link
              v-if="
                scope.row.state == '待报送'  &&
                checkPermission(['record_up'])
              "
              type="primary"
              size="small"
              @click="handleRecord({ action: 'up', record: scope.row })"
              >报送</el-link
            >
              <el-link
              v-if="
                scope.row.dept_yes == false  &&  scope.row.state == '已报送' &&
                checkPermission(['record_detconfirm'])
              "
              type="primary"
              size="small"
              @click="handleRecord({ action: 'deptconfirm', record: scope.row })"
              >二级单位确认</el-link
            >
            <el-link
              v-if="
                (scope.row.state == '已报送' || scope.row.state == '待整改') &&
                checkPermission(['record_up'])
              "
              type="primary"
              size="small"
              @click="handleRecord({ action: 'up', record: scope.row })"
              >重报</el-link
            >
          <el-link
            v-if="
              scope.row.state == '已报送' &&
              checkPermission(['record_reject']) &&
              scope.row.belong_dept != $store.state.user.dept
            "
            type="danger"
            size="small"
            @click="handleRecord({ action: 'reject', record: scope.row })"
            >驳回</el-link
          >
          <el-link
            v-if="checkPermission(['record_view'])"
            size="small"
            @click="handleRecord({ action: 'view', record: scope.row })"
            >查看</el-link
          >
        </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-drawer
      title="记录"
      :visible.sync="drawer"
      :with-header="false"
      size="40%"
    >
      <recorddo
        ref="recorddo"
        :data="data"
        @handleDo="handleDo"
        v-if="drawer"
      ></recorddo>
    </el-drawer>
  </div>
</template>
<style lang="scss">
.el-transfer-panel {
  width: 470px;
}
.el-transfer__buttons {
  padding: 0 2px;
  .el-button {
    display: block;
  }
}
</style>
<script>
import { getOrgList, getSubOrgList } from "@/api/org";
import checkPermission from "@/utils/permission";
import Pagination from "@/components/Pagination";
import recorddo from "@/views/supervision/recorddo";
import { getRecordList } from "@/api/record";
const defaultrecord = {
  name: "",
};
export default {
  name: "mytaskrecord",
  props: ["query"],
  components: { Pagination, recorddo },
  data() {
    return {
      record: defaultrecord,
      recordList: {
        count: 0,
      },

      can_doself: true,
      contentOptions: [],
      contents: [],
      centerDialogVisible: false,
      orgData: [],
      drawer: false,
      stateOptions: [
        { key: "待报送", name: "待报送" },
        { key: "已报送", name: "已报送" },
        { key: "已确认", name: "已确认" },
        { key: "待整改", name: "待整改" },
      ],
      isOptions: [
        { key: "true", name: "是" },
        { key: "false", 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,
      dialogType: "new",
      rule1: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  computed: {},
  watch: {
    query: function (newV, oldV) {
      if (newV) {
        this.listQuery = {
          page: 1,
          page_size: 20,
          belong_dept: newV.dept,
          task: newV.task,
        };
        this.getList();
      }
    },
  },
  created() {
    this.initQuery();
    this.getOrgList();
  },
  methods: {
    checkPermission,
    initQuery() {
      this.getList();
    },
    getOrgList() {
      if (this.checkPermission(["record_confirm"])) {
        getOrgList({ can_supervision: true }).then((res) => {
          this.orgData = res.data;
        });
      } else {
        getSubOrgList().then((res) => {
          this.orgData = res.data;
        });
      }
    },
    getList() {
      
      getRecordList(this.listQuery).then((response) => {
        this.recordList = response.data;
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },

    handleRecord(data) {
      this.data = data;
      this.drawer = true;
    },
    handleDo(val) {
      this.drawer = false;
      if(val){
        this.getList();
        this.$emit("handleDo",true);
      }
    },
  },
};
</script>
