<template>
  <el-container>
    <el-main class="nopadding">
      <el-card style="margin-bottom: 10px">
        <work-step ref="workStep"></work-step>
      </el-card>

      <el-card style="margin-left: 10px; margin-bottom: 10px">
        <el-descriptions title="来访信息" :column="3">
          
          <el-descriptions-item label="工单流水号:">{{
            ticketDetail.sn
          }}</el-descriptions-item>
        
          <el-descriptions-item label="来访概述:">{{
            visitDetail.name
          }}</el-descriptions-item>
          <el-descriptions-item label="来访单位:">{{
            visitDetail.company
          }}</el-descriptions-item>
            <el-descriptions-item label="来访人数:">
            <el-tag size="small">{{ visitDetail.count_people }}人</el-tag>
          </el-descriptions-item>
           <el-descriptions-item label="来访人员:"  >
            <el-tag v-for="item in visitDetail.visitors_"  :key='item.id' size="small">{{ item.visitor_.name }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态:">{{
            state_[visitDetail.state]
          }}</el-descriptions-item>
           <el-descriptions-item label="来访时间:">{{
            visitDetail.visit_time
          }}</el-descriptions-item>
          <el-descriptions-item label="离开时间:">{{
            visitDetail.leave_time
          }}</el-descriptions-item>
          <el-descriptions-item label="来访事由:">{{
            purpose_[visitDetail.purpose]
          }}</el-descriptions-item>
          <el-descriptions-item label="来访详述:">{{
            visitDetail.description
          }}</el-descriptions-item>
         
        
           <el-descriptions-item label="接待人:" v-if="visitDetail.receptionist_">
            {{ visitDetail.receptionist_.name }}
          </el-descriptions-item>
          
        </el-descriptions>
      </el-card>
      <el-card>
        <work-details ref="workDetails"></work-details>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import workDetails from "./details.vue";
import workStep from "./steps.vue";
export default {
  components: {
    workDetails,
    workStep,
  },
  name: "visitdetail",
  data() {
    return {
      workId: "",
      visitId: "",
      ticketDetail: [],
      visitDetail: [],
       purpose_: {
        10: "参观",
        20: "拜访",
        30: "面试",
        40: "开会"
      },
       state_: {
        10: "创建中",
        20: "审批中",
        30: "待入厂",
        40: "进行中",
        50: "已完成",
      },
    };
  },
  mounted() {
    this.workId = this.$route.query.id;
    this.visitId = this.$route.query.visitID;
    this.getticketItem();
    this.getVisit();

  },
  methods: {
    //工单详情
    getticketItem() {
      this.$API.wf.ticket.ticketItem.req(this.workId).then((res) => {
        this.ticketDetail = res;
        
      });
    },
    //访客详情
    getVisit() {
      this.$API.vm.visit.read.req(this.visitId).then((res) => {
        this.visitDetail = res;
      });
    },
  },
};
</script>

<style scoped>
</style>
