<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="基本信息" name="0"/>
        <el-tab-pane label="技术参数" name="1"/>
        <el-tab-pane label="附件信息" name="2"/>
      </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" filterable placeholder="请选择" @change="handleChangeProduct">
              <el-option-group v-for="group in productList" :key="group.label" :label="group.text">
                <el-option v-for="item in group.options" :key="item.Code" :label="item.AliasName"
                           :value="item.Code"></el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item label="品牌" prop="brand">
            <el-select v-model="ruleForm.brand" filterable remote @change="handleChangeBrand"
                       placeholder="请选择" :remote-method="remoteMethods" :loading="loading">
              <el-option v-for="item in brandList" :key="item.BrandID"
                         :label="`${item.BrandCname}${item.BrandName?`（${item.BrandCname}）`:''}`"
                         :value="item.BrandID"/>
            </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>
          <template v-for="(item,index) in TechnicalData">
            <el-form-item :label="item.Name">
              <el-input
                v-if="item.InputMode == 'B1' || item.InputMode == 'B2'"
                v-model="ruleForm[item.Code]"/>

              <el-input
                v-else-if="item.InputMode == 'A1'||item.InputMode == 'A2'"
                type="number"
                v-model="ruleForm[item.Code]">
                <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
              </el-input>

              <el-select
                v-else-if="item.InputMode == 'D1' || item.InputMode == 'E2'"
                placeholder="请选择"
                v-model="ruleForm[item.Code]">
                <el-option :key="op.Name" :label="op.Name" :value="op.Code" v-for="op in item.options"></el-option>
              </el-select>

              <!--              <el-select-->
              <!--                v-else-if="item.InputMode == 'D2'"-->
              <!--                placeholder="请选择"-->
              <!--                v-model="ruleForm[item.Code]"-->
              <!--                multiple-->
              <!--                collapse-tags>-->
              <!--                <el-option :key="op.Name" :label="op.Name" :value="op.Code" v-for="op in item.options"></el-option>-->
              <!--              </el-select>-->

              <el-date-picker
                v-else-if="item.InputMode == 'C6'"
                v-model="ruleForm[item.Code]"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"/>

              <el-cascader
                v-else-if="item.InputMode == 'D1L'"
                placeholder="请选择"
                :options="item.options"
                v-model="ruleForm[item.Code]"
                :props="item.props"
                filterable
                :show-all-levels="false"
                clearable
                style="width: 200px"/>

              <el-input
                v-else-if="item.InputMode == 'L'||item.InputMode == 'L1'||item.InputMode == 'L2'||item.InputMode == 'M'"
                v-model="ruleForm[item.Code]">
                <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
              </el-input>

              <el-date-picker
                v-else-if="item.InputMode == 'C5'" v-model="ruleForm[item.Code]"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                type="date">
              </el-date-picker>

              <el-input v-else v-model="ruleForm[item.Code]"/>

            </el-form-item>
          </template>


        </section>
        <section class="d_jump">
          <p class="title"><i class="iconfont iconjuxing" style="color:#3A8DDE;"></i>附件信息</p>
          <template v-for="(item,index) in AttachmentInfo">
            <el-form-item :label="item.Name">
              <uploadFiles :readOnly="read" :keysArr="keysArr" @change="changeItem" v-model="ruleForm[item.Code]"/>
            </el-form-item>
          </template>

        </section>
      </el-form>
    </div>
  </div>
</template>

<script>
  import uploadFiles from "@/components/public/uploadFiles"
  import {defFuncidQuery, prodRecordQuery} from "@/api/product"
  import {brandQueryByKeyword, brandRecordQuery} from "@/api/brand"
  import {mapGetters} from "vuex"

  export default {
    components: {uploadFiles},
    created() {
      this.getProdType()
      this.getBrandNum5()
    },
    mounted() {
      console.log(this.$route.query)
      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 {
        TechnicalData: [],
        AttachmentInfo: [],
        read: false,
        list: [],
        keysArr: [],
        loading: false,
        bbs: [],
        brandList: [],
        productList: [],
        stepActive: '0',
        tabPosition: 'left',
        ruleForm: {
          product: '',
          brand: [],
          type: '',

        },
        rules: {
          product: [
            {required: true, message: '请选择产品类型', trigger: 'change'}
          ],
          brand: [
            {required: true, validator: checkBrand, trigger: '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 => {
        res.Content.map(item => {
          if (item.label == 'record') {
            item.text = `最近使用`
          } else if (item.label == 'all') {
            item.text = ''
          }
        })
        this.productList = res.Content
      })
    },
    getBrandNum5() {// 获取最新创建过产品型号的5个品牌
      let params = {
        Type: this.dictionary.dictionaryType,
        GroupId: this.dictionary.groupId,
        ProjectId: this.dictionary.projectId,
      }
      brandRecordQuery(params, res => {
        this.bbs = res.Content
        this.brandList = res.Content
      })
    },
    handleChangeProduct(item) {// 切换产品类型
      let param = {
        Type: this.dictionary.dictionaryType,
        GroupId: this.dictionary.groupId,
        ProjectId: this.dictionary.projectId,
        ClassCode: item
      }
      defFuncidQuery(param, res => {
        this.TechnicalData = []
        res.Content.TechnicalData.forEach(i => {
          for (let key in i) {
            i[key].forEach(i => this.TechnicalData.push(i))
          }
        })
        this.AttachmentInfo = res.Content.AttachmentInfo
      })

    },
    handleChangeBrand(item) {// 切换品牌
      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) {
      if (query !== '') {
        this.loading = true
        brandQueryByKeyword({keyword: query, PageSize: 50,}, res => {
          this.loading = false
          this.brandList = res.Content
        })
      } else {
        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;
  background: #fff;

  .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>
