<!-- 详情弹窗 -->
<template>
  <ele-modal
    title="操作详情"
    width="680px"
    :visible="visible"
    @update:visible="updateVisible"
  >
    <el-form
      v-for="(item, index) in data"
      :key="index"
      size="mini"
      label-width="82px"
      class="ele-form-detail"
    >
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="审核人:">
            <div class="ele-text-secondary">
              {{ item.adminName }}
            </div>
          </el-form-item>
          <el-form-item label="审核时间:">
            <div class="ele-text-secondary">
              {{ item.adminTime }}
            </div>
          </el-form-item>
          <el-form-item label="审核状态:">
            <div class="ele-text-secondary">
              {{ item.ifCheckName }}
            </div>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="申请人:">
            <div class="ele-text-secondary">
              {{ item.cfName }}
            </div>
          </el-form-item>
          <el-form-item label="申请时间:">
            <div class="ele-text-secondary">
              {{ item.cfTime }}
            </div>
          </el-form-item>
          <el-form-item label="收货地址:" v-if="item.address">
            <div class="ele-text-secondary">
              {{ item.address }}
            </div>
          </el-form-item>
          <el-form-item label="描述:" v-if="item.descrip">
            <el-input
              :disabled="true"
              v-model="item.descrip"
              :rows="2"
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item v-if="item.logistics.length > 0" label="物流信息:">
        <text-ellipsis :content="item.logistics" class="ele-text-secondary" />
      </el-form-item>
      <div style="margin: 12px 0" v-if="index != 0">
        <el-divider />
      </div>
    </el-form>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">关闭</el-button>
    </template>
  </ele-modal>
</template>

<script>
  import TextEllipsis from './text-ellipsis.vue';

  export default {
    components: { TextEllipsis },
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 数据
      data: []
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    methods: {
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      }
    }
  };
</script>
