<template>
  <div v-loading="loading" class="set_worktime">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="设置时间段" prop="rangeTime">
        <el-time-picker
          v-model="ruleForm.rangeTime"
          class="date_picker"
          is-range
          start-placeholder="开始时间"
          range-separator="至"
          end-placeholder="结束时间"
          value-format="HH:mm"
          format="HH:mm"
          align="left"/>
      </el-form-item>
      <el-form-item label="所属坐席组" prop="group">
        <el-select
          v-model="ruleForm.group"
          class="select_picker"
          filterable
          clearable
          placeholder="请选择所属坐席组">
          <el-option
            v-for="item in seatOptions"
            :key="item.F_ZXZID"
            :label="item.F_ZXZName"
            :value="item.F_ZXZCode"/>
        </el-select>
      </el-form-item>
      <el-form-item label="时间段名称" prop="name">
        <el-input v-model="ruleForm.name" autosize placeholder="请输入时间段名称"/>
      </el-form-item>
      <el-form-item label="时间段备注" prop="des">
        <el-input v-model="ruleForm.des" type="textarea" autosize placeholder="请输入时间段备注信息"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getSeatGroup } from '@/api/commonAPI'
import {
  getWorkTime,
  addWorkTime,
  editWorkTime
} from '@/api/telCall/restDay'
import { filterContent } from '@/utils'

export default {
  name: 'AddOrEdit',
  props: {
    rowid: {
      type: String,
      default: ''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      ruleForm: {
        id: '',
        rangeTime: '',
        group: '', //	是	string	坐席组编号
        name: '', // sting 时间段名称
        des: '' //	否	string	备注
      },
      rules: {
        rangeTime: [{
          required: true,
          message: '请设置时间段!',
          trigger: 'blur'
        }],
        group: [{
          required: true,
          message: '请选择所属坐席组!',
          trigger: 'change'
        }],
        name: [{
          required: true,
          message: '请输入时间段名称!',
          trigger: 'blur'
        }],
      },
      seatOptions: [] // 坐席组下拉数据
    }
  },
  created() {
    if (this.rowid) {
      this.ruleForm.id = this.rowid
      this.getSeatGroupSelects().then(() => {
        this.getDetail()
      })
    } else {
      this.getSeatGroupSelects()
    }
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          const datas = {
            id: this.ruleForm.id,
            startdate: this.ruleForm.rangeTime && this.ruleForm.rangeTime[0], // 是	string	开始时间，格式：09:00
            enddate: this.ruleForm.rangeTime && this.ruleForm.rangeTime[1], // 是	string	结束时间，格式：17:00
            groupcode: this.ruleForm.group, //	是	string	坐席组编号
            name: this.ruleForm.name, // sting 时间段名称
            remark: filterContent.delHtmlTag(this.ruleForm.des) //	否	string	备注
          }
          // 添加
          if (!this.rowid) {
            addWorkTime(datas).then(response => {
              this.loading = false
              if (response.state.toLowerCase() === 'success') {
                this.$parent.$layer.close(this.layerid)
                this.$parent.getLists() // 重新加载父级数据
                this.$message.success('恭喜你，上班时间段设置添加成功!')
              }
            }).catch(() => {
              this.loading = false
            })
            return
          }
          // 编辑
          editWorkTime(datas).then(response => {
            this.loading = false
            if (response.state.toLowerCase() === 'success') {
              this.$parent.$layer.close(this.layerid)
              this.$parent.getLists() // 重新加载父级数据
              this.$message.success('恭喜你，上班时间段设置编辑成功!')
            }
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.$message.error('请输入有效的必填项信息!')
          return false
        }
      })
    },
    resetForm() {
      this.ruleForm.rangeTime = ""
      this.$refs.ruleForm.resetFields()
    },
    // 获取详情
    getDetail() {
      getWorkTime(this.rowid).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.data
          this.ruleForm.rangeTime = [res.F_StartDate, res.F_EndDate]
          this.ruleForm.group = res.F_GroupCode
          this.ruleForm.name = res.F_Name
          this.ruleForm.des = res.F_Remark
        }
      })
    },
    // 获取坐席组下拉数据
    getSeatGroupSelects() {
      return new Promise(resolve => {
        getSeatGroup().then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.seatOptions = response.data
          }
        })
        resolve()
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.set_worktime{
		.date_picker,
		.select_picker {
			width: 100%;
		}
	}
</style>
