<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="filter">
        <label>{{$t('1132')}}：</label>
        <Cascader
          :data="datalevel"
          :value="leveldata"
          trigger="click"
          change-on-select
          class="searchInput"
          @on-change="getlevel"
        ></Cascader>
      </div>
      <div class="searchBtn">
        <Button type="primary" class="twoWord" icon="ios-search" @click="search()">{{$t('1001')}}</Button>
      </div>
    </div>

    <div class="divborder" style="padding:0px;">
      <Table
        @on-current-change="handleRowChange"
        highlight-row
        :row-class-name="rowClassName"
        :data="tableData1"
        :columns="tableColumns1"
      ></Table>
      <div style="overflow: hidden">
        <div style="float: right;">
          <!-- <Page
          :total="total"
          :current="page"
          @on-change="changePage"
          show-elevator
          show-sizer
          show-total
          @on-page-size-change="handlePageSize"
          :page-size-opts="[10,20,30,40,100]"
          ></Page>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/libs/api.request";
export default {
  // name: 'tree_select_page',
  components: {},
  data() {
    return {
      leveldata: [], // 产线层级集合
      levelid: 0, // 产线层级id
      tableData1: [], // 列表数据
      page: 1,
      pagesize: 10,
      total: 0,
      obj: {},
      treedata1: [],
      datalevel: [],
      tableColumns1: [
        {
          type: "index2",
          title: this.$t("1008"),
          key: "xuhao",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
          width: 60,
        },
        {
          title: this.$t("500051"),
          key: "code",
        },
        {
          title: this.$t("500052"),
          key: "status",
        },
        {
          title: this.$t("800307"),
          key: "program",
        },
        {
          title: this.$t("500054"),
          key: "spindleSpeed",
        },
        {
          title: this.$t("500055"),
          key: "spindleRatio",
        },
        {
          title: this.$t(950187),
          key: "feedSpeed",
        },
        {
          title: this.$t("500049"),
          key: "feedRatio",
        },
      ],
    };
  },
  created() {
    this.initlevel();
  },
  methods: {
    // 产线层级
    initlevel() {
      axios
        .request({
          url: "config/ProjectLevelSection/GetSectionTree",
          method: "get",
        })
        .then((res) => {
          this.levelid = res.data.data[0].value;
          const arr = [];
          this.datalevel = res.data.data;
          arr.push(res.data.data[0].value);
          this.leveldata = arr;

          this.search();
        });
    },
    // 产线层级选择
    getlevel: function (data) {
      this.levelid = data[data.length - 1];
    },
    search() {
      if (this.levelid == null || this.levelid == undefined) {
        this.levelid = 0;
      }
      axios
        .request({
          url: "/cnc/machine/getMachineCode2?id=" + this.levelid,
          method: "get",
        })
        .then((res) => {
          this.mockTableData1(res.data.last_data.data);
        });
    },
    mockTableData1(tablelist) {
      let data = [];
      tablelist.forEach((item) => {
        if (item) {
          // 程序编号
          var code_str = item.title + "--" + item.machineTitle;
          // 机器状态
          var status_str = "";
          switch (item.staus) {
            case 0:
              status_str = this.$t("500040");
              break;
            case 1:
              status_str = this.$t("500041");
              break;
            case 2:
              status_str = this.$t("500042");
              break;
            case 3:
              status_str = this.$t("500043");
              break;
            case 4:
              status_str = this.$t("500044");
              break;
            case 5:
              status_str = this.$t("500058");
              break;
          }
          // 处理程序号
          var pn = item.pn !== null && item.pn !== "" ? item.pn : "NA";
          var spn = item.spn !== null && item.spn !== "" ? item.spn : "NA";
          var program_str = pn + " / " + spn;
          var spindleSpeed_str = "";
          var spindleRatio_str = "";
          var feedRatio_str = "";
          if (item.staus === 0) {
            spindleSpeed_str = "NA";
            spindleRatio_str = "NA";
            feedRatio_str = "NA";
          } else {
            spindleSpeed_str = item.spindleSpeed1;
            spindleRatio_str = item.spindleRatio + "%";
            feedRatio_str = item.feedRatio + "%";
          }
          data.push({
            code: code_str, // 机器编号
            status: status_str, // 机床状态
            program: program_str, // 程序号
            spindleSpeed: spindleSpeed_str,
            spindleRatio: spindleRatio_str,
            feedRatio: feedRatio_str,
            state: item.staus,
            feedSpeed: item.feedSpeed,
          });
        }
      });
      this.tableData1 = data;
    },
    rowClassName(row, index) {
      switch (row.state) {
        case 0:
          return "cnc_machie_status_0";
        case 1:
          return "cnc_machie_status_1";
        case 2:
          return "cnc_machie_status_2";
        case 3:
          return "cnc_machie_status_3";
        case 4:
          return "cnc_machie_status_4";
        case 5:
          return "cnc_machie_status_5";
      }
    },
    handleRowChange(currentRow, oldCurrentRow) {
      this.obj = currentRow;
    },
    handlePageSize(value) {
      this.pagesize = value;
      this.tableData1 = this.search(this.page, this.pagesize);
    },
    changePage(value) {
      this.page = value;
      this.tableData1 = this.search(this.page, this.pagesize);
    },
  },
};
</script>
<style lang="less" >
.ivu-table .cnc_machie_status_0 td {
  background-color: #585858 !important;
  color: #fff;
}
.ivu-table .cnc_machie_status_1 td {
  background-color: #5cb85c !important;
  color: #fff;
}
.ivu-table .cnc_machie_status_2 td {
  background-color: #59a5e7 !important;
  color: #fff;
}
.ivu-table .cnc_machie_status_3 td {
  background-color: #f0ad4e !important;
  color: #fff;
}
.ivu-table .cnc_machie_status_4 td {
  background-color: #d9534f !important;
  color: #fff;
}
</style>
