<template>
  <div>
    <div class="title">反馈</div>

    <div>
      <xy-table :height="500" :action="index" :req-opt="select" :table-item="table"></xy-table>
    </div>
  </div>
</template>

<script>
import { index } from "@/api/system/baseForm";
import { show } from "@/api/system/customFormField";

export default {
  data() {
    return {
      types: [],
      select: {
        table_name: "feedbacks",
        sort_name: "created_at"
      },
      table: [
        {
          type: "index",
          width: 50
        },
        {
          prop: "content",
          minWidth: 200,
          label: "内容",
          align: "left"
        },
        {
          prop: "status",
          width: 120,
          label: "类型",
          formatter: (d1, d2, value) => (this.types.find(i => i.value === value)?.key)
        },
        {
          prop: "feedback_department_id_departments_id_relation.name",
          width: 140,
          label: "反馈科室"
        },
        {
          prop: "feedback_admin_id_admins_id_relation.name",
          width: 140,
          label: "反馈人员"
        },
        {
          prop: "equipment.name",
          width: 200,
          label: "点位"
        }
      ]
    }
  },
  methods: {
    index,
    async getArea() {
      const obj = (await show({ id: 23 }, false))?.select_item;
      if (obj && typeof obj === "object") {
        let keys = Object.keys(obj);
        if (keys.length > 0) {
          this.types = keys.map((key) => {
            return {
              key,
              value: /^\d*$/.test(obj[key]) ? Number(obj[key]) : obj[key],
            };
          });
        }
      }
    }
  },
  computed: {},
  created() {
    this.getArea()
  }
}
</script>

<style scoped lang="scss">
.title {
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;

  padding: 10px 20px;
  position: relative;

  &::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 100%;
    transform: translateY(-50%);
    background: radial-gradient(50% 50% at 50% 50%,$primaryColor 0,$primaryColor 60%,#0000 60%,#0000 80%,$primaryColor 80%,$primaryColor 100%);

    position: absolute;
    left: 0;
    top: 50%;
  }
}
</style>
