<template>
  <div class="change-relation-ship">
    <el-dialog
      :title="values.addShip"
      :visible.sync="addShipDialog"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <p class="mb-20 color-AAA">{{values.codeTip}}</p>
<!--        <el-form-item-->
<!--          :label="values.codeTitle"-->
<!--          prop="code"-->
<!--          class="mb-20"-->
<!--        >-->
<!--          <el-input-->
<!--            v-model="ruleForm.code"-->
<!--            autocomplete="off"-->
<!--            :placeholder="values.pleaseEnter"-->
<!--          />-->
<!--        </el-form-item>-->
        <el-form-item
          :label="values.codeTitle"
          class="mb-20"
        >
          <el-select v-model="codeValue" placeholder="请选择">
            <el-option
              v-for="item in optionsCode"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-row class="mb-20">
          <el-col :span="12">
            <p class="mb-20">{{values.mainObject}}
              <span class="fw-bold color-AAA">{{MainObject}}</span>
            </p>
            <el-form-item
              prop="main"
              :error="mainError"
            >
              <el-input
                v-model="ruleForm.main"
                autocomplete="off"
                :placeholder="values.pleaseEnterCode"
                :disabled="disabled"

              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <p class="mb-20">{{values.affiliatedObject}}
              <span class="fw-bold color-AAA ">{{FromObject}}</span>
            </p>
            <el-form-item
              v-for="(item,index) in ruleForm.codeList"
              :key="index"
              :prop="`codeList.${index}.value`"
              :rules="rules.codeList"
              :error="fromError"
            >
              <el-input
                v-model="item.value"
                :placeholder="values.pleaseEnterCode"
                :disabled="disabled"

              />
              <el-button
                @click.prevent="removeCode(item)"
                icon="el-icon-circle-close"
                type="text"
                :disabled="disabled"

              />
            </el-form-item>
            <el-form-item>
              <el-button
                @click="addCode"
                icon="el-icon-circle-plus-outline"
                style="width: 220px;"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button
            type="primary"
            class="fr ml-20"
            @click="submitForm('ruleForm')"
          >{{values.add}}
          </el-button>
          <el-button
            class="fr"
            @click="addShipDialog = false"
          >{{values.cancel}}
          </el-button>
        </el-form-item>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {relAdd} from "../../../../api/relation/api";

  export default {
    name: "addRelationShip",
    props: ['values'],
    data() {
      var checkCode = (rule, value, callback) => {
        //TODO
        callback()
      }
      var checkMain = (rule, value, callback) => {
        //TODO
        callback()
      }
      var codeList = (rule, value, callback) => {
        //TODO
        console.log(value)
        callback()
      }
      return {
        mainError:'',
        fromError:'',
        addShipDialog: false,
        // disabled: true,
        optionsCode: [{
          value: 'cadId',
          label: 'CADID图纸编码'
        }, {
          value: 'name',
          label: '设备名称'
        }, {
          value: 'id',
          label: '设备ID'
        }, {
          value: 'localId',
          label: '本地编码'
        }, {
          value: 'localName',
          label: '本地名称'
        }],
        codeValue: '',
        MainObject: `（包括：${localStorage.getItem('MainObject')} )限制条件`,
        FromObject: `（包括：${localStorage.getItem('FromObject')} )限制条件`,
        ruleForm: {
          main: '',
          codeList: [{
            value: ''
          }]
        },
        rules: {
          code: [
            {required: true, message: '请输入对应识别编码', trigger: 'blur'},
            {validator: checkCode, trigger: 'blur'}
          ],
          main: [
            {required: true, message: '请输入对应识别编码', trigger: 'blur'},
            {validator: checkMain, trigger: 'blur'}
          ],
          codeList: [
            {required: true, message: '请输入对应识别编码', trigger: 'blur'},
            {validator: codeList, trigger: 'blur'}
          ]
        }
      }
    },
    computed:{
      disabled() {
        return this.codeValue === '' ? 'disabled':false
      },

    },
    watch:{},
    methods: {
      addCode() {
        this.ruleForm.codeList.push({
          value: '',
          key: Date.now()
        })
      },
      removeCode(item) {
        var index = this.ruleForm.codeList.indexOf(item)
        if (index !== -1) {
          this.ruleForm.codeList.splice(index, 1)
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          console.log(valid,'valid')
          if (valid) {
            let arr = []
            for(let item  of this.ruleForm.codeList) {
              if(item.value) {
                arr = arr.concat(item.value)
              }
            }
            let param = {
              FromContent:arr,
              MainContent:this.ruleForm.main,
              RelType:localStorage.getItem('RelManualType'),
              Type:this.codeValue
            }
            //清空添加value
            let that = this
            relAdd(param).then(res => {
              if (res.data.Result === "failure") {
                if(res.data.ErrorType == 1) {
                  // this.mainError = res.data.Message
                  this.$nextTick(()=>{this.mainError = res.data.Message})
                } else if(res.data.ErrorType == 2) {
                  this.$nextTick(()=>{this.fromError = res.data.Message})
                } else {
                  this.$message.error(res.data.Message);
                }

              } else if (res.data.Result === "success") {
                this.$message.success(res.data.Message);
                this.$emit('update')
                that.addShipDialog = false
                that.codeValue = ''
                that.ruleForm.codeList = [{value:''}]
                that.ruleForm.main = ''
              }
            })

          } else {
            console.log('error')
            return false
          }
        })
      },

    }
  }
</script>

<style scoped lang="less">
  @color-text: #AAA;
  .change-relation-ship {
    /deep/ .el-form-item__label {
      width: auto !important;
    }

    .fr {
      float: right;
    }

    .mb-20 {
      margin-bottom: 20px;
    }

    .ml-20 {
      margin-left: 20px;
    }

    .color-AAA {
      color: @color-text
    }

    .fw-bold {
      font-weight: bold;
    }
  }
</style>
