<!-- eslint-disable vue/no-mutating-props -->
<template>
  <el-dialog title="添加" :visible.sync="selfVisible" width="650px" @close="close" @open="open">
    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="标题" prop="taskTitle">
            <el-input v-model="form.taskTitle" placeholder="请输入标题" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型" prop="taskType">
            <el-select v-model="form.taskType" placeholder="请选择类型" style="width: 100%">
              <el-option v-for="item in types" :key="item.dictCode" :label="item.dictLabel" :value="item.dictValue" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开始时间" prop="taskStartDate">
            <el-date-picker
              v-model="form.taskStartDate"
              placeholder="请选择开始时间"
              style="width: 100%"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间" prop="taskEndDate">
            <el-date-picker
              v-model="form.taskEndDate"
              placeholder="请选择结束时间"
              style="width: 100%"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="说明" prop="taskDesc">
            <el-input v-model="form.taskDesc" placeholder="请输入说明" type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="督办人" prop="supervisorUserId">
            <el-select v-model="form.supervisorUserId" placeholder="请选择督办人" style="width: 100%">
              <el-option v-for="item in users" :key="item.id" :label="item.userName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="监办人" prop="watchUserId">
            <el-select v-model="form.watchUserId" clear placeholder="请选择监办人" style="width: 100%">
              <el-option v-for="item in users" :key="item.id" :label="item.userName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人" prop="mainUserId">
            <el-select v-model="form.mainUserId" placeholder="请选择负责人" style="width: 100%">
              <el-option v-for="item in users" :key="item.id" :label="item.userName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="团队成员">
            <el-select v-model="teamIds" clear multiple placeholder="请选择团队成员" style="width: 100%">
              <el-option v-for="item in users" :key="item.id" :label="item.userName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="关联类型" prop="targetType">
            <el-select
              v-model="form.targetType"
              placeholder="请选择关联对象类型"
              style="width: 100%"
              @change="targetTypeChange">
              <el-option label="客户" value="10" />
              <el-option label="项目" value="20" />
              <el-option label="合同" value="30" />
              <el-option label="回款" value="40" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="关联对象" prop="targetId">
            <el-select v-model="form.targetId" placeholder="请选择关联对象" style="width: 100%" @change="targetChange">
              <el-option v-for="item in targets" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <!-- eslint-disable-next-line vue/no-mutating-props -->
      <el-button @click="selfVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import taskApi from '@/api/plat/task'
  import custApi from '@/api/customer/index'

  export default {
    name: 'TaskAdd',
    props: {
      selfVisible: {
        type: Boolean,
        default: false,
      },
      users: {
        type: Array,
        // eslint-disable-next-line vue/require-valid-default-prop
        default: [],
      },
      types: {
        type: Array,
        // eslint-disable-next-line vue/require-valid-default-prop
        default: [],
      },
      doRefresh: {
        type: Function,
        default: undefined,
      },
    },
    data() {
      return {
        // 团队成员
        teamIds: [],
        // 客户数据
        customers: [],
        // 关联对象
        targets: [],
        // 新增数据表单
        form: {
          taskTitle: '',
          taskType: '',
          taskStatus: '10',
          isOverdue: '10',
          taskStartDate: '',
          taskEndDate: '',
          taskDesc: '',
          supervisorUserId: '',
          watchUserId: '',
          mainUserId: '',
          ownerUserId: '',
          taskLabel: '',
          targetId: '',
          targetType: '',
          targetName: '',
          remark: '',
        },
        // 校验规则
        rules: {
          taskTitle: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
          taskType: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
          taskStartDate: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
          taskEndDate: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
          supervisorUserId: [{ required: true, message: '督办人不能为空', trigger: 'change' }],
          mainUserId: [{ required: true, message: '负责人不能为空', trigger: 'change' }],
        },
      }
    },
    watch: {
      selfVisible(val) {
        this.$emit('update:selfVisible', val)
      },
    },
    methods: {
      // 关联类型变化
      targetTypeChange() {
        this.targets.splice(0, this.targets.length)
        this.form.targetId = ''
        this.form.targetName = ''
        if (this.form.targetType == '10') {
          for (let cust of this.customers) {
            this.targets.push(cust)
          }
        }
      },
      // 关联对象变化
      targetChange() {
        for (let item of this.targets) {
          if (item.value == this.form.targetId) {
            this.form.targetName = item.label
            break
          }
        }
      },
      // 获取基本数据
      getData() {
        this.customers = []
        custApi
          .getList({ targetType: '10' })
          .then((res) => {
            if (res.data.list) {
              for (let cust of res.data.list) {
                let data = {
                  value: cust.id,
                  label: cust.custName,
                }
                this.customers.push(data)
              }
            }
          })
          .catch((err) => {
            console.error(err)
          })
      },
      // 打开弹窗
      open() {
        this.getData()
        if (this.$refs['form']) {
          this.$refs['form'].resetFields()
        }
        this.teamIds = []
        this.form.taskTitle = ''
        this.form.taskType = ''
        this.form.taskStatus = '10'
        this.form.isOverdue = '10'
        this.form.taskStartDate = ''
        this.form.taskEndDate = ''
        this.form.taskDesc = ''
        this.form.supervisorUserId = ''
        this.form.watchUserId = ''
        this.form.mainUserId = ''
        this.form.ownerUserId = ''
        this.form.taskLabel = ''
        this.form.targetId = ''
        this.form.targetType = ''
        this.form.targetName = ''
        this.form.remark = ''
      },
      // 关闭弹窗
      close() {
        if (this.$refs['form']) {
          this.$refs['form'].resetFields()
        }
        // eslint-disable-next-line vue/no-mutating-props
        this.selfVisible = false
      },
      // 保存数据
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            if (this.teamIds && this.teamIds.length > 0) {
              this.form.ownerUserId = this.teamIds.join(',')
            } else {
              this.form.ownerUserId = ''
            }
            // eslint-disable-next-line vue/no-mutating-props
            this.selfVisible = false
            const { msg } = await taskApi.createTask(this.form)
            this.$baseMessage(msg, 'success', 'vab-hey-message-success')
            if (this.doRefresh) {
              this.doRefresh()
            }
          }
        })
      },
    },
  }
</script>
