<template>
  <div :class="$style.container">
    <HeaderTitleBar />
    <el-divider content-position="left">{{
      $t("module.teamManager.HandoverAdd.TeamPlanFill")
    }}</el-divider>
    <el-form
      ref="team"
      :model="team"
      :rules="rules"
      label-width="190px"
      :class="$style.form"
    >
      <el-form-item
        :label="$t('module.teamManager.Handover.LastTeamName')"
        prop="planPreTeamId"
        :class="$style['form-item']"
      >
        <el-select
          v-model="team.planPreTeamId"
          :class="$style.select"
          filterable
          clearable
          :disabled="$route.query.disable === 'true' || $route.query.disable"
          @change="preTeamChange"
        >
          <el-option
            v-for="(item, index) in preTeamList"
            :key="index"
            :label="item.planTeamName"
            :value="item.planTeamId"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        :label="$t('module.teamManager.Handover.PreviousTeamLeader')"
        prop="planPreTeamLeader"
        :class="$style['form-item']"
      >
        <el-input v-model="team.planPreTeamLeader" :disabled="true" />
      </el-form-item>
      <el-form-item
        :label="$t('module.teamManager.Handover.TeamName')"
        prop="planTeamId"
        :class="$style['form-item']"
      >
        <el-select
          v-model="team.planTeamId"
          :class="$style.select"
          filterable
          clearable
          :disabled="$route.query.disable === 'true' || $route.query.disable"
          @change="teamChange"
        >
          <el-option
            v-for="(item, index) in teamList"
            :key="index"
            :label="item.planTeamName"
            :value="item.planTeamId"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        :label="$t('module.teamManager.Handover.TeamLeader')"
        prop="planTeamLeader"
        :class="$style['form-item']"
      >
        <el-input v-model="team.planTeamLeader" :disabled="true" />
      </el-form-item>
      <el-form-item
        :label="$t('module.teamManager.Handover.PlanWorkingHours')"
        prop="planOnlineTime"
        :class="$style['form-item']"
      >
        <el-date-picker
          v-model="team.planOnlineTime"
          type="datetime"
          :class="$style.select"
          :clearable="false"
          :disabled="$route.query.disable === 'true' || $route.query.disable"
        />
      </el-form-item>
      <el-form-item
        :label="$t('module.teamManager.Handover.PlannedHandoverTime')"
        prop="planHandoverTime"
        :class="$style['form-item']"
      >
        <el-date-picker
          v-model="team.planHandoverTime"
          type="datetime"
          :clearable="false"
          :class="$style.select"
          :disabled="$route.query.disable === 'true' || $route.query.disable"
        />
      </el-form-item>
      <el-form-item
        :label="$t('module.teamManager.Handover.Remark')"
        prop="remark"
        :class="$style['form-item-remark']"
      >
        <el-input
          v-model="team.remark"
          :disabled="$route.query.disable === 'true' || $route.query.disable"
        />
      </el-form-item>
    </el-form>

    <el-divider v-if="false" content-position="left">{{
      $t("module.teamManager.HandoverAdd.MajorSelection")
    }}</el-divider>
    <ProfessionPanel
      v-if="false"
      :id="team.planId"
      :class="$style.bom"
      style="width:70%"
      @on-change="professionChange"
    />
    <el-divider content-position="left">{{
      $t("module.teamManager.HandoverAdd.SelectionOfTeamMembers")
    }}</el-divider>
    <WorkerList
      :id="team.planTeamId"
      :class="$style.bom"
      style="width:70%"
      @on-change="workerChange"
    />
    <SubmitBar
      v-if="$route.query.disable !== 'true' && !$route.query.disable"
      @on-cancle="close()"
      @on-submit="handleSubmit('team')"
    />
  </div>
</template>

<script>
import { find } from 'lodash'
import {
  add,
  getInfo,
  update,
  planTeamSelectListNew
} from '@/api/team-manage/team-plan.js'
import SubmitBar from '@/views/art/components/submit-bar'
import HeaderTitleBar from '@/views/material-manage/components/header-title-bar'
import WorkerList from '@/views/team-manage/components/plan/worker-list'
import ProfessionPanel from '@/views/team-manage/components/plan/profession-panel'

export default {
  name: 'Team',
  components: {
    SubmitBar,
    HeaderTitleBar,
    WorkerList,
    ProfessionPanel
  },
  props: {},
  data() {
    return {
      team: {
        planPreTeamId: null,
        planTeamId: null,
        planWorkerIdList: [],
        planProfessionIdList: [],
        id: null,
        planId: null,
        remark: '',
        name: '',
        planOnlineTime: new Date(),
        planHandoverTime: new Date(),
        planTeamLeader: '',
        planPreTeamLeader: ''
      },
      rules: {
        planTeamId: [
          {
            required: true,
            message: this.$i18nForm([
              'placeholder.input',
              this.$t('module.teamManager.Handover.TeamName')
            ]),
            trigger: 'change'
          }
        ],
        planPreTeamId: [
          {
            required: true,
            message: this.$i18nForm([
              'placeholder.input',
              this.$t('module.teamManager.Handover.LastTeamName')
            ]),
            trigger: 'change'
          }
        ],
        planOnlineTime: [
          {
            required: true,
            message: this.$i18nForm([
              'placeholder.input',
              this.$t('module.teamManager.Handover.PlanWorkingHours')
            ]),
            trigger: 'blur'
          }
        ],
        planHandoverTime: [
          {
            required: true,
            message: this.$i18nForm([
              'placeholder.input',
              this.$t('module.teamManager.Handover.PlannedHandoverTime')
            ]),
            trigger: 'blur'
          }
        ]
      },
      id: null,
      preTeamList: [],
      teamList: []
    }
  },
  watch: {},
  created() {
    this.init()
  },
  methods: {
    init() {
      this.id = this.$route.query.id
      console.log(this.id)
      if (this.id) {
        getInfo({ id: this.id }).then(res => {
          console.log(res)
          this.team = res.data
        })
      }
      planTeamSelectListNew().then(res => {
        this.preTeamList = res.data
        this.teamList = res.data
      })
    },
    close() {
      this.$router.push({ path: this.$route.query.redirect })
    },
    handleSubmit(formName) {
      console.log('handleSubmit')
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false
        }
        console.log(this.team)
        // const { planProfessionIdList, planWorkerIdList } = this.team
        const { planWorkerIdList } = this.team
        // if (planProfessionIdList.length === 0) {
        //   this.$message({
        //     type: 'error',
        //     message: '专业不能为空！'
        //   })
        //   return false
        // }
        if (planWorkerIdList.length === 0) {
          this.$message({
            type: 'error',
            message: '员工不能为空！'
          })
          return false
        }
        if (this.id) {
          update(this.team).then(res => {
            this.$message({
              type: 'success',
              message: '更新成功！'
            })
            this.close()
          })
        } else {
          this.team.id = null
          add(this.team).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功！！'
            })
            this.close()
          })
        }
      })
    },
    preTeamChange(val) {
      const preTeam = find(this.preTeamList, f => f.planTeamId === val)
      this.team.planPreTeamLeader = preTeam ? preTeam.planTeamLeader : ''
    },
    teamChange(val) {
      console.log(val)
      const team = find(this.teamList, f => f.planTeamId === val)
      this.team.planTeamLeader = team ? team.planTeamLeader : ''
      console.log(' team.planTeamId', team.planTeamId)
      this.team.planTeamId = team.planTeamId
      this.team.planId = val
    },
    professionChange(val) {
      this.team.planProfessionIdList = val
    },
    workerChange(val) {
      this.team.planWorkerIdList = val.map(m => m.planWorkerId)
    }
  }
}
</script>
<style lang="scss" module>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  .form {
    width: 70%;
    margin-top: 10px;
    display: flex;
    flex-flow: wrap;
    .form-item {
      width: 50%;
    }
    .form-item-remark {
      width: 100%;
    }
  }
  .input {
    display: flex;
    margin: 8px 16px 8px 4px;
    align-items: center;
    .select {
      width: 100%;
    }
  }
  .select {
    width: 100%;
  }
  .bom {
    position: relative;
    width: 98%;
  }
}
</style>
