<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
      <el-form size="middle" :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
                @submit.native.prevent>
        <el-row  :gutter="15">
          <el-divider content-position="left"><i class="el-icon-document"></i> 人员信息</el-divider>
          <el-col :span="12">
            <el-form-item label="姓名" prop="rosterBaseDTO.name"
                          :rules="[]"
            >
              <el-card shadow="always">
                {{inputForm.rosterBaseDTO.name?inputForm.rosterBaseDTO.name:'--'}}
              </el-card>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工号" prop="rosterBaseDTO.jobNo"
                          :rules="[]"
            >
              <el-card shadow="always">
                {{inputForm.rosterBaseDTO.jobNo?inputForm.rosterBaseDTO.jobNo:'--'}}
              </el-card>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="rosterBaseDTO.mobile"
                          :rules="[]"
            >
              <el-card shadow="always">
                {{inputForm.rosterBaseDTO.mobile?inputForm.rosterBaseDTO.mobile:'--'}}
              </el-card>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门" prop="soName"
                          :rules="[]"
            >
              <el-card shadow="always">
                {{inputForm.soName?inputForm.soName:'--'}}
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
<!--        <el-row  :gutter="15">-->
<!--          <el-divider content-position="left"><i class="el-icon-document"></i> 交接内容</el-divider>-->
<!--          <el-col :span="24" v-for="item in contentList">-->
<!--            <el-form-item>-->
<!--            <el-card shadow="always">-->
<!--              {{item}}-->
<!--            </el-card>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
        <el-row  :gutter="15">
          <el-divider content-position="left"><i class="el-icon-document"></i> 离职交接</el-divider>
          <el-col :span="24" v-if="false">
            <el-form-item>
              <el-button @click="addLine()" type="primary" icon="el-icon-plus">添加分类</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item>
              <el-table ref="inputTable" :key="tableKey"  :data="inputForm.handoverDTOList" >
                <el-table-column label="分类"  >
                  <template slot-scope="scope">
                    <el-form-item  :prop="'handoverDTOList.'+scope.$index+'.type'"  :rules="[{required: true, message: '分类不能为空', trigger: 'blur'}]">
<!--                      {{'交接分类'+(scope.$index+1)+'：'}}-->
                      <el-input :readonly="true" v-model="scope.row.type" placeholder="请输入交接分类" clearable></el-input>
                    </el-form-item>
                    <el-table :ref="'inputTable'+scope.$index" :show-header="true"  :data="inputForm.handoverDTOList[scope.$index].handoverDTOList" >
                      <el-table-column label="交接内容" >
                        <template slot-scope="scope1">
                          <el-form-item :prop="'handoverDTOList['+scope.$index+'].handoverDTOList['+scope1.$index+'].content'" :rules="[{required: true, message: '交接内容不能为空', trigger: 'blur'}]">
                            <el-input :readonly="true" v-model="scope1.row.content" placeholder="请输入交接内容" clearable></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column width="80" prop="" label="操作" v-if="false">
                        <template scope="scope1">
                          <el-form-item>
                            <el-button v-if="inputForm.handoverDTOList[scope.$index].handoverDTOList.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="300" label="会签人员">
                  <template scope="scope">
                    <el-form-item :prop="'handoverDTOList.'+scope.$index+'.rosterId'" :rules="[
                    {required: true, message: '人员姓名不能为空', trigger: 'blur'},{required: true, message: '人员姓名不能为空', trigger: 'change'}]">
<!--                      <RosterSelectForm :limit='1' :value="inputForm.handoverDTOList[scope.$index].rosterId" @getValue='(value) => {$set(inputForm.handoverDTOList[scope.$index],"rosterId", value)}'></RosterSelectForm>-->
                      <UserSelect :disabled="formReadOnly" :limit='1' :value="inputForm.handoverDTOList[scope.$index].rosterId" @getValue='(value) => {$set(inputForm.handoverDTOList[scope.$index],"rosterId", value)}'></UserSelect>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column width="150" label="操作" v-if="false">
                  <template scope="scope">
                    <div>
                      <el-form-item >
                        <el-button 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-item>
          </el-col>
        </el-row>
<!--        <el-row>-->
<!--          <el-divider content-position="left"><i class="el-icon-document"></i> 会签对象</el-divider>-->
<!--          <el-col :span="24">-->
<!--            <el-form-item label="选择会签对象" prop="approvalHandoverId"-->
<!--                          :rules="[{required: true, message: '会签对象不能为空', trigger: 'blur'},{required: true, message: '会签对象不能为空', trigger: 'change'}]"-->
<!--            >-->
<!--              <RosterSelectForm :limit='1' :value="inputForm.approvalHandoverId" @getValue='(value) => {inputForm.approvalHandoverId=value}'></RosterSelectForm>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
      </el-form>

  </div>
</template>

<script>
  import DimissionService from '@/api/changes/dimission/DimissionService'
  import RosterService from '@/api/roster/RosterService'
  import RosterSelectForm from '@/views/common/RosterSelectForm'
  import UserSelect from '@/components/userSelect'
  import DimissionHandoverService from '@/api/changes/dimission/DimissionHandoverService'
  export default {
    props: {
      businessId: {
        type: String,
        default: ''
      },
      formReadOnly: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        inputForm: {
          id: '',
          rosterId: '',
          name: '',
          approvalHandoverId: '',
          rosterBaseDTO: {
            jobNo: '',
            mobile: ''
          },
          cdId: '',
          handoverDTOList: []
        },
        tableKey: 0
      }
    },
    watch: {
      'businessId': {
        handler (newVal) {
          if (this.businessId) {
            if (this.businessId !== 'false') {
              this.init('handover', this.businessId)
            }
          } else {
            this.$nextTick(() => {
              this.$refs.inputForm.resetFields()
            })
          }
        },
        immediate: true,
        deep: false
      }
    },
    dimissionService: null,
    rosterService: null,
    dimissionHandoverService: null,
    created () {
      this.dimissionService = new DimissionService()
      this.rosterService = new RosterService()
      this.dimissionHandoverService = new DimissionHandoverService()
    },
    components: {
      RosterSelectForm,
      UserSelect
    },
    methods: {
      init (method, id) {
        this.method = method
        this.inputForm = {
          id: '',
          rosterId: '',
          name: '',
          approvalHandoverId: '',
          rosterBaseDTO: {
            jobNo: '',
            mobile: ''
          },
          cdId: '',
          handoverDTOList: []
        }
        this.inputForm.id = id
        if (method === 'handover') {
          this.title = '发起工作交接审批'
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields()
          this.loading = true
          this.dimissionService.queryById(this.inputForm.id).then(({data}) => {
            this.inputForm = this.recover(this.inputForm, data)
            this.inputForm = JSON.parse(JSON.stringify(this.inputForm))
            this.dimissionHandoverService.queryById(this.inputForm.id).then(({data}) => {
              if (!this.commonJS.isEmpty(data)) {
                this.inputForm.handoverDTOList = data
                this.inputForm.handoverDTOList = JSON.parse(JSON.stringify(this.inputForm.handoverDTOList))
                this.inputForm.handoverDTOList.forEach(item => {
                  if (this.commonJS.isEmpty(item.rosterId)) {
                    item.rosterId = ''
                  }
                })
                this.tableKey++
              } else {
                this.dimissionHandoverService.queryInitialize().then(({data}) => {
                  this.inputForm.handoverDTOList = data
                  this.inputForm.handoverDTOList = JSON.parse(JSON.stringify(this.inputForm.handoverDTOList))
                  this.inputForm.handoverDTOList.forEach(item => {
                    if (this.commonJS.isEmpty(item.rosterId)) {
                      item.rosterId = ''
                    }
                  })
                  this.tableKey++
                })
              }
              this.loading = false
            })
          })
        })
      },
      saveForm (callback) {
        this.submit('save', callback)
      },
      startForm (callback) {
        this.submit('start', callback)
      },
      agreeForm (callback) {
        this.submit('agree', callback)
      },
      // 暂存/送审/同意
      submit (handoverStatus, callback) {
        if (handoverStatus === 'save') {
          // 暂存
          this.inputForm.handoverStatus = '2'
          this.loading = true
          this.inputForm.cdId = this.inputForm.id
          this.dimissionHandoverService.save(this.inputForm).then(({data}) => {
            this.inputForm.assignee = this.inputForm.handoverDTOList[0].rosterId
            console.log('rosterId', this.inputForm.assignee)
            callback(data.businessTable, data.businessId, this.inputForm)
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
          return
        } else if (handoverStatus === 'start') {
          // 送审
          this.inputForm.handoverStatus = '3'
        } else if (handoverStatus === 'agree') {
          // 审核同意
          this.inputForm.handoverStatus = '4'
        }
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.inputForm.cdId = this.inputForm.id
            this.dimissionHandoverService.save(this.inputForm).then(({data}) => {
              this.inputForm.assignee = this.inputForm.handoverDTOList[0].rosterId
              console.log('rosterId', this.inputForm.assignee)
              callback(data.businessTable, data.businessId, this.inputForm)
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          }
        })
      },
      updateStatusById (type) {
        if (type === 'agree') {
          // 同意
          this.inputForm.handoverStatus = '4'
        }
        if (type === 'reject') {
          // 驳回
          this.inputForm.handoverStatus = '5'
        }
        if (type === 'reback') {
          // 撤回
          this.inputForm.handoverStatus = '6'
        }
        this.dimissionHandoverService.updateStatusById(this.inputForm)
      },
      close () {
        this.selectData = []
        this.$refs.inputForm.resetFields()
        this.visible = false
      },
      delLine (index, childIndex) {
        if (childIndex !== null && childIndex !== undefined && childIndex !== '') {
          this.inputForm.handoverDTOList[index].handoverDTOList.splice(childIndex, 1)
        } else {
          this.inputForm.handoverDTOList.splice(index, 1)
        }
      },
      addLine (rowIndex) {
        const newLine = {
          id: '',
          cdId: '',
          parentId: '',
          type: '',
          content: '',
          rosterId: ''
        }
        if (!this.commonJS.isEmpty(rowIndex)) {
          this.inputForm.handoverDTOList[rowIndex].handoverDTOList.push(newLine)
        } else {
          this.inputForm.handoverDTOList.push({type: '', rosterId: ''})
          this.$set(this.inputForm.handoverDTOList[this.inputForm.handoverDTOList.length - 1], 'handoverDTOList', [newLine])
        }
        this.tableKey++
      }
    }
  }
</script>
<style scoped>
  /deep/ .el-card__body {
    padding: 0px 10px;
  }
  /deep/ .el-form-item {
    margin-bottom: 10px;
  }
</style>
