<template>
  <div class="registerOrder">
    <div class="subtitle">登记工单</div>
    <el-divider />
    <div class="orderBox">
      <div class="boxTitle">基本情况</div>
      <div class="boxContent">
        <el-from ref="ruleFormRef" :rules="rules" label-width="auto" :model="orderForm">
          <el-row justify="space-between">
            <el-col :span="7">
              <el-form-item label="工单编码" prop="">
                <el-input v-model="orderForm.code" placeholder="请输入工单编码" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="工单类型" prop="">
                <el-select v-model="orderForm.type" 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="">
                <el-select v-model="orderForm.ly" 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.sbr" placeholder="请输入上报人" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="联系方式" prop="">
                <!-- phone -->
                <el-input v-model="orderForm.phone" placeholder="请输入联系方式" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="警情时间" prop="">
                <el-date-picker
                  v-model="orderForm.jqTime"
                  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.location" style="width: 97%" placeholder="请输入发送位置" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="登记时间" prop="">
                <el-date-picker
                  v-model="orderForm.djTime"
                  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.info"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                  placeholder="请输入工单信息"
                />
              </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.doneTime"
                  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-from>
      </div>
      <div class="boxBtn">
        <el-button type="primary">提交</el-button>
        <el-button >返回</el-button>
      </div>
    </div>
  </div>
</template>

<script setup name="registerOrder">
import { toRefs } from 'vue';

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 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' },
    ],
    region: [
      {
        required: true,
        message: 'Please select Activity zone',
        trigger: 'change',
      },
    ],
    count: [
      {
        required: true,
        message: 'Please select Activity count',
        trigger: 'change',
      },
    ],
  },
  orderForm: {
    name: '',
    code: '',
    date: '',
    type: '',
    ly: '',
    sbr: '',
    phone: '',
    jqTime: '',
    djTime: '',
    location: '',
    doneTime: '',
    info: '',
    state: '',
  },
});

const { rules, orderForm } = toRefs(orderData);
</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: calc(100% - 120px);
      margin-top: 20px;
    //   border: 1px solid red;
      padding: 0 20px;
    }
    .boxBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60px;
    }
  }
}
.el-divider {
  margin: 10px 0 15px 0;
}
</style>