<template>
  <!-- 新增 -->
  <div id="add">
    <a-form-model
      ref="ruleForm"
      :model="mindData"
      v-bind="formItemLayout"
      :rules="rules"
    >
      <a-row>
        <a-col v-for="item in changesFrom" :key="item.id" :span="12">
          <a-form-model-item
            class="item"
            htmlFor=""
            v-if="judgeFrom(item)==='text'"
            :label=" item.attrName"
            :prop="item.attrCode">

            <a-input
              v-model="mindData[item.attrCode]"
              placeholder="请输入"
            />
          </a-form-model-item>
          <a-form-model-item
            class="item"
            v-if="judgeFrom(item)==='date'"
            :label=" item.attrName"
            :prop="item.attrCode">
            <a-date-picker v-model="mindData[item.attrCode]" @change="onChange" />
          </a-form-model-item>
          <a-form-model-item
            class="item"
            v-if="judgeFrom(item)==='time'"
            :label=" item.attrName"
            :prop="item.attrCode">
            <a-time-picker use12-hours v-model="mindData[item.attrCode]" />
          </a-form-model-item>
          <a-form-model-item
            class="item"
            v-if="judgeFrom(item)==='down'"
            :label=" item.attrName"
            :prop="item.attrCode">

            <a-select @change="handleChange" v-model="mindData[item.attrCode]" style="width: 120px" >
              <a-select-option v-for="items in item.sourceType==='0'?item.attCustdictInfo:item.citeModelAttrDict" :key="items" :value="items" >
                {{ items }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item
            class="item"
            v-if="judgeFrom(item)==='1'"
            :label=" item.attrName"
            :prop="item.attrCode">
            <a-input
              disabled
              v-model="mindData[item.attrCode]"
              placeholder="该属性为自动编码生成"
            />
          </a-form-model-item>
        </a-col>

      </a-row>

      <a-form-model-item :wrapper-col="{ span: 24, offset: 2 }">
        <div class="but-box">
          <a-button v-if="isBack" class="closeBtn" type="add" @click="onBack">
            上一步
          </a-button>

          <a-button class="closeBtn" type="add" @click="onVerify">
            唯一性校验
          </a-button>

          <a-button class="closeBtn" type="add" @click="onSave">
            仅保存
          </a-button>

          <a-button class="submitBtn" type="add" @click="onSubmit">
            提交审批
          </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>

  </div>

</template>

<script type="text/ecmascript-6">
import { addMasterData, editMasterData, uniquenessCheck, mdDataBatchSub, getAttrByModelId } from '@/api/masterDataManger/addingMasterData'
export default {
  data: () => ({
    formItemLayout: {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 }
    },
    showState: true,
    rules: {
        age: { required: true, message: '此内容为必填项', trigger: 'blur' }
    },
    rules2: {
    },
    fileList: [],
    uploading: false,
    changesFrom: [],
    mindData: {},
    dataTemplate: {}
  }),
  props: {
    selectedRows: {
      type: Object,
      default() {
        return {}
      }
    },
    isBack: {
      type: Boolean,
      default() {
        return false
      }
    },
    changeType: {
       type: String,
      default() {
        return ''
      }
    },
    modelId: {
       type: String,
      default() {
        return ''
      }
    },
    modelCode: {
       type: String,
      default() {
        return ''
      }
    },
    recordId: {
       type: String,
        default() {
        return ''
      }
    },
    id: {
      type: String,
      default() {
        return ''
      }
    },
    ischange: {
      type: String,
      default() {
        return ''
      }
    },
    addChange: {
      type: String,
      default() {
        return ''
      }
    }

  },
  mounted() {
    if (Object.keys(this.mindData).length !== 0) {
      this.uploading = true
    }
  },
  created() {
   if (this.selectedRows.logJson) {
      this.mindData = JSON.parse(JSON.parse(JSON.stringify(this.selectedRows.logJson)))
   } else if (this.changeType === 'change') {
     this.mindData = JSON.parse(JSON.stringify(this.selectedRows))
   }
    this.getAllAttrByModelId()
    this.addReset()
  },
  methods: {
    // 判断字符串的长度
    judgeLength(data) {
      const arr = data.split('')
      if (arr.length > 8) {
        return 24
      } else {
        return 12
      }
    },
     handleChange(value) {
      console.log(`selected ${value}`)
    },
    // 生成验证规则
    getRules(data) {
      const obj = {}
      data.forEach(item => {
        if (item.ifRequired === '0') {
         obj[item.attrCode] = { required: true, message: '此内容为必填项', trigger: 'blur' }
        }
      })
      this.rules = obj
    },
    // 判断表单模型
    judgeFrom(data) {
      if (data.codingIstrue === '0') {
        return '1'
      } else {
        if (data.ctrlsType === '0') {
          return 'text'
        } else if (data.ctrlsType === '1') {
          return 'down'
        } else if (data.ctrlsType === '2') {
          return 'date'
        } else if (data.ctrlsType === '3') {
          return 'time'
        }
      }
    },
    // 获取模型所有属性接口
    getAllAttrByModelId() {
      getAttrByModelId({ modelId: this.modelId }).then(res => {
        this.changesFrom = res.data
        // this.dataProcessing(res.data)
        this.getRules(res.data)
      })
    },
    onChange(date, dateString) {
      console.log(date, dateString)
    },
    // 数据处理
    // dataProcessing(data) {
    //   data.forEach(item => {
    //     const obj = {}
    //     obj.attr_code = item.attrCode
    //     obj.attr_name = item.attrName
    //     obj.value = ''
    //     this.dataTemplate.push(obj)
    //   })
    // },
    // 提交审批
    onSubmit(e) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // const testArry = this.dataTemplate
          // const objs = Object.keys(this.mindData)
          //     testArry.map(item1 => {
          //     return objs.forEach(item2 => {
          //     if (item1.attr_code === item2) {
          //         item1.value = this.mindData[item2]
          //     }
          //   })
          //  })
      if (this.ischange === 'add') {
      const data = []
      data.push({
        logJson: JSON.stringify(this.mindData),
        modelId: this.modelId,
        modelCode: this.modelCode,
        operationType: '0'
      })
      mdDataBatchSub(data).then((res) => {
         this.$emit('getAddList')
        this.$emit('clearSelectedRows')
      })
      } else if (this.changeType === 'change') {
        const data = []
        data.push({
        logJson: JSON.stringify(this.mindData),
        modelId: this.modelId,
        modelCode: this.modelCode,
        operationType: '1',
        recordId: this.recordId,
        id: this.id ? this.id : '123456'
      })
      mdDataBatchSub(data).then((res) => {
           this.$emit('getChangeList')
           this.$emit('onClose')
      })
      } else if (this.addChange === 'addchange') {
      const data = []
      data.push({
        id: this.id,
        logJson: JSON.stringify(this.mindData),
        modelId: this.modelId,
        operationType: '0',
        modelCode: this.modelCode,
        recordId: this.recordId
      })
      mdDataBatchSub(data).then((res) => {
        this.$emit('getAddList')
        this.$emit('clearSelectedRows')
      })
      } else {
        const data = []
        data.push({
        id: this.id,
        logJson: JSON.stringify(this.mindData),
        modelId: this.modelId,
        operationType: '1',
        modelCode: this.modelCode,
        recordId: this.recordId
      })
        mdDataBatchSub(data).then((res) => {
        this.$emit('clearSelectedRows')
        this.$emit('getShowAdd', false)
        this.$emit('getChangeList')
      })
      }
      this.$emit('clearSelectedRows')
      this.showState = false
      this.$emit('getShowState', this.showState)
        } else {
          return false
        }
      })
    },
    // 唯一性校验
    onVerify(e) {
      this.$refs.ruleForm.validate(valid => {
      if (valid) {
        if (this.ischange === 'add') {
        const data = {
        logJson: JSON.stringify(this.mindData),
        modelId: this.modelId
       }
        uniquenessCheck(data).then((res) => {
        this.$notification.open({
        message: res.msg,
        description: '可以使用',
        icon: <a-icon type="smile" style="color: #108ee9" />
        })
        // this.$parent.getAddList()
       })
       } else {
          const data = {
          id: this.id ? this.id : '123456',
          recordId: this.recordId,
          logJson: JSON.stringify(this.mindData),
          modelId: this.modelId
          }
        uniquenessCheck(data).then((res) => {
        this.$notification.open({
        message: res.msg,
        description: '可以使用',
        icon: <a-icon type="smile" style="color: #108ee9" />
        })
        // this.$parent.getAddList()
       })
       }
      }
      })
    },
    // 仅保存
    onSave() {
       this.$refs.ruleForm.validate(valid => {
      if (valid) {
      // const testArry = this.dataTemplate
      // const objs = Object.keys(this.mindData)
      // testArry.map(item1 => {
      //   return objs.forEach(item2 => {
      //     if (item1.attr_code === item2) {
      //         item1.value = this.mindData[item2]
      //     }
      //   })
      // })
      if (this.ischange === 'add') {
      const data = {
        logJson: JSON.stringify(this.mindData),
        modelId: this.modelId,
        modelCode: this.modelCode,
        operationType: '0',
        processStatus: '0'
      }
            console.log('仅保存22', data)

      addMasterData(data).then((res) => {
        this.$emit('getAddList')
      })
      } else if (this.changeType === 'change') {
        const data = {
        logJson: JSON.stringify(this.mindData),
        modelId: this.modelId,
        modelCode: this.modelCode,
        operationType: '1',
        processStatus: '0',
        recordId: this.recordId
      }
      addMasterData(data).then((res) => {
        if (res.code === 200) {
          this.$emit('onClose')
          this.$emit('getChangeList')
         }
      })
      } else if (this.addChange === 'addchange') {
        console.log(`3333`, this.mindData)
        const data = {
        id: this.id,
        logJson: JSON.stringify(this.mindData),
        modelId: this.modelId
      }
      editMasterData(data).then((res) => {
        this.$emit('getAddList')
        this.$emit('getChangeList')
        this.$emit('clearSelectedRows')
      })
      } else {
        const data = {
        id: this.id,
        logJson: JSON.stringify(this.mindData),
        modelId: this.modelId
      }
      editMasterData(data).then((res) => {
        this.$emit('getAddList')
        this.$emit('getChangeList')
        this.$emit('clearSelectedRows')
      })
      }
      this.$emit('getAddList')
      this.$emit('clearSelectedRows')
      this.showState = false
      this.$emit('getShowState', this.showState)
      this.$emit('getShowAdd', this.showState)
        } else {
          return false
        }
      })
    },
    onBack() {
      this.$emit('onBack')
    },
    // 新增重置
    addReset() {
      if (this.ischange === 'add') {
       this.mindData = {}
      }
    }
  }
}
</script>

<style lang="less" scoped>
#add {
  box-sizing: border-box;
  padding: 25px 53px;
  .ant-form-item-with-help{
    margin-bottom: 0px;
  }
  .ant-col{
    height: 70px;
  }
  .ant-form-item-label{
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
  }
  .but-box{
    width: 88%;
    display: flex;
    justify-content: center;
  }
  .submitBtn, .closeBtn{
    width: 18%;
    margin: 0 10px;
  }
}
</style>
