<template>
  <div>
    <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>
    <div
      v-for="(info, index) in offlineData"
      :key="index"
    >
      <div
        v-if="info.crStatus"
        :class="index > 0 ? 'orderBox-content mt10 mb10' : 'orderBox-content mb10'"
      >
        <p class="changepart_content_header">[换件 部件更换 一换一]</p>
        <div>
          <form-show background-color="#F8F8F8">
            <form-show-item label="换上件条码">{{ info.upPartsSN }}</form-show-item>
            <form-show-item label="换下件条码">{{ info.downPartsSN }}</form-show-item>
            <form-show-item label="备件编码">{{ info.sparePartSN }}</form-show-item>
            <form-show-item label="备件类别">{{ info.sparePartType }}</form-show-item>
            <form-show-item label="备注">{{ info.remark }}</form-show-item>
          </form-show>
          <div
            v-if="info.crStatusName !== '已失效'"
            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>
    <van-popup
      v-model="show"
      :round="false"
      :style="{ width: '80%' }"
    >
      <div
        v-if="show"
        style="padding: 15px;"
      >
        <van-form
          @submit="onSubmit"
          @failed="onFailed"
        >
          <van-field
            v-model="formInline.upPartsSN"
            label="换上件条码"
            placeholder="填写"
            input-align="right"
            maxlength="50"
            :rules="[{ validator, message: '仅支持输入数字、字母，短破折号（-）和下划线（_）' }]"
          />
          <van-field
            v-model="formInline.downPartsSN"
            label="换下件条码"
            placeholder="填写"
            input-align="right"
            maxlength="50"
            :rules="[{ validator, message: '仅支持输入数字、字母，短破折号（-）和下划线（_）' }]"
          />
          <van-field
            v-model="formInline.sparePartSN"
            label="备件编码"
            placeholder="填写"
            input-align="right"
            maxlength="50"
            :rules="[{ validator, message: '仅支持输入数字、字母，短破折号（-）和下划线（_）' }]"
          />
          <van-field
            v-model="formInline.sparePartType"
            label="备件类别"
            placeholder="填写"
            input-align="right"
            maxlength="50"
            :rules="[{ required: false, message: '请输入备件类别' }]"
          />
          <van-field
            v-model="formInline.remark"
            label="备注"
            placeholder="填写"
            input-align="right"
            maxlength="200"
          />
          <div class="changePartsBtn">
            <van-button
              type="default"
              size="small"
              @click="close"
            >取消</van-button>
            <van-button
              type="info"
              size="small"
              native-type="submit"
            >确定</van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { Notify, Dialog } from 'vant'
import { getOfflineChangeParts, delOfflineChangePart, saveOfflineChangePart } from './../../api/OfflineChangeParts'
import { Validator } from 'utils-cs'
export default {
  name: 'OfflineChangeParts',
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      dataList: '',
      show: false,
      offlineData: [],
      formInline: {
        upPartsSN: '',
        downPartsSN: '',
        sparePartSN: '',
        sparePartType: '',
        remark: ''
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    validator (val) {
      if (val) {
        return Validator.isCode(val)
      } else {
        return false
      }
    },
    getData () {
      getOfflineChangeParts({
        pageSize: 100,
        soid: this.$route.params.id
      }).then(res => {
        if (res.rows.length > 0) {
          this.offlineData = res.rows.filter(item => {
            return item.crStatusName !== '已失效'
          })
        }
      })
    },
    addChangepart () {
      this.formInline = {
        upPartsSN: '',
        downPartsSN: '',
        sparePartSN: '',
        sparePartType: '',
        remark: ''
      }
      this.show = true
    },
    close () {
      this.show = false
    },
    onSubmit () {
      if (!this.formInline.upPartsSN && !this.formInline.downPartsSN && !this.formInline.sparePartSN && !this.formInline.sparePartType) {
        Notify({ type: 'danger', message: '换上件条码、换下件条码、备件编码、备件类别不能全部为空' })
        return
      }
      saveOfflineChangePart({
        soid: this.$route.params.id,
        ...this.formInline
      }).then(res => {
        Notify({ type: 'success', message: '添加成功' })
        this.show = false
        this.getData()
      })
    },
    onFailed (errorInfo) {
    },
    deleteHandle (row) {
      if (!row.offlineCRID) {
        const len = this.offlineData.length
        this.offlineData.splice(len - 1, 1)
        return false
      }
      Dialog.confirm({
        title: '提示',
        message: '是否要删除该记录?'
      }).then(() => {
        delOfflineChangePart(row.offlineCRID).then(res => {
          Notify({ type: 'success', message: '删除成功' })
          this.getData()
        }).catch(() => {
        })
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.changePartsBtn {
  text-align: center;
  ::v-deep .van-button {
    width: 80px;
    margin: 0 15px 0 15px;
  }
}
.changepart_content_header {
  padding-left: 10px;
}
</style>
