<template>
  <div class="container" v-loading="loading">
    <PageHeader :title="$t('field.tradeApproval')">
      <el-select v-model="site" :placeholder="$t('field.pleaseChoose')" style="width: 120px"
        @change="$refs.table.loadTableData()">
        <el-option v-for="item in siteList" :key="item.code" :label="item.localName" :value="item.code">
        </el-option>
      </el-select>
      <template #icon>
        <i class="el-icon-refresh-right refresh-icon" @click="handleRefresh"></i>
      </template>
    </PageHeader>

    <RcsTable ref="table" :columns="columns" :getTableData="getTableData" action :action-width="50">
      <template v-slot:default="scope">
        <el-tooltip :content="$t('button.check')" placement="top">
          <i class="el-icon-setting" style="font-size: 0.8vw;color: var(--blue-70)" @click="handleClick(scope.row)">
          </i>
        </el-tooltip>
      </template>
    </RcsTable>

  </div>
</template>

<script>
import PageHeader from '../../components/PageHeader.vue'
import RcsTable from '../../components/RcsTable.vue'
import WebSocketManager from '../../components/WebSocketManager.js'
import { formatterDate, onOpenModal } from '../../common/formatterFun.js'
export default {
  name: 'tradeApproval',
  components: {
    PageHeader,
    RcsTable
  },
  data() {
    return {
      statusColorMap: {
        '经办审核': 'var(--blue-60)',
        '主管审核': 'var(--orange-60)',
      },
      columns: [
        {
          prop: 'candidate7',
          minWidth: '10%',
          label: this.$t('field.dealsId'),
          formatter: (row, column, cellValue, index) => {
            return <a style={{ color: 'var(--blue-70)' }} onClick={() => onOpenModal(row.product, row.candidate7, row.candidate5)}>{row.candidate7}</a>;
          }
        },
        {
          prop: 'product',
          minWidth: '10%',
          label: this.$t('field.product'),
        },
        {
          prop: 'dealAction',
          minWidth: '10%',
          label: this.$t('field.action'),
        },
        {
          prop: 'candidate10',
          minWidth: '10%',
          label: this.$t('field.valueData'),
          formatter: (row) => formatterDate(row.candidate10)
        },
        {
          prop: 'startDescription',
          minWidth: '40%',
          label: this.$t('field.eventContent'),
          formatter: (row, column, cellValue, index) => {
            if (row.startDescription) {
              return row.startDescription.split('@')[0]
            }
            return ''
          },
          tip: true
        },
        {
          prop: 'title',
          minWidth: '8%',
          label: this.$t('field.checkType'),
          formatter: (row) => {
            return (
              <div style={{ display: 'flex', alignItems: 'center' }} >
                <span style={{ background: this.statusColorMap[row.title], display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', marginRight: '4px' }} ></span>
                <span style={{ color: this.statusColorMap[row.title] }} >{row.title}</span>
              </div>
            )
          }
        },
        {
          prop: 'startUser',
          minWidth: '6%',
          label: this.$t('field.startUser')
        },
        {
          prop: 'doneUser',
          minWidth: '6%',
          label: this.$t('field.doneUser'),
          formatter: (row) => {
            return row.doneUser || '-'
          },
        }
      ],

      siteList: [],
      site: '',

      loading: true,

      onOpenModal,

      wsManager: null
    };
  },
  async mounted() {
    await this.getSiteList()
    this.$refs.table.loadTableData()

    // 创建 WebSocketManager 实例，初始化 WebSocket 连接
    this.wsManager = new WebSocketManager('/page-600161', (actionId) => {
      if (actionId === 'tradeApproval') {
        this.handleRefresh()
      }
    });
    this.wsManager.init();
  },

  beforeDestroy() {
    // 组件销毁前关闭 WebSocket 连接
    if (this.wsManager) {
      this.wsManager.close();
    }
  },
  
  methods: {
    // 获取机构列表
    async getSiteList() {
      this.loading = true
      const res = await this.$apis.querySiteList()
      this.loading = false
      if (res.success) {
        this.siteList = res.data.result
        this.site = this.siteList[0].code
      }
    },

    async handleRefresh() {
      await this.getSiteList()
      this.$refs.table.loadTableData()
    },

    async getTableData() {
      const queryParam = {
        'queryParam.pageLimit': 50,
        'queryParam.pageStart': 1,
        'queryParam.sql': `and E.CANDIDATE4_ in('1')and E.CANDIDATE1_ = '${this.site}'`
      }
      this.loading = true
      const res = await this.$apis.queryCommunicationMessage(queryParam)
      this.loading = false
      if (res.success) {
        return {
          data: res?.data?.result?.datals,
          total: res?.data?.result?.total
        }
      }
    },

    handleClick() {
      let id = this.$menuMap.get('/settle6-web/templates/html/tradeFlowEvent')
      this.$router.push(`/iframe/${id}`)
    },
  }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 8px 9px;
}

.title {
  height: 30px !important;
}
</style>
