<template>
  <div>
    <el-drawer
      ref="elDrawer"
      :title="detail.name || '详情'"
      :visible.sync="isShow"
      size="45%"
      direction="rtl"
    >
      <template>
        <el-descriptions
          size="medium"
          direction="vertical"
          :column="3"
          :labelStyle="{ 'font-weight': '600', width: '33%' }"
          :content-style="{ width: '33%' }"
          border
          style="margin: 20px 10px"
        >
          <template v-for="info in formInfo">
            <el-descriptions-item :label="info.name">{{
              contentFormat(info)
            }}</el-descriptions-item>
          </template>
        </el-descriptions>
      </template>
    </el-drawer>
  </div>
</template>

<script>
import { show } from "@/api/system/baseForm";
export default {
  props: {
    formInfo: {
      type: Array,
      default: () => [],
    },
    tableName: String,
  },
  data() {
    return {
      id: "",
      isShow: false,

      detail: {},
    };
  },
  methods: {
    show() {
      this.isShow = true;
    },
    hidden() {
      this.isShow = false;
    },
    setId(id) {
      if (typeof id == "number") {
        this.id = id;
      } else {
        console.error("error typeof id: " + typeof id);
      }
    },
    getId() {
      return this.id;
    },
  },
  computed: {
    contentFormat() {
      return function (i) {
        if (i.parameter_id) {
          return this.detail[i.link_with_name]?.value;
        }
        if (i.link_table_name) {
          if (i.link_relation === "hasOne") {
            return (
              this.detail[i.link_with_name]?.name ||
              this.detail[i.link_with_name]?.no ||
              this.detail[i.link_with_name]?.value
            );
          }
          if (i.link_relation === "hasMany") {
            return this.detail[i.link_with_name]
              ?.map((o) => o?.name || o?.no || o?.value)
              ?.toString();
          }
        }

        return this.detail[i.field]
      };
    },
  },
  watch: {
    isShow(newVal) {
      if (newVal) {
        show(
          {
            table_name: this.tableName,
            id: this.id,
          },
          true
        ).then((res) => {
          console.log(111, res);
          this.detail = res;
        });
      }
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.btns {
  margin: 0 10px 12px 10px;
}
</style>
