<template>
  <div class="pa-3 white" :class="{content: switchShow}">
    <m-filter switchover @search="handleSearch" v-model="switchShow" />
    <m-table
      v-if="!switchShow"
      class="mt-3"
      :loading="loading"
      :headers="headers"
      :items="items"
      :total="total"
      :page-info="pageInfo"
      :disable-sort="true"
      :show-select="false"
      :is-tools="false"
      @pageHandleChange="pageHandleChange"
      @sort="handleSort"
    >
    <template #name_zh="{ item }">
      <div class="defaultLink" @click="handleDetail(item)">{{ item.name_zh }}</div>
    </template>
    <template #status="{ item }">
      <v-chip
        :color="item.status ? 'success' : 'error'"
        small
      >
        {{ item.status ? '已启用' : '已禁用'}}
      </v-chip>
    </template>
    <template #tag="{ item }">
        {{ item.tag?.name_zh }}
      </template>
    </m-table>
    <div v-else style="flex: 1" class="mt-3">
      <m-graph-list ref="graph" :to-api="api.dataIndicatorListToGraph" download-image-file-name="数据指标图谱"></m-graph-list>
    </div>
  </div>
</template>

<script>
import MFilter from '../../dataGovernance/components/Filter'
import MTable from '@/components/List/table.vue'
import MGraphList from '../components/mGraphList'
import { api } from '@/api/dataGovernance'

export default {
  name: 'data-book-indicator',
  components: { MFilter, MTable, MGraphList },
  data () {
    return {
      api,
      switchShow: false,
      loading: false,
      show: false,
      queryData: {
        name_zh: null
      },
      headers: [
        { text: '名称', value: 'name_zh' },
        { text: '分类', value: 'category' },
        { text: '所属机构', value: 'organization' },
        { text: '负责人', value: 'leader' },
        { text: '更新频率', value: 'frequency' },
        { text: '数据敏感度', value: 'data_sensitivity' },
        { text: '标签', value: 'tag' },
        { text: '描述', value: 'describe' },
        { text: '数据模型', value: 'data_model' },
        { text: '指标计算规则', value: 'metricRulesText' },
        { text: '状态', value: 'status' },
        { text: '创建时间', value: 'create_time' }
      ],
      itemData: {},
      items: [],
      orders: [],
      pageInfo: {
        size: 10,
        current: 1
      },
      total: 0
    }
  },
  computed: {
    title () {
      return Object.keys(this.itemData).length ? '编辑' : '新增'
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      this.loading = true
      try {
        const { data } = await api.dataIndicatorList({ ...this.pageInfo, ...this.queryData })
        const parser = new DOMParser()
        this.items = data.records.map(e => {
          const doc = parser.parseFromString(e.metric_rules, 'text/html')
          e.metricRulesText = doc.body.innerText
          return e
        })
        this.total = data.total
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    handleSearch (val) {
      if (this.switchShow) {
        this.$nextTick(() => {
          this.$refs.graph.init(val)
        })
        return
      }
      Object.assign(this.queryData, val)
      this.pageInfo.current = 1
      this.init()
    },
    pageHandleChange (page) {
      this.pageInfo.current = page
      this.init()
    },
    handleSort (val) {
      this.orders = val
      this.init()
    },
    handleDetail (item) {
      this.$router.push(`/data-book/data-indicator/details/${item.id}/${item.name_zh}`)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
