<template>
  <el-dialog v-model="_visible" title="案件登记处理" append-to="#app" @close="handleClose">
    <h3>案件信息&gt;</h3>
    <section class="case_info">
      <div v-for="item in info" :key="`${item.key}_box`" :style="{ '--w': item.line ? '100%' : 'calc(50% - 12px)' }">
        <div>{{ item.label }}&nbsp;:&emsp;</div>
        <div class="text">{{ item.value }}</div>
      </div>
    </section>
    <h3>案件处理&gt;</h3>
    <el-form></el-form>
    <h3>案件结果&gt;</h3>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';

const emit = defineEmits(['update:visible']);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});
watch(
  () => props.visible,
  (val) => {
    _visible.value = val;
  }
);
/* --------------- data --------------- */
// #region

const _visible = ref(false);
const info = reactive([
  {
    label: '案件名称',
    key: 'caseName',
    value: '/',
  },
  {
    label: '案件编号',
    key: 'caseCode',
    value: '/',
  },
  {
    label: '关联单位',
    key: 'unit',
    value: '/',
  },
  {
    label: '关联地块',
    key: 'land',
    value: '/',
  },
  {
    label: '法定代表人',
    key: 'owner',
    value: '/',
  },
  {
    label: '联系电话',
    key: 'phone',
    value: '/',
  },
  {
    label: '统一社会信用代码',
    key: 'num',
    value: '/',
  },
  {
    label: '违法情况',
    key: 'illegal',
    value: '/',
    line: true,
  },
]);

// #endregion

/* --------------- methods --------------- */
// #region

function handleClose() {
  emit('update:visible', false);
}

// #endregion
</script>

<style lang="scss" scoped>
.el-dialog {
  h3 {
    color: #000;
  }
  .case_info {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    > div {
      width: var(--w);
      display: flex;
      padding: 10px 0;
      .text {
        flex: 1;
        word-break: break-all;
      }
    }
  }
}
</style>
