<template>
  <div class="mainCon">
    <NavBar />
    <div class="parts parts-search-template innerCon">
      <van-tabs v-model="activeTab" color="#F25D24" @change="changeTab">
        <van-tab title="按分类搜索">
          <van-collapse v-model="activeNames">
            <van-collapse-item v-for="item in treeData" :key="item.code" :name="item.name">
              <template #title>
                <div>{{ item.name }} <van-checkbox v-model="item.selected" icon-size="16px" style="float: right;" name="a" @click.stop="parentsClick(item)" /></div>
              </template>
              <div v-for="children in item.sub" :key="children.code" class="parts-search-item">{{ children.name }}<van-checkbox v-model="children.selected" icon-size="16px" style="float: right;" name="a" @click.stop="chldrenClick(children)" /></div>
            </van-collapse-item>
          </van-collapse>
          <div class="buttom-btn">
            <van-button type="primary" block color="#F25D24" @click="search">搜索</van-button>
          </div>
        </van-tab>
        <van-tab title="按零件号/OE号搜索">
          <div>
            <van-search
              v-model="value"
              shape="round"
              placeholder="请输入零件号/OE号查询"
              @search="searchCode"
            />
            <div class="photo-upload">
              <van-uploader
                v-model="file"
                :max-count="1"
                :after-read="afterRead"
                :before-read="beforeRead"
              />
              <!--<img src="../../assets/icon-camera.png" class="photo-upload-img">-->
              <span>上传图片/拍照上传</span>
              <van-button type="primary" round block color="#F25D24" @click="searchByImg">搜索</van-button>
              <div class="shibie-tips">
                *拍照时请将标签完整置于相机内
                <img src="../../assets/parts-code.png" style="margin-top: 30px;width: 260px" alt="">
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import '@/styles/parts.scss'
import '@/styles/index.scss'
import { queryPartsCategory } from '@/api/carModel'
import { scannerPartNumber } from '@/api/main.js'
import lrz from 'lrz'
export default {
  data() {
    return {
      value: '',
      activeTab: '',
      activeNames: ['1'],
      result: [],
      treeData: [],
      file: []
    }
  },
  mounted() {
    this.$toast.loading({
      duration: 0, // 持续展示 toast
      forbidClick: true,
      message: '加载中'
    })
    queryPartsCategory().then(res => {
      this.$toast.clear()
      this.treeData = res.map(item => {
        item.sub = item.sub.map(item2 => {
          return {
            ...item2,
            selected: false
          }
        })
        return {
          ...item,
          selected: false
        }
      })
    }, err => {
      this.$toast.clear()
    })
  },
  methods: {
    searchByImg() {
      if (!this.value) {
        this.$toast('请上传图片后进行搜索')
        return
      }
      this.searchCode()
    },
    beforeRead(file) {
      if (file.type.indexOf('image/') === -1) {
        this.$toast('请选择图片类型')
        return false
      }
      return true
    },
    afterRead(file) {
      lrz(file.file).then(lrzFile => {
        file.file = lrzFile.file
      }, err => {
        console.log(err)
      }).always(res => {
        file.status = 'uploading'
        file.message = '上传中...'
        const params = new FormData()
        params.append('photo', file.file)
        scannerPartNumber(params, {
          timeout: 864000,
          headers: { 'Content-Type': 'multipart/form-data', id: this.$store.getters.id }
        }).then(res => {
          if (res.data.code === 1) {
            file.status = 'failed'
            file.message = res.data.msg || res.data.message
          } else {
            file.url = res.data.data.path
            file.status = 'done'
            file.message = ''
            this.value = res.data.data
          }
        }, err => {
          file.status = 'failed'
          file.message = '识别失败'
        })
      })
    },
    searchCode() {
      this.$router.push({ name: 'partsEasy', query: {
        code: this.value
      }})
    },
    chldrenClick(item) {

    },
    search() {
      const ids = []
      this.treeData.forEach(item => {
        item.sub.forEach(item2 => {
          if (item2.selected) {
            ids.push(item2.code)
          }
        })
      })
      this.$router.push({ name: 'partsEasy', query: {
        ids
      }})
    },
    parentsClick(item) {
      for (let i = 0; i < item.sub.length; i++) {
        const itemElement = item.sub[i]
        itemElement.selected = !item.selected
      }
    },
    changeTab() {

    }
  }
}
</script>
