<template>
  <div>
    <div class="d-flex flex-right">
      <el-form label-width="100px" :inline="true">
        <!-- <el-form-item prop="ob_value">
          <el-select class="mr5" clearable v-model="statusValue" placeholder="">
            <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item prop="keyword">
          <el-input placeholder="请输入搜索关键字" v-model="keyword" clearable>
          </el-input>
        </el-form-item>
        <el-button type="primary" class="ml5" @click="getListData">搜索</el-button>
      </el-form>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="教育局（有指标）" name="jyj1"></el-tab-pane>
      <el-tab-pane label="教育局（无指标）" name="jyj2"></el-tab-pane>
      <el-tab-pane label="学校（有指标）" name="xx1"></el-tab-pane>
      <el-tab-pane label="学校（无指标）" name="xx2"></el-tab-pane>
    </el-tabs>
    <el-table :data="tableData" tooltip-effect="dark" v-loading="loading" style="width: 100%">
      <el-table-column type="selection" align="center" width="55"></el-table-column>
      <el-table-column label="序号" align="center" type="index" width="50">
      </el-table-column>
      <el-table-column label="任务名称" show-overflow-tooltip prop="jdd_name" width="160"></el-table-column>
      <el-table-column label="督导类型" show-overflow-tooltip prop="jdd_ddlx" width="120"></el-table-column>
      <el-table-column label="督导对象" show-overflow-tooltip prop="jddx_uo_name" width="120">
        <template #default="scope">{{
          activeName.startsWith('jyj') ? '教育局' : scope.row.jddx_uo_name
        }}</template>
      </el-table-column>
      <el-table-column label="任务内容" show-overflow-tooltip prop="jdd_content" width="auto"></el-table-column>

      <template v-if="activeName.endsWith('1')">
        <el-table-column label="自评分" show-overflow-tooltip prop="jddr_zp_score" width="100"></el-table-column>
        <el-table-column label="审核分数" show-overflow-tooltip prop="jddr_sh_score" width="100"></el-table-column>
        <el-table-column label="附件完成情况" show-overflow-tooltip prop="jddr_fjwcqk" width="120"></el-table-column>
      </template>
      <template v-else>
        <el-table-column label="附件完成数量" show-overflow-tooltip prop="jddr_file_finish_num" width="120"></el-table-column>
        <el-table-column label="附件未完成数量" show-overflow-tooltip prop="jddr_file_unfinish_num"
          width="120"></el-table-column>
        <el-table-column label="附件提交时间" show-overflow-tooltip prop="jddr_file_datetime" width="120"></el-table-column>
      </template>


      <el-table-column label="任务状态" prop="jddx_status" width="100">
        <template #default="scope">{{
          activeName.startsWith('jyj') ? scope.row.jdd_status : scope.row.jddx_status
        }}</template>
      </el-table-column>

      <template v-if="activeName.endsWith('1')">
        <el-table-column label="审核人" show-overflow-tooltip prop="jddr_shr" width="100"></el-table-column>
      </template>
      <template v-else>
        <el-table-column label="任务反馈意见" show-overflow-tooltip prop="jddr_sh_content" width="auto"></el-table-column>
      </template>

      <el-table-column label="佐证材料" show-overflow-tooltip width="120">
        <template slot-scope="scope">
          <el-button type="text" @click="detailData(scope.row)">查看佐证材料
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作" show-overflow-tooltip width="80">
        <template slot-scope="scope">
          <el-button type="text" @click="detailData(scope.row)">详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <footer class="flex-item-none" style="display: flex; justify-content: flex-end; margin-top: 30px">
      <el-pagination background layout="total,prev, pager, next" :page-size="10" :total="total"
        :current-page.sync="cur_page" @current-change="handleCurrentChange"></el-pagination>
    </footer>

  </div>
</template>
<script>

// import { rwfk_list } from "./api.js";
import { user } from "../../../stores/user";
import request from '@/utils/request';

export default {
  name: "index",
  data() {
    return {
      keyword: "",
      loading: false,
      total: 1,
      cur_page: 1,
      tableData: [],
      activeName: 'jyj1'
    };
  },
  computed: {
    isDdkUser() {
      return user.uo_id === '386' || user.user_group_id === '100'
    }
  },
  methods: {
    getRequest() {
      if (this.activeName.startsWith('jyj'))
        return request({
          url: '/jdbg/dddx_ddrw/index',
          data: {
            page: this.cur_page,
            keyword: this.keyword,
            // jddx_uo_id: user.uo_id=== '386' ? undefined : user.dept_id,
            jdd_dddx: 1,
            jdd_ddlx: (3 - this.activeName.slice(-1)),
            ext: 1
          }
        })
      else if (this.activeName.startsWith('xx'))
        return request({
          url: '/jdbg/dddx_ddrw_xfdx/index',
          data: {
            page: this.cur_page,
            ptype: "3",
            keyword: this.keyword,
            // ? forget why add next line
            jddx_uo_id: this.isDdkUser ? undefined : user.dept_id,
            jdd_dddx: 2,
            jdd_ddlx: (3 - this.activeName.slice(-1)) + 2,
            ext: 1
          }
        })
      else
        return Promise.reject('unknown tab type')
    },
    getListData() {
      this.getRequest().then((res) => {
        if (res.code == "1") {
          this.tableData = res.data.page_data;
          this.total = res.data.total_rows * 1
        }
      });
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getListData();
    },
    detailData(item) {
      console.log('detailData :>> ', item);
      this.$router.push({
        name: "ddrwfk_detail",
        params: {
          id: this.activeName.startsWith('xx') ? item.jddx_id : item.jdd_id,
          // iq: 1,
        },
        query: {
          from: this.activeName.slice(0, -1)
        }
      });
    },
  },
  mounted() {
    this.getListData();
  },
  watch: {
    activeName() {
      this.cur_page = 1;
      this.getListData();
    }
  }
};
</script>
