<template>
  <ele-modal
    :centered="true"
    :visible.sync="dispatchDialog"
    title="派单"
    :close-on-click-modal="false"
    width="1000px"
    append-to-body
    @close="handleClose"
  >
    <el-form
      ref="addFormRef"
      :model="addForm"
      label-width="120px"
      class="add_form"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="编码" prop="code">
            <el-input
              v-model="addForm.code"
              size="small"
              placeholder="请输入"
              disabled
            ></el-input>
            <!--  -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="计划名称"
            prop="name"
            :rules="{
              required: true,
              message: '请输入计划名称',
              trigger: 'change'
            }"
          >
            <el-input
              v-model="addForm.name"
              size="small"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="自动派单" prop="isSyncBill">
            <el-select
              v-model="addForm.isSyncBill"
              size="small"
              style="width: 100%"
            >
              <el-option :value="1" label="是"></el-option>
              <el-option :value="0" label="否"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预计售后时长" prop="duration">
            <div style="display: flex">
              <el-input
                type="number"
                v-model="addForm.duration"
                size="small"
                placeholder="请输入"
                @input="formDataDurationTime"
              >
                <template #suffix>
                  <el-select
                    v-model="addForm.durationUnit"
                    size="small"
                    style="width: 120px"
                  >
                    <el-option :value="'1'" label="分钟"></el-option>
                    <el-option :value="'2'" label="小时"></el-option>
                    <el-option :value="'3'" label="天"></el-option>
                  </el-select>
                </template>
              </el-input>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="部门"
            prop="executeGroupId"
            :rules="{
              required: true,
              message: '请选择部门',
              trigger: 'change'
            }"
          >
            <deptSelect
              v-model="addForm.executeGroupId"
              @changeGroup="searchDeptNodeClick"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="执行人"
            prop="executeUserId"
            :rules="{
              required: true,
              message: '请选择执行人',
              trigger: 'change'
            }"
          >
            <el-select
              v-model="addForm.executeUserId"
              size="small"
              style="width: 100%"
              filterable
              @change="changeUser"
            >
              <el-option
                v-for="item in executorList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="紧急程度" prop="urgent">
            <DictSelection
              dictName="紧急程度"
              clearable
              v-model="addForm.urgent"
            ></DictSelection>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              resize="none"
              v-model="addForm.remark"
              :rows="2"
              placeholder="请详细说明"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="footer">
      <el-button type="primary" @click="handleSubmit" :loading="loading">确认</el-button>
      <el-button @click="handleClose" :loading="loading">取消</el-button>
    </div>
  </ele-modal>
</template>
<script>
  import deptSelect from '@/components/CommomSelect/dept-select.vue';
  import { getUserPage } from '@/api/system/organization';
  import { getCurrentUser } from '@/utils/token-util';
  import { demanDispatch } from '@/api/salesServiceManagement/index';
  let submitData = {};
  export default {
    components: { deptSelect },
    computed: {
      // 部门下拉
      loginChangeGroupVOList() {
        return this.$store.state.user?.info?.loginChangeGroupVOList;
      }
    },
    data() {
      return {
        dispatchDialog: false,
        addForm: {
          executeUserId: '',
          executeGroupId: '',
          name: '',
          isSyncBill: 1,
          durationUnit: '1',
          remark: ''
        },
        loading:false,
        executorList: [],
        submitSource: 1 // 提交/派单来源(1:新增；2：修改)
      };
    },
    methods: {
      handleClose() {
        this.dispatchDialog = false;
        this.addForm = {
          executeUserId: ''
        };
        this.$refs.addFormRef.resetFields();
      },
      open(data, type) {
        this.submitSource = type == 'add' ? 1 : 2;
        this.dispatchDialog = true;
        submitData = data;
        let currentUser = getCurrentUser();
        if (
          this.loginChangeGroupVOList &&
          this.loginChangeGroupVOList.length > 0
        ) {
          let obj = this.loginChangeGroupVOList.find(
            (el) => el.groupId == currentUser.currentGroupId
          );
          this.addForm.executeGroupId = currentUser.currentGroupId || '';
          this.searchDeptNodeClick(currentUser.currentGroupId, {
            name: obj.groupName
          });
        }
      },
      //选择部门(搜索)
      searchDeptNodeClick(info, data) {
        if (info) {
          // 根据部门获取人员
          this.addForm.executeGroupName = data.name;
          const params = { groupId: info };
          this.getUserList(params);
        } else {
          this.addForm.executeGroupId = null;
        }
      },
      // 获取审核人列表、巡点检人员
      async getUserList(params) {
        try {
          let data = { pageNum: 1, size: -1 };
          // 如果传了参数就是获取巡点检人员数据
          if (params) {
            data = Object.assign(data, params);
          }
          const res = await getUserPage(data);
          if (params) {
            this.executorList = res.list;
          }
        } catch (error) {}
      },
      //   选择执行人
      changeUser(val) {
        this.executorList.map((item) => {
          if (item.id == val) {
            this.addForm.executeUserName = item.name;
          }
        });
      },
      formDataDurationTime(value) {
        if (value > 0) {
          this.addForm.duration = value.replace(/^[0]+/, '');
        } else {
          this.addForm.duration = 0;
        }
      },
      handleSubmit() {
        this.$refs.addFormRef.validate((valid) => {
          if (valid) {
            let data = {
              ...submitData,
              planAddPO: this.addForm,
              submitSource: this.submitSource
            };
            this.loading = true;
            demanDispatch(data)
              .then((res) => {
                if (res) {
                  this.loading = false;
                  this.$message.success('操作成功');
                  this.handleClose();
                  this.$emit('savExit');
                }
              })
              .catch((err) => {
                this.loading = false;
              });
          } else {
            return false;
          }
        });
      }
    }
  };
</script>

<style scoped lang="scss">
  .add_form {
    .el-col-12 {
      padding-bottom: 13px;
    }
  }
</style>
