<template>
  <div class="content-height p20">
    <div class="flex createdInfo">
      <!-- <div>
        <span class="col">状态</span>
        <span>{{ infoData.planStatus && infoData.planStatus.descp }}</span>
      </div> -->
      <div>
        <span class="col">创建人</span>
        <span>{{ infoData.createUserName }}</span>
      </div>
      <div>
        <span class="col">创建时间</span>
        <span>{{ infoData.createTime }}</span>
      </div>
    </div>
<!--    <div class="switch mt40">
      <div class="switch_left">
        <ul>
          <li :class="{ active: num == 1 }" @click="selectActive(1)">详情</li>
        </ul>
      </div>
    </div> -->

    <div v-if="num === 1">
      <div class="content-detail mt40">
		<HeaderTitle title="派单信息" size="16px"></HeaderTitle>
        <div class="mt20">
          <el-form label-width="130px">
            <el-col :span="8">
              <el-form-item label="单据编号">
                {{ infoData.planRuleCode }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="盘点名称">
                {{ infoData.planRuleName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="资产类型">
                {{ infoData.assetDict && infoData.assetDict.descp }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="盘点类型">
                {{ infoData.bizType | useDictLabelFilter(wh_checkStatus) }}
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="infoData.bizType == 1">
              <el-form-item label="盘点仓库">
                {{ infoData.bizTypeName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="盘点部门">
                {{ infoData.executorDeptName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="盘点人员">
                {{ infoData.executorName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计划盘点时长">
                {{ infoData.duration }}分钟
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审批人">
                {{ infoData.verifyUserName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="紧急程度">
                {{ infoData.urgent | useDictLabelFilter(emergencyState) }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建人">
                {{ infoData.createUserName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间">
                {{ infoData.createTime }}
              </el-form-item>
            </el-col>
            <!-- <el-col :span="24">
              <el-form-item label="附件">
              </el-form-item>
            </el-col> -->
            <el-col :span="16">
              <el-form-item label="备注">
                {{ infoData.remark }}
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </div>
      <div class="content-detail mt20">
		<HeaderTitle title="盘点明细" size="16px"></HeaderTitle>
        <div class="mt20">
          <el-form label-width="80px" label-position="top">
            <el-form-item>
              <el-table
                ref="multipleTable"
                :data="infoData.planRuleInventoryDetailList || []"
                tooltip-effect="dark"
                style="width: 100%"
                stripe
                :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
              >
                <el-table-column
                  :label="`${
                    (infoData.assetDict && infoData.assetDict.descp) || ''
                  }编号`"
                  prop="assetCode"
                ></el-table-column>
                <el-table-column
                  :label="`${
                    (infoData.assetDict && infoData.assetDict.descp) || ''
                  }名称`"
                  prop="assetName"
                ></el-table-column>
                <el-table-column
                  v-if="infoData.bizType == 1"
                  label="批次号"
                  prop="batchNum"
                ></el-table-column>
                <el-table-column
                  label="牌号"
                  prop="assetBrand"
                ></el-table-column>
                <el-table-column label="型号" prop="equiModel"></el-table-column>
                <el-table-column label="类型" prop="assetTypeDict.descp">
                  <template>
                    {{ infoData.assetDict && infoData.assetDict.descp }}
                  </template>
                </el-table-column>
                <!-- <el-table-column
                  label="仓库"
                  prop="bizTypeName"
                ></el-table-column> -->
                <el-table-column
                  label="库存量"
                  prop="inventoryNum"
                ></el-table-column>
                <el-table-column label="单位" prop="unit"></el-table-column>
              </el-table>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { getPlanDetail, workOrderDetails } from '@/api/stockManagement/stocking'
// import PageHeader from '@/components/PageHeader'
// import StatusStep from '@/components/StatusStep'
// import { useDictLabelFilter } from '@/utils/dict'

// import {
//   wh_planStatus,
//   wh_checkStatus,
//   emergencyState,
//   warehousingType
// } from '@/utils/dict/warehouse'
export default {
  // components: { PageHeader, StatusStep },
  // filters: {
  //   useDictLabelFilter: useDictLabelFilter
  // },
  data () {
    return {
      emergencyState,
      wh_checkStatus,
      wh_planStatus,
      activeName: 'a',
      num: 1,
      workOrderData: [],
      infoData: {},
      stepsList: [
        { status: 'Done', nodeName: '创建' },
        { status: 'Done', nodeName: '审批中' },
        { status: 'Done', nodeName: '审批完成' },
        { status: 'Processing', nodeName: '已收货' },
        { status: '', nodeName: '收货中' },
        { status: '', nodeName: '已收货' }
      ],
      btnList1: [
        { name: '受理' },
        {
          name: '作废'
        },
        {
          name: '执行'
        },
        {
          name: '编辑'
        },
        {
          name: '确认'
        },
        {
          name: '打印'
        },
        {
          name: '关闭'
        }
      ],
      btnList2: [
        {
          name: '撤销'
        },
        {
          name: '催办'
        },
        {
          name: '批复'
        },
        {
          name: '编辑'
        },
        {
          name: '提交'
        },
        {
          name: '打印'
        },
        {
          name: '关闭'
        }
      ],
      list: [
        {
          name: '紧急',
          color: 'red'
        },
        {
          name: '重要',
          color: 'blue'
        },
        {
          name: '已催办',
          color: 'red'
        }
      ],
      detailsData: [],
      tableData: [],
      tableData1: [],
      tableData2: []
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    async getInfo () {
      const res = await getPlanDetail({ id: this.$route.query.id })
      if (res?.success) {
        console.log(res)
        this.infoData = res.data
      }
    },
    selectActive (num) {
      this.num = num
    },
    async _workOrderDetails () {
      const res = await workOrderDetails()
    },
    // 时间差计算
    difference (beginTime, endTime) {
      var dateBegin = new Date(beginTime)
      var dateEnd = new Date(endTime)
      var dateDiff = dateEnd.getTime() - dateBegin.getTime() //时间差的毫秒数
      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)) //计算出相差天数
      var leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000)) //计算出小时数
      //计算相差分钟数
      var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000)) //计算相差分钟数
      //计算相差秒数
      var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000)

      if (dayDiff == -1) {
        dayDiff = 0
        hours = 0
        minutes = 0
      }

      return dayDiff + '天' + hours + '小时' + minutes + '分钟'
    }
  }
}
</script>

<style lang="scss" scoped>
	.content-height{
		background: #fff;
	}
.p20 {
  padding: 20px;
}
.flex {
  display: flex;
}
.title {
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
  span {
    font-size: 16px;
  }
  .col {
    padding-left: 40px;
    font-size: 14px;
    color: #aaaaaa;
  }
}
.degree {
  margin-right: 10px;
  padding: 0px 15px;
  color: #fff;
  font-size: 13px;
  line-height: 23px;
  border-radius: 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  span {
    width: 5px;
    height: 5px;
    border-radius: 100%;
    margin-right: 6px;
    background-color: #fff;
  }
}
.red {
  background-color: rgb(163, 0, 20);
}
.blue {
  background-color: #1989fa;
}
.createdInfo {
  justify-content: space-around;
  margin-top: 10px;
  font-size: 14px;
  .col {
    color: #6e6e6e;
    padding-right: 10px;
  }
}
.mt40 {
  margin-top: 40px;
}

.custSteps {
  margin-top: 20px;
  margin-left: 70px;

  .box {
    width: 158px;
    border: 1px solid #ccc;
    padding: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    // justify-content: space-between;
    font-size: 12px;
    color: #9e9e9e;
    .x {
      width: 20px;
      height: 15px;
      margin-right: 5px;
    }
    .q {
      background-color: #d0e4d5;
    }
    .b {
      background-color: #1989fa;
    }
    .g {
      background-color: #157a2c;
    }
    .r {
      background-color: #a30014;
    }
    .a {
      align-items: center;
      margin-bottom: 10px;
    }
    .mr10 {
      margin-right: 10px;
    }
    .mb0 {
      margin-bottom: 0;
    }
  }
  .stepsInfo {
    // flex: 1;
    width: 483px;
  }
}
.mt20 {
  margin-top: 20px;
}
.content-detail {
  overflow: hidden;
}
.executor {
  font-size: 14px;
  .col {
    color: #6e6e6e;
    padding-right: 10px;
  }
}
.result {
  justify-content: space-around;
}
.mr20 {
  margin-right: 20px;
}
.details {
  font-size: 14px;
  margin-bottom: 10px;
}

.customSteps {
  margin-top: 40px;
  font-size: 14px;
  margin-left: 80px;
  .time {
    font-size: 12px;
    color: #6e6e6e;
    margin-right: 20px;
    position: relative;
    .col {
      color: #c1bdbd;
      text-align: right;
    }
    &::after {
      content: '';
      width: 1px;
      height: 100%;
      background-color: #157a2c;
      position: absolute;
      right: -26px;
    }
  }
  .flex:last-child {
    .time {
      &::after {
        display: none;
      }
    }
  }
  .round {
    margin-right: 20px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #157a2c;
    position: relative;
    span {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 4px;
      height: 4px;
      background-color: #fff;
      border-radius: 100%;
      transform: translate(-2px, -2px);
    }
  }
  .text {
    .info {
      margin-top: 10px;
      width: 955px;
      background-color: #f0f3f3;
      overflow: hidden;
      padding: 10px;
      margin-bottom: 10px;
    }
  }
}
.customInfo {
  .time {
    &::after {
      top: 0;
      right: -28px;
    }
  }
}
.tips {
  font-size: 14px;
  color: #6e6e6e;
  margin-left: 52px;
  .shape {
    margin-left: 30px;
    p {
      margin-right: 10px;
    }
  }
}
.f {
  width: 15px;
  height: 15px;
  background-color: #157a2c;
  border-radius: 3px;
}
.j {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 15px solid #157a2c;
}
.y {
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: #157a2c;
}
</style>
