<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-date-picker
          v-model="listQuery.date_gt"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="报送时间"
          style="width: 140px"
        >
        </el-date-picker>
        -
        <el-date-picker
          v-model="listQuery.date_lt"
          type="date"
          value-format="yyyy-MM-dd"
          @change="handleFilter"
          style="width: 140px"
          placeholder="报送时间"
        >
        </el-date-picker>
        <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>
     <div style="margin-top: 10px">
       <el-button
          type="primary"
          @click="centerDialogVisible = true"
          style="margin-left: 4px"
          >主动报送</el-button
        >
        <el-dialog
          title="主动报送"
          :visible.sync="centerDialogVisible"
          width="70%"
          center
        >
          <el-transfer
            v-model="contents"
            :data="contentOptions"
            :titles="['材料清单', '选择的清单']"
            :props="{ key: 'id', label: 'name' }"
          />
          <div slot="footer" style="text-align: right">
            <el-button type="primary" @click="contentup()">确认</el-button>
          </div>
        </el-dialog>
      </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"
        :span-method="objectSpanMethod"
      >
        <el-table-column type="index" width="50" />

        <el-table-column
          width="150px"
          label="任务标题"
          prop="task"
          sortable="custom"
        >
          <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" v-if="scope.row.end_date">{{ scope.row.end_date }}</template>
        </el-table-column>

        <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.content_desc">{{ scope.row.content_desc }}</template>
        </el-table-column>
        <el-table-column label="报送要求/备注">
          <template slot-scope="scope"  v-if="scope.row.note">{{ 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" 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 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 v-if="scope.row.dept_yes_top" 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 == '待报送' || scope.row.state == '待发布') &&
                checkPermission(['record_update'])
              "
              type="warning"
              size="small"
              @click="handleRecord({ action: 'update', record: scope.row })"
              >编辑</el-link
            >
            <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.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_confirm'])
              "
              type="success"
              size="small"
              @click="handleRecord({ action: 'confirm', 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
            >
            <el-link
              v-if="checkPermission(['record_delete'])"
              type="danger"
              size="small"
              @click="handleRecord({ action: 'delete', 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-card>
    <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 { getRecordList, createself } from "@/api/record";
import { genTree } from "@/utils";

import { getContentList } from "@/api/content";
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,
      },

      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: {},
  created() {
    this.getState();
    this.getOrgList();
    this.getContentsList();
  },
  methods: {
    checkPermission,

    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;
      });
    },
    getOrgList() {
      if (this.checkPermission(["record_confirm"])) {
        getOrgList({ can_supervision: true }).then((res) => {
          this.orgData = res.data;
        });
      }else{
        getSubOrgList().then(res=>{
          this.orgData = 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,
        belong_dept: this.$store.state.user.dept
      };
      this.getList();
    },

    handleRecord(data) {
      this.data = data;
      this.drawer = true;
    },
    handleDo(data) {
      this.drawer = false;
      this.getList();
    },
    getContentsList() {
      getContentList({ can_doself: this.can_doself }).then((res) => {
        this.contentOptions = res.data;
      });
    },
    changeTableSort(val) {
      if (val.order == "ascending") {
        this.listQuery.ordering = val.prop;
      } else {
        this.listQuery.ordering = "-" + val.prop;
      }
      this.getList();
    },
    contentup() {
      if (this.contents.length > 0) {
        createself({ contents: this.contents }).then((res) => {
          this.centerDialogVisible = false;
          this.listQuery = {
            page: 1,
            page_size: 20
          };
          this.getList();
        });
      } else {
        this.$message.error("请选择清单!");
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 1 || columnIndex === 0) {
      //       // 当 当前行与上一行内容相同时 返回0 0 意味消除
      //       if(rowIndex > 0 && row[column.property] === this.recordList[rowIndex - 1][column.property]){
      //           return {
      //               rowspan: 0,
      //               colspan: 0
      //           };
      //       }else{
      //           let rows = 1;
      //           // 反之 查询相同的内容有多少行 进行合并
      //           for(let i = rowIndex; i < this.recordList.length - 1; i++){
      //               if (row[column.property] === this.recordList[i + 1][column.property]) {
      //                   rows++;
      //               }
      //           }
      //           // 返回相同内容的行数
      //           return {
      //               rowspan: rows,
      //               colspan: 1
      //           };
      //       }
      // }
    },
  },
};
</script>
