<template>
  <div class="common-box">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="任务概览" name="first">
        <el-form :model="formSearch1" :inline="true" ref="formSearch1">
          <el-form-item label="发起时间" prop="initrTime">
            <el-date-picker
              v-model="formSearch1.initrTime"
              type="daterange"
              style="width: 240px; margin-right: 2px"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item label="发起人" prop="initrUserName">
            <el-input
              placeholder="请输入发起人"
              v-model="formSearch1.initrUserName"
              style="width: 170px; margin-right: 2px"
              clearable
            />
          </el-form-item>
          <el-form-item label="业务类型" prop="taskType">
            <el-select
              v-model="formSearch1.taskType"
              style="width: 150px; margin-right: 2px"
              placeholder="请选择业务类型"
              clearable
            >
              <el-option
                v-for="item in miData"
                :key="item.id"
                :label="item.dicVal"
                :value="item.dicVal"
                clearable
              />
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="handleSearch1()">查询</el-button>
          <el-button @click="empty1()">重置</el-button>
        </el-form>
        <el-table
          show-overflow-tooltip
          style="width: 100%"
          v-loading="Loading"
          :data="getOverview"
          element-loading-text="加载中..."
          :row-class-name="tableRowClassName"
          fit
          stripe
        >
          <template slot="empty">
            <img src="@/assets/nopage.png" alt />
            <p>暂无数据</p>
          </template>
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            align="center"
          />
          <el-table-column label="任务" prop="taskName">
            <template slot-scope="scope">
              <el-badge :is-dot="scope.row.dspoStas == 0" class="item">
                {{ scope.row.taskName }}
              </el-badge>
            </template>
          </el-table-column>
          <el-table-column label="任务描述" width="280px" prop="taskText" />
          <el-table-column label="业务类型" prop="taskType" />
          <el-table-column label="发起人" prop="initrUserName" />
          <el-table-column label="发起时间" prop="initrTime" />
          <el-table-column label="任务状态" prop="dspoStas" width="90">
            <template slot-scope="scope">
              <span v-if="scope.row.dspoStas == 0">待办</span>
              <span v-if="scope.row.dspoStas == 1">已办</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100px">
            <template slot-scope="scope">
              <el-button @click.native="handleInfo(scope.row)" type="text"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <yl-pagination
          v-show="total1 > 0"
          :total="total1"
          :page.sync="formSearch1.current"
          :limit.sync="formSearch1.size"
          @pagination="fetchData1"
        />
      </el-tab-pane>
      <el-tab-pane label="我的待办" name="second">
        <template #label>
          <el-badge :value="number" :max="99" class="item"> 我的待办 </el-badge>
        </template>
        <el-form :model="formSearch1" :inline="true" ref="formSearch1">
          <el-form-item label="发起时间" prop="initrTime">
            <el-date-picker
              v-model="formSearch1.initrTime"
              type="daterange"
              style="width: 240px; margin-right: 2px"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item label="发起人" prop="initrUserName">
            <el-input
              placeholder="请输入"
              v-model="formSearch1.initrUserName"
              style="width: 170px; margin-right: 2px"
              clearable
            />
          </el-form-item>
          <el-form-item label="业务类型" prop="taskType">
            <el-select
              v-model="formSearch1.taskType"
              style="width: 150px; margin-right: 2px"
              placeholder="请选择业务类型"
              clearable
            >
              <el-option
                v-for="item in miData"
                :key="item.id"
                :label="item.dicVal"
                :value="item.dicVal"
                clearable
              />
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="handleSearch2()">查询</el-button>
          <el-button @click="empty2()">重置</el-button>
        </el-form>
        <el-table
          show-overflow-tooltip
          style="width: 100%"
          v-loading="Loading"
          :data="getDolist"
          element-loading-text="加载中"
          :row-class-name="tableRowClassName"
          fit
          stripe
        >
          <template slot="empty">
            <img src="@/assets/nopage.png" alt />
            <p>暂无数据</p>
          </template>
          <el-table-column fixed="left" type="index" label="序号" />
          <el-table-column label="任务" prop="taskName" />
          <el-table-column label="任务描述" width="280px" prop="taskText" />
          <el-table-column label="业务类型" prop="taskType" />
          <el-table-column label="发起人" prop="initrUserName" />
          <el-table-column label="发起时间" prop="initrTime" />
          <el-table-column label="任务状态" prop="dspoStas" width="90">
            <template slot-scope="scope">
              <span v-if="scope.row.dspoStas == 0">待办</span>
              <span v-if="scope.row.dspoStas == 1">已办</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100px">
            <template slot-scope="scope">
              <el-button @click.native="handleInfo(scope.row)" type="text"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <yl-pagination
          v-show="total2 > 0"
          :total="total2"
          :page.sync="formSearch1.current"
          :limit.sync="formSearch1.size"
          @pagination="fetchData2"
        />
      </el-tab-pane>
      <el-tab-pane label="我发起的" name="third">
        <el-form :model="formSearch1" :inline="true" ref="formSearch1">
          <el-form-item label="发起时间" prop="initrTime">
            <el-date-picker
              v-model="formSearch1.initrTime"
              type="daterange"
              style="width: 240px; margin-right: 2px"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item label="发起人" prop="initrUserName">
            <el-input
              placeholder="请输入"
              v-model="formSearch1.initrUserName"
              style="width: 170px; margin-right: 2px"
              clearable
            />
          </el-form-item>
          <el-form-item label="业务类型" prop="taskType">
            <el-select
              v-model="formSearch1.taskType"
              style="width: 150px; margin-right: 2px"
              placeholder="请选择业务类型"
              clearable
            >
              <el-option
                v-for="item in miData"
                :key="item.id"
                :label="item.dicVal"
                :value="item.dicVal"
                clearable
              />
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="handleSearch3()">查询</el-button>
          <el-button @click="empty3()">重置</el-button>
        </el-form>
        <el-table
          show-overflow-tooltip
          style="width: 100%"
          v-loading="Loading"
          :data="getInitiated"
          element-loading-text="加载中"
          fit
          stripe
          :row-class-name="tableRowClassName"
        >
          <template slot="empty">
            <img src="@/assets/nopage.png" alt />
            <p>暂无数据</p>
          </template>
          <el-table-column fixed="left" type="index" label="序号" />
          <el-table-column label="任务" prop="taskName" />
          <el-table-column label="任务描述" width="280px" prop="taskText" />
          <el-table-column label="业务类型" prop="taskType" />
          <el-table-column label="发起人" prop="initrUserName" />
          <el-table-column label="发起时间" prop="initrTime" />
          <el-table-column label="任务状态" prop="dspoStas" width="90">
            <template slot-scope="scope">
              <span v-if="scope.row.dspoStas == 0">待办</span>
              <span v-if="scope.row.dspoStas == 1">已办</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100px">
            <template slot-scope="scope">
              <el-button @click.native="handleInfo(scope.row)" type="text"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <yl-pagination
          v-show="total3 > 0"
          :total="total3"
          :page.sync="formSearch1.current"
          :limit.sync="formSearch1.size"
          @pagination="fetchData3"
        />
      </el-tab-pane>
      <el-tab-pane label="我已处理" name="fourth">
        <el-form :model="formSearch1" :inline="true" ref="formSearch1">
          <el-form-item label="发起时间" prop="initrTime">
            <el-date-picker
              v-model="formSearch1.initrTime"
              type="daterange"
              style="width: 240px; margin-right: 2px"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item label="发起人" prop="initrUserName">
            <el-input
              placeholder="请输入"
              v-model="formSearch1.initrUserName"
              style="width: 170px; margin-right: 2px"
              clearable
            />
          </el-form-item>
          <el-form-item label="业务类型" prop="taskType">
            <el-select
              v-model="formSearch1.taskType"
              style="width: 150px; margin-right: 2px"
              placeholder="请选择业务类型"
              clearable
            >
              <el-option
                v-for="item in miData"
                :key="item.id"
                :label="item.dicVal"
                :value="item.dicVal"
                clearable
              />
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="handleSearch4()">查询</el-button>
          <el-button @click="empty4()">重置</el-button>
        </el-form>
        <el-table
          show-overflow-tooltip
          style="width: 100%"
          v-loading="Loading"
          :data="getProcessed"
          element-loading-text="加载中"
          fit
          stripe
          :row-class-name="tableRowClassName"
        >
          <template slot="empty">
            <img src="@/assets/nopage.png" alt />
            <p>暂无数据</p>
          </template>
          <el-table-column fixed="left" type="index" label="序号" />
          <el-table-column label="任务" prop="taskName" />
          <el-table-column label="任务描述" width="280px" prop="taskText" />
          <el-table-column label="业务类型" prop="taskType" />
          <el-table-column label="发起人" prop="initrUserName" />
          <el-table-column label="发起时间" prop="initrTime" />
          <el-table-column label="任务状态" prop="dspoStas" width="90">
            <template slot-scope="scope">
              <span v-if="scope.row.dspoStas == 0">待办</span>
              <span v-if="scope.row.dspoStas == 1">已办</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100px">
            <template slot-scope="scope">
              <el-button @click.native="handleInfo(scope.row)" type="text"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <yl-pagination
          v-show="total4 > 0"
          :total="total4"
          :page.sync="formSearch1.current"
          :limit.sync="formSearch1.size"
          @pagination="fetchData4"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ylPagination from "@/components/yl-pagination";
import moment from "moment";
import { tasksDetail } from "@/api/mission/index";
import { getQueryDic } from "@/api/system/dic";
export default {
  components: {
    ylPagination
  },
  data() {
    return {
      miData: [],
      formSearch1: {
        initrTime: [],
        initrUserName: "",
        taskType: "",
        size: 10,
        current: 1
      },
      activeName: "first",
      Loading: false,
      total1: 0,
      total2: 0,
      total3: 0,
      total4: 0,
      getOverview: [],
      getDolist: [],
      getInitiated: [],
      getProcessed: [],
      number: 0
    };
  },
  created() {
    if (this.$route.query.item == "bell") {
      this.activeName = "second";
    }
  },
  methods: {
    getMiData() {
      getQueryDic({ dicCode: "businessType" }).then((res) => {
        this.miData = res.data;
      });
    },
    // 待办显示灰色
    // tableRowClassName({ row, rowIndex }) {
    //   if (row.dspoStas == "0") {
    //     return "warning-row";
    //   }
    //   return "";
    // },
    // 清空
    empty1() {
      this.$refs.formSearch1.resetFields();
      this.fetchData1();
    },
    empty2() {
      this.$refs.formSearch1.resetFields();
      this.fetchData2();
    },
    empty3() {
      this.$refs.formSearch1.resetFields();
      this.fetchData3();
    },
    empty4() {
      this.$refs.formSearch1.resetFields();
      this.fetchData4();
    },
    handleSearch1() {
      this.formSearch1.current = "1";
      this.fetchData1();
    },
    handleSearch2() {
      this.formSearch1.current = "1";
      this.fetchData2();
    },
    handleSearch3() {
      this.formSearch1.current = "1";
      this.fetchData3();
    },
    handleSearch4() {
      this.formSearch1.current = "1";
      this.fetchData4();
    },
    // 0待办，1已处理，2我发起，3任务概览
    fetchData1() {
      this.Loading = true;
      this.formSearch1.taskStas = "3";
      let formSearch2 = JSON.parse(JSON.stringify(this.formSearch1));
      let qwe = [];
      let qq1 = Date.parse(formSearch2.initrTime[0] + " 00:00:00") + "";
      let qq2 = Date.parse(formSearch2.initrTime[1] + " 23:59:59") + "";
      qwe.push(qq1, qq2);
      if (formSearch2.initrTime.length != 0) {
        formSearch2.initrTime = qwe;
      }
      tasksDetail(formSearch2).then((res) => {
        if (res.success == true) {
          this.getOverview = res.data.records;
          this.total1 = res.data.total;
          this.getOverview.forEach((v) => {
            v.initrTime = moment(v.initrTime).format("YYYY-MM-DD HH:mm:ss");
          });
        }
        this.Loading = false;
      });
    },
    fetchData2() {
      this.Loading = true;
      this.formSearch1.taskStas = "0";
      let formSearch2 = JSON.parse(JSON.stringify(this.formSearch1));
      let qwe = [];
      let qq1 = Date.parse(formSearch2.initrTime[0] + " 00:00:00") + "";
      let qq2 = Date.parse(formSearch2.initrTime[1] + " 23:59:59") + "";
      qwe.push(qq1, qq2);
      if (formSearch2.initrTime.length != 0) {
        formSearch2.initrTime = qwe;
      }
      tasksDetail(formSearch2).then((res) => {
        if (res.success == true) {
          this.getDolist = res.data.records;
          this.total2 = res.data.total;
          this.getDolist.forEach((v) => {
            v.initrTime = moment(v.initrTime).format("YYYY-MM-DD HH:mm:ss");
          });
        }
        this.Loading = false;
      });

      let formSearch3 = JSON.parse(JSON.stringify(this.formSearch1));
      formSearch3.size = 9999;
      this.number = 0;
      tasksDetail(formSearch3).then((res) => {
        if (res.success == true) {
          res.data.records.forEach((i) => {
            if (i.dspoStas == 0) {
              this.number++;
            }
          });
        }
      });
    },
    fetchData3() {
      this.Loading = true;
      this.formSearch1.taskStas = "2";
      let formSearch2 = JSON.parse(JSON.stringify(this.formSearch1));
      let qwe = [];
      let qq1 = Date.parse(formSearch2.initrTime[0] + " 00:00:00") + "";
      let qq2 = Date.parse(formSearch2.initrTime[1] + " 23:59:59") + "";
      qwe.push(qq1, qq2);
      if (formSearch2.initrTime.length != 0) {
        formSearch2.initrTime = qwe;
      }
      tasksDetail(formSearch2).then((res) => {
        if (res.success == true) {
          this.getInitiated = res.data.records;
          this.total3 = res.data.total;
          this.getInitiated.forEach((v) => {
            v.initrTime = moment(v.initrTime).format("YYYY-MM-DD HH:mm:ss");
          });
        }
        this.Loading = false;
      });
    },
    fetchData4() {
      this.Loading = true;
      this.formSearch1.taskStas = "1";
      let formSearch2 = JSON.parse(JSON.stringify(this.formSearch1));
      let qwe = [];
      let qq1 = Date.parse(formSearch2.initrTime[0] + " 00:00:00") + "";
      let qq2 = Date.parse(formSearch2.initrTime[1] + " 23:59:59") + "";
      qwe.push(qq1, qq2);
      if (formSearch2.initrTime.length != 0) {
        formSearch2.initrTime = qwe;
      }
      tasksDetail(formSearch2).then((res) => {
        if (res.success == true) {
          this.getProcessed = res.data.records;
          this.total4 = res.data.total;
          this.getProcessed.forEach((v) => {
            v.initrTime = moment(v.initrTime).format("YYYY-MM-DD HH:mm:ss");
          });
        }
        this.Loading = false;
      });
    },
    handleClick(tab) {
      this.$refs.formSearch1.resetFields();
      this.formSearch1.initrTime = [];
      if (tab.label === "我的待办") {
        this.fetchData2();
      }
      if (tab.label === "我发起的") {
        this.fetchData3();
      }
      if (tab.label === "我已处理") {
        this.fetchData4();
      }
      if (tab.label === "任务概览") {
        this.fetchData1();
      }
    },
    handleInfo(row) {
      const aa = JSON.parse(row.taskArgs);
      this.$router.push({
        name: row.routePath,
        query: { itemData: JSON.stringify(row) }
      });

      // if(row.taskType==='药品采购'){
      //   this.$router.push({
      //     name: "drugApprove",
      //     // query: { itemData: JSON.stringify(row.orgId) }
      //   });
      // }else if(row.taskType==='耗材采购'){
      //   this.$router.push({
      //     name: "consumableApprove",
      //     // query: { itemData: JSON.stringify(row.orgId) }
      //   });
      // }else if(row.taskType==='药品新增审批'){
      //   this.$router.push({
      //     name: "drugAddAppr",
      //     // query: { itemData: JSON.stringify(row.orgId) }
      //   });
      // }else if(row.taskType==='耗材新增审批'){
      //   this.$router.push({
      //     name: "consumableAddAppr",
      //     // query: { itemData: JSON.stringify(row.orgId) }
      //   });
      // }
    }
  },
  mounted() {
    this.fetchData1();
    this.getMiData();
  }
};
</script>

<style scoped>
::v-deep .el-tabs__nav {
  margin-top: 10px;
}
::v-deep .is-dot {
  top: 3px;
  right: 2px !important;
}
.common-box ::v-deep .el-table .warning-row {
  background: #f0f9eb;
}
.app-container {
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.app-container ::v-deep .el-table__fixed-right {
  border-left: #dfe6ec solid 1px;
}
::v-deep .el-table__fixed {
  height: 100% !important;
}
::v-deep .el-table__fixed-right {
  height: 100% !important;
}
</style>
