<template>
  <div>
    <div class="d-flex flex-between">
      <div>
        <el-button type="primary" size="medium" v-if="activeName=='second'">
          <span class="d-in-block v-mid font-size-16">导出</span>
        </el-button>
        <el-button type="success" size="medium" v-if="activeName=='third'" @click="addData">
          <span class="d-in-block v-mid el-icon-plus font-size-16"></span>
          <span class="d-in-block v-mid font-size-16">新建</span>
        </el-button>
      </div>
      <el-form label-width="100px" :inline="true">
        <el-form-item prop="state_value">
          <el-select class="mr10" v-model="state_value" placeholder="全部" @change="getListData">
            <el-option v-for="item in state_list" :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 @clear="getListData">
          </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="first">
        <el-table :data="applyTable" tooltip-effect="dark" 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="dept_name" width="120">
          </el-table-column>
          <el-table-column label="姓名" width="80" prop="xm_user_name"></el-table-column>
          <el-table-column label="考核类别" width="auto" prop="xm_name"></el-table-column>
          <el-table-column label="名师类别" width="" prop="xm_lyyj"></el-table-column>
          <el-table-column label="教学类别" width="" prop="cglx"></el-table-column>
          <el-table-column label="校端审核情况" width="" prop="xm_price"></el-table-column>
          <el-table-column label="局端审核情况" width="" prop="sbrq"></el-table-column>

          <el-table-column label="操作" width="120" align="right">
            <template slot-scope="scope">

              <el-button type="text" @click="detailData(scope.row)">详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="我审核的" name="second">
        <el-table :data="auditTable" tooltip-effect="dark" 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="dept_name" width="120">
          </el-table-column>
          <el-table-column label="姓名" width="80" prop="xm_user_name"></el-table-column>
          <el-table-column label="考核类别" width="auto" prop="xm_name"></el-table-column>
          <el-table-column label="名师类别" width="" prop="xm_lyyj"></el-table-column>
          <el-table-column label="教学类别" width="" prop="cglx"></el-table-column>
          <el-table-column label="校端审核情况" width="" prop="xm_price"></el-table-column>

          <el-table-column label="操作" width="120" align="right">
            <template slot-scope="scope">
              <el-button v-if="scope.row.xm_is_wc == 2" type="text" @click="allocation(scope.row)">审核
              </el-button>
              <el-button type="text" @click="detailData(scope.row)">详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="类别管理" name="third">
        <el-table :data="auditTable" tooltip-effect="dark" 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="dept_name" width="120">
          </el-table-column>
          <el-table-column label="创建人" width="80" prop="xm_user_name"></el-table-column>
          <el-table-column label="创建时间" width="auto" prop="xm_name"></el-table-column>
          <el-table-column label="操作" width="120" align="right">
            <template slot-scope="scope">
              <el-button v-if="scope.row.xm_is_wc == 2" type="text" @click="allocation(scope.row)">编辑
              </el-button>
              <el-button type="text" @click="detailData(scope.row)">详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <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="limit" :total="applyTable.length" :current-page.sync="cur_page" @current-change="handleCurrentChange"></el-pagination>
    </footer>
    <!-- 任务分配弹窗 -->
    <el-dialog title="新建" :visible.sync="dialogFormVisible" width="581px">
      <el-form :model="dialogForm" label-width="120px">
        <el-form-item label="考核类别">
          <el-select v-model="dialogForm.staff" multiple="" placeholder="请选择考核类别">
            <el-option v-for="s in staffList" :label="s.name" :key="s.id" :value="s.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="formSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 详情弹窗 -->
    <el-dialog title="详情" :visible.sync="detailVisible" width="859px">
      <p class="title">申报日期: 审核通过日期:</p>
      <h3>教育局采购项目申报表</h3>
      <table border="1px solid #333" cellspacing="0" align="center" valign="middle">
        <tr>
          <td>申报科室</td>
          <td>{{detailMsg.dept_name}}</td>
          <td>申请人</td>
          <td>{{detailMsg.xm_user_name}}</td>
        </tr>
        <tr>
          <td>项目名称</td>
          <td colspan="3">{{detailMsg.xm_name}}</td>
        </tr>
        <tr style="height: 50px">
          <td>采购的主要理由及依据</td>
          <td colspan="3">{{detailMsg.xm_lyyj}}</td>
        </tr>
        <tr>
          <td>采购类型</td>
          <td>{{detailMsg.lb_id}}</td>
          <td>采购金额</td>
          <td>{{detailMsg.xm_price}}元</td>
        </tr>
        <tr style="height: 80px">
          <td>项目清单</td>
          <td colspan="3">{{detailMsg.xm_qd}}</td>
        </tr>
        <tr style="height: 50px">
          <td>分管副局长审批</td>
          <td colspan="3"></td>
        </tr>
        <tr style="height: 50px">
          <td>分管财务副局长审批</td>
          <td colspan="3"></td>
        </tr>
        <tr style="height: 80px">
          <td>局长审批</td>
          <td colspan="3"></td>
        </tr>
      </table>
      <p v-if="detailMsg.xm_status == 0">任务分配: 未分配</p>
      <p v-if="detailMsg.xm_status == 1">
        任务分配: 已分配 {{ detailMsg.cy }} {{ detailMsg.time }}
        {{ detailMsg.isFinish === 0 ? "未完成" : "已完成" }}
      </p>
    </el-dialog>
  </div>
</template>

<script>
import { useUserStore } from "@/stores/user";

const { real_name, dept_ids } = useUserStore();
import Tinymce from "@/components/TinymceVue/index.vue";
import FileUpload from "@/components/FileUpload/index.vue";
import {
  org_users,
  cgxmk_add,
  cgxmk_list,
  cgxmk_edit,
  cgxmk_del,
  cgxmk_detail,
} from "./api";

export default {
  name: "index",
  components: {
    Tinymce,
    FileUpload,
  },
  data() {
    return {
      state_value: "",
      state_list: [
        {
          label: "全部",
          value: "0",
        },
        {
          label: "未提交",
          value: "1",
        },
        {
          label: "待审核",
          value: "2",
        },
        {
          label: "已通过",
          value: "3",
        },
        {
          label: "未通过",
          value: "4",
        },
      ],
      keyword: "",
      title: "",
      activeName: "first",
      staff: "",
      applyTable: [],
      auditTable: [

      ],
      staffList: [
        {
          name: "人员1",
          id: 0,
        },
        {
          name: "人员2",
          id: 1,
        },
      ],
      detailMsg: {},
      limit: 10,
      total: 0,
      cur_page: 1,
      dialogFormVisible: false,
      detailVisible: false,
      lbList: [],
      dialogForm: {
        kylx_id: "",
        title: "",
        content: "",
        time: "",
        lb: "",
        files: "",
        staff: "",
      },
      isEdit: false,
      timestamp: Date.now(),
      userList: [],
      detailMsg: {
        status: 1,
        cy: "张强",
        time: "2021/12/22 10:00",
        isFinish: 0,
      },
    };
  },
  methods: {

    getUserList() {

    },
    getcgxmList() {
      let data = {
        page: 1,
        limit: 999,
        lc_status: '5',
      };
      cgxmk_list(data).then((res) => {
        console.log(res);
        // this.lbList = res.data.page_data;
      });
    },
    getListData() {
      let data = {
        page: this.cur_page,
        limit: this.limit,
        keyword: this.keyword,
        lc_status: '5',
      };
      cgxmk_list(data).then((res) => {
        this.applyTable = res.data.page_data;
        // this.auditTable = res.data.page_data;
        this.cur_page = Number(res.data.page_now);
        this.total = Number(res.data.total_rows);
      });
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getListData();
    },
    addData() {
      // this.isEdit = true;
      this.title = "新建";
      // this.dialogForm = {
      //   kylx_id: "",
      //   title: "",
      //   content: "",
      //   time: "",
      //   lb: "",
      //   files: "",
      //   staff: {
      //     label: "",
      //     value: "",
      //   },
      // };
      // this.timestamp = Date.now();
      this.dialogFormVisible = true;
    },
    formSubmit() {
      // let data = {
      //   kylx_title: this.dialogForm.title,
      //   kylx_content: this.dialogForm.content,
      //   kylx_sqr: real_name,
      //   kylx_sqrq: this.dialogForm.time,
      //   kylx_lb: this.dialogForm.lb,
      //   kylx_fj: this.dialogForm.files,
      // };
      if (!this.isEdit) {
        // kylx_add(data).then((res) => {
        //   if (res.code == 1) {
        //     this.$message({
        //       message: "科研立项新建成功！",
        //       type: "success",
        //     });
        //     this.dialogFormVisible = false;
        //     this.getListData();
        //   } else {
        //     this.$message({
        //       message: res.msg,
        //       type: "error",
        //     });
        //   }
        // });
      } else {
        // data.kylx_id = this.dialogForm.kylx_id;
        // kylx_edit(data).then((res) => {
        //   if (res.code == 1) {
        //     this.$message({
        //       message: "科研立项编辑成功！",
        //       type: "success",
        //     });
        //     this.dialogFormVisible = false;
        //     this.getListData();
        //   } else {
        //     this.$message({
        //       message: res.msg,
        //       type: "error",
        //     });
        //   }
        // });
      }
    },
    // detailData(item) {
    //   this.detailVisible = true;
    //   let data = {
    //     xm_id: item.xm_id,
    //   };
    //   cgxmk_detail(data).then((res) => {
    //     this.detailMsg = res.data.one_info;
    //   });
    // },
    detailData(id) {
      this.$router.push({
        name: "myjsjxkh_myjsDetail",
        params: { id: id }
      });
    },
    verify(type, item) {
      // let data = {
      //   kylx_zt: type,
      //   kylx_id: item.kylx_id,
      // };
      //   kylx_verify(data).then((res) => {
      //     if (res.code == 1) {
      //       this.$message({
      //         message: "审核成功！",
      //         type: "success",
      //       });
      //       this.getListData();
      //     }
      //   });
    },
    submitData(item) {
      // let data = {
      //   kylx_zt: 2,
      //   kylx_id: item.kylx_id,
      // };
      //   kylx_verify(data).then((res) => {
      //     if (res.code == 1) {
      //       this.$message({
      //         message: "提交审核成功！",
      //         type: "success",
      //       });
      //       this.getListData();
      //     }
      //   });
    },
  },
  mounted() {
    // this.add();
    this.getUserList();
    this.getcgxmList();
    this.getListData();
  },
};
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  font-size: 12px;
}
h3 {
  text-align: center;
  font-weight: 550;
  height: 40px;
  line-height: 40px;
}
table {
  width: 100%;
  tr {
    height: 30px;
    text-align: center;
    td:first-of-type {
      width: 150px;
    }
  }
}
</style>
