<template>
  <app-container>
    <el-row type="flex">
      <el-col :span="5">
        <moduler-tree @change="changeType"/>
      </el-col>
      <el-col :span="19">
        <div class="btn-div">
          <el-button class="filter-item" style="" size="small" type="primary" icon="el-icon-plus" @click="addIndex">新增指标</el-button>
          <el-button v-if="status=='0'" class="filter-item" style="" size="small" type="primary" icon="el-icon-magic-stick" @click="active">生效</el-button>
          <el-button v-if="status=='1'" class="filter-item" style="" size="small" type="primary" icon="el-icon-magic-stick" @click="inactive">失效</el-button>
          <el-button class="filter-item" style="" size="small" type="primary" icon="el-icon-delete" @click="delModular">删除模块</el-button>
        </div>
        <normal-table
          :data="list"
          :head="tableOption.head"
          :size="size"
          :query="listQuery"
          :total="total"
          :columns="columns"
          :list-loading="listLoading"
          :options="tableOption.options"
          :tools-option="tableOption.toolsOption">
          <template slot="columns">
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <!--<el-button type="text" size="small" @click.stop="detail(scope.row)">详情</el-button>-->
                <el-button type="text" size="small" @click.stop="editIndex(scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click.stop="delIndex(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </template>
        </normal-table>
      </el-col>
    </el-row>
    <edit-index ref="editdialog" @watchChild="fetchData"/>
  </app-container>
</template>

<script>
import AppContainer from '@/components/layout/AppContainer'
// import SearchArea from '@/components/SearchArea/SearchArea'
// import SearchItem from '@/components/SearchArea/SearchItem'
import NormalTable from '@/components/NomalTable'
import { getQIndexList, delQIndex, delModular, activeQModular } from '@/api/qualityCheck'
// import TypeTree from './components/TypeTree'
// import EditKnowledge from './editKnowledge'
// import KnowledgeDetail from '../caseManage/components/knowledgeDetail'
import ModulerTree from './components/modulerTree'
import EditIndex from './editIndex'

export default {
  name: 'QualityIndexManage',
  components: { EditIndex, AppContainer, NormalTable, ModulerTree },
  data() {
    return {
      modularId: '',
      status: '1',
      list: [],
      total: 0,
      listLoading: true, // 列表加载动画
      multipleSelection: [], // 多选选中项
      listQuery: {
        modularId: '',
        offset: 1,
        limit: 100,
        sort: '',
        order: ''
      }, // 筛选条件
      columns: [
        {
          text: '一级指标',
          value: 'firstIndexName',
          align: 'center'
        },
        {
          text: '二级指标',
          value: 'secondIndexName',
          align: 'center'
        },
        {
          text: '指标考核标准解析',
          value: 'indexDetail',
          align: 'center'
        },
        {
          text: '分值',
          value: 'score',
          align: 'center'
        },
        {
          text: '评分项类型',
          value: 'indexTypeName',
          align: 'center'
        }
      ], // 显示列
      tableOption: {
        head: {
          show: false, // 是否需要标题栏，
          text: '数据列表' // 标题名称
        },
        options: {
          needIndex: true, // 是否需要序号列
          needMultipleSelection: false // 需要多选列
        },
        toolsOption: {
          selectColumns: false, // 是否需要筛选列
          refresh: false // 是否需要刷新按钮
        }
      },
      size: 'small'
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    search() {
      this.fetchData(false)
    },
    // 获取数据
    fetchData(isNowPage = true) {
      this.listLoading = true
      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
        this.listQuery.offset = 1
      }
      this.listLoading = true
      getQIndexList(this.listQuery).then(response => {
        if (response.code === 200) {
          response.data.rows = [
            { 'id': '1', 'firstIndexName': '信息内容准确', 'secondIndexName': '信息内容准确无误', 'indexDetail': '信息内容准确无误', 'indexType': '1', 'indexTypeName': '分值型', 'score': '4' },
            { 'id': '1', 'firstIndexName': '信息内容准确', 'secondIndexName': '信息内容全面', 'indexDetail': '信息内容全面', 'indexType': '1', 'indexTypeName': '分值型', 'score': '4' },
            { 'id': '1', 'firstIndexName': '信息内容准确', 'secondIndexName': '是否与客户核实', 'indexDetail': '是否与客户核实', 'indexType': '1', 'indexTypeName': '分值型', 'score': '4' },
            { 'id': '1', 'firstIndexName': '信息内容准确', 'secondIndexName': '有无夸张', 'indexDetail': '有无夸张', 'indexType': '1', 'indexTypeName': '分值型', 'score': '4' },
            { 'id': '1', 'firstIndexName': '语音语速语调', 'secondIndexName': '吐字清晰', 'indexDetail': '吐字清晰', 'indexType': '1', 'indexTypeName': '分值型', 'score': '4' },
            { 'id': '1', 'firstIndexName': '语音语速语调', 'secondIndexName': '语调适当起伏', 'indexDetail': '语调适当起伏', 'indexType': '1', 'indexTypeName': '分值型', 'score': '4' },
            { 'id': '1', 'firstIndexName': '语音语速语调', 'secondIndexName': '声音修饰', 'indexDetail': '声音修饰', 'indexType': '1', 'indexTypeName': '分值型', 'score': '4' },
            { 'id': '1', 'firstIndexName': '语音语速语调', 'secondIndexName': '是否拖音', 'indexDetail': '是否拖音', 'indexType': '1', 'indexTypeName': '分值型', 'score': '4' },
            { 'id': '1', 'firstIndexName': '语音语速语调', 'secondIndexName': '语速适中', 'indexDetail': '语速适中', 'indexType': '1', 'indexTypeName': '分值型', 'score': '4' }
          ]
          this.list = response.data.rows
          this.total = response.data.total
          this.listLoading = false
        }
      })
    },
    detail(row) {
      this.$refs.editdialog.initDialog('info', true, row)
    },
    // 添加指标
    addIndex(row) {
      this.$refs.editdialog.initDialog('create', true, row)
    },
    // 编辑指标
    editIndex(row) {
      this.$refs.editdialog.initDialog('update', true, row)
    },
    // 删除指标
    delIndex(row) {
      this.$confirm(
        '确定要删除该指标吗？',
        '确认操作',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        delQIndex(row.secondIndex).then(response => {
          if (response.code === 200) {
            this.$message.success('删除成功')
            this.fetchData()
          }
        })
      })
    },
    // 删除模块
    delModular() {
      this.$confirm(
        '确定要删除该模块吗？',
        '确认操作',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        delModular(this.modularId).then(response => {
          if (response.code === 200) {
            this.$message.success('删除成功')
            this.fetchData()
          }
        })
      })
    },
    // 生效模块
    active() {
      this.activeModular('1')
    },
    // 失效模块
    inactive() {
      this.activeModular('0')
    },
    activeModular(status) {
      activeQModular(this.modularId, status).then(response => {
        if (response.code === 200) {
          this.$message.success('操作成功')
          if (status == '1') {
            this.status = '0'
          } else {
            this.status = '1'
          }
        }
      })
    },
    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
    changePage(val) {
      if (val && val.size) {
        this.listQuery.limit = val.size
      }
      if (val && val.page) {
        this.listQuery.offset = val.page
      }
      this.fetchData()
    },
    // 更换模块
    changeType(modular) {
      this.modularId = modular.id
      this.search()
    },
    watchChild() {
      console.log('watchChild')
      this.fetchData()
    }
  }
}
</script>

<style scoped>
  .btn-div{
    margin-bottom: 10px;
  }
</style>