<template>
  <div style="display: flex; justify-content: space-between">
    <div class="taskbox">
      <div class="tit">
        <span style="font-weight: bold">待办任务</span>
      </div>
      <div style="background: #fff; padding: 20px; min-height: 400px">
        <div class="tabbox">
          <el-table
            class="com-table"
            ref="tableDataToDo"
            :data="tableDataToDo"
            tooltip-effect="dark"
            size="small"
            border
            style="width: 100%"
            height="350px"
          >
            <el-table-column prop="taskId" label="任务编码">
              <template slot-scope="scope">
                <span>{{ scope.row.taskId }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="sendTime" label="发起时间">
              <template slot-scope="scope">
                <span>{{ $formatDate(scope.row.createTime, "YYYY-MM-DD") }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="sendNo" label="发起工号">
            </el-table-column> -->
            <el-table-column prop="woNo" label="工单编号">
              <template slot-scope="scope">
                <!-- <span>{{ $desensitization(scope.row.woNo, 1) }}</span> -->
                <span>{{ scope.row.woNo }}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="120">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="viewItem(scope.row.woNo)"
                  >查看</el-button
                >
                <el-button
                  v-if="
                    scope.row.sts == 0
                  "
                  size="mini"
                  type="danger"
                  @click="dealItem(scope.row)"
                  >审批</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination class="pageBox" @current-change="currchangeToDo" layout="total, prev, pager, next" background
            :total="totalToDo">
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="taskbox">
      <div class="tit">
        <span style="font-weight: bold">已办任务</span>
      </div>
      <div style="background: #fff; min-height: 400px; padding: 20px">
        <div class="tabbox">
          <el-table
            class="com-table"
            ref="tableDataDone"
            :data="tableDataDone"
            tooltip-effect="dark"
            size="small"
            border
            style="width: 100%"
            height="350px"
          >
            <el-table-column prop="taskId" label="任务编码"> </el-table-column>
            <el-table-column prop="sendTime" label="发起时间">
              <template slot-scope="scope">
                <span>{{ $formatDate(scope.row.createTime, "YYYY-MM-DD") }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="sendNo" label="发起工号"> </el-table-column> -->
            <el-table-column prop="woNo" label="工单编号">
              <template slot-scope="scope">
                <span>{{ scope.row.woNo }}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="viewItem(scope.row.woNo)"
                >
                  查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination class="pageBox" @current-change="currchangeDone" layout="total, prev, pager, next" background
            :total="totalDone">
          </el-pagination>
        </div>
      </div>
    </div>


    <itemDialog :dialogVisible="dialogVisible" :itemId="curItemId" @closeWin="closeWin"></itemDialog>
    <!--
    <el-dialog title="工单审核" :visible.sync="dialogStatusAudit" width="70%" :destroy-on-close="true"
        :modal-append-to-body="false" :close-on-click-modal="false">
        <div>
            <audit v-if="typestatsu === 2" @closeEdio="closeEdio" :componentInfo="componentInfo"
                :componentStatus="componentStatus" :changeinfo="changeinfo"></audit>
        </div>
    </el-dialog>
    -->
  </div>
</template>
<script>
import itemDialog from "./deal/itemDialog";
export default {
  components: {
    itemDialog
  },
  data() {
    const woTitle = (rule, value, callback) => {
      if (!this.infolist.woTitle) {
        callback(new Error("不能为空"));
      } else {
        callback();
      }
    };
    const requireTime = (rule, value, callback) => {
      if (!this.infolist.requireTime) {
        callback(new Error("不能为空"));
      } else {
        callback();
      }
    };
    return {
      rules: {
        woTitle: [
          {
            required: true,
            trigger: "blur",
            validator: woTitle,
          },
        ],
        requireTime: [
          {
            required: true,
            trigger: "change",
            validator: requireTime,
          },
        ],
      },
      totalToDo: 0,
      totalDone: 0,
      pageSizeToDo: 1,
      pageSizeDone: 1,
      tableDataToDo: [],
      tableDataDone: [],
      params: {},
      
      pageSize:10,
      pageNo:1,
      dialogVisible:false,
      curItemId:'',

    };
  },
  methods: {
    //待办工单列表查询
    getToDoList(v, n) {
        this.pageSizeToDo = n;
        this.loading = true;
        v.procName = "互联网电视引入流程";
        //v.procName = "广告申请";
        this.$http({
            url: "/bpm/api/queryToDoTaskList",
            method: "post",
            headers: {
                "Content-Type": "application/json",
                "page": '{"pageNo":"' + n + '","pageSize":"10"}'
            },
            data: v,
        }).then((res) => {
            this.tableDataToDo = res.data.data;
            this.totalToDo = res.data.totalRecord;
            this.loading = false;
        });
    },
    // 分页
    currchangeToDo(v) {
        this.pageSizeToDo = v;
        this.getToDoList(this.params, this.pageSizeToDo);
    },
    //处理申请
    dialogCheck(n, v) {
        if (v == 1) {
            this.changeinfo = false;
        } else {
            this.changeinfo = true;
        }
        this.typestatsu = 2;
        this.dialogStatusAudit = true;
        let params = {
            woNo: n.woNo,
            taskId: n.taskId
        }
        this.componentInfo = params;
        this.componentStatus = true;
    },
    //已办工单列表查询
    getDoneList(v, n) {
        this.pageSizeDone = n;
        this.loading = true;
        v.procName = "互联网电视引入流程";
        //v.procName = "广告申请";
        this.$http({
            url: "/bpm/api/queryDoneTaskList",
            method: "post",
            headers: {
                "Content-Type": "application/json",
                "page": '{"pageNo":"' + n + '","pageSize":"10"}'
            },
            data: v,
        }).then((res) => {
            this.tableDataDone = res.data.data;
            this.totalDone = res.data.totalRecord;
            this.loading = false;
        });
    },
    // 分页
    currchangeDone(v) {
        this.pageSizeDone = v;
        this.getDoneList(this.params, this.pageSizeDone);
    },
    viewItem(woNo){
      //
      this.$http({
        url: "/market/tvImport/basicInfo",
        method: "post",
        headers: {"Content-Type": "application/json"},
        data:{"woNo":woNo}
      }).then((res) => {
        if(res.data.result==0){
          this.curItemId = res.data.body.imp.itemId
          this.dialogVisible = true
          console.log(res.data.body.imp.itemId)
        }else{
          this.$message({ showClose: true, message: res.data.desc,type: 'error'});
        }
      });
    },
    closeWin(){
      this.curItemId = ''
      this.dialogVisible = false
    },

    dealItem(row){
      let woNo = row.woNo
      let taskId = row.taskId
      let stepId = row.stepId
      let procId = row.procId
      let procVersion = row.procVersion
      let params = "&woNo="+woNo+"&taskId="+taskId+"&stepId="+stepId+"&procId="+procId+"&procVersion="+procVersion;
      let taskName = row.taskName;
      let path = ""
      if(taskName==="资质审核"){
          path="/auditQualification"
      }else if(taskName==="指定评估专家"){
          path = "/assignExpert"
      }else if(taskName==="专家登录评审"){
          path = "/peerReview"
      }else if(taskName==="评审汇总"){
          path = "/reviewSummary"
      }else if(taskName==="室主任初审(内部)"){
          path = "/innerOfficerAudit"
      }else if(taskName==="中心主任复审(内部)"){
          path = "/innerCentralAudit"
      }else if(taskName==="会议结果录入"){
          path = "/inputMeetingReport"
      }else if(taskName==="室主任初审"){
          path = "/extendOfficerAudit"
      }else if(taskName==="中心主任终审"){
          path = "/extendCentralAudit"
      }else if(taskName==="市场决策委员会审核"){
          path = "/marketDecision"
      }else if(taskName==="专业公司发函"){
          path = "/sendLetter"
      }else if(taskName==="省内引入"){
          path = "/importProvince"
      }else if(taskName==="产品上线"){
          path = "/publish"
      }else if(taskName==="上线"){
          path = "/publish2"
      }
      //
      path = path + "?"+params;
      this.$router.push({"path":path})
    },
  },
  mounted() {
    this.getToDoList({}, 1);
    this.getDoneList({"sts":"1"}, 1);
    this.userInfo = JSON.parse(window.sessionStorage.userInfo);
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  padding-right: 20px;
  text-align: right;
  margin-top: 20px;
}

.taskbox {
  width: 49.5%;
  display: inline-block;
}

.pageBox {
    text-align: right;
    margin-top: 10px;
}

.tit {
  margin-top: 10px;
  clear: both;
  height: 47px;
  background: #fff;
  line-height: 47px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid black;
}

.info-line {
  width: 100%;
  display: block;
  padding-left: 20px;

  div {
    width: 50%;
    display: inline-block;
    overflow: hidden;
  }

  .mytxt {
    height: 40px;
    padding-left: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: calc(100% - 100px);
    float: left;
  }

  .mytxtinfo {
    line-height: 40px;
    height: auto;
    padding-left: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: calc(100% - 100px);
  }

  span {
    width: 80px;
    display: inline-block;
    text-align: left;
    float: left;

    i {
      color: red;
      display: inline-block;
      padding-right: 5px;
    }
  }

  .el-select,
  .el-input {
    width: calc(100% - 100px);
  }
}

.online {
  width: 100%;

  .el-select {
    width: calc(100% - 100px);
  }

  span {
    vertical-align: top;
  }

  .el-textarea {
    width: calc(100% - 100px);
  }

  .tree {
    width: calc(50% - 60px);
    display: inline-block;
    margin-right: 20px;
    height: 300px;
    overflow-y: scroll;
  }

  .treeUser {
    margin: 0;
    border: 1px solid #ddd;

    p {
      background: #f4f4f4;
      padding: 0 20px;
      margin-bottom: 5px;
    }
  }

  .treeUserb {
    width: calc(100% - 100px);
    border: 1px solid #ddd;
    background: #f4f4f4;
    border-radius: 3px;
    height: auto;
    overflow: hidden;

    p {
      display: inline-block;
      padding: 0 20px;
      margin-bottom: 5px;
    }
  }
  .treedept {
    width: calc(100% - 100px);
    // display: inline-block;
    margin-right: 20px;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 0 20px;

    p {
      display: inline-block;
      margin-right: 20px;
    }
  }
}
</style>
