<template>
  <div>
    <van-action-sheet v-model="show" title="部件大类">
      <div class="content">
        <div class="orderBox">
          <van-field
            v-model="dataForm.materialClassCode"
            label="部件大类编码"
            placeholder="填写"
            input-align="right"
          >
            <template #button>
              <van-button plain type="info" size="small" @click="getDataList()">
                <span>查询</span>
              </van-button>
            </template>
          </van-field>
          <no-data v-if="moreClassList.length <= 0" />
          <div v-else>
            <div
              v-for="(item, index) in moreClassList"
              :key="index"
              :class="index > 0 ? 'orderBox-content flex mt10' : 'orderBox-content flex'"
              @click="changeUpClick(item)"
            >
              <div class="upInfo-left">
                <van-icon
                  :class="item.required ? 'checkedIcon' : 'nocheckedIcon'"
                  :name="item.required ? 'checked' : 'circle'"
                />
              </div>
              <form-show background-color="#F8F8F8">
                <form-show-item label="部件大类编码">{{ item.materialClassCode }}</form-show-item>
                <form-show-item label="部件大类">{{ item.materialClassName }}</form-show-item>
              </form-show>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-submit">
        <van-button class="btn" type="info" native-type="submit" @click="onSubmit()">提交</van-button>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import { getMaterialClassName } from './../../api/NoChangeParts'
export default {
  data () {
    return {
      show: false,
      materialNo: '',
      projectNo: '',
      productSN: '',
      prodLineID: '',
      moreClassList: [],
      selectChangeUpData: [],
      dataForm: {
        materialClassCode: '',
        SOID: '',
        productSN: '',
        pageIndex: 1,
        pageSize: 500
      }
    }
  },
  methods: {
    init (productSN) {
      this.show = true
      this.dataForm.materialClassCode = ''
      this.dataForm.SOID = this.$route.query.id
      this.dataForm.productSN = productSN
      this.getDataList()
    },
    changeUpClick (info) {
      this.selectChangeUpData = []
      this.moreClassList.forEach(item => {
        if (info.materialClassCode === item.materialClassCode) {
          info.required = !info.required
          if (info.required) {
            this.selectChangeUpData.push(info)
          }
        } else {
          item.required = false
        }
      })
    },
    getDataList () {
      getMaterialClassName(this.dataForm).then(res => {
        this.moreClassList = (res.rows || []).map(item => {
          return {
            required: false,
            ...item
          }
        })
      }).catch(() => {
      })
    },
    onSubmit () {
      const obj = this.moreClassList.find(i => i.required === true)
      if (obj) {
        this.$emit('success', obj)
      }
      this.show = false
    }
  }
}
</script>
<style lang="scss" scoped>
  .content {
    padding: 0 0 70px;
  }
  .flex {
  display: flex;
}
.upInfo-left {
  width: 12%;
  display: flex;
  padding: 0 10px;
  .checkedIcon {
    font-size: 30px;
    align-self: center;
    color: #E33F2E;
  }
  .nocheckedIcon {
    font-size: 30px;
    align-self: center;
    color: black;
  }
}
</style>
