<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">新增指令</span>
      <div>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="cntinfo">
      <el-form :model="listQuery" :label-width="120" label-position="right">
        <div class="form-row">
          <el-form-item label="指令标题">
            <MOSTY.Other width="100%" v-model="listQuery.title" placeholder="请输入指令标题" />
          </el-form-item>
          <el-form-item label="是否生成指令号">
            <MOSTY.Select width="100%" v-model="listQuery.generateNumber" :dictEnum="[{lable:'是',value:1}]" />
          </el-form-item>
          <el-form-item label="指令类型">
            <MOSTY.Select width="100%" v-model="listQuery.type" :dictEnum="[{lable:'类型1',value:1}]" />
          </el-form-item>
          <el-form-item label="指令等级">
            <MOSTY.Select width="100%" v-model="listQuery.type" :dictEnum="[{lable:'等级1',value:1}]" />
          </el-form-item>
        </div>

        <div class="form-row">
          <el-form-item label="指令发起人">
            <el-input v-model="listQuery.initiator" placeholder="请输入发起人"/>
          </el-form-item>
          <el-form-item label="发起部门">
            <el-input v-model="listQuery.department" placeholder="请输入发起部门"/>
          </el-form-item>

          <el-form-item label="联系人">
            <el-input v-model="listQuery.contact" placeholder="请输入联系人"/>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="listQuery.phone" placeholder="请输入联系电话"/>
          </el-form-item>
        </div>

        <div class="form-row">
          <el-form-item label="关联线索" class="full-width">
            <div class="flex" style="width:100%;">
              <el-input v-model="listQuery.relatedClues" placeholder="请输入关联线索"/>
              <span type="primary" size="small" class="add-btn">+</span>
            </div>
          </el-form-item>
          <el-form-item label="主送单位" class="full-width">
            <div class="flex" style="width:100%;">
              <el-input v-model="listQuery.mainUnit" placeholder="请输入主送单位"/>
              <span type="primary" size="small" class="add-btn">+</span>
            </div>
          </el-form-item>
          <el-form-item label="抄送单位" class="full-width">
            <div class="flex" style="width:100%;">
              <el-input v-model="listQuery.ccUnit" placeholder="请输入抄送单位"/>
              <span type="primary" size="small" class="add-btn">+</span>
            </div>
          </el-form-item>
        </div>

        <div class="form-row">
          <el-form-item label="指令内容" class="full-width">
            <el-input type="textarea" v-model="listQuery.content" :rows="6" placeholder="请输入指令内容"/>
          </el-form-item>
        </div>

        <div class="form-row">
          <el-form-item label="附件" class="full-width">
            <!-- Upload选择 -->
            <MOSTY.Upload width="100%" v-model="listQuery.tpdz" />
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { ref, reactive } from 'vue';

const dialogForm = ref(false);
const listQuery = ref({
  title: '',
  generateNumber: true,
  type: '',
  level: '',
  initiator: '',
  department: '',
  contact: '',
  phone: '',
  relatedClues: '',
  mainUnit: '',
  ccUnit: '',
  content: '',
  attachments: []
});

// 初始化数据
const init = (type, row) => {
  dialogForm.value = true;
  // 根据type和row初始化表单数据
};

const close = () => {
  dialogForm.value = false;
};

defineExpose({init})
</script>

<style lang="scss" scoped>
.dialog {
  padding: 20px;

  .head_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .cntinfo{
    height: calc(100% - 70px);
    overflow: hidden;
    overflow-y: auto;
  }

  .form-row {
    display: flex;
    
    .el-form-item {
      flex: 1;
    }
  }
  .full-width {
    width: 100%;
    margin-right: 0 !important;

    .el-input {
      width: calc(100% - 40px);
      margin-right: 8px;
    }

    .add-btn {
      display: inline-block;
      background: #0072ff;
      color: #fff;
      font-size: 36px;
      text-align: center;
      width: 60px;
    }
  }

}

</style>
