<template>
  <div class="orderBox noPadding">
    <van-field
      v-model="dataList"
      class="fieldInput"
      clearable
      readonly
      :required="item.props[0].required"
      :name="item.label"
      :label="item.label"
      :rules="[{ required: item.props[0].required, message: `请选择${item.props[0].label}` }]"
    >
      <template #button>
        <van-button
          icon="plus"
          type="primary"
          size="small"
          @click="addChangepart()"
        >添加</van-button>
      </template>
    </van-field>
    <div
      v-for="(info, index) in item.props[0].value"
      :key="index"
    >
      <div :class="index > 0 ? 'orderBox-content mt10 mb10' : 'orderBox-content mb10'">
        <div>
          <form-show background-color="#F8F8F8">
            <form-show-item label="主机编号">{{ info.productSN }}</form-show-item>
            <form-show-item label="部件大类编码">{{ info.materialClassCode }}</form-show-item>
            <form-show-item label="部件大类">{{ info.materialClassName }}</form-show-item>
            <form-show-item label="非换件动作">{{ info.action }}</form-show-item>
            <form-show-item label="状态">{{ info.status === '1' ? '有效' : '失效' }}</form-show-item>
          </form-show>
          <div class="orderBox-footer footeredit">
            <div
              class="orderBox-footer-item"
              @click="deleteHandle(info)"
            >
              <div class="img">
                <svg-icon icon-class="delete" />
              </div>
              <div class="label">
                <span>删除</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Notify, Dialog } from 'vant'
import { getNotChangeRecList, invalidNotChangeRec } from './../../api/NoChangeParts'

export default {
  name: 'NoChangeParts',
  components: {
  },
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      dataList: '',
      dataForm: {
        soId: ''
      }
    }
  },
  watch: {
    'item.label': {
      handler () {
        this.item.componentFeedback[0].label = this.item.label
      },
      deep: true,
      immediate: true
    },
    'item.props': {
      handler () {
        this.item.componentFeedback[0].value = this.item.props[0].value
      },
      deep: true,
      immediate: true
    }
  },
  activated () {
    this.getList()
  },
  created () {
    this.getList()
  },
  methods: {
    addChangepart () {
      this.$router.push({
        name: 'noChangeParts',
        query: {
          id: this.$route.params.id
        }
      })
    },
    getList () {
      this.dataForm.soId = this.$route.params.id
      getNotChangeRecList({
        soId: this.dataForm.soId
      }).then(res => {
        this.item.props[0].value = res.data.filter(item => item.status === '1') || []
        this.dataList = this.item.props[0].value.length > 0 ? '1' : ''
      })
    },
    deleteHandle (row) {
      Dialog.confirm({
        title: '提示',
        message: '是否要删除该记录?'
      }).then(() => {
        invalidNotChangeRec({
          notChangeRecID: row.notChangeRecID,
          state: '0'
        }).then(res => {
          Notify({ type: 'success', message: '删除成功' })
          this.getList()
        }).catch(() => {
        })
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.fieldInput {
  ::v-deep .van-field__control {
    opacity: 0
  }
}
</style>
