<template>
  <div>
    <div class="title_box rx-bc mt6">
      <div class="name">设备信息 </div>

      <div class="rx-bc"> </div>
    </div>

    <div class="material">
      <div class="content_table" v-for="(item, index) in list" :key="index">
        <div class="item rx-sc">
          <div class="rx ww33">
            <div class="lable lable90 rx-cc">工位名称</div>
            <div class="content">
              {{
                item.workstationName ||
                (item.extInfo && item.extInfo.workstationName)
              }}
            </div>
          </div>

          <div class="rx ww33">
            <div class="lable rx-cc">设备编码</div>
            <div class="content">{{ item.code }}</div>
          </div>

          <div class="rx ww33">
            <div class="lable rx-cc">设备名称</div>
            <div class="content">
              <div>{{ item.name }} </div>
            </div>
          </div>
        </div>

        <div class="item rx-sc">
          <div class="rx ww33">
            <div class="lable lable90 rx-cc">固资编码</div>
            <div class="content rx-sc">
              <div>{{ item.extInfo.fixCode }}</div>
            </div>
          </div>

          <div class="rx ww33">
            <div class="lable rx-cc">编号</div>
            <div class="content rx-sc">
              <div>{{ item.extInfo.codeNumber }}</div>
            </div>
          </div>

          <div class="rx ww33">
            <div class="lable rx-cc">炉次号</div>
            <div class="content content_num rx-sc">
              <el-input
                size="mini"
                v-model="item.extInfo.heatNumber"
                placeholder="请输入炉次号"
                :disabled="isDetails"
              />
            </div>
          </div>
        </div>

        <div class="sort_index">
          {{ index + 1 }}
        </div>

        <div class="del_box" v-if="!isDetails">
          <el-link
            type="danger"
            icon="el-icon-delete"
            @click="getDelete(index)"
          ></el-link>
        </div>

        <div class="tag_box" v-if="clientEnvironmentId == 2">
          <el-link style="color: #157a2c" @click="handleStorage(index)" :style="Object.prototype.hasOwnProperty.call(item.extInfo, 'positionList') && item.extInfo.positionList.length > 0 ? 'color: #E6A23C' : 'color: #157A2C'"
            >货位</el-link
          >
        </div>
      </div>
    </div>

    <el-dialog
      title="货位"
      :visible.sync="popupShow"
      :before-close="popClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      width="680px"
    >
      <el-form size="mini" :model="formData" label-width="96px">
        <el-form-item label="层数:" prop="levelNum">
          <el-input v-model="formData.levelNum" clearable />
        </el-form-item>

        <el-form-item label="列数:" prop="lineNum">
          <el-input v-model="formData.lineNum" clearable />
        </el-form-item>
        <div class="rx-ac" style="margin-top: 8px">
          <el-button size="mini" type="primary" @click="handleHjCode()"
            >自动生成</el-button
          >
          <el-button size="mini" @click="addHjCode()">添加货位</el-button>
        </div>
      </el-form>

      <div class="content_table2">
        <div class="head row rx-sc">
          <div class="item ww30">货位</div>
          <div class="item ww40">数量</div>
          <div class="item ww30">操作</div>
        </div>

        <div class="table">
          <div
            class="tr row rx-sc"
            v-for="(it, idx) in list[listIndex].extInfo.positionList"
            :key="idx"
          >
            <div class="item ww30 content_num">
              <el-input v-model="it.code" size="mini"></el-input>
            </div>

            <div class="item ww40 content_num">
              <el-input v-model="it.num" size="mini"></el-input>
            </div>

            <div class="item ww30 rx-cc">
              <el-link
                type="danger"
                icon="el-icon-delete"
                @click="removeGoods(idx)"
              ></el-link>
            </div>
          </div>
        </div>
      </div>

      <template slot="footer">
        <el-button size="mini" @click="handleClose()">取 消</el-button>
        <el-button size="mini" type="primary" @click="handleOk()"
          >保 存</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'deviceBom',
    props: {
      list: {
        type: Array,
        default: () => []
      },
      isDetails: {
        type: Boolean,
        default: false
      }
    },

    computed: {
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
    },

    data() {
      return {
        popupShow: false,
        formData: {
          levelNum: null,
          lineNum: null,
          type: 3,
          code: 'A'
        },
        listIndex: 0
      };
    },

    methods: {
      getDelete(idx) {
        this.list.splice(idx, 1);
      },

      handleStorage(idx) {
        this.listIndex = idx || 0;

        this.formData.lineNum =
          this.list[this.listIndex].extInfo.lineNum || null;
        this.formData.levelNum =
          this.list[this.listIndex].extInfo.levelNum || null;
        this.popupShow = true;
      },

      handleHjCode() {
        if (!this.formData.levelNum) {
          this.$message.error('请输入层数');
          return false;
        }

        if (!this.formData.lineNum) {
          this.$message.error('请输入列数');
          return false;
        }
        this.handleMine();
      },

      handleMine() {
        const ruleName = this.formData.code;
        let preCode = 0;
        let codeEng = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        let currentLetterIndex = 0;
        let positionList = [];

        if (ruleName.length > 0) {
          // 计算初始索引
          let multiplier = Math.pow(codeEng.length, ruleName.length - 1);
          for (let i = 0; i < ruleName.length; i++) {
            currentLetterIndex +=
              (codeEng.indexOf(ruleName[i]) + 1) * multiplier;
            multiplier /= codeEng.length;
          }
        }

        if (this.formData.type == 3) {
          for (let i = 0; i < this.formData.lineNum; i++) {
            // 获取当前字母
            let index = currentLetterIndex;
            let dividend = codeEng.length;
            let remainder;
            let quotient;
            let code = '';

            while (index > 0) {
              remainder = index % dividend;
              quotient = Math.floor(index / dividend);

              if (remainder === 0) {
                remainder = codeEng.length;
                quotient--;
              }
              code = codeEng[remainder - 1] + code;
              index = quotient;
            }

            for (let j = 0; j < this.formData.levelNum; j++) {
              let obj1111 = {
                code: code + (j + 1)
              };

              positionList.push(obj1111);
            }
            console.log(positionList);
            this.$set(
              this.list[this.listIndex].extInfo,
              'positionList',
              positionList
            );
            this.$set(
              this.list[this.listIndex].extInfo,
              'lineNum',
              this.formData.lineNum
            );
            this.$set(
              this.list[this.listIndex].extInfo,
              'levelNum',
              this.formData.levelNum
            );

            currentLetterIndex++; // 自增索引
          }
        } else {
          let num = Number(this.form.levelNum) * Number(this.form.lineNum);

          for (let i = 0; i < num; i++) {
            // 获取当前字母
            let index = currentLetterIndex;
            let dividend = codeEng.length;
            let remainder;
            let quotient;
            let code = '';

            while (index > 0) {
              remainder = index % dividend;
              quotient = Math.floor(index / dividend);

              if (remainder === 0) {
                remainder = codeEng.length;
                quotient--;
              }
              code = codeEng[remainder - 1] + code;
              index = quotient;
            }

            let obj1111 = {
              code: this.formData.type === 1 ? code : ruleName + (i + 1)
            };
            positionList.push(obj1111);

            currentLetterIndex++; // 自增索引
          }
        }
      },

      popClose() {
        this.listIndex = 0;
        this.popupShow = false;
      },
      removeGoods(idx) {
        if (this.list[this.listIndex].extInfo.positionList == 1) {
          this.$message.error('至少保留一个货架！');
          return false;
        }

        this.list[this.listIndex].extInfo &&
          this.list[this.listIndex].extInfo.positionList.splice(idx, 1);
      },
      addHjCode() {
        this.list[this.listIndex].extInfo.positionList.unshift({
          code: ''
        });
        this.$forceUpdate();
      },

      handleClose() {
        this.list[this.listIndex].extInfo.positionList = [];
        this.list[this.listIndex].extInfo.lineNum = null;
        this.list[this.listIndex].extInfo.levelNum = null;

        this.popupShow = false;
        this.formData.levelNum = null;
        this.formData.lineNum = null;
        this.listIndex = 0;
      },

      handleOk() {
        this.listIndex = 0;
        this.popupShow = false;
      }
    }
  };
</script>

<style scoped lang="scss">
  .tag_box {
    position: absolute;
    right: 22px;
    top: 0px;
  }

  .content_table2 {
    width: 100%;
    margin-top: 6px;
    border-right: 1px solid #e3e5e5;

    .row {
      width: 100%;

      .item {
        color: #404446;
        font-size: 14px;
        padding-left: 6px;
      }

      .color157 {
        color: #157a2c;
      }

      .ww40 {
        width: 40%;
      }

      .ww30 {
        width: 30%;
      }
    }

    .head {
      height: 32px;
      background: #f7f9fa;
      border-top: 1px solid #e3e5e5;
      border-left: 1px solid #e3e5e5;

      .item {
        height: 32px;
        line-height: 32px;
        border-right: 1px solid #e3e5e5;
        box-sizing: border-box;
      }
    }

    .tr {
      border-top: 1px solid #e3e5e5;
      border-left: 1px solid #e3e5e5;

      .item {
        font-size: 12px;
        min-height: 32px;
        display: flex;
        align-items: center;
        border-right: 1px solid #e3e5e5;
        box-sizing: border-box;
        white-space: normal;
        word-break: break-all;
      }

      &:last-child {
        border-bottom: 1px solid #e3e5e5;
      }
    }
  }

  .content_num {
    display: flex;
    align-items: center;
    padding: 2px;
    --input-background-color: #f0f8f2;
  }
</style>
