<template>
  <div class="page-view flex-1">
    <app-filter ref="app-filter" :model="filters" class="bg-white px-15 border-radius-5" @query="onQuery"
                @reset="onReset"
    >
      <app-filter-item :filter-config="{ operation: 'EQUAL' }" el-type="input" label="特征指标名称" prop="metricName">
        <el-input v-model="filters.metricName" clearable placeholder="请输入"
                  @keyup.enter.native="$refs['app-filter'].query"
        />
      </app-filter-item>
      <app-filter-item :span="6" label="字段名称" prop="fieldName">
        <el-input v-model="filters.fieldName" clearable placeholder="请输入"
                  @keyup.enter.native="$refs['app-filter'].query"
        />
      </app-filter-item>
    </app-filter>
    <div class="pa-11 bg-white h-100 flex-col mt-11 border-radius-5">
      <div class="mb-15">
        <el-button icon="el-icon-plus" size="mini" type="primary" @click="addData"> 新增</el-button>
        <!-- icon按钮提示按钮  -->
        <tooltip-button :tooltip-text="''" />
      </div>
      <app-table
        :column="columns"
        :pagination="pagination"
        :table-data="tableData"
        :table-loading="tableLoading"
        :total="total"
        @pagination-change="onPaginationChange"
        @row-dblclick="editCompany"
      >
        <template #tableClass="scope">
          {{ scope.row.tableClass === '1' ? 'ODS贴源库' : scope.row.tableClass === '2' ? 'DWD明细库' : 'APP应用库' }}
        </template>
        <template #fieldValueType="scope">
          {{ scope.row.fieldValueType === 1 ? '普通字段' : scope.row.fieldValueType === 2 ? '枚举字典' : '多维字典项'
          }}
        </template>
        <template #enableStatus="scope">
          <el-tooltip :content="'当前状态为：' + (scope.row.enableStatus === '1' ? '启动' : '禁用')" placement="top">
            <el-switch v-model="scope.row.enableStatus" active-color="#409EFF" active-value="1" inactive-color="#ff4949"
                       inactive-value="0" @change="blockingCode(scope.row)"
            />
          </el-tooltip>
        </template>
      </app-table>
    </div>
    <!-- 结果配置-->
    <result-dialog v-if="dialogResult" v-model="dialogResult" :data="currentRow" index-type="3"
                   @confirm="onCompanyConfirm"
    />
  </div>
</template>

<script>
import tableMixin from '@/mixins/table.js';
import TooltipButton from '@/views/dataResource/dataServices/dataServiceAPI/components/TooltipButton.vue';
import ResultDialog from '@/views/dataResource/arithmeticManage/arithmeticInfo/Provider/ResultDialog.vue';
import API from '@/api/business/arithmeticInfo';

export default {
  components: { ResultDialog, TooltipButton },
  mixins: [tableMixin],
  data() {
    const TABLE_CONFIG = {
      filters: {
        level: '3',
      },
      columns: [
        { label: '特征指标名称', prop: 'name' },
        { label: '特征指标编码', prop: 'code' },
        { label: '字段名称', prop: 'fieldName' },
        {
          label: '归属数据库实例',
          prop: 'tableClass',
          dataType: 'slot',
          slot: 'tableClass',
          width: '150px',
          align: 'center',
        },
        {
          label: '字段类别',
          prop: 'fieldValueType',
          dataType: 'slot',
          slot: 'fieldValueType',
          width: '150px',
          align: 'center',
        },
        {
          label: '是否生效',
          prop: 'enableStatus',
          dataType: 'slot',
          slot: 'enableStatus',
          align: 'center',
          width: '150px',
        },
        {
          dataType: 'option',
          label: '操作',
          fixed: 'right',
          width: '300px',
          operation: [
            {
              name: '关联字段',
              type: 'text',
              size: 'mini',
              icon: 'el-icon-edit-outline',
              plain: true,
              clickFun: (row) => {
                this.showDetail(row);
              },
            },
            {
              name: '结果配置',
              type: 'text',
              size: 'mini',
              icon: 'el-icon-setting',
              color: '#E6A23C',
              plain: true,
              showHide: (row) => {
                return row.fieldValueType !== 1;
              },
              clickFun: (row) => {
                this.resultDetail(row);
              },
            },
            {
              name: '指标关联查询',
              type: 'text',
              size: 'mini',
              icon: 'el-icon-view',
              color: '#409EFF',
              plain: true,
              clickFun: (row) => {
                this.relationSearch(row);
              },
            },
            {
              name: '删除',
              type: 'text',
              size: 'mini',
              icon: 'el-icon-delete',
              color: 'red',
              plain: true,
              clickFun: (row) => {
                this.delTable(row);
              },
            },
          ],
        },
      ],
    };

    const DIALOG_CONFIG = {
      dialogResult: false,
    };

    return {
      ...TABLE_CONFIG, // table相关
      ...DIALOG_CONFIG, // 主列表dialog相关
      // tableData: [],
    };
  },
  computed: {
    dataMethod() {
      return API.algorithmIndexList;
    },
  },
  methods: {
    addData() {
      this.currentRow = null;
      this.$router.push({ name: 'algorithmAddition', query: { id: '', type: '3', pageKey: '1' } });
    },
    editCompany(row) {
      this.currentRow = row;
      this.$router.push({ name: 'algorithmAddition', query: { id: row.id, type: '3', pageKey: '2' } });
    },
    showDetail(row) {
      this.currentRow = row;
      this.$router.push({ name: 'algorithmAddition', query: { id: row.id, type: '3', pageKey: '3' } });
    },
    resultDetail(row) {
      this.currentRow = row;
      this.dialogResult = true;
    },
    relationSearch(row) {
      const href = this.$router.resolve({
        path: '/arithmeticManage/arithmeticTask/targetRelation',
        query: { id: row.id },
      }).href;
      window.open(href, '_blank');
    },
    delTable(row) {
      this.$confirm(`此操作将删除指标（${row.name}）, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          try {
            const { state, message } = await API.deletePointer(row.id);
            if (state) {
              this.getData();
              this.$message.success('删除成功！');
            } else {
              this.$message.warning(message || '删除失败！');
            }
          } catch (err) {
            this.$message.warning(err || '删除失败！');
          }
        })
        .catch(() => {
        });
    },
    blockingCode(row) {
      row.enableStatus === '1' ? row.enableStatus = '0' : row.enableStatus = '1';
      this.$confirm(`此操作将${row.enableStatus === '1' ? '禁用' : '启用'}指标（${row.name}）, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          try {
            const param = new FormData();
            param.append('flag', row.enableStatus === '1' ? 0 : 1);
            param.append('ids', row.id);
            const { state, message } = await API.updateFlagChange(param);
            if (state) {
              this.getData();
              this.$message.success(`${row.enableStatus === '1' ? '禁用' : '启用'}成功！`);
            } else {
              this.$message.warning(message);
            }
          } catch (err) {
            this.$message.warning('操作失败！');
          }
        })
        .catch(() => {
        });
    },
    onCompanyConfirm() {
      this.refresh();
    },
  },
};
</script>

<style></style>
