<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div>
        <div class="filter">
          <label>
            <span>盒子编号</span>：
          </label>
          <Input class="searchInput" type="text" v-model="deviceNo" />
        </div>
        <div class="filter">
          <label>
            <span>启用时间范围</span>：
          </label>
          <DatePicker
            type="daterange"
            format="yyyy-MM-dd"
            :value="dateRange"
            @on-change="dateChange"
            class="searchInput middleWidth"
          ></DatePicker>
        </div>
        <div class="filter">
          <label>
            <span>使用状态</span>：
          </label>
          <Select v-model="useStatus" label-in-value clearable class="searchSelect">
            <Option value="0">离线</Option>
            <Option value="1">待授权</Option>
            <Option value="2">运行</Option>
          </Select>
        </div>
      </div>
      <div class="searchBtn">
        <Button type="primary" class="twoWord" icon="ios-search" @click="search()">查询</Button>
        <!-- <Button type="success" class="fourWord" icon="md-refresh" @click="reStartBox()">重启盒子</Button>
        <Button type="warning" class="fourWord" icon="md-refresh" @click="reStartNet()">重启网络</Button>-->
        <Button type="error" class="fourWord" icon="ios-create-outline" @click="editDevice()">修改设备</Button>
      </div>
    </div>
    <div class="divborder newTableDiv">
      <Table
        class="tableClass"
        @on-current-change="handleRowChange"
        highlight-row
        :data="tableData"
        :columns="tableColumns"
      >
        <template slot-scope="{row,index}" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="show(row,index)">查看</Button>
        </template>
      </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>
    </div>
    <!-- 修改设置弹框 -->
    <Modal
      class="newModalClass"
      title="修改设备程序"
      v-model="showEditModal"
      :styles="{ width: '600px' }"
    >
      <div class="modal_body">
        <div class="filter">
          <label>
            <span>设备ID</span>：
          </label>
          <Select
            v-model="deviceId"
            label-in-value
            clearable
            filterable
            class="searchSelect middleWidth"
          >
            <Option
              v-for="(item,index) in deviceList"
              :key="index"
              :value="item.id"
            >设备编号：{{ item.code }}（ID：{{ item.id }}）</Option>
          </Select>
        </div>
      </div>
      <div slot="footer">
        <Button size="large" @click="showEditModal = false" v-text="$t('1033')"></Button>
        <Button type="primary" size="large" @click="confirmEdit()" v-text="$t('1011')"></Button>
      </div>
    </Modal>
    <!-- 数采详情弹框 -->
    <Modal
      class="newModalClass echo_modal_class"
      title="数采详情"
      v-model="showDetailModal"
      :styles="{ width: '800px' }"
    >
      <div class="modal_body echo_modal_class">
        <h2>CNC数据</h2>
        <Table
          class="tableClass"
          highlight-row
          :data="tableDataInside"
          :columns="tableColumnsInside"
          height="400"
        ></Table>
      </div>
      <div slot="footer">
        <Button type="primary" size="large" @click="refresh()" v-text="$t('159357487')"></Button>
        <Button size="large" @click="showDetailModal = false" v-text="$t('1028')"></Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      // 盒子编号
      deviceNo: "",
      // 启用时间范围
      dateRange: [],
      // 使用状态
      useStatus: "",
      // 页码
      page: 1,
      // 每页数据量
      pagesize: 10,
      // 数据总量
      total: 0,
      // 当前选中的一行数据
      selectedRow: {},
      // 表格数据
      tableData: [],
      // 数采详情表格数据
      tableDataInside: [],
      // Table 列字段对应
      tableColumns: [
        {
          type: "sort",
          title: "序号",
          width: 60,
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
        },
        {
          title: "客户名称",
          key: "customName",
        },
        {
          title: "项目名称",
          key: "projectName",
        },
        {
          title: "盒子编号",
          key: "boxNo",
        },
        {
          title: "适配数控系统",
          key: "deviceType",
          width: 120,
        },
        {
          title: "数采程序版本",
          key: "programVersion",
          width: 120,
        },
        {
          title: "MID",
          key: "deviceMID",
        },
        {
          title: "设备编号",
          key: "deviceNo",
        },
        {
          title: "启用时间",
          key: "enableDate",
        },
        {
          title: "授权类型",
          align: "center",
          render: (h, params) => {
            let mandateType = params.row.enableType;
            if (mandateType == 1) {
              return h(
                "div",
                {
                  style: {
                    // color: "#19BE6B",
                    // fontWeight: "bolder",
                  },
                },
                "永久授权"
              );
            } else if (mandateType == 2) {
              return h(
                "div",
                {
                  style: {
                    // color: "#ED4014",
                    // fontWeight: "bolder",
                  },
                },
                "按时间授权"
              );
            } else if (mandateType == 3) {
              return h(
                "div",
                {
                  style: {
                    // color: "#2D8CF0",
                    // fontWeight: "bolder",
                  },
                },
                "试用"
              );
            }
          },
        },
        {
          title: "授权到期时间",
          key: "disableDate",
          width: 120,
        },
        {
          title: "使用状态",
          key: "useStatus",
          align: "center",
          render: (h, params) => {
            let useStatus = params.row.useStatus;
            if (useStatus == 2) {
              // 0 离线 1 待授权 2 运行
              return h(
                "div",
                {
                  style: {
                    color: "#19BE6B",
                    fontWeight: "bolder",
                  },
                },
                "运行"
              );
            } else if (useStatus == 0) {
              return h(
                "div",
                {
                  style: {
                    color: "#ED4014",
                    fontWeight: "bolder",
                  },
                },
                "离线"
              );
            } else if (useStatus == 1) {
              return h(
                "div",
                {
                  style: {
                    color: "#2D8CF0",
                    fontWeight: "bolder",
                  },
                },
                "待授权"
              );
            }
          },
        },
        // {
        //   title: "数采详情",
        //   slot: "action",
        //   align: "center",
        // },
      ],
      // 数采详情表格列字段对应
      tableColumnsInside: [
        {
          key: "name",
          title: "参数名称",
        },
        {
          key: "code",
          title: "参数代码",
        },
        {
          key: "status",
          title: "采集状态",
          render: (h, params) => {
            if (params.row.status) {
              return h("div", [
                h("Icon", {
                  props: {
                    size: 24,
                    color: "#19BE6B",
                    type: "ios-checkmark-circle",
                  },
                }),
              ]);
            } else {
              return h("div", [
                h("Icon", {
                  props: {
                    size: 24,
                    color: "#ED4014",
                    type: "ios-close-circle",
                  },
                }),
              ]);
            }
          },
        },
        {
          key: "value",
          title: "参数值",
        },
      ],
      // 是否展示弹框标志位
      showEditModal: false,
      // 是否展示数采详情
      showDetailModal: false,
      // 设备列表
      deviceList: [],
      // 设备ID
      deviceId: "",
    };
  },
  mounted() {
    let _this = this;
    let { tableColumns, tableColumnsInside } = this;
    // 初始化表格列字段
    _this.tableColumns = _this.$time.initTableTitle(tableColumns);
    _this.tableColumnsInside = _this.$time.initTableTitle(tableColumnsInside);
    // 初始查询
    _this.search();
    // 获取设备下拉列表
    _this.getDeviceList();
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    // 查询
    search() {
      // 拿到当前组件实例
      let _this = this;
      // 解构赋值
      let { deviceNo, dateRange, useStatus, page, pagesize } = this;
      // 组装请求参数
      let data = {
        boxCode: deviceNo,
        EnableTime: dateRange.join(","),
        usageStatus: parseInt(useStatus || useStatus === "0" ? useStatus : -1),
        page,
        pagesize,
        pid: 0,
        projectId: _this.user.projectId,
      };
      _this.tableData = [];
      _this.axios
        .request({
          url: "/CNC/Machine/MachineBox",
          data,
          method: "post",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            _this.total = result.total;
            _this.page = result.page;
            _this.pagesize = result.pagesize;
            if (data && Array.isArray(data) && data.length) {
              _this.handleTableData(data);
            }
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    // 查询之后数据处理渲染给 Table 组件
    handleTableData(data) {
      const _this = this;
      let tableData = [];
      data.forEach(function (item) {
        tableData.push({
          id: item.id,
          customName: item.chinesepinyin,
          projectName: item.title,
          boxNo: item.boxCode,
          deviceType: item.model,
          programVersion: item.program_version,
          deviceMID: item.mid,
          deviceNo: item.mcode,
          enableDate: item.enableTime,
          enableType: item.mandateType,
          disableDate: item.mandate_endTime,
          useStatus: item.usageStatus,
          cid: item.cid,
          pid: item.pid,
          system: item.system,
        });
      });
      _this.tableData = tableData;
    },
    // 启用时间范围变化
    dateChange(v) {
      // 兼容--清空启用时间范围
      if (!v[0] || !v[1]) {
        this.dateRange = [];
        return false;
      }

      this.dateRange = v;
    },
    // 选中某一行
    handleRowChange(cur) {
      this.selectedRow = cur;
    },
    // 跳转到第几页
    changePage(v) {
      this.page = v;
      this.search();
    },
    // 页面大小发生变化
    handlePageSize(v) {
      this.pagesize = v;
      this.search();
    },
    // 获取设备列表
    getDeviceList() {
      const _this = this;
      _this.deviceList = [];
      let data = {
        projectId: _this.user.projectId,
      };
      _this.axios
        .request({
          url: "/CNC/Machine/GetMachine",
          data,
          method: "post",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            if (data && Array.isArray(data) && data.length) {
              _this.deviceList = data;
            }
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    // 修改设备
    editDevice() {
      // 拿到当前组件实例
      const _this = this;
      if (JSON.stringify(_this.selectedRow) == "{}") {
        _this.$Message.error(_this.$t("1043"));
        return false;
      }
      // 清空修改信息
      _this.deviceId = "";
      if (_this.selectedRow.useStatus != 1) {
        _this.deviceId = _this.selectedRow.deviceMID;
      }
      // 弹框弹出
      _this.showEditModal = true;
    },
    // 确认修改
    confirmEdit() {
      const _this = this;
      let { selectedRow, deviceId } = this;
      let data = {
        id: selectedRow.id,
        machineid: deviceId,
      };
      _this.axios
        .request({
          url: "/CNC/Machine/UpdateMachineBox",
          data,
          method: "post",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            if (data == 1) {
              _this.$Message.success("修改设备成功！");
              // 弹框隐藏
              _this.showEditModal = false;
              // 刷新页面
              _this.search();
            } else {
              _this.$Message.error("修改设备失败！");
              // 弹框隐藏
              _this.showEditModal = false;
              // 刷新页面
              _this.search();
            }
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },

    // 重启盒子
    reStartBox() {
      this.$Message.success("重启盒子");
      // TODO
    },
    // 重启网络
    reStartNet() {
      this.$Message.success("重启网络");
      // TODO
    },
    // 查看弹出框
    show(row, index) {
      console.log(row, index);
      this.showDetailModal = true;
      this.tableDataInside = [
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: true,
          value: "0",
        },
        {
          name: "程序状态",
          code: "pst",
          status: false,
          value: "0",
        },
      ];
    },
    // 自动调用
    refresh() {
      this.$Message.success("自动调用");
      // TODO
    },
  },
};
</script>

<style lang="less" scoped>
.echo_modal_class {
  padding-right: 40px;
  h2 {
    margin-bottom: 4px;
  }
}

.testdiv {
  width: 100%;
  height: 100%;
}

.showdetail {
  width: 900px;
  height: 180px;
  margin-top: 10px;
  border: 0.3px solid #ccc;
  margin: -0.3px;

  div {
    float: left;
    width: 25%;
    height: 100%;
    margin: -0.3px;

    img {
      width: 100%;
      height: 100%;
    }
    div {
      width: 100%;
      height: 30px;
      margin: 0 !important;

      div {
        display: inline-block;
        width: 50%;
        height: 100%;
        border: 0.3px solid #ccc;
        text-align: center;
        line-height: 30px;
        border-right: 0px;
        border-bottom: 0px;
        overflow: hidden;
      }
      .specialdiv {
        width: 100%;
        height: 30px;
        text-align: center;
        line-height: 30px;
      }
    }
  }
}

.filter {
  height: 40px;

  label {
    display: inline-block;
    width: 100px;
  }
}

.addmodal_body .filter,
.editmodal_body .filter {
  display: inline-block;
  height: 40px;
  font-size: 15px;
  margin-right: 15px;
  margin-top: 0px;

  select {
    border-radius: 4px;
    height: 32px;
    color: #999;
    padding: 5px;
    box-shadow: 0px 0px 1px 1px #eee;
  }
  label {
    font-size: 12px;
    display: inline-block;
    margin-right: 5px;
    width: 135px;
    text-align: end;
  }
}

.editmodal_body .filter .publicinput {
  width: 330px;
}

.uploadexcel {
  display: inline-block;
  margin-right: 15px;
}

.file {
  width: 80px;
  height: 32px;
  position: relative;
  color: #fff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.5;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 5px 15px 6px;
  font-size: 12px;
  border-radius: 4px;
  background-color: #2d8cf0;
  margin-right: 15px;
  -webkit-appearance: button;
}

.file input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 80px;
  height: 30px;
}

.addload {
  position: relative;

  img {
    vertical-align: top;
    width: 128px;
    height: 128px;
    margin: 10px 0px;
    margin-left: 180px;
  }
  input {
    position: absolute;
    left: 180px;
    top: 10px;
    opacity: 0;
    width: 128px;
    height: 128px;
  }
}

.editload {
  position: relative;

  img {
    vertical-align: top;
    width: 128px;
    height: 128px;
    margin: 10px 0px;
    margin-left: 140px;
  }
  input {
    position: absolute;
    left: 300px;
    top: 10px;
    opacity: 0;
    width: 128px;
    height: 128px;
  }
}

.DeviceQRblock {
  width: 150px;
  height: 200px;
  display: inline-block;
  margin-right: 10px;

  .DeviceQRblockqr {
    width: 150px;
    height: 150px;
  }
  div {
    text-align: center;
  }
}

.treeSelect {
  span {
    background: #2d8cf1;
    color: #fff;
    margin: 0;
    padding: 0 4px;
    border-radius: 3px;
    cursor: pointer;
    vertical-align: top;
  }
}
</style>
