<template>
  <div style="padding-left: 10px;padding-right: 10px;padding-top: 10px">
    <el-form ref="form" :rules="rules" :model="form" label-width="110px">
      <el-row :gutter="2">
        <el-col :span="12">
          <el-form-item label="服务分公司" prop="FIRST_PARTY">
            <el-select v-model="form.FIRST_PARTY" placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in corpList"
                :key="item.CORPINFO_ID"
                :label="item.CORP_NAME"
                :value="item.CORPINFO_ID + '--' + item.CORP_NAME"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用工形式" prop="EMPLOYMENT_TYPE">
            <el-select v-model="form.EMPLOYMENT_TYPE" placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in dic.employmentType"
                :key="item.value"
                :label="item.name"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="选取形式" prop="SELECT_TYPE">
            <el-select v-model="form.SELECT_TYPE" placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in dic.selectType"
                :key="item.value"
                :label="item.name"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务有效期" prop="dates">
            <el-date-picker
              v-model="form.dates"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 100%"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="添加流动人员" prop="NAME">
            <el-table :data="form.flowUserData" border style="width: 100%" height="500px">
              <el-table-column prop="USERNAME" label="用户名" width="180"/>
              <el-table-column prop="NAME" label="姓名" width="180"/>
              <el-table-column prop="DEPARTMENT_NAME" label="部门"/>
<!--              <el-table-column prop="POST_NAME" label="工种"/>-->
              <el-table-column prop="POST_NAME" label="年份">
                <span>{{ new Date().getFullYear() }}</span>
              </el-table-column>
              <el-table-column prop="POST_NAME" label="年度入场培训">
                <span>已培训</span>
              </el-table-column>
              <el-table-column align="center">
                <template slot="header" slot-scope="scope">
                  <el-button size="mini" type="success" @click="handleAddUser(1)">添加</el-button>
                </template>
                <template slot-scope="{row}">
                  <el-button size="mini" type="danger" @click="handleDeleteUser(row.USER_ID, 1)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="添加固定人员" prop="NAME">
            <el-table :data="form.unFlowUserData" border style="width: 100%" height="500px">
              <el-table-column prop="USERNAME" label="用户名" width="180"/>
              <el-table-column prop="NAME" label="姓名" width="180"/>
              <el-table-column prop="DEPARTMENT_NAME" label="部门"/>
<!--              <el-table-column prop="POST_NAME" label="工种"/>-->
<!--              <el-table-column prop="POST_NAME" label="年份">-->
<!--                <span>{{ new Date().getFullYear() }}</span>-->
<!--              </el-table-column>-->
<!--              <el-table-column prop="POST_NAME" label="年度入场培训">-->
<!--                <span>已培训</span>-->
<!--              </el-table-column>-->
              <el-table-column align="center">
                <template slot="header" slot-scope="scope">
                  <el-button size="mini" type="success" @click="handleAddUser(0)">添加</el-button>
                </template>
                <template slot-scope="{row}">
                  <el-button size="mini" type="danger" @click="handleDeleteUser(row.USER_ID, 0)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="padding: 10px;text-align: center">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
    <select-employment ref="selectEmployment" @selectedUser="selectedUser"/>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import { requestFN } from '@/utils/request'
import selectEmployment from './selectEmployment'
export default {
  components: { selectEmployment },
  directives: { waves },
  inject: ['setActiveName'],

  data() {
    return {
      visible: false,
      loading: false,
      rules: {
        FIRST_PARTY: [{ required: true, message: '服务的分公司必选', trigger: 'change' }],
        EMPLOYMENT_TYPE: [{ required: true, message: '用工形式必选', trigger: 'change' }],
        SELECT_TYPE: [{ required: true, message: '选取形式必须', trigger: 'change' }],
        dates: [{ required: true, message: '日期是必填字段', trigger: 'change' }]
      },
      form: {
        FIRST_PARTY: '',
        FIRST_PARTY_ID: '',
        FIRST_PARTY_NAME: '',
        EMPLOYMENT_TYPE: '',
        SELECT_TYPE: '',
        dates: [],
        START_TIME: '',
        END_TIME: '',
        flowUserData: [],
        unFlowUserData: [],
        flow: '',
        unFlow: '',
        FLOATING_PERSONNEL: 0,
        UN_FLOATING_PERSONNEL: 0
      },
      dic: {
        employmentType: [],
        selectType: []
      },
      corpList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.loading = true
      this.getDict()
      this.getCorpList()
      this.resetForm()
    },
    getDict() {
      requestFN(
        '/service_corp/getDic',
        {
          vector: JSON.stringify(['employmentType', 'selectType'])
        }
      ).then((data) => {
        if (data.code === '0') {
          this.dic.employmentType = data.dic.employmentType
          this.dic.selectType = data.dic.selectType
        } else {
          this.$message.error(data.errorMessage)
        }
      }).catch((e) => {
      })
    },

    getCorpList() {
      requestFN(
        '/companyApi/corp/listAll',
        { }
      ).then((data) => {
        this.corpList = data.list
      }).catch((e) => {
      })
    },

    handleClose() {
      this.form = {}
      this.setActiveName('List')
    },
    confirm() {
      if (!this.form.flowUserData.length > 0 && !this.form.unFlowUserData.length > 0) {
        this.$message.error('请至少选择一个服务人员!')
        return
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          var [FIRST_PARTY_ID, FIRST_PARTY_NAME] = this.form.FIRST_PARTY.split('--')
          this.form.FIRST_PARTY_ID = FIRST_PARTY_ID
          this.form.FIRST_PARTY_NAME = FIRST_PARTY_NAME
          this.form.flow = JSON.stringify(this.form.flowUserData)
          this.form.unflow = JSON.stringify(this.form.unFlowUserData)
          this.form.START_TIME = this.form.dates[0]
          this.form.END_TIME = this.form.dates[1]
          this.form.FLOATING_PERSONNEL = this.form.flowUserData.length
          this.form.UN_FLOATING_PERSONNEL = this.form.unFlowUserData.length
          requestFN(
            '/service_corp/init',
            this.form
          ).then((data) => {
            this.loading = false
            if (data.code === '0') {
              this.$message.success('保存成功')
              this.handleClose()
            } else {
              this.$message.error(data.errorMessage)
            }
          }).catch((e) => {
            this.loading = false
          })
        } else {
          this.$message.error('有必填参数要填写，请检查')
        }
      })
    },

    handleAddUser(e) {
      if (!this.form.FIRST_PARTY) {
        this.$message({
          message: '请先选择服务分公司',
          type: 'warning'
        })
        return
      }
      var selectedList
      if (e === 0) {
        selectedList = this.form.unFlowUserData
      } else {
        selectedList = this.form.flowUserData
      }
      this.$refs.selectEmployment.init({ IS_FLOW: e, SERVICE_PROVIDER_ID: this.form.FIRST_PARTY_ID, selectedList })
    },
    handleDeleteUser(USER_ID, IS_FLOW) {
      if (IS_FLOW === 0) {
        this.form.unFlowUserData = this.form.unFlowUserData.filter(item => {
          return item.USER_ID != USER_ID
        })
      } else {
        this.form.flowUserData = this.form.flowUserData.filter(item => {
          return item.USER_ID != USER_ID
        })
      }
    },
    selectedUser(list, IS_FLOW) {
      if (IS_FLOW === 0) {
        this.form.unFlowUserData = list
      } else {
        this.form.flowUserData = list
      }
    },
    resetForm() {
      this.form = {
        FIRST_PARTY_ID: '',
        EMPLOYMENT_TYPE: '',
        SELECT_TYPE: '',
        START_TIME: '',
        END_TIME: '',
        flowUserData: [],
        unFlowUserData: [],
        flow: '',
        unFlow: '',
        FLOATING_PERSONNEL: 0,
        UN_FLOATING_PERSONNEL: 0
      }
    }
  }
}

</script>
