import list from '@/mixins/list'
import routerUserMenu from '@/mixins/router-user-menu'
import breadcrumbComponent from '@/components/breadcrumb.vue'
import tableComponent from '@/components/table.vue'
import multipleSelectTree from '@/components/multiple-select-tree.vue'
import {editStatusOptions, enableStatusOptions} from '@/utils/public-options'
import {toTree} from '@/utils/util'

/**
 * KPI列表管理
 *
 *  version = "1.0.0";
 *  author = "liucui";
 *  email = "liu.cui@data-u.com";
 * */
export default {
  name: 'KPIList',
  components: {breadcrumbComponent, tableComponent, multipleSelectTree},
  mixins: [list, routerUserMenu],
  data () {
    return {
      // 主题下拉选项
      tree: [],
      // KPI类型下拉选项
      typeOptions: [],
      // 编辑状态、启用状态的对应关系
      formatterOptions: {
        'editStatusShow': editStatusOptions,
        'enableStatusShow': enableStatusOptions
      },
      // 搜索表单信息
      searchForm: {
        // KPI名称
        name: '',
        // KPI类型
        type: '',
        // 启用状态
        enableStatus: '',
        // 编辑装填
        editStatus: '',
        // 主题编码，可选多个
        topicCodes: [],
        pageSize: 10,
        page: 1
      },
      // 列表数据
      tableData: {
        data: [],
        total: 0
      },
      // 列表设置
      tableOption: {
        // 是否显示序号
        index: true,
        // 是否显示勾选框
        select: false,
        // 默认排序
        defaultSort: {prop: 'updateTime', order: 'descending'},
        // 展示列
        tableLabel: [
          {prop: 'name', title: 'KPI名称', width: '100', sort: false},
          {prop: 'kpiCode', title: 'KPI编码', width: '100', sort: false},
          {prop: 'typeName', title: 'KPI类型', width: '100', sort: false},
          {prop: 'enableStatus', title: '启用状态', width: '100', sort: false, formatter: 'enableStatusShow'},
          {prop: 'editStatus', title: '编辑状态', width: '100', sort: false, formatter: 'editStatusShow'},
          {prop: 'topicName', title: '所属主题', width: '100', sort: false},
          {prop: 'unit', title: '单位', width: '100', sort: false},
          {prop: 'description', title: '口径描述', width: '100', sort: false},
          {prop: 'updateUserName', title: '修改人', width: '100', sort: false},
          {prop: 'updateTime', title: '修改时间', width: '100', sort: true}
        ],
        // 操作
        tableOperate: {
          width: '150',
          buttons: [
            {label: '修改', methods: 'edit', color: 'safe', show: {enableStatus: 0}},
            {label: '查看', methods: 'view', color: 'safe', show: {enableStatus: 1}},
            {label: '启用', methods: 'continue', color: 'safe', show: {enableStatus: 0}},
            {label: '停用', methods: 'discontinue', color: 'warn', show: {enableStatus: 1}},
            {label: '删除', methods: 'del', color: 'warn', show: {enableStatus: 0}}
          ]
        }
      }

    }
  },
  computed: {
    /* 转换数据格式 */
    treeData: {
      get: function () {
        let tree = this.tree
        // 线性数组转成树后渲染
        let defaultProps = {
          id: 'code',
          parent_id: 'pcode',
          label: 'name'
        }
        let newTree = toTree(tree, '0', defaultProps)
        return newTree
      }
    }
  },
  mounted () {
    // 列表数据
    this.getList()
    // 获取KPI类型
    this.getKpiTypeOptions()
    // 获得主题树
    this.getTree()
  },
  methods: {

    /* 获取整个树 */
    getTree () {
      this.$api.kpiTopic.topicTtree().then(res => {
        if (res.code == 1) {
          this.tree = res.data
        }
      })
    },
    getList () {
      let params = this.searchForm
      this.$api.kpiConfig.listKpiConfigs(params)
        .then(res => {
          if (res.code == 1) {

            this.tableData.data = res.data
            this.tableData.total = res.totalNumber
          }
        })
    },
    getKpiTypeOptions () {
      this.$api.kpiCommon.listTypes()
        .then(res => {
          if (res.code == 1) {
            this.typeOptions = res.data
          }
        })
    },
    // 启用
    continue (obj) {
      this.switchStatus(obj)
    },
    // 停用
    discontinue (obj) {
      this.switchStatus(obj)
    },
    // 改状态
    switchStatus (obj) {
      let params = {id: obj.id, enableStatus: obj.enableStatus === 0 ? 1 : 0}
      this.$api.kpiConfig.updateEnableStatus(params)
        .then(res => {
          if (res.code == 1) {
            this.$message.success(res.msg)
            this.getList()
          }
        })
    },
    // 删除
    del (obj) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delAction(obj)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    delAction (obj) {
      let params = {id: obj.id}
      this.$api.kpiConfig.delete(params)
        .then(res => {
          if (res.code == 1) {
            this.$message.success(res.msg)
            this.getList()
          }
        })
    },
    // 修改
    edit (obj) {
      this.go('KPIEdit', {id: obj.id})
    },
    // 查看
    view (obj) {
      this.go('KPIView', {id: obj.id, readonly: 'readonly'})
    }
  }
}
