<!--
 * @Author: tengmingxue 1473375109@qq.com
 * @Date: 2023-08-29 16:44:32
 * @LastEditors: tengmingxue 1473375109@qq.com
 * @LastEditTime: 2023-08-30 17:04:36
 * @FilePath: \xld-gis-admin\src\views\dataAdmin\dataAdmin\configProcess\addStepForm.vue
 * @Description: 流程步骤配置表单
-->
<template>
  <a-form
    ref="formRef"
    :model="formState"
    :rules="formState.xh === 1 ? rules1 : rules"
    class="step-form"
  >
    <a-form-item
      ref="xh"
      label="步骤序号"
      name="xh"
      :labelCol="{ span: 4 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-input-number
        :min="1"
        :max="10"
        v-model:value="formState.xh"
        :disabled="true"
        style="width: 50px; float: left"
      />
      <div class="btn-group">
        <span class="addBtn btn" @click="stepEdit(1)">+</span>
        <span class="redBtn btn" @click="stepEdit(-1)">-</span>
      </div>
    </a-form-item>
    <a-form-item
      ref="name"
      label="步骤名称"
      name="name"
      :labelCol="{ span: 4 }"
      :wrapper-col="{ span: 12 }"
    >
      <a-input v-model:value="formState.name" @change="stepInfoChange" />
    </a-form-item>
    <a-form-item
      v-if="formState.xh !== 1"
      ref="model"
      label="处理模式"
      name="model"
      :labelCol="{ span: 4 }"
      :wrapper-col="{ span: 12 }"
    >
      <a-radio-group v-model:value="formState.model" @change="stepInfoChange">
        <a-radio value="1">逐级</a-radio>
        <a-radio value="2">并行</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item
      v-if="formState.xh !== 1"
      ref="dept"
      label="处理部门"
      name="dept"
      :labelCol="{ span: 4 }"
      :wrapper-col="{ span: 12 }"
    >
      <a-select
        v-model:value="formState.dept"
        placeholder="请选择处理部门"
        mode="multiple"
        @change="stepInfoChange"
        style="width: 100%"
      >
        <a-select-option value="1">部门1</a-select-option>
        <a-select-option value="2">部门2</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item
      v-if="formState.xh !== 1"
      ref="user"
      label="处理人员"
      name="user"
      :labelCol="{ span: 4 }"
      :wrapper-col="{ span: 12 }"
    >
      <a-select
        v-model:value="formState.user"
        placeholder="请选择处理人员"
        mode="multiple"
        @change="stepInfoChange"
        style="width: 100%"
      >
        <template v-for="user in handlers" :key="user.userid">
          <a-select-option :value="user.userid">{{ user.username }}</a-select-option>
        </template>
      </a-select>
    </a-form-item>
    <a-table
      v-if="formState.user.length > 0"
      bordered
      :data-source="userList"
      :columns="columns"
      :pagination="false"
      style="height: 100%"
    >
      <template #operation="{ record }">
        <a v-if="record.xh !== 1" style="color: #2d74e7;margin: 10px;" @click="moveClick(-1,record)">上移</a>
        <a v-if="record.xh < userList.length" style="color: #2d74e7;margin: 10px;" @click="moveClick(1,record)">下移</a>
      </template>
    </a-table>
  </a-form>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, onMounted, watch, UnwrapRef, toRaw } from 'vue';
import { cloneDeep } from 'lodash-es';
import { DeleteOutlined } from '@ant-design/icons-vue';
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
const props = {
  currStep: { type: Object, require: true },
};
interface FormState {
  xh: number;
  name: string;
  model: string;
  dept: string[];
  user: string[];
}
export default defineComponent({
  name: 'AddStepForm',
  components: { DeleteOutlined },
  props,
  setup(props, { emit }) {
    let currStep = ref(props.currStep);
    const formRef = ref();
    const columns = [
      {
        title: '处理顺序',
        dataIndex: 'xh',
        width: '30%',
        align: 'center',
      },
      {
        title: '人员',
        dataIndex: 'username',
        width: '40%',
        align: 'center',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        width: '30%',
        align: 'center',
        slots: { customRender: 'operation' },
      },
    ];
    const handlers = [
      { userid: '001', username: '张三' },
      { userid: '002', username: '王维' },
      { userid: '003', username: '李白' },
    ];
    const userList = ref([]);
    const formState: UnwrapRef<FormState> = reactive({
      xh: 1,
      name: '',
      model: '1',
      dept: [],
      user: [],
    });
    const rules = {
      name: [{ required: true, message: '请填写步骤名称', trigger: 'blur' }],
      model: [{ required: true, message: '请选择处理模式', trigger: 'change' }],
      dept: [{ required: true, message: '请选择处理部门', trigger: 'change', type: 'array' }],
      user: [{ required: true, message: '请选择处理人员', trigger: 'change', type: 'array' }],
    };
    const rules1 = {
      name: [{ required: true, message: '请填写步骤名称', trigger: 'blur' }],
    };

    watch(
      () => props.currStep,
      (obj) => {
        currStep.value = obj;
        formState.xh = currStep.value?.xh;
        formState.name = currStep.value?.name;
        formState.model = currStep.value?.model;
        formState.dept = currStep.value?.dept;
        formState.user = currStep.value?.user;
      }
    );

    watch(
      () => formState.user,
      (list) => {
        userList.value = []
        list.map((item, index) => {
          const obj = handlers.find((user) => user.userid === item);
          if (obj) {
            obj['xh'] = index + 1;
            userList.value.push(obj);
          }
        });
      }
    );
    /**
     * 信息内容改变
    */
    const stepInfoChange = () => {
      emit('editStep', formState);
    };

    const stepEdit = (flag) => {
      if (flag === 1) {
        formRef.value
          .validate()
          .then(() => {
            console.log('values', formState, toRaw(formState));
            //校验通过
            formState.xh = formState.xh + 1;
            formState.name = '';
            formState.model = '1';
            formState.dept = [];
            formState.user = [];
            const stepInfo = cloneDeep({
              xh: formState.xh,
              name: '',
              model: '',
              dept: [],
              user: [],
            });
            emit('editStep', stepInfo);
          })
          .catch((error: ValidateErrorEntity<FormState>) => {
            console.log('校验失败', error);
          });
      }
      if (flag === -1) {
        //删除当前数据
        emit('reduceStep', cloneDeep(formState));
      }
    };

    /**
     * 审核顺序改变
    */
    const moveClick = (flag,row) => {
      //1、修改顺序
      const obj = userList.value.find((item) => item.xh === row.xh);
      const index = userList.value.indexOf(obj);
      if(index < 0) return
      const temp = cloneDeep(userList.value[index])
      const increment = flag
      userList.value[index] = cloneDeep(userList.value[index + increment])
      userList.value[index + increment] = cloneDeep(temp)
      //2、重新生成序号
      userList.value.forEach((item,index)=>{
        item['xh'] = index + 1
      })
    };

    onMounted(async () => {});

    return {
      formRef,
      formState,
      rules,
      rules1,
      handlers,
      columns,
      userList,
      stepEdit,
      currStep,
      stepInfoChange,
      moveClick,
    };
  },
});
</script>
<style scoped lang="less">
.step-form {
  height: 100%;
  overflow: auto;
  .btn-group {
    float: left;
    height: 30px;
    width: 80px;
    display: flex;
    align-items: center;
    .btn {
      float: left;
      height: 20px;
      line-height: 15px;
      width: 20px;
      margin-left: 10px;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
    }
    .addBtn {
      background: #0671dd;
    }
    .redBtn {
      background: #f84242;
    }
  }
}
</style>
    