<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.is_self"
          placeholder="是否主动报送"
          clearable
          style="width: 140px"
          @change="handleFilter"
        >
          <el-option
            v-for="item in isOptions"
            :key="item.key"
            :label="item.name"
            :value="item.key"
          />
        </el-select>
        <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-if="checkPermission(['record_confirm'])"
          v-model="listQuery.belong_dept"
          placeholder="上报部门"
          clearable
          style="width: 140px"
          @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>
        <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-checkbox v-model="listQuery.only" @change="showOnly">只显示本司</el-checkbox>
        <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"
      >
        <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.end_date }}</template>
        </el-table-column>

        <el-table-column label="材料名称" sortable='custom' prop="content__sortnum">
          <template slot-scope="scope">{{ scope.row.content_name }}</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="上报单位" sortable='custom' prop="belong_dept__sort">
          <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 == '待发布'">{{
              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 == '待上报' || 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">
      <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 } 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,
        only: true
      },
      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.$route.params.state){
        this.listQuery.state = this.$route.params.state
      }
      this.getList()
    },
    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;
    },
    handleDo(data) {
      this.drawer = false;
      this.getList();
    },
    getContentsList() {
      getContentList({ can_doself: this.can_doself }).then((res) => {
        this.contentOptions = res.data;
       
      });
    },
    showOnly(val) {
      this.getList()
    },
    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,
            state:'待上报',
            is_self:true
          }
          this. getList();
        });
      } else {
        this.$message.error("请选择清单!");
      }
    },
  },
};
</script>
