<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading" >
      
      <!-- 数据表格 -->
      <ele-pro-table ref="table" :columns="columns" :datasource="tableList" :needPage="false" :toolbar="false" >
        <template v-slot:totalCount="{ row }">
          {{ row.totalCount }} {{ row.measuringUnit }}
        </template>

        <template v-slot:totalPackage="{ row }">
          {{ row.totalPackage }}
        </template>

        <template v-slot:totalWeight="{ row }">
          {{ row.totalWeight }} {{ row.weightUnit }}
        </template>

        <template v-slot:approvalStatus="{ row }">
          <span :class="{ 'ele-text-danger': row.approvalStatus == 2 }">
            {{ statusFormatter(row.approvalStatus) }}
          </span>
        </template>

        <template v-slot:action="{ row }">
          <el-link type="primary" :underline="false" @click="open(row,'detail')">
            详情
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>

    <edit ref="edit"></edit>
  </div>
</template>

<script>
import edit from './edit';
import { details } from '@/api/maintenance/repair';


export default {
  props:{
    id:''
  },
  components: {
   edit
  },
  data() {
    return {
      loading: false,
      tableList:[],
      outputSceneState: [
        { code: 1, label: '退供出库' },
        { code: 2, label: '调拨出库' },
        { code: 3, label: '销售出库' },
        { code: 4, label: '领用出库' },
        { code: 5, label: '报废出库' },
        { code: 6, label: '外协出库' },
        { code: 7, label: '委外出库' },
        { code: 8, label: '受托退货出库' },
        { code: 9, label: '仓库委外出库' },
        { code: 10, label: '采购退货出库' },
        { code: 11, label: '自选领用出库' },
        { code: 12, label: '配料出库' }
      ],
      statusOpt: [
        { label: '未提交', value: 0 },
        { label: '审核中', value: 1 },
        { label: '审核通过', value: 2 },
        { label: '审核不通过', value: 3 }
      ]
    };
  },
  computed: {
    // 表格列配置
    columns() {
      return [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'code',
          label: '编码',
          align: 'center',
          minWidth: 110
        },
        {
          prop: 'repairCode',
          label: '工单编码',
          align: 'center',
          minWidth: 110
        },
        {
          prop: 'repairName',
          label: '工单名称',
          align: 'center',
          minWidth: 110
        },
        {
          prop: 'deviceName',
          label: '设备名称',
          align: 'center',
          minWidth: 110
        },
        {
          prop: 'fixCode',
          label: '固资编码',
          align: 'center',
          minWidth: 110
        },
        {
          prop: 'deviceCode',
          label: '设备编码',
          align: 'center',
          minWidth: 110
        },
        {
          prop: 'useDeptName',
          label: '领用部门',
          align: 'center',
          minWidth: 110
        },
        {
          prop: 'userName',
          label: '领用人',
          align: 'center',
          minWidth: 110
        },
        {
          prop: 'usageTime',
          label: '领用时间',
          align: 'center',
          minWidth: 110
        },
        {
          prop: 'purpose',
          label: '用途',
          align: 'center',
          minWidth: 110
        },

        {
          prop: 'type',
          label: '出库场景',
          align: 'center',
          formatter: (row, column, cellValue) => {
            return this.outputSceneState.find(item=>item.code==cellValue)?.label

          }
        },
        {
          prop: 'approvalUserName',
          label: '审核人',
          align: 'center'
        },
        {
          slot: 'approvalStatus',
          label: '状态',
          align: 'center'
        },

        {
          columnKey: 'action',
          label: '操作',
          width: 120,
          align: 'center',
          resizable: false,
          fixed: 'right',
          slot: 'action',
          showOverflowTooltip: true
        }
      ];
    }
  },
  watch:{
    id(val){
      if(val){
         this.getValue()
      }

    }
  }, 
 created() {

  },
  methods: {
   async getValue(){
   const data= await details(this.id);
   console.log(data,'data')
   this.tableList=data
    },
    statusFormatter(status) {
      const obj = this.statusOpt.find((i) => i.value == status);
      return obj && obj.label;
    },
   
    open(row,type) {
      this.$refs.edit.open(row,type);
    },

  }
};
</script>

