<template>
  <div class="view-carrierComputationalModel">
    <div class="view-carrierComputationalModel-title">
      <div class="view-carrierComputationalModel-btn">
        <el-button type="success" @click="addDialog()">新增</el-button>
        <el-button :disabled="multipleSelection.length == 0" type="warning" @click="allRmove()">删除</el-button>
        <el-button type="primary">导出</el-button>
        <el-button :disabled="multipleSelection.length == 0" type="primary" @click="publish()">发布</el-button>
      </div>
      <div class="view-carrierComputationalModel-search">
        <el-input @keyup.enter.native="getTableData('searchValue')" placeholder="请输入内容" v-model="searchValue" class="input-with-select">
          <el-button @click="getTableData('searchValue')" slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>
    <div class="view-carrierComputationalModel-table">
      <el-table :data="tableData" style="width: 100%" height="calc(100vh - 280px)" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"> </el-table-column>
        <el-table-column prop="formulaName" width="200" label="公式名称"> </el-table-column>
        <el-table-column prop="formula" label="公式" align="center">
          <template slot-scope="scope">
            <span><MathJax ref="MathJax" :formula="scope.row.formulaShow" /></span>
          </template>
        </el-table-column>
        <el-table-column prop="versionNumber" width="150" label="版本号"> </el-table-column>
        <el-table-column prop="state" label="状态" align="center" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1" class="success-state">启用</span>
            <span v-if="scope.row.status == 0" class="warning-state">禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="300">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="remove(scope.row)" type="text" size="small">删除</el-button>
            <el-button :disabled="scope.row.status == 1" @click="updateState(scope.row, '启用')" type="text" size="small">启用</el-button>
            <el-button :disabled="scope.row.status == 0" @click="updateState(scope.row, '禁用')" type="text" size="small">禁用</el-button>
            <el-button @click="openDrawer(scope.row)" type="text" size="small">历史版本</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :total="pagination.total"
        :page-size="pagination.pageSize"
        :page-sizes="[10, 20, 30, 40, 50]"
        layout="sizes,total, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleIndexChange"
        style="padding: 20px; text-align: center"
      >
      </el-pagination>
    </div>

    <el-dialog v-if="dialogVisible" :title="dialogTile" :visible.sync="dialogVisible" width="1000px" :before-close="handleClose">
      <el-form ref="form" :model="activeRow" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="公式名称">
              <el-input v-model="activeRow.formulaName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="公式"><MathJax ref="MathJax" :formula="activeRow.formulaUse" /> </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="参数">
              <el-button @click="add(item)" type="primary" v-for="item in btnList" :key="item.dictCode">{{ item.dictLabel }}</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="运算符">
              <el-button :disabled="disabledBasics" @click="add(item)" type="primary" v-for="item in operationalBasics" :key="item.dictCode">{{ item.dictLabel }}</el-button>
              <el-button @click="add(item)" type="primary" v-for="item in operationalSpecial" :key="item.dictCode">{{ item.dictLabel }}</el-button>
              <el-button @click="add(item)" type="primary" v-for="item in operationalOperation" :key="item.dictCode">{{ item.dictLabel }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleClick">确 定</el-button>
      </span>
    </el-dialog>

    <el-drawer title="历史版本" size="800px" :visible.sync="drawer" direction="rtl" :before-close="handleCloseDrawer">
      <el-table :data="drawerTableData" style="width: 100%" height="calc(100vh - 160px)">
        <el-table-column prop="formulaName" width="160" label="公式名称"> </el-table-column>
        <el-table-column prop="formula" label="公式" align="center">
          <template slot-scope="scope">
            <span><MathJax ref="MathJax" :formula="scope.row.formulaShow" /></span>
          </template>
        </el-table-column>
        <el-table-column prop="versionNumber" width="150" label="版本号"> </el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button @click="drawerUpdateState(scope.row, '启用')" type="text" size="small">启用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :total="tableRequset.total"
        :page-size="tableRequset.pageSize"
        :page-sizes="[10, 20, 30, 40, 50]"
        layout="sizes,total, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleIndexChange"
        style="padding: 20px; text-align: center"
      >
      </el-pagination>
    </el-drawer>
  </div>
</template>

<script>
import { columns, options, addFormula } from './index'
import { dictList, page, addCalculationModel, editCalculationModel, removeCalculationModel, enableOrDisable, calculationModelVersionPage, enableModel, release } from '@/api/carrierStandard/carrierComputationalModel'
import { useMessage } from '@/utils/element-ui'

export default {
  name: 'carrierComputationalModel',
  components: {},
  data() {
    // 这里存放数据
    return {
      btnList: [], //按钮数组
      operationalBasics: [], // 基础操作符数组
      disabledBasics: false,
      operationalSpecial: [], // 特殊操作符数组
      disabledSpecial: false,
      operationalOperation: [], // 功能操作符数组
      disabledOperation: false,
      multipleSelection: [],
      searchValue: '',
      tableData: [],
      dialogVisible: false,
      dialogTile: '新增公式',
      activeRow: {
        formulaName: '',
        formulaUse: ''
      },
      drawer: false,
      pagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      drawerTableData: [],
      tableRequset: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      columns: columns(this),
      options,
      calculationModelId: null,
      foucsRow: null
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    add(item) {
      addFormula(item, this)
    },
    async handleClick() {
      if (this.dialogTile == '编辑公式') {
        let postData = {
          formulaName: this.activeRow.formulaName,
          formulaUse: this.activeRow.formulaUse,
          calculationModelId: this.calculationModelId
        }
        const { code, data } = await editCalculationModel(postData)
        if (code == 200) {
          this.getTableData()
          useMessage('success', '修改成功')
          this.dialogVisible = false
          this.activeRow.formulaName = ''
          this.activeRow.formulaUse = ''
        }
      } else {
        let postData = {
          formulaName: this.activeRow.formulaName,
          formulaUse: this.activeRow.formulaUse
        }
        const { code, data } = await addCalculationModel(postData)
        if (code == 200) {
          this.getTableData()
          useMessage('success', '添加成功')
          this.dialogVisible = false
          this.activeRow.formulaName = ''
          this.activeRow.formulaUse = ''
        }
      }
      this.calculationModelId = null
    },
    async getTableData(searchValue) {
      searchValue ? (this.pagination.pageIndex = 1) : (this.pagination.pageIndex = this.pagination.pageIndex)
      let postData = {
        pageSize: this.pagination.pageSize,
        pageIndex: this.pagination.pageIndex,
        keyword: this.searchValue
      }
      const { code, data } = await page(postData)
      if (code == 200) {
        this.tableData = data.list
        this.pagination.total = data.totalCount
      }
    },
    async fetchTableData() {
      let postData = {
        pageSize: this.tableRequset.pageSize,
        pageIndex: this.tableRequset.pageIndex,
        calculationModelId: this.foucsRow.calculationModelId
      }
      const { code, data } = await calculationModelVersionPage(postData)
      if (code == 200) {
        this.drawerTableData = data.list
        this.tableRequset.total = data.totalCount
      }
    },
    drawerUpdateState(row) {
      this.$confirm('是否确认启用该公式?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let postData = {
            calculationModelVersionId: row.calculationModelVersionId,
            calculationModelId: row.calculationModelId
          }
          const { code, data } = await enableModel(postData)
          if (code == 200) {
            this.handleCloseDrawer()
            this.getTableData()
          }
          this.$message({
            type: 'success',
            message: '启用成功!'
          })
        })
        .catch(() => {})
    },
    openDrawer(row) {
      this.foucsRow = row
      this.fetchTableData()
      this.drawer = true
    },
    handleCloseDrawer() {
      this.drawer = false
      this.foucsRow = null
    },
    handleIndexChange(val) {
      this.pagination.pageIndex = val
      this.getTableData()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getTableData()
    },
    drawerhandleSizeChange(val) {
      this.tableRequset.pageIndex = val
      this.fetchTableData()
    },

    drawerhandleIndexChange(val) {
      this.tableRequset.pageIndex = val
      this.fetchTableData()
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    edit(row) {
      this.activeRow.formulaName = row.formulaName
      this.activeRow.formulaUse = row.formulaUse
      this.calculationModelId = row.calculationModelId
      this.dialogTile = '编辑公式'
      this.getdict()
    },
    remove(row) {
      this.$confirm('是否确认删除该公式?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { code, data } = await removeCalculationModel({ calculationModelIds: [row.calculationModelId] })
          if (code == 200) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getTableData()
          }
        })
        .catch(() => {})
    },

    allRmove() {
      this.$confirm('是否确认删除选中公式?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let arr = []
          this.multipleSelection.forEach((i) => {
            arr.push(i.calculationModelId)
          })
          let postData = {
            calculationModelIds: arr
          }
          const { code, data } = await removeCalculationModel(postData)
          if (code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getTableData()
            this.multipleSelection = []
          }
        })
        .catch(() => {})
    },

    publish() {
      this.$confirm('是否确认发布选中公式?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let arr = []
          this.multipleSelection.forEach((i) => {
            arr.push(i.calculationModelId)
          })
          let postData = {
            calculationModelIds: arr
          }
          const { code, data } = await release(postData)
          if (code == 200) {
            this.$message({
              type: 'success',
              message: '发布成功!'
            })
            this.getTableData()
            this.multipleSelection = []
          }
        })
        .catch(() => {})
    },

    updateState(row, type) {
      this.$confirm(`是否确认${type}该公式?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let postData = {
            calculationModelId: row.calculationModelId,
            status: type == '禁用' ? 0 : 1
          }
          const { code, data } = await enableOrDisable(postData)
          if (code == 200) {
            this.getTableData()
          }
          this.$message({
            type: 'success',
            message: `${type}操作成功!`
          })
        })
        .catch(() => {})
    },

    handleClose() {
      this.dialogVisible = false
      this.activeRow.formulaName = ''
      this.activeRow.formulaUse = ''
      this.calculationModelId = null
    },
    async addDialog() {
      this.dialogTile = '新增公式'
      this.activeRow.formulaName = ''
      this.activeRow.formulaUse = ''
      this.getdict()
    },
    async getdict() {
      const { code, data } = await dictList({})
      if (code == 200) {
        this.btnList = data.filter((i) => i.dictType == 'model_data')
        this.operationalBasics = data.filter((i) => i.dictType == 'model_symbol_basics')
        this.operationalSpecial = data.filter((i) => i.dictType == 'model_symbol_special')
        this.operationalOperation = data.filter((i) => i.dictType == 'model_symbol_operation')
        this.dialogVisible = true
      }
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
