<template>
  <div class="saga-supplement-box">
    <div class="saga-brand-box">
      <el-tabs :tab-position="tabPosition" class="reset-steps" @tab-click="jump" v-model="stepActive">
        <el-tab-pane :label="item.name || '信息'" v-for="item in labelKey" :key="item.name" />
      </el-tabs>
      <el-form label-position="top" :model="ruleForm" :rules="rules" ref="ruleForm">
        <section class="d_jump">
          <p class="title"><i class="iconfont iconjuxing" style="color:#3A8DDE;"></i>基本信息</p>
          <el-form-item label="产品类型" prop="product">
            <el-select v-model="ruleForm.product" placeholder="请选择">
              <el-option-group v-for="group in productList" :key="group.label" :label="group.label">
                <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item label="品牌" prop="brand">
            <el-select v-model="ruleForm.brand" multiple :multiple-limit="1" filterable @focus="focus" remote
              placeholder="请选择" :remote-method="remoteMethods" :loading="loading">
              <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="型号" prop="type">
            <el-input v-model="ruleForm.type" />
          </el-form-item>
        </section>
        <section class="d_jump">
          <p class="title"><i class="iconfont iconjuxing" style="color:#3A8DDE;"></i>技术参数</p>
          <el-form-item label="CPU规格：">
            <el-input />
          </el-form-item>
          <el-form-item label="CPU规格：">
            <el-input />
          </el-form-item>
          <el-form-item label="CPU规格：">
            <el-input />
          </el-form-item>
          <el-form-item label="CPU规格：">
            <el-input />
          </el-form-item>
          <el-form-item label="CPU规格：">
            <el-input />
          </el-form-item>
          <el-form-item label="CPU规格：">
            <el-input />
          </el-form-item>
          <el-form-item label="CPU规格：">
            <el-input />
          </el-form-item>
          <el-form-item label="CPU规格：">
            <el-input />
          </el-form-item>
          <el-form-item label="CPU规格：">
            <el-input />
          </el-form-item>
          <el-form-item label="CPU规格：">
            <el-input />
          </el-form-item>
          <el-form-item label="CPU规格：">
            <el-input />
          </el-form-item>

        </section>
        <section class="d_jump">
          <p class="title"><i class="iconfont iconjuxing" style="color:#3A8DDE;"></i>附件信息</p>
          <el-form-item label="设备文档：">
            <uploadFiles :readOnly="read" :keysArr="keysArr" @change="changeItem" />
          </el-form-item>
        </section>
      </el-form>
    </div>
  </div>
</template>

<script>
import uploadFiles from "@/components/public/uploadFiles"
import { prodRecordQuery } from "@/api/product"
import { mapGetters } from "vuex"

export default {
  components: { uploadFiles },
  created() {
    this.getProdType()
  },
  mounted() {
    // this.$refs.ruleForm.validate(valid => {
    //   console.log(valid)
    // })

    let listener = document.querySelector('.saga-brand-box')
    listener.addEventListener('scroll', this.onScroll)
    //  option
    this.list = this.states.map(item => {
      return { value: `value:${item}`, label: `label:${item}` }
    })

  },
  data() {
    let checkBrand = (rule, value, callback) => {
      if (value == '') {
        return callback(new Error('请选择品牌'))
      } else {
        callback()
      }
    }
    return {
      read: false,
      list: [],
      keysArr: [],
      loading: false,
      states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"],
      bbs: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      brandList: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      productList: [{
        label: '热门城市',
        options: [{
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Beijing',
          label: '北京'
        }]
      }, {
        label: '城市名',
        options: [{
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }, {
          value: 'Dalian',
          label: '大连'
        }]
      }],
      labelKey: [
        {
          name: '基本信息',
        }, {
          name: '技术参数',
        }, {
          name: '附件信息',
        }
      ],
      stepActive: '0',
      tabPosition: 'left',
      ruleForm: {
        product: '',
        brand: '',
        type: '',

      },
      rules: {
        product: [
          { required: true, message: '请选择产品类型', trigger: 'change' }
        ],
        brand: [
          { required: true, validator: checkBrand, trigger: 'focus,blur' }
        ],
        type: [
          { required: true, message: '请输入型号', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters('layout', ['dictionary']),
  },
  methods: {
    getProdType() {
      let params = {
        Type: this.dictionary.dictionaryType,
        GroupId: this.dictionary.groupId,
        ProjectId: this.dictionary.projectId,
      }
      prodRecordQuery(params, res => {
        debugger
      })
    },
    jump(tab, event) {
      this.stepActive = tab.index
      let jump = document.querySelectorAll('.d_jump'),
        total = jump[this.stepActive].offsetTop,//获取需要滚动的距离
        listener = document.querySelector('.saga-brand-box'),
        distance = listener.scrollTop,
        step = total / 50;
      if (total > distance) {
        smoothDown()
      } else {
        let newTotal = distance - total + 100
        step = newTotal / 50
        smoothUp()
      }

      function smoothDown() {
        if (distance < total) {
          distance += step
          listener.scrollTop = distance
          setTimeout(smoothDown, 10)
        } else {
          listener.scrollTop = total
        }
      }

      function smoothUp() {
        if (distance > total) {
          distance -= step
          listener.scrollTop = distance
          setTimeout(smoothUp, 10)
        } else {
          listener.scrollTop = total
        }
      }
    },
    onScroll() {
      let scrolled = document.querySelector('.saga-brand-box').scrollTop
      let jump = document.querySelectorAll('.d_jump')
      for (let i = 0; i < jump.length; i++) {
        if (jump[i].offsetTop >= scrolled) {
          this.stepActive = i.toString()
          break

        }
      }
    },
    remoteMethods(query) {
      console.log(query, 'query')
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.brandList = this.list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.brandList = []
      }
    },
    focus() {
      this.brandList = this.bbs
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log(this.ruleForm);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    changeItem(file) {
      let arr = []
      file.forEach(({ Key }) => arr.push({ Key }))
    }
  },
  watch: {}
}
</script>
<style lang="scss" scoped>
@media screen and (max-width: 1500px) {
  .saga-supplement-box {
    height: 500px;
    border: 1px solid #42b983;
  }
}

.saga-supplement-box {
  position: relative;
  height: 800px;
  margin-top: 90px;

  .saga-brand-box {
    width: 100%;
    max-height: 800px;
    /*margin-top: 90px;*/
    padding: 16px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    overflow-y: auto;

    .reset-steps {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
    }

    .d_jump {
      display: inline-block;
      width: calc(100% - 108px);
      position: relative;
      left: 100px;

      .title {
        margin: 25px 70px;
        padding-bottom: 10px;
        font-size: 16px;
        color: #1f2429;
        border-bottom: 1px solid #eff0f1;
      }

      /deep/ .el-input__inner {
        width: 320px;
      }
    }

    .el-form-item--mini.el-form-item,
    .el-form-item--small.el-form-item {
      padding: 0 340px;
    }
  }

  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}

::-webkit-scrollbar-thumb {
  height: 50px;
  outline-offset: -2px;
  outline: 2px solid #dddee0;
  border: 2px solid #dddee0;
  background-color: #dddee0;
  border-radius: 4px;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
</style>
