<template>
  <div class="app-container">
    <el-card style="height: 850px">
      <div style="margin-top: 7px; margin-bottom: 7px">
        &nbsp;&nbsp;
        <span class="show-text">设备:</span>
        <el-select v-model="equipmentType" placeholder="请选择设备" filterable size="small" style="width:200px" clearable >
          <el-option
            v-for="item in basedatalx"
            :key="item.id"
            :label="item.name"
            :value="item.name"/>
        </el-select>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <!-- <span class="show-text">参数名称:</span>
        <el-input
            v-model="dataname"
            placeholder="请输入参数名称"
            clearable
            style="width: 150px; margin-right: 10px"
          /> -->
        <el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 20px" plain @click="searchTable()">查询</el-button>
      </div>
      <div>
        <el-table
          v-loading="loading"
          :data="tableData"
          :height="'82vh'"
          border
          element-loading-background="rgba(0, 0, 0, 0.2)"
          element-loading-spinner="el-icon-loading"
          highlight-current-row
          size="mini"
          style="width: 100%; margin-top: 20px"
          tooltip-effect="dark"
        >
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="50"
            fixed
          />
          <el-table-column
            align="center"
            prop="指派对象"
            label="工位"
            width="80"
            fixed
          />
          <el-table-column
            align="center"
            prop="订单号"
            label="生产订单"
            width="80"
            fixed
          />
          <el-table-column
            align="center"
            prop="计划号"
            label="计划号"
            width="80"
          />
          <el-table-column
            align="center"
            prop="合同号"
            label="销售订单"
            width="80"
            fixed
          />
          <el-table-column
            align="center"
            prop="零件名称"
            label="物料名称"
            width="100"
          />
          <el-table-column
            align="center"
            prop="零件编码"
            label="物料编码"
            width="250"
          />
          <el-table-column align="center" label="顺序" width="50">
            <template slot-scope="scope">{{ scope.row.订单行号 }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="工序名称"
            label="工序名称"
            width="80"
          />
          <el-table-column
            align="center"
            prop="分配数"
            label="分配数"
            width="60"
          />
          <el-table-column
            align="center"
            prop="上序合格数"
            label="上序合格数"
            width="60"
          />
          <el-table-column align="center" label="加工状态" width="80">
            <template slot-scope="scope">
              <div
                :style="getScoreStyle(scope.row.加工状态)"
                class="score-cell"
              >
                {{ scope.row.加工状态 }}
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" label="收料状态" width="80">
            <template slot-scope="scope">
              <div
                class="status-light"
                :class="
                  scope.row.收料 > 0
                    ? 'status-light-green'
                    : 'status-light-gray'
                "
              />
            </template>
          </el-table-column> -->
          
          <!-- <el-table-column
            align="center"
            prop="下序名称"
            label="下序名称"
            width="80"
          /> -->

          <!-- <el-table-column align="center" label="优先" width="60">
            <template slot-scope="scope">
              <div
                class="status-light"
                :class="
                  scope.row.优先 === '是'
                    ? 'status-light-green'
                    : 'status-light-gray'
                "
              />
            </template>
          </el-table-column> -->
          <el-table-column
            align="center"
            prop="完成数量"
            label="完成数"
            width="60"
          />
          <el-table-column
            align="center"
            prop="收检合格数"
            label="收检合格数"
            width="60"
          />
          <el-table-column
            align="center"
            prop="收检不合格数"
            label="收检不合格数"
            width="60"
          />
          <el-table-column
            align="center"
            prop="人员名称"
            label="人员名称"
            width="120"
          />
          <el-table-column
            align="center"
            label="加急数量"
            width=" 100"
            prop="加急总数"
          />
          <!-- <el-table-column
            align="center"
            label="任务状态"
            width="80"
            v-bind:class="colorstatus"
          >
            <template slot-scope="scope">
              <div
                :style="getScoreStyle(scope.row.任务状态)"
                class="score-cell"
              >
                {{ scope.row.任务状态 }}
              </div>
            </template>
          </el-table-column> -->
          <el-table-column align="center" label="开工时间" width="100">
            <template slot-scope="scope">{{formatDate(scope.row.开工时间)}}</template>
          </el-table-column>
          <el-table-column align="center" label="计划开始" width="100">
            <template slot-scope="scope">{{formatDate(scope.row.计划开始)}}</template>
          </el-table-column>
          <el-table-column align="center" label="计划完成" width="100">
            <template slot-scope="scope">{{formatDate(scope.row.计划完成)}}</template>
          </el-table-column>
          <!-- <el-table-column align="center" label="开工时间" width="100">
            <template slot-scope="scope">{{formatDate(scope.row.开工时间)}}</template>
          </el-table-column> -->
          <el-table-column
            align="center"
            prop="派工特殊说明"
            label="备注"
            width="120"
          />
          <!-- <el-table-column
            align="center"
            prop="收料"
            label="收料数"
            width="60"
          /> -->
        </el-table>
      </div>
    </el-card>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      routineCheckType: [],
      dialogFormVisible: false,
      title: '',
      equipmentValue: '',
      equipmentName: '',
      equipmentType: '',
      opName: '',
      process: [],
      form: {
        设备名称: '',
        设备型号: '',
        设备类型: '',
        // 加工工艺: '',
        // 工位号: '',
        // 点检类型: '',
        // 工时单价: '',
        // 月设备加工能力: ''
      },
      basedatalx:[],
      rules: {
        设备名称: [{ required: true, message: '请输入设备名称' }],
        // 设备型号: [{ required: true, message: '请输入设备型号' }],
        // 加工工艺: [{ required: true, message: '请选择加工工艺' }],
        设备类型: [{ required: true, message: '请选择' }]
      },
      original: '',
      total: 0, // 分页总数
      tableData: [], // 设备信息表
      pageCurrent: 1, // 分页当前页
      pageSize: 20, // 分页每页显示条数
      dataname:'',
      colorstatus: "",
      loading: false,
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token'
    ])
  },
  created() {
    this.searchTable()
    this.getbasedata()

  },
  methods: {

    getbasedata(){
      var Data = this.CreateData('11', 'MES_登录_工位与名称_查询')
      this.ExecDatabase(Data).then(response => {
        response.data.forEach(element => {
          
            this.basedatalx.push({
              name:element.工位名称,
              id:element.工位号,
            })
          
        });
      })
    },
    searchTable() {
      var param = []
      param.push(['设备名称', this.equipmentType])
      // param.push(['参数名称', this.dataname])

      var Data = this.CreateData('11', '设备管理_设备状态_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.tableData = response.data
        // this.tableData = response.data.result
        // this.total = parseInt(response.data.output[0].ItemCount)
      })
    },
    getScoreStyle(bgcolor) {
      if (bgcolor == "可执行") {
        return {
          backgroundColor: "#f0f9eb",
          color: "#67c23a",
        };
      } else if (bgcolor == "已完成") {
        return {
          backgroundColor: "#ecf5ff",
          color: "#409eff",
        };
      } else if (bgcolor == "已开工") {
        return {
          backgroundColor: "#fdf6ec",
          color: "#e6a23c",
        };
      } else if (bgcolor == "开始加工"  ||  bgcolor == "辅助开始") {
        return {
          backgroundColor: "#f0f9eb",
          color: "#67c23a",
        };
      }  else if (bgcolor == "暂停") {
        return {
          backgroundColor: "#fdf6ec",
          color: "#e6a23c",
        };
      }else if (bgcolor == "报工" ||  bgcolor == "辅助结束") {
        return {
          backgroundColor: "#ecf5ff",
          color: "#409eff",
        };
      }
    },
    formatDate(date) {
      if (!date) return "";
      return date.split(" ").length > 1 ? date.split(" ")[0] : date;
    },
    
    
    handleSizeChanges(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChanges(val) {
      this.pageCurrent = val
      this.searchTable()
    }
  }
}
</script>

