<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      v-dialogDrag
      width="1000px"
      @close="close"
      @keyup.enter.native="doSubmit"
      :visible.sync="visible">
      <el-form size="middle" :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
                @submit.native.prevent>
        <el-row  :gutter="30">
          <el-col :span="12">
            <el-form-item label="分组名称" prop="groupName"
                          :rules="[{required: true, message: '分组名称不能为空', trigger: 'blur'}
                 ]">
              <el-input v-model="inputForm.groupName" placeholder="请填写分组名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="适用序列" prop="sequenceIdList" :rules="[
            {required: true, message: '适用序列不能为空', trigger: 'blur'}]">
              <el-select v-model="inputForm.sequenceIdList" style="width: 100%" multiple placeholder="请选择">
                <el-option
                  v-for="sequence in sequenceList"
                  :key="sequence.id"
                  :label="sequence.name"
                  :value="sequence.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="useFlag"
                          :rules="[{required: true, message: '状态不能为空', trigger: 'blur'}
                 ]">
              <div>
                <el-radio style="margin-right: 0px" v-model="inputForm.useFlag" label="1" size="mini" border>启用</el-radio>
                <el-radio v-model="inputForm.useFlag" label="2" size="mini" border>禁用</el-radio>
              </div>

            </el-form-item>
          </el-col>


        </el-row>
        <el-divider content-position="left"><i class="el-icon-document"></i> 职级信息</el-divider>
        <vxe-toolbar style="margin-top: 20px">
          <template #buttons>
            <el-select size="small" @change="changeIsInclude" v-model="isInclude" style="margin-right: 20px">
              <el-option :value="false" label="不包含子职级"></el-option>
              <el-option :value="true" label="包含子职级"></el-option>
            </el-select>
            <el-button type="primary" size="small" icon="el-icon-plus" @click="addLine()">添加职级</el-button>
          </template>
        </vxe-toolbar>
          <el-table ref="inputTable"  :data="inputForm.rankList" >
            <el-table-column label="职级"  >
              <template slot-scope="scope">
                <el-form-item  :prop="'rankList.'+scope.$index+'.name'"  :rules="[{required: true, message: '职级不能为空', trigger: 'blur'}]">
                  <el-input v-model="scope.row.name" placeholder="请输入职级" clearable></el-input>
                </el-form-item>
                  <el-table v-if="isInclude == true" ref="inputTable2" :show-header="false"  :data="inputForm.rankList[scope.$index].rankListChildren" >
                    <el-table-column label="职级" >
                      <template slot-scope="scope1">
                        <el-form-item :prop="'rankList['+scope.$index+'].rankListChildren['+scope1.$index+'].name'" :rules="[{required: true, message: '子职级不能为空', trigger: 'blur'}]">
                          <el-input v-model="scope1.row.name" placeholder="请输入子职级" clearable></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column width="80" prop="" label="操作">
                      <template scope="scope1">
                        <el-form-item>
                          <el-button v-if="inputForm.rankList[scope.$index].rankListChildren.length !== 1" size="small" type="danger" @click="delLine(scope.$index,scope1.$index)">删除</el-button>
                        </el-form-item>
                      </template>
                    </el-table-column>
                  </el-table>

              </template>
            </el-table-column>
            <el-table-column width="150" prop="" label="操作">
              <template scope="scope">
                <div>
                  <el-form-item >
                  <el-button v-if="isInclude == true" size="small" type="primary" @click="addLine(scope.$index)">增加</el-button>
                  <el-button size="small" type="danger" @click="delLine(scope.$index,null)">删除</el-button>
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
          </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="close()" icon="el-icon-circle-close">关闭</el-button>
      <el-button size="small" type="primary" v-if="method != 'view'" @click="doSubmit()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
  import RankService from '@/api/rank/RankService'
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        inputForm: {
          groupName: '',
          sequenceIdList: [],
          useFlag: '',
          rankList: []
        },
        sequenceList: [],
        isInclude: false
      }
    },
    rankService: null,
    created () {
      this.rankService = new RankService()
    },
    mounted () {
    },
    methods: {
      init (method, id) {
        this.isInclude = false
        this.method = method
        this.inputForm = {
          groupName: '',
          sequenceIdList: [],
          useFlag: '',
          rankList: []
        }
        this.inputForm.id = id
        if (method === 'add') {
          this.title = `新建职级`
        } else if (method === 'edit') {
          this.title = '修改职级'
        } else if (method === 'view') {
          this.title = '查看职级'
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields()
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.loading = true
            this.rankService.queryById(this.inputForm.id).then(({data}) => {
              this.inputForm = this.recover(this.inputForm, data)
              this.inputForm = JSON.parse(JSON.stringify(this.inputForm))
              this.inputForm.rankList.forEach(item => {
                if (item.rankListChildren.length !== 0) {
                  this.isInclude = true
                }
              })
              this.loading = false
            })
          }
        })
      },
      // 表单提交
      doSubmit () {
        console.log('inputForm', this.inputForm)
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.rankService.save(this.inputForm).then(({data}) => {
              this.close()
              this.$message.success(data)
              this.$emit('refreshDataList')
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          }
        })
      },
      close () {
        this.$refs.inputForm.resetFields()
        this.visible = false
      },
      getAllSequence () {
        this.rankService.queryAllSequence().then(({data}) => {
          this.sequenceList = JSON.parse(JSON.stringify(data))
        })
      },
      delLine (index, childIndex) {
        if (childIndex !== null && childIndex !== undefined && childIndex !== '') {
          this.inputForm.rankList[index].rankListChildren.splice(childIndex, 1)
        } else {
          this.inputForm.rankList.splice(index, 1)
        }
      },
      addLine (rowIndex) {
        const newLine = {
          name: ''
        }
        if (rowIndex !== null && rowIndex !== undefined && rowIndex !== '') {
          this.inputForm.rankList[rowIndex].rankListChildren.push(newLine)
        } else {
          this.inputForm.rankList.push(newLine)
          this.$set(this.inputForm.rankList[this.inputForm.rankList.length - 1], 'rankListChildren', [{}])
        }
      },
      changeIsInclude () {
        if (this.isInclude === false) {
          this.inputForm.rankList.forEach(item => {
            item.rankListChildren = []
          })
        } else {
          this.inputForm.rankList.forEach(item => {
            item.rankListChildren = [{}]
          })
        }
      }
    }
  }
</script>

<style>
  .el-table .cell .el-form-item {
    margin-bottom: 2px
  }
  .el-divider__text {
    font-size: 16px;
    font-weight: bold;
  }
  .avatar{
    height: 100px;
  }
  .el-table__body .el-table__row .el-table__cell{
    padding: 1px;
  }
</style>
