<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="searchSelect"
          @on-change="getlevel"
          style="width:260px;"
        ></Cascader>
      </div>
      <div class="searchBtn">
        <Button
          type="primary"
          class="twoWord"
          icon="ios-search"
          @click="tosearch()"
          >{{ $t("1001") }}</Button
        >
        <Button
          type="success"
          class="twoWord"
          icon="md-add-circle"
          @click="add()"
          >{{ $t("1002") }}</Button
        >
        <Button
          type="warning"
          class="twoWord"
          icon="ios-build"
          @click="edit()"
          >{{ $t("1003") }}</Button
        >
        <Button
          type="error"
          class="twoWord"
          icon="md-close-circle"
          @click="dele()"
          >{{ $t("1004") }}</Button
        >
      </div>
    </div>
    <div class="divborder newTableDiv">
      <Table
        class="tableClass"
        @on-current-change="handleRowChange"
        highlight-row
        :data="tableData1"
        @on-selection-change="handleSelectRow"
        :columns="tableColumns1"
      ></Table>
      <div class="pageDiv">
        <div class="pageDirection">
          <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>
      <Modal
        class="newModalClass"
        :title="$t('1002')"
        v-model="addmodal"
        :styles="{ width: '700px' }"
      >
        <div class="modal_body" style="height:400px!important;">
          <div style="width:280px;float:left;height:400px;overflow-y:scroll">
            <template>
              <Tree
                :data="treeContents"
                ref="tree"
                @on-select-change="getList()"
              ></Tree>
            </template>
          </div>
          <div style="width:360px;float:left;height:100%;padding-left:5px;">
            <div class="filter">
              <label>{{ this.$t("100170") }}：</label>
              <Input
                class="searchInput"
                type="number"
                min="0"
                v-model="addobj.axisspeedlow"
              /><span>RPM</span>
            </div>
            <div class="filter">
              <label>{{ this.$t("100169") }}：</label>
              <Input
                class="searchInput"
                type="number"
                min="0"
                v-model="addobj.axisspeedtop"
              /><span>RPM</span>
            </div>
            <div class="filter">
              <label>{{ this.$t("100172") }}：</label>
              <Input
                class="searchInput"
                type="number"
                min="0"
                v-model="addobj.axisratelow"
              /><span>%</span>
            </div>
            <div class="filter">
              <label>{{ this.$t("100171") }}：</label>
              <Input
                class="searchInput"
                type="number"
                min="0"
                v-model="addobj.axisratetop"
              /><span>%</span>
            </div>
            <div class="filter">
              <label>{{ this.$t("100176") }}：</label>
              <Input
                class="searchInput"
                type="number"
                min="0"
                v-model="addobj.feedratelow"
              /><span>%</span>
            </div>
            <div class="filter">
              <label>{{ this.$t("100175") }}：</label>
              <Input
                class="searchInput"
                type="number"
                min="0"
                v-model="addobj.feedratetop"
              /><span>%</span>
            </div>
          </div>
        </div>
        <div slot="footer">
          <Button type="text" size="large" @click="closeadd()">{{
            $t("1033")
          }}</Button>
          <Button type="primary" size="large" @click="adddata()">{{
            $t("1011")
          }}</Button>
        </div>
      </Modal>
      <!-- 修改弹框 -->
      <Modal
        class="newModalClass"
        :title="$t('1003')"
        v-model="editmodal"
        :styles="{ width: '700px' }"
      >
        <div class="modal_body">
          <div class="filter">
            <label>{{ this.$t("200003") }}：</label>
            <label style="width:300px!important;text-align: left!important;">{{
              sectionname
            }}</label>
          </div>
          <br />
          <div class="filter">
            <label>{{ this.$t("100170") }}：</label>
            <Input
              class="searchInput"
              type="number"
              min="0"
              v-model="editobj.axisspeedlow"
            /><span>RPM</span>
          </div>
          <div class="filter">
            <label>{{ this.$t("100169") }}：</label>
            <Input
              class="searchInput"
              type="number"
              min="0"
              v-model="editobj.axisspeedtop"
            /><span>RPM</span>
          </div>
          <br />
          <div class="filter">
            <label>{{ this.$t("100172") }}：</label>
            <Input
              class="searchInput"
              type="number"
              min="0"
              v-model="editobj.axisratelow"
            /><span>%</span>
          </div>
          <div class="filter">
            <label>{{ this.$t("100171") }}：</label>
            <Input
              class="searchInput"
              type="number"
              min="0"
              v-model="editobj.axisratetop"
            /><span>%</span>
          </div>
          <br />
          <div class="filter">
            <label>{{ this.$t("100176") }}：</label>
            <Input
              class="searchInput"
              type="number"
              min="0"
              v-model="editobj.feedratelow"
            /><span>%</span>
          </div>
          <div class="filter">
            <label>{{ this.$t("100175") }}：</label>
            <Input
              class="searchInput"
              type="number"
              min="0"
              v-model="editobj.feedratetop"
            /><span>%</span>
          </div>
        </div>
        <div slot="footer">
          <Button type="text" size="large" @click="closeedit()">{{
            $t("1033")
          }}</Button>
          <Button type="primary" size="large" @click="editdata()">{{
            $t("1011")
          }}</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import axios from "@/libs/api.request";
export default {
  name: "parameter", // 组件不刷新
  data() {
    return {
      leveldata: [], // 产线层级集合
      levelid: 0, // 产线层级id
      datalevel: [],
      tableData1: [],
      total: 0,
      page: 1,
      pagesize: 10,
      addmodal: false,
      detailobj: {},
      editmodal: false,
      addobj: {},
      editobj: {},
      selectids: "",
      treeContents: [],
      timetype: "time",
      sectionId: "",
      sectionname: "",
      map: {
        value: "value",
        label: "label",
        children: "children",
        expand: true,
        selected: false
      },
      tableColumns1: [
        {
          type: "selection",
          width: 50,
          align: "center"
        },
        {
          type: "index2",
          title: this.$t("1008"),
          key: "xuhao",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
          width: "90px"
        },
        {
          title: this.$t("500132"),
          key: "machineLocation"
        },
        {
          title: this.$t("500054"),  // 主轴转速
          align: "center",
          children: [
            {
              title: this.$t("200060"), // 下限
              key: "axisspeedlow",
              align: "center"
            },
            {
              title: this.$t("200059"), // 上限
              key: "axisspeedtop",
              align: "center"
            }
          ]
        },
        {
          title: this.$t("500055"),  // 主轴倍率
          align: "center",
          children: [
            {
              title: this.$t("200060"),
              key: "axisratelow",
              align: "center"
            },
            {
              title: this.$t("200059"),
              key: "axisratetop",
              align: "center"
            }
          ]
        },
        {
          title: this.$t("500049"),  // 进给倍率
          align: "center",
          children: [
            {
              title: this.$t("200060"),
              key: "feedratelow",
              align: "center"
            },
            {
              title: this.$t("200059"),
              key: "feedratetop",
              align: "center"
            }
          ]
        }
      ]
    };
  },
  created() {
    this.initlevel();
    // this.tosearch()
    // 格式化表格样式
    this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1);
  },
  methods: {
    // 产线层级
    initlevel() {
      axios
        .request({
          url: "config/ProjectLevelSection/GetSectionTree",
          method: "get"
        })
        .then(res => {
          const arr = [];
          this.datalevel = res.data.data;
          let sdata = res.data.data;
          if (
            sdata != null &&
            sdata != undefined &&
            sdata &&
            sdata.length > 0
          ) {
            arr.push(res.data.data[0].value);
            this.levelid = res.data.data[0].value;
          }
          this.leveldata = arr;
          this.tosearch();
        });
    },
    // 产线层级选择
    getlevel: function(data) {
      this.levelid = data[data.length - 1];
    },
    tosearch() {
      this.page = 1;
      this.pageszie = 10;
      this.search();
    },
    search() {
      var params = {
        sectionid: this.levelid,
        page: this.page,
        pagesize: this.pagesize
      };
      axios
        .request({
          url: "/cnc/MachineParamAlarm/listAlarm",
          params,
          method: "get"
        })
        .then(res => {
          this.total = res.data.total;
          this.mockTableData1(res.data.data);
        });
    },
    mockTableData1(tablelist) {
      let data = [];
      tablelist.forEach(item => {
        if (item) {
          data.push({
            machineLocation: item.machineLocation,
            axisspeedlow:
              item.axis_speed_low === -1
                ? this.$t("500094")
                : item.axis_speed_low + "RPM",
            axisspeedtop:
              item.axis_speed_top === -1
                ? this.$t("500094")
                : item.axis_speed_top + "RPM",
            axisratelow:
              item.axis_rate_low === -1
                ? this.$t("500094")
                : item.axis_rate_low + "%",
            axisratetop:
              item.axis_rate_top === -1
                ? this.$t("500094")
                : item.axis_rate_top + "%",
            feedratelow:
              item.feed_rate_low === -1
                ? this.$t("500094")
                : item.feed_rate_low + "%",
            feedratetop:
              item.feed_rate_top === -1
                ? this.$t("500094")
                : item.feed_rate_top + "%",
            axis_speed_low: item.axis_speed_low,
            axis_speed_top: item.axis_speed_top,
            axis_rate_low: item.axis_rate_low,
            axis_rate_top: item.axis_rate_top,
            feed_rate_low: item.feed_rate_low,
            feed_rate_top: item.feed_rate_top,
            id: item.id
          });
        }
      });
      this.tableData1 = data;
    },
    handleSelectRow: function(data) {
      var ids = [];
      for (var i in data) {
        ids.push(data[i].id);
      }
      this.selectids = ids;
    },
    handleRowChange(currentRow, oldCurrentRow) {
      this.detailobj = currentRow;
    },
    handlePageSize(value) {
      this.pagesize = value;
      this.search();
    },
    changePage(value) {
      this.page = value;
      this.search();
    },
    add() {
      this.addmodal = true;
      this.sectionId = "";
      this.addobj = {};
      this.inittree();
    },
    inittree() {
      axios
        .request({
          url: "/config/ProjectLevelSection/GetSectionTree",
          method: "get"
        })
        .then(res => {
          if (res.data.ret == 1) {
            this.treeContents = res.data.data;
            this.contentTree(this.treeContents);
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    // 树形数据转换
    contentTree(arr) {
      arr.forEach(ele => {
        ele.title = ele.label;
        ele.expand = true;
        if (
          ele.children.length != 0 &&
          ele.children != undefined &&
          ele.children != null
        ) {
          this.contentTree(ele.children);
        }
      });
    },
    getList() {
      let node = this.$refs.tree.getSelectedNodes();
      if (node.length > 0) {
        if (node[0].children && node[0].children.length > 0) {
          this.$Message.error("请选择具体工位");
        } else {
          // this.machine = node[0].title;
          this.sectionId = node[0].value;
        }
      }
    },
    closeadd() {
      this.addmodal = false;
    },
    adddata() {
      if (this.sectionId === "") {
        this.$Message.error(this.$t("1037"));
        return false;
      }
      let data = {
        sectionID: this.sectionId,
        axisSpeedLow:
          this.addobj.axisspeedlow === undefined
            ? -1
            : this.addobj.axisspeedlow,
        axisSpeedTop:
          this.addobj.axisspeedtop === undefined
            ? -1
            : this.addobj.axisspeedtop,
        axisRateLow:
          this.addobj.axisratelow === undefined ? -1 : this.addobj.axisratelow,
        axisRateTop:
          this.addobj.axisratetop === undefined ? -1 : this.addobj.axisratetop,
        feedRateLow:
          this.addobj.feedratelow === undefined ? -1 : this.addobj.feedratelow,
        feedRateTop:
          this.addobj.feedratetop === undefined ? -1 : this.addobj.feedratetop
      };
      axios
        .request({
          url: "/cnc/MachineParamAlarm/addAlarm",
          data,
          method: "post"
        })
        .then(res => {
          if (res.data.ret === 1) {
            this.$Message.success(this.$t("1055"));
            this.addmodal = false;
            this.tosearch();
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    dele() {
      if (
        this.selectids === undefined ||
        this.selectids === "" ||
        this.selectids === []
      ) {
        this.$Message.error(this.$t("1017"));
        return false;
      } else {
        let data = {
          ids: this.selectids
        };
        this.$Modal.confirm({
          title: this.$t("1018"),
          content: "",
          width: "290px",
          closable: true,
          okText: this.$t("1004"),
          onOk: () => {
            axios
              .request({
                url: "/cnc/MachineParamAlarm/deleteAlarms",
                data,
                method: "post"
              })
              .then(res => {
                if (res.data.ret === 1) {
                  this.$Message.success(this.$t("1058"));
                  this.tosearch();
                  this.detailobj = {};
                } else {
                  this.$Message.error(this.$t(res.data.msg));
                }
              });
          }
        });
      }
    },
    formatpara(val) {
      if (val === -1) {
        return "";
      }
      return val;
    },
    edit() {
      if (this.detailobj === undefined || this.detailobj.id === undefined) {
        this.$Message.error(this.$t("1017"));
        return false;
      }
      this.sectionname = this.detailobj.machineLocation;
      this.editobj.axisspeedlow = this.formatpara(
        this.detailobj.axis_speed_low
      );
      this.editobj.axisspeedtop = this.formatpara(
        this.detailobj.axis_speed_top
      );
      this.editobj.axisratelow = this.formatpara(this.detailobj.axis_rate_low);
      this.editobj.axisratetop = this.formatpara(this.detailobj.axis_rate_top);
      this.editobj.feedratelow = this.formatpara(this.detailobj.feed_rate_low);
      this.editobj.feedratetop = this.formatpara(this.detailobj.feed_rate_top);
      this.editmodal = true;
    },
    editdata() {
      let data = {
        axisSpeedLow:
          this.editobj.axisspeedlow === "" ? -1 : this.editobj.axisspeedlow,
        axisSpeedTop:
          this.editobj.axisspeedtop === "" ? -1 : this.editobj.axisspeedtop,
        axisRateLow:
          this.editobj.axisratelow === "" ? -1 : this.editobj.axisratelow,
        axisRateTop:
          this.editobj.axisratetop === "" ? -1 : this.editobj.axisratetop,
        feedRateLow:
          this.editobj.feedratelow === "" ? -1 : this.editobj.feedratelow,
        feedRateTop:
          this.editobj.feedratetop === "" ? -1 : this.editobj.feedratetop,
        id: this.detailobj.id
      };
      axios
        .request({
          url: "/cnc/MachineParamAlarm/updateAlarm",
          data,
          method: "post"
        })
        .then(res => {
          if (res.data.ret === 1) {
            this.$Message.success(this.$t("1060"));
            this.editmodal = false;
            this.search();
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    closeedit() {
      this.editmodal = false;
    }
  }
};
</script>
<style lang="less" scoped>
.treeSelect {
  span {
    background: #2d8cf1;
    color: #fff;
    margin: 0;
    padding: 0 4px;
    border-radius: 3px;
    cursor: pointer;
    vertical-align: top;
  }
}
</style>
