<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">（包括：XXXX类型，XXXX类型）限制条件</span>
            </p>
            <el-form-item
              prop="main"
            >
              <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 ">（包括：XXXX类型，XXXX类型）限制条件</span>
            </p>
            <el-form-item
              v-for="(item,index) in ruleForm.codeList"
              :key="index"
              :prop="`codeList.${index}.value`"
              :rules="rules.codeList"
            >
              <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>
  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
        callback()
      }
      return {
        addShipDialog: false,
        // disabled: true,
        optionsCode: [{
          value: 'cadId',
          label: 'CADID图纸编码'
        }, {
          value: 'name',
          label: '设备名称'
        }, {
          value: 'id',
          label: '设备ID'
        }, {
          value: 'localId',
          label: '本地编码'
        }, {
          value: 'localName',
          label: '本地名称'
        }],
        codeValue: '',
        ruleForm: {
          code: '',
          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
      },

    },
    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 => {
          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
            }
            this.$emit('addShip',param)
            //清空添加value


          } 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>
