<template>
  <div class="StopMaintenancePlan">
    <div class="code-input-main">
    <div
      class="code-input-main-item"
      v-for="(item,index) in codeList"
      :key="index"
    >{{code[index] ||''}}</div>
    <input class="code-input-input" v-model="code" maxlength="20" type="number" />
  </div>
    <!-- <el-row>
        <el-form
          class="TableSelect"
          :model="StopMSearch"
          :inline="true"
          label-position="left"
        >
          <el-row>
             <el-col :sm="8" :md="6" :lg="6" class="mb10">
              <el-row>
                <el-col :sm="10" :md="10" :lg="10" class="selectUp">
                  <span>项目名称：</span>
                </el-col>
                <el-col :sm="14" :md="14" :lg="14">
                  <el-select
                    v-model="StopMSearch.RegionProject"
                    filterable
                    placeholder="选择项目"
                  >
                    <el-option
                      v-for="item in RegionProjectList"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-col>

            <el-col :sm="8" :md="6" :lg="6" class="mb10">
              <el-row>
                <el-col :sm="10" :md="10" :lg="10" class="selectUp">
                  <span>区域名称：</span>
                </el-col>
                <el-col :sm="14" :md="14" :lg="14">
                  <el-select v-model="StopMSearch.Region" filterable placeholder="选择区域">
                    <el-option
                      v-for="item in RegionList"
                      :key="item.ID"
                      :label="item.Name"
                      :value="item.ID"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-col>
           

            <el-col :sm="8" :md="7" :lg="7" class="mb10">
              <el-row>
                <el-col :sm="10" :md="10" :lg="10" class="selectUp">
                  <span>主要维保工：</span>
                </el-col>
                <el-col :sm="13" :md="14" :lg="14">
                  <el-select v-model="StopMSearch.Worker" filterable placeholder="选择主要维保工">
                    <el-option
                      v-for="item in WorkerList"
                      :key="item.UserID"
                      :label="item.Name"
                      :value="item.UserID"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-col>

            <el-col :sm="12" :md="12" :lg="12" class="mb10" >
              
              <el-input class="stopReg" v-model="StopMSearch.RegistrationCode" placeholder="输入注册代码"></el-input>
              <el-button type="primary" plain>查询</el-button>
              <el-button type="primary" plain>搜索</el-button>
              <el-button type="info" plain>重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <hr class="HRMT" />
        <div class="StopMTable">
          <el-table
            :data="StopMData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            class="MTable"
            border
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="ProjectCode" label="项目编号"></el-table-column>
            <el-table-column prop="ProjectName" label="项目名称"></el-table-column>
            <el-table-column prop="RegionName" label="区域名称"></el-table-column>
            <el-table-column prop="RegistrationCode" label="注册代码"></el-table-column>
            <el-table-column prop="Position" label="电梯位置"></el-table-column>
            <el-table-column prop="WorkerName" label="维保工"></el-table-column>
            <el-table-column prop="LiftStatus" label="电梯状态"></el-table-column>
            <el-table-column label="操作" min-width="100px;" >
              <template slot-scope="props">
                <el-button size="mini" type="success" @click="LoadLiftRecover(props.row)">恢复电梯</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagenation">
            <span>
              <el-pagination
                background
                layout="prev, pager, next, sizes, total, jumper"
                :total="StopMData.length"
                @current-change="click"
                @size-change="handleSizeChange"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pagesize"
              ></el-pagination>
            </span>
          </div>
        </div>
    </el-row> -->

       <!--恢复电梯-->
    <!-- <div class="ReLift">
      <el-dialog
        title="恢复电梯"
        :visible.sync="dialogReLift"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <el-form :model="ReLift" :inline="true" label-position="left">
            <el-row>
              <el-form-item label="下次维保日期" :xs="24" :sm="24" :md="24" :lg="24">
                <el-date-picker
                  type="date"
                  placeholder="选择下次维保日期"
                  v-model="ReLift.StartDate"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="维保间隔" :xs="24" :sm="24" :md="24" :lg="24">
                <el-select placeholder="选择维保间隔" v-model="projectForm.usage" class="siteel-select">
                    <el-option
                      v-for="item in Usageoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer Txc">
          <el-button @click="dialogReLift = false">取 消</el-button>
          <el-button type="primary">确 定</el-button>
        </div>
      </el-dialog>
    </div> -->
  </div>
</template>

<script>
export default {
  components: {},
  name: "StopMaintenancePlan",
  props: {
    codeLength: {
      default: 20,
      type: Number
    }
  },
  data() {
    return {
         //分页
         codeList: [],
      code: "",
    }
  },
  mounted() {
    // 定义一个数组用于循环
    this.codeList = new Array(this.codeLength).fill("");
  },
  created() {},
  watch: {
    // 截取字符长度
    code() {
      if (this.code.length > this.codeLength) {
        this.code = this.code.substring(0, this.codeLength);
      }
    }
  },
  methods: {
    getCode() {
      return this.code;
    },
       // 分页页码
    click(val) {
      this.currpage = val;
    },
    // 分页显示条数
    handleSizeChange(val) {
      this.pagesize = val;
    },
    LoadLiftRecover(row){
      this.dialogReLift = true;
    },
    // 电梯信息选中
    handleSelectionChange(val) {
      this.liftChoose = val;
      console.log(val);
    },
  }
};
</script>
<style lang="stylus">
$ft14 = 14px;

.StopMaintenancePlan {
  background: #fff;
  padding: 10px 0;
  height: 100%;
  input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
 
.code-input-main {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: relative;
}
 
.code-input-input {
  height: 44px;
  width: 100%;
  position: absolute;
  border: none;
  outline: none;
  color: transparent;
  background-color: transparent;
  text-shadow: 0 0 0 transparent;
}
 
.code-input-main-item {
  width: 34px;
  height: 44px;
  margin: 0 5px;
  padding-bottom: 0;
  opacity: 0.8;
  border-bottom: solid #323232 1px;
  text-align: center;
  font-size: 30px;
  color: #323232;
}
  .TableSelect {
    font-size: $ft14;
    padding: 10px 20px;
    .stopReg{
        display:inline-block
        width 50%
        margin-right 5px
        
    }
  }
  .cell{
    text-align center
  }

  .el-button {
    padding: 12px 10px;
  }

  .HRMT {
    height: 20px;
    border: none;
    background: #f0f3f4;
  }
  .ReLift {
    .el-dialog__body {
      text-align: center;
      padding: 10px;
    }

    .el-dialog__footer {
      text-align: center;
    }
  }

}
</style>