<template>
  <div class="orderBox noPadding">
    <van-form>
      <div class="orderBox orderBox-noPadding">
        <van-field
          v-model="productSNlabel"
          readonly
          clickable
          name="主机编号"
          label="主机编号"
          right-icon="arrow"
          input-align="right"
          placeholder="选择主机编号"
          :rules="[{ required: true, message: '选择主机编号' }]"
          @click="pickerData('主机编号')"
        />
        <van-field
          v-model="materialClass"
          readonly
          clickable
          name="部件大类"
          label="部件大类"
          right-icon="arrow"
          input-align="right"
          placeholder="选择部件大类"
          @click="pickerData('部件大类')"
        />
        <div class="operation-btn">
          <van-button plain hairline size="small" type="info" class="operation-button" :disabled="!materialClass" @click="addMaterialOprateInfo()">添加</van-button>
          <van-button plain hairline size="small" type="info" class="operation-button" @click="moreClass">更多大类</van-button>
          <van-button plain hairline size="small" type="info" class="operation-button" @click="ccDispatch">CC派件</van-button>
        </div>
      </div>
      <div
        v-for="(info, index) in dataListSelections"
        :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="非换件动作">
                <select-multiple
                  :field="info.field"
                  :is-class="true"
                />
                <!-- <van-field
                  v-model="info.selectCcActionName"
                  readonly
                  clickable
                  right-icon="arrow"
                  placeholder="选择非换件动作"
                  class="field-Class"
                  @click="pickerData('非换件动作', info.selection, index)"
                /> -->
              </form-show-item>
            </form-show>
            <div
              class="orderBox-footer footeredit"
            >
              <div
                class="orderBox-footer-item"
                @click="removeOption(index)"
              >
                <div class="icon">
                  <svg-icon icon-class="delete" />
                </div>
                <span>删除</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-submit">
        <van-button class="btn" block type="info" @click="onSubmit">提交</van-button>
      </div>
    </van-form>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="selectList"
        value-key="label"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <moreClass
      v-if="moreClassVisible"
      ref="moreClassRef"
      @success="addMaterialOprateInfo"
    />
    <cc
      v-if="ccDispatchVisible"
      ref="ccDispatchRef"
      @success="addMaterialOprateInfo"
    />
  </div>
</template>
<script>
import SelectMultiple from './../SelectMultiple'
import { getProductListInfoBySOID } from './../../api/ChangeParts'
import { getMaterialClassName, getMaterialOprateInfo, submitNotChangeRecList } from './../../api/NoChangeParts'
import { Notify } from 'vant'
import moreClass from './more-class'
import cc from './cc-dispatch.vue'
export default {
  components: {
    moreClass,
    cc,
    SelectMultiple
  },
  data () {
    return {
      moreClassVisible: false,
      ccDispatchVisible: false,
      showPicker: false,
      productSNlabel: '',
      materialClass: '',
      dataListSelections: [],
      actionIndex: 0,
      formData: {
        productSN: '',
        materialClassCode: ''
      },
      dic: {
        productSnMode: [],
        materialClassMode: []
      }
    }
  },
  created () {
    this.getSelectData()
  },
  methods: {
    removeOption (index) {
      this.dataListSelections.splice(index, 1)
    },
    addMaterialOprateInfo (row) {
      const Code = this.formData.materialClassCode
      const obj = row || {
        productLineID: this.dic.materialClassMode.find(i => i.value === Code).productLineID,
        materialClassCode: Code,
        materialClassName: this.dic.materialClassMode.find(i => i.value === Code).label
      }
      getMaterialOprateInfo({
        materialClassCode: obj.materialClassCode,
        productLineID: obj.productLineID
      }).then(res => {
        this.dataListSelections.push({
          productSN: this.formData.productSN,
          ...obj,
          selectCcActionName: '',
          field: {
            value: [],
            options: (res.data || []).map(item => {
              return {
                value: item.oprateCode,
                label: item.oprateName
              }
            })
          },
          selection: (res.data || []).map(item => {
            return {
              value: item.oprateCode,
              label: item.oprateName
            }
          })
        })
      })
    },
    ccDispatch () {
      this.ccDispatchVisible = true
      this.$nextTick(() => {
        this.$refs.ccDispatchRef.init()
      })
    },
    moreClass () {
      this.moreClassVisible = true
      this.$nextTick(() => {
        this.$refs.moreClassRef.init(this.formData.productSN)
      })
    },
    pickerData (type, selection, index) {
      this.pickerSelectType = type
      if (type === '主机编号') {
        this.selectList = this.dic.productSnMode
      } else if (type === '部件大类') {
        this.selectList = this.dic.materialClassMode
      } else if (type === '非换件动作') {
        this.selectList = selection
        this.actionIndex = index
      }
      this.showPicker = true
    },
    onConfirm (item, index) {
      if (this.pickerSelectType === '主机编号') {
        this.productSNlabel = item.label
        this.formData.productSN = item.value
        this.getMaterialMode()
      } else if (this.pickerSelectType === '部件大类') {
        this.materialClass = item.label
        this.formData.materialClassCode = item.value
      } else if (this.pickerSelectType === '非换件动作') {
        this.dataListSelections[this.actionIndex].selectCcActionName = item.label
        this.dataListSelections[this.actionIndex].selectCcAction = item.value
      }
      this.showPicker = false
    },
    getMaterialMode () {
      getMaterialClassName({
        soId: this.$route.query.id,
        productSN: this.formData.productSN,
        frequency: 323,
        pageIndex: 1,
        pageSize: 100
      }).then((res) => {
        this.dic.materialClassMode = (res.rows || []).map(item => {
          return {
            label: item.materialClassName,
            value: item.materialClassCode,
            productLineID: item.productLineID
          }
        })
      })
    },
    getSelectData () {
      getProductListInfoBySOID(this.$route.query.id).then(res => {
        this.dic.productSnMode = (res.rows || []).map(item => {
          return {
            label: item.productSN,
            value: item.productSN,
            prodLineID: item.prodLineID,
            machineClass: item.machineClass
          }
        })
        if (this.dic.productSnMode.length === 1) {
          this.productSNlabel = this.dic.productSnMode[0].value
          this.formData.productSN = this.dic.productSnMode[0].value
        }
        this.getMaterialMode()
      })
    },
    onSubmit () {
      if (this.dataListSelections.length <= 0) {
        return Notify({ type: 'danger', message: '请添加部件大类！' })
      }
      const obj = {
        projectNo: this.$store.state.app.projectNo,
        soId: this.$route.query.id,
        dataList: this.dataListSelections
      }
      let flag = false
      obj.dataList.forEach(el => {
        if (!el.field.value) {
          flag = true
        } else {
          el.selectCcAction = el.field.value
          const str = []
          el.selectCcAction.forEach(v => {
            str.push(el.selection.find(a => v === a.value).label)
          })
          el.action = str.join(',')
        }
      })
      if (flag) return Notify({ type: 'success', message: '请选择非换件动作！' })
      submitNotChangeRecList(obj).then(res => {
        Notify({ type: 'success', message: '操作成功' })
        this.$router.push({
          name: 'OrderDetail',
          params: {
            id: this.$route.query.id
          }
        })
      })
    },
    onFailed () {}
  }
}
</script>
<style lang="scss" scoped>
.operation-btn {
  margin: 10px;
  display: flex;
  justify-content: flex-end;
}
.operation-button{
  margin-left: 5px;
  width: 100px;
}
</style>
