<template>
  <el-container>
    <el-main class="nopadding">
      <el-card style="margin-bottom: 10px">
        <el-steps
          :active="actives"
          spac="400px"
          align-center=""
          style="padding-top: 20px"
        >
          <el-step
            :title="item.name"
            v-for="item in flowSteps"
            :key="item.id"
          ></el-step>
        </el-steps>
      </el-card>
      <el-row>
        <el-col :span="24">
          <el-card style="margin-left: 10px">
          <p style="text-align: center;font-size: 20px">{{ticketDetail.title}}</p>
          <el-col :span="12">
            <div class="items">
              <span class="itemLabel">工作流：</span>
              <span>{{ticketDetail.workflow_.name}}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="items">
              <span class="itemLabel">流水号：</span>
              <span>{{ticketDetail.sn}}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="items">
              <span class="itemLabel">创建时间：</span>
              <span>{{ticketDetail.create_time}}</span>
            </div>
          </el-col>
          <el-col v-for="item in ticketDetail.ticket_data_" :key="item.id" :span="12">
            <div class="items">
              <span class="itemLabel">{{item.field_name}}：</span>
              <span>{{item.field_display}}</span>
            </div>
          </el-col>
        </el-card>
          <el-card style="margin-left: 10px">
            <el-table
              :data="logs"
              fit
              stripe
              style="width: 100%; border-top: 1px solid #ebeef5"
              height="500"
              highlight-current-row
            >
              <el-table-column label="工单标题" min-width="100">
                <template #default="scope">
                  <span v-if="scope.row.ticket_data.title">{{ scope.row.ticket_data.title }}中</span>
                </template>
              </el-table-column>
              <el-table-column label="进行状态" min-width="100">
                <template #default="scope">
                  <span v-if="scope.row.state_.type == 0"
                    >{{ scope.row.state_.name }}中</span
                  >
                  <span v-else>已{{ scope.row.state_.name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作人" min-width="100">
                <template #default="scope" ><el-span v-if="scope.row.participant_">{{
                  scope.row.participant_.name
                }}</el-span></template>
              </el-table-column>
              <el-table-column
                label="操作意见"
                min-width="100"
                prop="suggestion"
              >
              </el-table-column>
              <el-table-column
                label="更新时间"
                min-width="100"
                prop="update_time"
              >
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "workdetail",
  data() {
    return {
      actives: 4,
      flowSteps: [],
      workId: "",
      ticketDetail: [],
        logs: [],
    };
  },
  mounted() {
    this.workId = this.$route.query.id;
    this.getFlowSteps();
  },
  methods: {
    async getFlowSteps() {
      let res = await this.$API.wf.ticket.ticketFlowSteps.req(this.workId);
      console.log(res);
      this.flowSteps = res;
        this.$API.wf.ticket.ticketItem.req(this.workId).then((res) => {
                
                   
                    this.ticketDetail = res
                    for (let i = 0; i < this.ticketDetail.ticket_data_.length; i++) {
                      if (this.ticketDetail.ticket_data_[i].label === "sys_user") {
                        this.ticketDetail.ticket_data_[i].field_choice = that.staffs;
                      }
                      if (this.ticketDetail.ticket_data_[i].label === "deptSelect") {
                        this.ticketDetail.ticket_data_[i].field_choice = that.orgList;
                      }
                    }
                    // console.log(that.ticketDetail.state_.enable_retreat);
                    let state = res.state;
                    let dat = this.flowSteps.filter((item) => {
                      return item.id == state;
                    })
                    // debugger;
                    let state_fields = dat[0].state_fields;
                    if (state_fields !== {}) {
                      for (let labe in state_fields) {
                        for (let j = 0; j < this.ticketDetail.ticket_data_.length; j++) {
                          if (this.ticketDetail.ticket_data_[j].field_key === labe) {
                            // debugger;
                            // console.log(labe)
                            // console.log(state_fields[labe])
                            if (state_fields[labe] !== 4) {
                              this.ticketDetail.ticket_data_[j].is_hidden = false
                            } else {
                              this.ticketDetail.ticket_data_[j].is_hidden = true
                            }
                          }
                        }
                      }
                    }
                    that.sort = dat[0].sort;
                    that.actives = that.flowSteps.indexOf(dat[0]);
                    if (that.flowSteps.length - that.actives > 1) {
                    } else {
                      that.actives = that.flowSteps.length;
                    }
                  
                });
             this.$API.wf.ticket.ticketFlowlogs.req(this.workId).then(res => {
                              
                                this.logs = res
                               
                              
                            })

                           
    },
  },
};
</script>

<style scoped>
</style>
