<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      v-dialogDrag
      width="1200px"
      @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>
        <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.rankSequenceDTOList" >
          <el-table-column label="序列"  >
            <template slot-scope="scope">
              <el-form-item  :prop="'rankSequenceDTOList.'+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.rankSequenceDTOList[scope.$index].rankSequenceDTOList" >
                <el-table-column label="职级" >
                  <template slot-scope="scope1">
                    <el-form-item :prop="'rankSequenceDTOList['+scope.$index+'].rankSequenceDTOList['+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.rankSequenceDTOList[scope.$index].rankSequenceDTOList.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="250" prop="" label="适用范围">
            <template scope="scope">
              <el-form-item :prop="'rankSequenceDTOList.'+scope.$index+'.officeIdList'" :rules="[]">
                <el-select v-model="inputForm.rankSequenceDTOList[scope.$index].officeIdList" style="width:100%" multiple placeholder="请选择">
                  <el-option
                    v-for="office in firmList"
                    :key="office.id"
                    :label="office.name"
                    :value="office.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column width="200" prop="" label="状态">
            <template scope="scope">
              <el-form-item :prop="'rankSequenceDTOList.'+scope.$index+'.useFlag'"
                            :rules="[{required: true, message: '状态不能为空', trigger: 'blur'}
                 ]">
                <el-radio v-model="inputForm.rankSequenceDTOList[scope.$index].useFlag" label="1" size="mini" style="margin-right: 0px" border>启用</el-radio>
                <el-radio v-model="inputForm.rankSequenceDTOList[scope.$index].useFlag" label="2" size="mini" border>禁用</el-radio>
              </el-form-item>
            </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 RankSequenceService from '@/api/rank/RankSequenceService'
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        inputForm: {
          rankSequenceDTOList: [],
          change: false
        },
        isInclude: false,
        firmList: [],
        startInclude: false
      }
    },
    rankSequenceService: null,
    created () {
      this.rankSequenceService = new RankSequenceService()
    },
    mounted () {
    },
    methods: {
      async init () {
        this.title = '编辑序列'
        this.visible = true
        this.loading = true
        this.isInclude = false
        await this.rankSequenceService.getList().then(({data}) => {
          this.inputForm.rankSequenceDTOList = data
          this.inputForm.rankSequenceDTOList.forEach(item => {
            if (item.rankSequenceDTOList.length !== 0) {
              this.isInclude = true
            }
          })
          this.loading = false
        })
        this.startInclude = this.isInclude
        console.log(this.startInclude, this.isInclude)
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            if (this.startInclude === this.isInclude) {
              this.inputForm.change = false
            } else {
              this.inputForm.change = true
            }
            console.log(this.startInclude, this.isInclude)
            this.rankSequenceService.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
      },
      getAllFirm () {
        this.rankSequenceService.queryAllFirm().then(({data}) => {
          this.firmList = JSON.parse(JSON.stringify(data))
        })
      },
      changeIsInclude () {
        if (this.isInclude === false) {
          this.inputForm.rankSequenceDTOList.forEach(item => {
            item.rankSequenceDTOList = []
          })
        } else {
          this.inputForm.rankSequenceDTOList.forEach(item => {
            item.rankSequenceDTOList = [{}]
          })
        }
      },
      delLine (index, childIndex) {
        if (childIndex !== null && childIndex !== undefined && childIndex !== '') {
          this.inputForm.rankSequenceDTOList[index].rankSequenceDTOList.splice(childIndex, 1)
        } else {
          this.inputForm.rankSequenceDTOList.splice(index, 1)
        }
      },
      addLine (rowIndex) {
        const newLine = {}
        if (rowIndex !== null && rowIndex !== undefined && rowIndex !== '') {
          this.inputForm.rankSequenceDTOList[rowIndex].rankSequenceDTOList.push(newLine)
        } else {
          this.inputForm.rankSequenceDTOList.push(newLine)
          if (this.isInclude === true) {
            this.$set(this.inputForm.rankSequenceDTOList[this.inputForm.rankSequenceDTOList.length - 1], 'rankSequenceDTOList', [{}])
          }
        }
      }
    }
  }
</script>


<style>
  .el-table__row .el-table__cell .el-form-item__error{
    top: 55%;
    margin-left: 2%;
  }

</style>
