<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin: 0px">
      <div class="filter">
        <label> <span>项目</span>： </label>
        <Select
          v-model="projectId"
          label-in-value
          clearable
          class="searchSelect"
        >
          <Option
            v-for="(item, index) in projectList"
            :key="index"
            :value="item.id"
            >{{ item.title }}</Option
          >
        </Select>
      </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="usageStatus"
          label-in-value
          clearable
          class="searchSelect"
        >
          <Option value="0">离线</Option>
          <Option value="1">待授权</Option>
          <Option value="2">运行</Option>
        </Select>
      </div>
      <!-- 按钮组 -->
      <div class="searchBtn">
        <Button
          type="primary"
          class="twoWord"
          icon="ios-search"
          @click="search()"
          >查询</Button
        >
        <Button
          type="success"
          class="twoWord intervalRight"
          icon="ios-create-outline"
          @click="enableDevice()"
          >授权</Button
        >
        <!-- <Button
          type="success"
          class="fourWord"
          icon="ios-create-outline"
          @click="upgradeDevice()"
        >程序升级</Button>
        <Button type="error" class="fourWord" icon="md-refresh" @click="reStartBox()">重启盒子</Button>
        <Button type="error" class="fourWord" icon="md-refresh" @click="reStartNet()">重启网络</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="showEnableModal"
      :styles="{ width: '600px' }"
    >
      <div class="modal_body">
        <div>
          <div class="filter">
            <label>
              <i>*</i>
              <span>设备ID</span>：
            </label>
            <Select
              v-model="enableData.deviceId"
              label-in-value
              filterable
              class="searchSelect middleWidth"
              @on-change="deviceIdChange"
            >
              <Option
                v-for="(item, index) in deviceList"
                :key="index"
                :value="item.id"
                >设备编号：{{ item.code }}（ID：{{ item.id }}）</Option
              >
            </Select>
          </div>
        </div>
        <div>
          <div class="filter">
            <label> <span>客户名称</span>： </label>
            <span
              v-show="enableData.customName && enableData.cid"
              class="searchInput"
              style="width: auto"
              >{{ enableData.customName }}（CID：{{ enableData.cid }}）</span
            >
          </div>
        </div>
        <div>
          <div class="filter">
            <label> <span>项目名称</span>： </label>
            <span
              v-show="enableData.projectName && enableData.pid"
              class="searchInput"
              style="width: auto"
              >{{ enableData.projectName }}（PID：{{ enableData.pid }}）</span
            >
          </div>
        </div>
        <div>
          <div class="filter">
            <label>
              <i>*</i>
              <span>授权类型</span>：
            </label>
            <RadioGroup v-model="enableData.enableType">
              <Radio :label="1">永久授权</Radio>
              <Radio :label="2">按时间授权</Radio>
              <Radio :label="3">试用</Radio>
            </RadioGroup>
          </div>
        </div>
        <div v-if="enableData.enableType == 2 || enableData.enableType == 3">
          <div class="filter">
            <label>
              <i>*</i>
              <span>授权开始日期</span>：
            </label>
            <DatePicker
              class="searchInput"
              type="date"
              v-model="enableData.enableDate"
            ></DatePicker>
          </div>
        </div>
        <div v-if="enableData.enableType == 2">
          <div class="filter">
            <label>
              <i>*</i>
              <span>授权使用天数</span>：
            </label>
            <Input
              class="searchInput"
              type="number"
              v-model="enableData.useDay"
            />
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button
          size="large"
          @click="showEnableModal = false"
          v-text="$t(1033)"
        ></Button>
        <Button
          type="primary"
          size="large"
          :loading="loading"
          @click="confirmActive()"
        >
          <span v-if="!loading">{{ $t(1011) }}</span>
          <span v-else>{{ $t(666613) }}</span>
        </Button>
      </div>
    </Modal>
    <!-- 程序升级弹框 -->
    <Modal
      class="newModalClass"
      title="升级数采程序"
      v-model="showUpgradeModal"
      :styles="{ width: '600px' }"
    >
      <div class="modal_body">
        <div class="modal_body_sunTitle">当前程序信息</div>
        <div>
          <div class="filter">
            <label> <span>NC系统型号</span>： </label>
            <span class="searchInput">西门子840D</span>
          </div>
        </div>
        <div>
          <div class="filter">
            <label> <span>数采程序版本号</span>： </label>
            <span class="searchInput">2032949.023.2332</span>
          </div>
        </div>
        <div class="modal_body_sunTitle">升级版本信息</div>
        <div>
          <div class="filter">
            <label> <span>升级版本号</span>： </label>
            <Input
              class="searchInput"
              type="text"
              v-model="upgradeData.upgradeVersion"
            />
          </div>
        </div>
        <div>
          <div class="filter">
            <label> <span>NC系统型号</span>： </label>
            <Input
              class="searchInput"
              type="text"
              v-model="upgradeData.systemType"
            />
          </div>
        </div>
        <div>
          <div class="filter">
            <label> <span>程序安装包</span>： </label>
            <Upload class="echo_upload" action>
              <Button icon="ios-cloud-upload-outline">选择文件</Button>
            </Upload>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button
          size="large"
          @click="showUpgradeModal = false"
          v-text="$t('1033')"
        ></Button>
        <Button
          type="primary"
          size="large"
          @click="confirmUpgrade()"
          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 moment from "moment";
import { mapState } from "vuex";

export default {
  data() {
    return {
      loading: false,
      // 是否展示程序升级弹框标志位
      showUpgradeModal: false,
      // 所选项目
      projectId: "",
      // 是否展示数采详情
      showDetailModal: false,
      // 盒子编号
      deviceNo: "",
      // 启用时间范围
      dateRange: [],
      // 使用状态
      usageStatus: "",
      // 页码
      page: 1,
      // 每页数据量
      pagesize: 10,
      // 数据总量
      total: 0,
      // 表格数据
      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: "参数值",
        },
      ],
      // 当前选中的一行数据
      selectedRow: {},
      // 是否展示授权弹框标志位
      showEnableModal: false,
      // 数采授权对象
      enableData: {
        // 设备ID
        deviceId: "",
        // 授权类型
        enableType: "",
        // 授权开始日期
        enableDate: "",
        // 授权使用天数
        useDay: "",
        // 客户名称
        customName: "",
        // 客户ID
        cid: "",
        // 项目名称
        projectName: "",
        // 项目ID
        pid: "",
      },
      // 升级对象
      upgradeData: {
        // 升级版本号
        upgradeVersion: "",
        // NC系统型号
        systemType: "默认当前",
      },
      // 项目下拉列表
      projectList: [],
      // 设备下拉列表
      deviceList: [],
    };
  },
  mounted() {
    const _this = this;
    let { tableColumns, tableColumnsInside } = this;
    // 这里的初始化表格字段有一个特殊现象：对于表格字段的定宽，你可以修改以前的宽度，但是不能给以前没有定宽的列进行定宽（那并不会生效，这一列始终会宽度自适应），而对于列的其它属性倒是可以新增（比如最小宽度和 tooltip）
    _this.tableColumns = _this.$time.initTableTitle(tableColumns);
    _this.tableColumnsInside = _this.$time.initTableTitle(tableColumnsInside);
    // 获取项目下拉列表
    _this.getProjectList();
    // 初始查询
    _this.search();
    // 获取设备下拉列表
    _this.getDeviceList();
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    // 表单验证
    check(v) {
      if (!v) {
        return true;
      }
      return false;
    },
    // 获取项目列表
    getProjectList() {
      const _this = this;
      _this.axios
        .request({
          url: "/CNC/Machine/GetProject",
          method: "post",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            if (data && Array.isArray(data) && data.length) {
              _this.projectList = data;
            }
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    // 获取设备列表
    getDeviceList() {
      const _this = this;
      _this.deviceList = [];
      let data = {
        projectId: 0,
      };
      _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));
          }
        });
    },
    // 启用时间范围变化
    dateChange(v) {
      // 兼容--清空启用时间范围
      if (!v[0] || !v[1]) {
        this.dateRange = [];
        return false;
      }
      this.dateRange = v;
    },
    // 查询
    search() {
      // 拿到当前组件实例
      const _this = this;
      // 解构赋值
      let {
        projectId,
        deviceNo,
        dateRange,
        usageStatus,
        page,
        pagesize,
      } = this;
      // 组装请求参数
      let data = {
        boxCode: deviceNo,
        pid: projectId || 0,
        EnableTime: dateRange.join(","),
        usageStatus: parseInt(usageStatus || -1),
        page,
        pagesize,
        projectId: 0,
      };
      _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) {
        if (item.cid && item.pid) {
          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,
          });
        } else {
          tableData.push({
            id: item.id,
            customName: "",
            projectName: "",
            boxNo: item.boxCode,
            deviceType: item.model,
            programVersion: item.program_version,
            deviceMID: "",
            deviceNo: "",
            enableDate: "",
            enableType: "",
            disableDate: "",
            useStatus: item.usageStatus,
            cid: "",
            pid: "",
            system: "",
          });
        }
      });
      console.log(tableData);
      _this.tableData = tableData;
    },
    // 选中某一行
    handleRowChange(cur) {
      this.selectedRow = cur;
    },
    // 跳转到第几页
    changePage(v) {
      this.page = v;
      this.search();
    },
    // 页面大小发生变化
    handlePageSize(v) {
      this.pagesize = v;
      this.search();
    },
    // 授权
    enableDevice() {
      console.log(this.selectedRow);
      // 拿到当前组件实例
      const _this = this;
      // 如果当前未选择一行，则弹出错误信息并退出函数
      if (JSON.stringify(_this.selectedRow) == "{}") {
        _this.$Message.error(_this.$t("1043"));
        return false;
      }
      // if (_this.selectedRow.useStatus != 1) {
      //   _this.$Message.error("当前盒子已授权！");
      //   return false;
      // }
      // 清空授权信息
      _this.enableData = {
        // 设备ID
        deviceId: "",
        // 授权类型
        enableType: "",
        // 授权开始日期
        enableDate: "",
        // 授权使用天数
        useDay: "",
        // 客户名称
        customName: "",
        // 客户ID
        cid: "",
        // 项目名称
        projectName: "",
        // 项目ID
        pid: "",
      };
      // 如果当前盒子已经授权，则反绑授权信息
      if (_this.selectedRow.useStatus != 1) {
        _this.enableData.deviceId = _this.selectedRow.deviceMID;
        _this.enableData.customName = _this.selectedRow.customName;
        _this.enableData.cid = _this.selectedRow.cid;
        _this.enableData.projectName = _this.selectedRow.projectName;
        _this.enableData.pid = _this.selectedRow.pid;
        _this.enableData.enableType = _this.selectedRow.enableType;
        _this.enableData.enableDate = _this.selectedRow.enableDate;
        _this.enableData.useDay = _this.getDays(
          _this.selectedRow.enableDate,
          _this.selectedRow.disableDate
        );
      }
      // 授权弹框弹出
      _this.showEnableModal = true;

      _this.loading = false;
    },
    // 监听设备下拉列表选中值变化
    deviceIdChange(v) {
      if (!v) {
        return false;
      }
      let value = v.value;
      const _this = this;
      _this.deviceList.forEach((item) => {
        if (item.id == value) {
          _this.enableData.customName = item.cname;
          _this.enableData.cid = item.cid;
          _this.enableData.projectName = item.pname;
          _this.enableData.pid = item.pid;
          return false;
        }
      });
    },
    // 确认授权
    confirmActive() {
      const _this = this;
      let bool;

      // 解构取值
      let { enableData, check, selectedRow } = this;

      // 设备ID 必填验证
      if (!enableData.deviceId) {
        _this.$Message.error(_this.$t(666605));
        return false;
      }

      // 授权类型必填验证
      if (!enableData.enableType) {
        _this.$Message.error(_this.$t(666606));
        return false;
      }

      if (enableData.enableType == 1) {
        delete enableData.enableDate;
        delete enableData.useDay;
      } else if (enableData.enableType == 2) {
        // 授权开始日期 必填验证
        if (!enableData.enableDate) {
          _this.$Message.error(_this.$t(666607));
          return false;
        }
        // 授权使用天数 必填验证
        if (!enableData.useDay) {
          _this.$Message.error(_this.$t(666608));
          return false;
        }
      } else if (enableData.enableType == 3) {
        // 授权开始日期 必填验证
        if (!enableData.enableDate) {
          _this.$Message.error(_this.$t(666607));
          return false;
        }
        delete enableData.useDay;
      }

      for (let key in enableData) {
        if (check(enableData[key])) {
          bool = true;
        }
      }
      // 表单信息填写不完整，捕获异常信息并退出函数
      if (bool) {
        console.log(enableData);
        _this.$Message.error("请将授权信息填写完整！");
        return false;
      }
      _this.loading = true;
      let data = {
        boxCode: selectedRow.boxNo,
        pid: enableData.pid,
        cid: enableData.cid,
        enableTime: enableData.enableDate
          ? moment(enableData.enableDate.getTime()).format("YYYY-MM-DD")
          : moment(new Date().getTime()).format("YYYY-MM-DD"),
        mid: enableData.deviceId,
        mandatedays: enableData.useDay
          ? parseInt(enableData.useDay)
          : enableData.enableType == 3
          ? 30
          : -1,
        mandatetype: parseInt(enableData.enableType),
      };
      _this.axios
        .request({
          url: "/CNC/Machine/MandateUpdateBox",
          data,
          method: "post",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            if (data == 1) {
              _this.$Message.success("授权成功！");
              // 弹框隐藏
              _this.showEnableModal = false;
              // 刷新页面
              _this.search();

              _this.loading = false;
            } else {
              _this.$Message.error("授权失败！");
              // 弹框隐藏
              _this.showEnableModal = false;
              // 刷新页面
              _this.search();

              _this.loading = false;
            }
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
            // 弹框隐藏
            _this.showEnableModal = false;
            // 刷新页面
            _this.search();

            _this.loading = false;
          }
        });
    },
    // 重启盒子
    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
    },
    // 程序升级
    upgradeDevice() {
      const _this = this;
      if (JSON.stringify(_this.selectedRow) == "{}") {
        _this.$Message.error(_this.$t("1043"));
        return false;
      }
      _this.showUpgradeModal = true;
    },
    // 确认程序升级
    confirmUpgrade() {
      const _this = this;
      _this.$Message.success(
        `程序升级对象数据为${JSON.stringify(_this.upgradeData)}`
      );
      setTimeout(() => {
        _this.showUpgradeModal = false;
      }, 1000);
    },
    // 根据两个日期计算相差几天
    getDays(strDateStart, strDateEnd) {
      var strSeparator = "-";
      var oDate1;
      var oDate2;
      var iDays;
      oDate1 = strDateStart.split(strSeparator);
      oDate2 = strDateEnd.split(strSeparator);
      var strDateS = new Date(oDate1[0], oDate1[1] - 1, oDate1[2]);
      var strDateE = new Date(oDate2[0], oDate2[1] - 1, oDate2[2]);
      iDays = parseInt(Math.abs(strDateS - strDateE) / 1000 / 60 / 60 / 24);
      return iDays;
    },
  },
};
</script>

<style lang="less" scoped>
.echo_upload {
  display: inline-block;
}

.modal_body_sunTitle {
  background-color: #d7d7d7;
  margin-bottom: 8px;
  font-weight: bold;
  line-height: 24px;
  margin-right: 40px !important;
  padding-left: 12px;
}

.newModalClass .ivu-radio-wrapper {
  width: 80px !important;
}
.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>
