<template>
  <div class="model_container">
    <a-layout>
      <a-layout-header class="header_tool_bar">
        <a-row>
          <a-col :span="18">
            <a-space :size="12">
              <a-input-search
                allowClear
                :placeholder="$t('请输入模型名称')"
                v-model.lazy="pager.queryParams.F_tableName_like"
                @search="search"
              />
              <a-input-search
                allowClear
                :placeholder="$t('请输入英文名称')"
                v-model.lazy="pager.queryParams.F_tableCode_like"
                @search="search"
              />
              <a-input-search
                allowClear
                :placeholder="$t('请输入指标编码')"
                v-model.lazy="pager.queryParams.F_indicatorCode_like"
                @search="search"
              />
              <a-input-search
                allowClear
                :placeholder="$t('请输入指标名称')"
                v-model.lazy="pager.queryParams.F_indicatorName_like"
                @search="search"
              />
            </a-space>
          </a-col>
          <a-col :span="6" align="right">
            <a-space :size="12">
              <a-button type="primary" icon="search" @click="search">{{
                $t("查询")
              }}</a-button>
              <a-button type="primary" icon="plus" @click="handleAdd">{{
                $t("新增")
              }}</a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-layout-header>
      <a-layout-content class="body_container">
        <div class="table_list">
          <vxe-table
            show-overflow
            show-header-overflow
            border
            resizable
            :loading="tableLoading"
            :row-config="{ isHover: true }"
            :data="tableData"
            height="auto"
          >
            <vxe-column type="seq" :title="$t('序号')" width="50" align="center">
            </vxe-column>
            <vxe-column
              field="tableName"
              :title="$t('模型名称')"
              width="160"
            ></vxe-column>
            <vxe-column
              field="tableCode"
              :title="$t('英文名称')"
              width="160"
            ></vxe-column>
            <vxe-column field="tableSno" :title="$t('模型编码')" width="160"></vxe-column>
            <vxe-column title="关联指标" min-width="220">
              <template #default="{ row }">
                <div class="indicator_list">
                  <template v-for="item in row.indicatorList">
                    <a-tooltip :key="item.id" :title="item.indicatorName">
                      <a-tag color="blue">
                        {{ item.indicatorCode }}
                      </a-tag>
                    </a-tooltip>
                  </template>
                </div>
              </template>
            </vxe-column>
            <vxe-column
              field="title"
              :title="$t('操作')"
              width="260"
              align="center"
              fixed="right"
            >
              <template #default="{ row }">
                <div class="operate">
                  <a-button type="link" @click="handleEdit(row)">{{
                    $t("编辑")
                  }}</a-button>
                  <a-button type="link">{{ $t("集成调度") }}</a-button>
                  <a-button type="link" @click="viewNav(row)">{{
                    $t("指标导览")
                  }}</a-button>
                  <a-button type="link" class="a_danger" @click="handleDelete(row)">{{
                    $t("删除")
                  }}</a-button>
                </div>
              </template>
            </vxe-column>
            <template #empty>
              <a-empty
                :image-style="{
                  height: '80px',
                }"
              >
                <span slot="description">{{ $t("暂无数据") }}</span>
              </a-empty>
            </template>
          </vxe-table>
        </div>
        <vxe-pager
          background
          :current-page.sync="pager.pageNum"
          :page-size.sync="pager.pageSize"
          :total="total"
          @page-change="getList"
          :layouts="['Total', 'PrevJump', 'JumpNumber', 'NextJump', 'FullJump']"
        ></vxe-pager>
      </a-layout-content>
    </a-layout>
    <!--  -->
    <set-model
      v-model="setModel.show"
      :modelId="setModel.id"
      :tableId="setModel.tableId"
      @change="search"
    />
    <indicatorNavigationDrawer :show.sync="setNav.show" v-model="setNav.info" />
  </div>
</template>
<script>
const $modelService = require("w-vue-chongqing/src/api/dataModel");
const setModel = require("./components/setModel.vue").default;
import integratSchedue from "w-vue-chongqing/integratSchedue";
export default {
  name: "hdw",
  components: {
    setModel,
    ...integratSchedue,
  },
  data() {
    return {
      queryParams: {
        indicatorCode: undefined,
        indicatorName: undefined,
        tableCode: undefined,
        tableName: undefined,
      },
      total: 0,
      pager: {
        pageNum: 1,
        pageSize: 15,
        queryParams: {
          F_isDel_eq: 0,
          F_indicatorName_like: undefined,
          F_indicatorCode_like: undefined,
          F_tableCode_like: undefined,
        },
      },
      tableLoading: false,
      tableData: [],
      setModel: {
        show: false,
        id: undefined,
        tableId: undefined,
      },
      setNav: {
        show: false,
        info: {
          id: undefined,
          code: undefined,
          name: undefined,
        },
      },
    };
  },
  created() {
    this.search();
  },
  methods: {
    /**
     * @Author: Jason Liu
     * @description: 查看指标导览
     */
    viewNav({ indicatorCode, indicatorName }) {
      this.setNav = {
        show: true,
        info: {
          id: indicatorCode,
          code: indicatorCode,
          name: indicatorName,
        },
      };
    },
    search() {
      this.pager.pageNum = 1;
      this.getList();
    },
    // 编辑模型
    handleEdit(row) {
      this.setModel.show = true;
      // this.setModel.id = '0cdc79ab0cc6410c962a72c0c3a4a84a'
      this.setModel.id = row.id;
      this.setModel.tableId = row.tableId;
    },
    // 新增模型
    handleAdd() {
      this.setModel.show = true;
      this.setModel.id = undefined;
      this.setModel.tableId = undefined;
    },
    // 删除模型
    handleDelete({ id }) {
      this.$confirm({
        title: this.$t("提示"),
        content: this.$t("确定删除吗？"),
        onOk: () => {
          $modelService.deleteIndicatorTableData({ id }).then(() => {
            this.$message.success(this.$t("删除成功"));
            this.search();
          });
        },
        onCancel() {},
      });
    },
    // 获取列表数据
    getList() {
      this.tableLoading = true;
      $modelService
        .getIndicatorTableData(this.pager)
        .then(({ data, count }) => {
          this.tableData = data || [];
          this.total = Number(count);
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
  },
};
</script>
<style lang="less">
.model_container {
  height: 100%;
  .ant-layout {
    background: #fff;
    height: 100%;
    .header_tool_bar {
      background: #fff;
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid #e9e9e9;
      position: relative;
      padding: 0 12px;
      overflow: hidden;
      z-index: 2;
    }
  }
  .table_list {
    width: 100%;
    height: calc(100% - 48px);
    display: inline-block;
    margin-top: 16px;
    .indicator_list {
      display: inline-flex;
    }
  }
}
</style>
