<template>
  <div>
    <el-badge :value="value.length" class="item">
      <el-button
        icon="el-icon-plus"
        v-if="type != 'detail'"
        type="primary"
        @click="handleUpload"
      >
        选择</el-button
      >
      <el-button
        icon="el-icon-view"
        v-else
        type="primary"
        @click="handleUpload"
      >
        查看</el-button
      >
    </el-badge>

    <ToolList @success="getFiles" ref="toolListRef"></ToolList>
  </div>
</template>

<script>
  import ToolList from './toolList.vue';

  export default {
    name: 'index',
    components: { ToolList },
    model: {
      prop: 'value',
      event: 'updateVal'
    },
    props: {
      type: {
        type: String,
        default: ''
      },
      value: {
        type: Array,
        default: () => {
          return [];
        }
      },

      sList: {
        type: Array
      }
    },
    data() {
      return {
        selectVal: ''
      };
    },
    watch: {
      value: {
        handler(newVal) {
          console.log(newVal, '=======');
          this.selectVal = newVal || [];
        },
        immediate: true
      }
    },
    created() {},
    methods: {
      handleUpload() {
        console.log(this.sList, '选择质检工具列表======');
        this.$refs.toolListRef.open(this.selectVal, this.type, this.sList);
      },
      getFiles(val = []) {
        this.$emit('updateVal', val);
      }
    }
  };
</script>

<style scoped lang="scss"></style>
