<!--author: gengchao-->
<template>
<div>
    <el-dialog :title="dialogObj.title" :visible.sync="dialogObj.dialogVisible" :close-on-click-modal="false" :size='dialogObj.size' v-popupdra-directive="{'show': dialogObj.dialogVisible}">

       <div v-if= "dialogObj.type == 'dictionaryMaintenance'">
            <el-form :model="dialogObj.data.form" label-width="100px" ref="query" :rules="dictionaryrules">
              <el-row>
                <el-col :span='24'>
                  <el-col :span='12'>
                    <el-form-item  prop="typeCode" label="类型" >
                        <el-input v-model="dialogObj.data.form.typeCode" auto-complete="off" class="inputInline" ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='12' >
                    <el-form-item prop="typeName" label="类型名称">
                        <el-input v-model="dialogObj.data.form.typeName" auto-complete="off" class="inputInline" ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span='24'>
                  <el-col :span='12' >
                    <el-form-item prop="userConf" label="用户定义">
                      <el-radio-group v-model="dialogObj.data.form.userConf">
                        <el-radio-button label="是"></el-radio-button>
                        <el-radio-button label="否"></el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span='12' >
                    <el-form-item prop="status" label="状态">
                      <el-radio-group v-model="dialogObj.data.form.status">
                        <el-radio-button label="有效"></el-radio-button>
                        <el-radio-button label="停用"></el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-row>
            </el-form>
         <thead>
         <tr>
           <th v-for="header in headers" style="text-align: center;width:22%" :id="header.id">{{ header.text }}</th>
           <td align="center" style="cursor: pointer;width:20%" @click="plus"><div class="fa fa-plus"></div></td>
         </tr>
         </thead>
         <tbody>
         <tr  v-for="(value,key) in dialogObj.data.form.detailEntities" :id="key">
           <td style="display: none;">{{key+1}}</td>
           <td style="width:22%"><input type="text" name="codeName" class="form-control" v-model="value.codeName"/></td>
           <td style="width:22%"><input type="text" name="codeValue" class="form-control" v-model="value.codeValue"/></td>
           <td style="width:22%">
             <!--<input type="text" name="isDefault"  class="form-control"  v-model="value.isDefault"/>-->
             <select v-model="value.isDefault" style="width:100%;" class="form-control" @change="checkIsDefault(value)">
               <option value="Y">是</option>
               <option value="N">否</option>
             </select>
           </td>
           <td style="width:22%"><input type="text" name="remarks"  class="form-control"  v-model="value.remarks"/></td>
           <td align="center" style="cursor: pointer;width:20%" @click="deletes(key)"><div class="fa fa-minus"></div></td>
         </tr>
         </tbody>
         <br />
            <div slot="footer" class="dialog-footer" style="text-align: right">
                <el-button @click="resetForm('query')">取 消</el-button>
                <el-button type="primary" @click="submitForm('query')">确 定</el-button>
            </div>
       </div>

      <div v-if= "dialogObj.type == 'queryCondition'">
        <el-form :model="dialogObj.data.form" label-width="100px" ref="query" :rules="queryrules">
           <el-row>
             <el-col :span='24'>
               <el-col :span='12'>
                 <el-form-item  prop="typeCode" label="类型" >
                   <el-input v-model="dialogObj.data.form.typeCode" auto-complete="off" class="inputInline" ></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span='12'>
                 <el-form-item  prop="typeName" label="类型名称" >
                   <el-input v-model="dialogObj.data.form.typeName" auto-complete="off" class="inputInline" ></el-input>
                 </el-form-item>
               </el-col>
             </el-col>
           </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right">
          <el-button @click="resetForm('query')">取 消</el-button>
          <el-button type="primary" @click="submitForm('query')">确 定</el-button>
        </div>
      </div>

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

<script>
  export default {
    props: ['dialogObj'],
    data () {
      return {
        dialogVisible: false,
        formLabelWidth: '120px',
        filmode: 0,  // 过滤方式；0:代表本地过滤，1：服务器过滤
        fileName: ['value'],
        filType: 0, // 过滤类型；0：单列数据过滤，1：整条数据过滤
        keyup: true, // 输入筛选；true：之前展示；false：之后展示
        dictionaryrules: {
          typeCode: [
            {required: true, message: '请输入类型', trigger: 'blur'}
          ],
          typeName: [
            {required: true, message: '请输入类型名称', trigger: 'blur'}
          ]
        },
        queryrules: {
          typeCode: [
            {required: false, message: '请输入类型', trigger: 'blur'}
          ],
          typeName: [
            {required: false, message: '请输入类型名称', trigger: 'blur'}
          ]
        },
        headers: [
          {id: 0, text: '名称'},
          {id: 1, text: '字典值'},
          {id: 2, text: '默认值'},
          {id: 3, text: '备注'}
        ]
      }
    },
    methods: {
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log('dialogObj.data.form.detailEntities', this.dialogObj.data.form.detailEntities)
            if (this.dialogObj.type === 'dictionaryMaintenance') {
              this.$emit('save', this.dialogObj)
            }
            setTimeout(() => {
              this.$refs[formName].resetFields()
            }, 1000)
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
        this.$emit('confirmBack', false)
        this.dialogObj.dialogVisible = false
      },
      confirm () {
        this.dialogObj.dialogVisible = false
        this.$emit('confirmBack', this.dialogObj)
      },
      cancel () {
        this.dialogObj.dialogVisible = false
      },
      plus () {
        let temp = {codeName: '', codeValue: '', isDefault: 'N', remarks: '', isSystem: 'N', modificationNum: '0'}
        this.dialogObj.data.form.detailEntities.push(temp)
      },
      deletes (key) {
        if (key !== 0) {
          this.dialogObj.data.form.detailEntities.splice(key, 1)
        }
      },
      checkIsDefault (value) {
        var isDefault = value.isDefault
        if (isDefault === 'Y') {
          var count = 0
          for (var i = 0; i < this.dialogObj.data.form.detailEntities.length; i++) {
            if (this.dialogObj.data.form.detailEntities[i].isDefault === 'Y') {
              count += 1
            }
          }
          if (count > 1) {
            this.$message({ type: 'info', message: '只能有唯一默认值!' })
            value.isDefault = 'N'
          }
        }
      }
    },
    mounted () {
      // 请求aja
    },
    updated () {
      if (this.dialogObj.title === '新增字典数据') {
      } else if (this.dialogObj.title === '修改字典数据') {
        /* TODO 根据 部门或者 公司 的id 找到对应的 名称 */
      }
    },
    components: {
    },
    computed: {
      size: function () {
        if (this.dialogObj.type === 'dictionaryMaintenance') {
          return 'tiny'
        }
        return 'small'
      }
    }
  }
</script>

<style scoped>
</style>
