<template>
  <div class="maintenance">
    <div class="maintenance-search" @click="openSearchDialog">
      <span class="van-ellipsis" style="display: inline-block;max-width: 300px"> {{ title }} </span>
      <van-icon name="arrow-down" />
    </div>
    <div style="height: calc(100% - 50px);overflow-y: auto">
      <van-list
        v-show="list.length||loading"
        v-model="loading"
        class="maintenance-list-wrapper"
        :finished="finished"
        :immediate-check="false"
        finished-text="没有更多了"
        @load="queryList"
      >
        <div v-for="item in list" :key="item.id" class="maintenance-item van-clearfix" @click="goDetail(item)">
          <!--<img :src="item.imgs.split(',')[0] || require('../../../assets/pic_def_bj.png')" alt="图片加载失败">-->
          <div class="right-box">
            <div class="title-4">{{ item.name }}</div>
            <span>{{ item.partsCode }}</span>
            <span v-if="item.modelRemark">备注：{{ item.modelRemark||'--' }}</span>
          </div>
        </div>
      </van-list>
      <div v-show="!list.length&&!loading" class="no-message" />
    </div>
    <van-popup
      v-model="show"
      position="right"
      get-container="body"
      :style="{ width:'80%',height:'100%' }"
    >
      <div class="brandSearch">
        <div>
          <h2>部件</h2>
          <h3>一级部件</h3>
          <div class="brand-wrapper">
            <a href="javascript:;" :class="{selected:selectAllBrandFlag}" class="brand-item" @click="selectAllOneBrand">全部</a>
            <a v-for="item in treeData" :class="{selected:item.selected}" href="javascript:;" class="brand-item" @click="selectOneBrand(item)">{{ item.name }}</a>
          </div>
          <h3 v-show="!selectAllBrandFlag">二级部件</h3>
          <div v-show="!selectAllBrandFlag" class="brand-wrapper">
            <a href="javascript:;" :class="{selected:selectAllFlag}" class="brand-item" @click="selectAll">全部</a>
            <a v-for="item in selectedBrand.sub" :class="{selected:item.selected}" href="javascript:;" class="brand-item" @click="selectTwoBrand(item)">{{ item.name }}</a>
            <a v-if="selectedBrand.code==='a6fe639d-b303-11eb-b624-0c42a1da166e'&&!selectAllBrandFlag" href="javascript:;" @click="$router.push({name:'transmission',query:{id:$route.params.id}})">变速箱更换</a>
          </div>
        </div>
      </div>
      <div class="buttom-btn">
        <van-button class="btn-1" type="primary" block color="#FFF5F2" text @click="refresh">重置</van-button>
        <van-button type="primary" block color="#F25D24" @click="search">搜索</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { ImagePreview } from 'vant'
import { queryMaintainPartList } from '@/api/parts'
import { mapState } from 'vuex'

export default {
  props: ['carModelGroupDetail'],
  computed: {
    ...mapState({
      treeData: state => state.parts.treeData,
      selectedBrand: state => state.parts.selectedBrand,
      selectAllFlag: state => state.parts.selectAllFlag,
      selectAllBrandFlag: state => state.parts.selectAllBrandFlag
    })
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: true,
      show: false,
      title: '全部'
    }
  },
  mounted() {
    if (!this.treeData.length) {
      this.show = true
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中'
      })
      this.$store.dispatch('parts/queryCarBrandList').then(res => {
        this.queryList()
      }, err => {
        this.$toast.clear()
      })
    } else {
      this.search()
    }
  },
  methods: {
    search() {
      let codes
      if (this.selectAllBrandFlag) {
        codes = ''
      } else if (this.selectAllFlag) {
        codes = this.selectedBrand.sub.map(k => k.code).join()
        this.title = this.selectedBrand.name
      } else {
        codes = this.selectedBrand.sub.filter(i => i.selected).map(k => k.code).join()
        this.title = this.selectedBrand.sub.filter(i => i.selected).reduce((total, item) => total + '/' + item.name, '').substring(1)
      }
      this.queryList(codes).then(res => {
        this.show = false
      })
    },
    refresh() {
      this.$store.commit('parts/RESETALL')
    },
    selectAll() {
      this.$store.commit('parts/SET_SUB_STATE', false)
    },
    selectAllOneBrand() {
      this.$store.commit('parts/SET_TREEDATA_STATE', false)
    },
    selectTwoBrand(item) {
      this.$store.commit('parts/SELECT_SUB', item)
    },
    selectOneBrand(item) {
      this.$store.commit('parts/SELECT_ONE_BRAND', item)
    },
    openSearchDialog() {
      this.show = true
    },
    goDetail(item) {
      this.$router.push('/parts/detail/' + item.id)
    },
    showImgList(urls, index) {
      ImagePreview({
        images: urls.map(item => item.imgPath),
        startPosition: index,
        closeable: true
      })
    },
    queryList(componentCode) {
      this.loading = true
      this.finished = false
      if (!this.$route.params.id) return
      const params = {
        groupId: this.$route.params.id
      }
      if (componentCode) {
        params.componentCode = componentCode
      }
      this.$toast.loading({
        duration: 0,
        forbidClick: true,
        message: '加载中'
      })
      return queryMaintainPartList(params).then(res => {
        this.list = res
        this.loading = false
        this.finished = true
        this.$toast.clear()
      }, err => {
        this.$toast.clear()
      })
    }
  }
}
</script>
