<template>
  <div class="ele-body">
    <div class="d-track-item">
      <HeaderTitle title="基本信息" size="16px"></HeaderTitle>
      <el-form label-width="120px">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="产品分类"> </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品分类"> </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品分类"> </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品分类"> </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品分类"> </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品分类"> </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品分类"> </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品分类"> </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品分类"> </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品分类"> </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="d-track-item">
      <HeaderTitle title="报工明细" size="16px"></HeaderTitle>
      <el-row style="margin-bottom: 20px; border: 2px solid #f2f2f2">
        <el-col :span="4">
          <div class="d-track-item-inner">
            <div class="label">本次报工累计良品数量</div>
            <div class="value">10</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="d-track-item-inner">
            <div class="label">本次报工累计良品数量</div>
            <div class="value">10</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="d-track-item-inner">
            <div class="label">本次报工累计良品数量</div>
            <div class="value">10</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="d-track-item-inner">
            <div class="label">本次报工累计良品数量</div>
            <div class="value">10</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="d-track-item-inner">
            <div class="label">本次报工累计良品数量</div>
            <div class="value">10</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="d-track-item-inner">
            <div class="label">本次报工累计良品数量</div>
            <div class="value">10</div>
          </div>
        </el-col>
      </el-row>
      <ele-pro-table
        ref="table"
        :columns="columns"
        :toolbar="false"
        :datasource="datasource"
        :needPage="false"
        cache-key="dTrackTable4"
      >
        <!-- 表头工具栏 -->

        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link type="primary" :underline="false" @click="SendOrders(row)">
            派单
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="btnView(row)"
          >
            查看详情
          </el-link>
        </template>
      </ele-pro-table>
    </div>
    <div class="d-track-item">
      <HeaderTitle title="领料记录" size="16px"></HeaderTitle>
      <el-row style="margin-bottom: 20px; border: 2px solid #f2f2f2">
        <el-col :span="4">
          <div class="d-track-item-inner">
            <div class="label">领料单号</div>
            <div class="value">10</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="d-track-item-inner">
            <div class="label">领料单号</div>
            <div class="value">10</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="d-track-item-inner">
            <div class="label">领料单号</div>
            <div class="value">10</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="d-track-item-inner">
            <div class="label">领料单号</div>
            <div class="value">10</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="d-track-item-inner">
            <div class="label">领料单号</div>
            <div class="value">10</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="d-track-item-inner">
            <div class="label">领料单号</div>
            <div class="value">10</div>
          </div>
        </el-col>
      </el-row>

      <ele-pro-table
        ref="table"
        :columns="columns"
        :toolbar="false"
        :datasource="datasource"
        :needPage="false"
        cache-key="dTrackTable1"
      >
        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link type="primary" :underline="false" @click="SendOrders(row)">
            派单
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="btnView(row)"
          >
            查看详情
          </el-link>
        </template>
      </ele-pro-table>
    </div>
    <div class="d-track-item" @click="dialogTableVisible = true">
      <HeaderTitle title="工单交接记录" size="16px"></HeaderTitle>

      <ele-pro-table
        ref="table"
        :columns="columns"
        :toolbar="false"
        :datasource="datasource"
        :needPage="false"
        cache-key="dTrackTable2"
      >
        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link type="primary" :underline="false" @click="SendOrders(row)">
            派单
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="btnView(row)"
          >
            查看详情
          </el-link>
        </template>
      </ele-pro-table>
    </div>
    <div class="d-track-item">
      <HeaderTitle title="退料记录" size="16px"></HeaderTitle>
      <el-row style="margin-bottom: 20px; border: 2px solid #f2f2f2">
        <el-col :span="4">
          <div class="d-track-item-inner">
            <div class="label">领料单号</div>
            <div class="value">10</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="d-track-item-inner">
            <div class="label">领料单号</div>
            <div class="value">10</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="d-track-item-inner">
            <div class="label">领料单号</div>
            <div class="value">10</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="d-track-item-inner">
            <div class="label">领料单号</div>
            <div class="value">10</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="d-track-item-inner">
            <div class="label">领料单号</div>
            <div class="value">10</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="d-track-item-inner">
            <div class="label">领料单号</div>
            <div class="value">10</div>
          </div>
        </el-col>
      </el-row>
      <ele-pro-table
        ref="table"
        :columns="columns"
        :toolbar="false"
        :datasource="datasource"
        :needPage="false"
        cache-key="dTrackTable3"
      >
        <!-- 表头工具栏 -->

        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link type="primary" :underline="false" @click="SendOrders(row)">
            派单
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="btnView(row)"
          >
            查看详情
          </el-link>
        </template>
      </ele-pro-table>
    </div>
    <dTable v-if="dialogTableVisible" :visible.sync="dialogTableVisible" />
  </div>
</template>

<script>
  import dTable from '@/views/mes/workOrder/detail/d-table';
  export default {
    components: {
      dTable
    },
    data() {
      return {
        columns: [],
        dialogTableVisible: false,
        tabPosition: 'top'
      };
    },
    methods: {
      datasource() {
        return {
          list: []
        };
      }
    }
  };
</script>

<style lang="scss" scoped>
  .el-form-item {
    font-size: 12px !important;
    margin-bottom: 10px;
  }
  .d-track-item {
    margin-bottom: 30px;
  }
  .d-track-item-inner {
    display: flex;
    align-items: center;
    .label {
      padding: 5px 20px;
      background-color: #f2f2f2;
      color: #333;
    }
  }
  .el-radio-button {
  }
</style>
