<template>
  <div class="registerOrder">
    <div class="subtitle">登记工单</div>
    <el-divider />
    <div class="orderBox">
      <div class="boxTitle">基本情况</div>
      <div class="boxContent" v-loading="uploading">
        <el-form ref="orderFormRef" :rules="rules" label-width="auto" :model="orderForm" class="formBox">
          <el-row justify="space-between">
            <el-col :span="7">
              <el-form-item label="工单编码" prop="">
                <!-- <el-input v-model="orderForm.orderNumber" placeholder="请输入工单编码" /> -->
                <el-input v-model="orderForm.orderNumber" placeholder="自动生成工单编码" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="工单类型" prop="orderType">
                <el-select v-model="orderForm.orderType" placeholder="请选择工单类型" style="width: 100%">
                  <el-option v-for="item in work_order_type" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="工单来源" prop="orderSource">
                <el-select v-model="orderForm.orderSource" placeholder="请选择工单来源" style="width: 100%">
                  <el-option v-for="item in work_order_source" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row justify="space-between">
            <el-col :span="7">
              <el-form-item label="上&ensp;报&ensp;人" prop="">
                <el-input v-model="orderForm.reportPerson" placeholder="请输入上报人" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="联系方式" prop="">
                <!-- phone -->
                <el-input v-model="orderForm.reportPersonPhone" placeholder="请输入联系方式" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="警情时间" prop="">
                <el-date-picker
                  v-model="orderForm.alarmTime"
                  type="datetime"
                  placeholder="请选择警情时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row justify="space-between">
            <el-col :span="16">
              <el-form-item label="发送位置" prop="">
                <!-- phone -->
                <el-input v-model="orderForm.reportLocation" style="width: 97%" placeholder="请输入发送位置" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="登记时间" prop="">
                <el-date-picker
                  v-model="orderForm.registerTime"
                  type="datetime"
                  placeholder="请选择登记时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row justify="space-between">
            <el-col :span="24">
              <el-form-item label="信&emsp;&emsp;息" prop="">
                <!-- phone -->
                <el-input
                  v-model="orderForm.message"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                  placeholder="请输入工单信息"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row justify="space-between">
            <el-col :span="24">
              <el-form-item label="处理图片" prop="">
                <ImageFileUpload
                  :limit="4"
                  v-model:saveFileArr="orderForm.orderFileList"
                  :listType="'picture-card'"
                  :fileType="['jpg', 'png', 'jpeg', 'svg', 'gif']"
                  :fileSize="10"
                ></ImageFileUpload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row justify="space-between">
            <el-col :span="7">
              <el-form-item label="要求完成时间" prop="">
                <el-date-picker
                  v-model="orderForm.requireFinishTime"
                  type="datetime"
                  placeholder="请选择要求完成时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row justify="center" class="submitBtn">
            <el-button type="primary" @click="submitForm(orderFormRef)">提交</el-button>
            <el-button>返回</el-button>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup name="registerOrder">
import bus from '@/bus';
import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
import { addWorkOrder } from '@/api/order';
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
console.log('🚀 ~ userStore:', userStore.userInfo);

const { proxy } = getCurrentInstance();
// 工单类型： work_order_type
// 工单状态： work_order_status
// 工单来源： work_order_source
const { work_order_type, work_order_status, work_order_source } = proxy.useDict(
  'work_order_type',
  'work_order_status',
  'work_order_source'
);

const orderFormRef = ref();
const value = ref('');
const uploading = ref(false);
const orderData = reactive({
  rules: {
    name: [
      { required: true, message: 'Please input Activity name', trigger: 'blur' },
      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    orderType: [
      {
        required: true,
        message: '请选择',
        trigger: ['change'],
      },
    ],
    orderSource: [
      {
        required: true,
        message: '请选择',
        trigger: ['change'],
      },
    ],
  },
  orderForm: {
    orderNumber: '',
    orderType: '',
    orderSource: '',
    reportPerson: userStore.userInfo.userName,
    reportPersonPhone: userStore.userInfo.phonenumber,
    alarmTime: proxy.moment().format('YYYY-MM-DD HH:mm:ss'),
    registerTime: proxy.moment().format('YYYY-MM-DD HH:mm:ss'),
    customFinishTime: '',
    reportLocation: '',
    requireFinishTime: '',
    orderFileList: [],
    message: '',
    nextTaskApproveUserId: userStore.userInfo.userId,
  },
});

const { rules, orderForm } = toRefs(orderData);

/** 提交按钮 */
function submitForm(formEl) {
  if (!formEl) return;
  formEl.validate(valid => {
    if (valid) {
      uploading.value = true;
      orderForm.value.customFinishTime = orderForm.value.registerTime;
      addWorkOrder(orderForm.value)
        .then(response => {
          proxy.$modal.msgSuccess('提交成功');

          // open.value = false;
          // queryParams.value.areaId = '';
          // getList();
          orderForm.value = {
            ...orderForm.value,
            orderNumber: '',
            reportPerson: userStore.userInfo.userName,
            reportPersonPhone: userStore.userInfo.phonenumber,
            alarmTime: '',
            registerTime: '',
            customFinishTime: '',
            reportLocation: '',
            requireFinishTime: '',
            orderFileList: [],
            message: '',
            nextTaskApproveUserId: userStore.userInfo.userId,
          };
          bus.emit('orderTitleList');
          uploading.value = false;
        })
        .catch(() => {
          uploading.value = false;
          // proxy.$modal.msgError('提交失败');
        });
      // if (addForm.value.id != undefined) {
      //   editPatrolPoint(addForm.value).then(response => {
      //     proxy.$modal.msgSuccess('修改成功');
      //     open.value = false;
      //     getList({ page: queryParams.value.pageNum, limit: queryParams.value.pageSize });
      //   });
      // } else {
      //   addPatrolPoint(addForm.value).then(response => {
      //     proxy.$modal.msgSuccess('新增成功');
      //     open.value = false;
      //     queryParams.value.areaId = '';
      //     getList();
      //   });
      // }
    }
  });
}
</script>

<style lang="scss" scoped>
.registerOrder {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .subtitle {
    font-weight: bold;
    font-size: 17px;
    color: #333333;
  }
  .orderBox {
    height: calc(100% - 49px);
    width: 100%;
    .boxTitle {
      height: 40px;
      background: #f6f6f8;
      border-radius: 2px;
      border: 1px solid #eaeaea;
      font-weight: bold;
      font-size: 14px;
      color: #333333;
      display: flex;
      align-items: center;
      padding-left: 20px;
    }
    .boxContent {
      // height: 100%;
      height: calc(100% - 45px);
      margin-top: 10px;
      padding: 0 20px;
      overflow-y: auto;
      // border: 1px solid red;
      // .formBox {
      //   // border: 1px solid red;
      // }
      // .el-row{
      //   height: 40px;
      // }
      .el-form-item {
        margin-bottom: 5px;
      }
      .submitBtn {
        margin-top: 10px;
      }
    }
  }
}
.el-divider {
  margin: 10px 0 10px 0;
}
</style>