<!--录音质检，录音复核-->
<template>
  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="1200px" append-to-body>
    <div>
      <el-form ref="dataForm" :model="form" label-width="80px" size="mini">
        <el-row :gutter="20">
          <el-col v-if="needPlayer" :span="12">
            <audio-player ref="adplayer" :the-url="sound.url" :the-control-ist="sound.controlList"/>
          </el-col>
          <el-col :span="12">
            <el-form-item label="质检评语">
              <el-input v-model="form.checkComment" type="textarea" rows="3"/>
            </el-form-item>
          </el-col>
        </el-row>
        <div>
          <div v-if="dialogStatus=='first'" style="margin-top:10px;">
            <el-form-item label="质检模块">
              <el-select v-model="form.checkModular" placeholder="请选择质检模块" style="width:250px;">
                <el-option v-for="item of modularList" :key="item.id" :label="item.modularName" :value="item.id"/>
              </el-select>
            </el-form-item>
          </div>
          <el-row v-show="scoreData.length>0">
            <el-col>
              <el-table :data="scoreData" :span-method="objectSpanMethod" size="mini" style="width: 100%" cell-class-name="slim-row" border>
                <el-table-column prop="firstIndexName" label="一级指标"/>
                <el-table-column prop="secondIndexName" label="二级指标"/>
                <el-table-column prop="indexDetail" label="质检考核标准解析"/>
                <el-table-column prop="indexTypeName" label="考核标准类型"/>
                <el-table-column prop="date" label="质检考核">
                  <template slot-scope="scope">
                    <!--分值型-->
                    <el-input v-if="scope.row.indexType=='0'" v-model="scope.row.score" :disabled="dialogStatus=='info'" type="number" size="mini" style="width: 100px" class="inputClass"/>
                    <span v-if="scope.row.indexType=='0'" class="tips">总分：{{ scope.row.maxScore }}</span>
                    <!--是否-->
                    <el-radio-group v-if="scope.row.indexType=='1'" v-model="scope.row.score" :disabled="dialogStatus=='info'">
                      <el-radio label="1">是</el-radio>
                      <el-radio label="0">否</el-radio>
                    </el-radio-group>
                    <!--文本型-->
                    <el-input v-if="scope.row.indexType=='2'" v-model="scope.row.score" :disabled="dialogStatus=='info'" maxlength="20" size="mini" style="width: 150px" class="inputClass"/>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>

      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import AudioPlayer from '../../../components/AudioPlayer/AudioPlayer'
import { getQIndexList, getQModulerList, firstCheck, secondCheck } from '@/api/qualityCheck'

export default {
  name: 'QualityCheck',
  components: { AudioPlayer },
  props: {
    needPlayer: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update
      form: {
        callid: '',
        checkComment: '',
        checkModular: '',
        scoreSituation: ''
      }, // 表单
      scoreData: [],
      modularList: [], // 质检模块列表
      textMap: {
        first: '质检',
        twice: '质检复核'
      }, // 表头显示标题
      rules: {
        modularName: [{ required: true, message: '模块名称不能为空', trigger: ['blur', 'change'] }],
        description: [{ required: true, message: '描述不能为空', trigger: ['blur', 'change'] }],
        score: [{ required: true, message: '总分不能为空', trigger: ['blur', 'change'] }]
      }, // 前端校验规则
      rowAndColumn: [],
      pos: 0,
      posT: 0,
      disabled: false,
      sound: {
        url: '',
        controlList: 'noDownload noSpeed onlyOnePlaying'
      },
      btnLoading: false // 保存按钮的加载中状态
    }
  },
  watch: {
    'form.checkModular': function(val) {
      this.fetchQIndex(val)
    }
  },
  methods: {
    // 初始化对话框
    initDialog(dialogStatus, dialogFormVisible, row = null) {
      this.dialogStatus = dialogStatus
      this.dialogFormVisible = dialogFormVisible
      this.btnLoading = false
      this.fetchModularList()
      if (dialogStatus === 'first') { // 如果是新增，清除验证
        this.disabled = false
        this.resetForm()
        this.form.callid = row.callid
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      } else if (dialogStatus === 'twice') { // 如果是修改，将row中数据填写到输入框中
        this.form.callid = row.callid
        this.fetchQIndex('1', dialogStatus)
        if (dialogStatus === 'info') {
          this.fetchQIndex('1', dialogStatus)
          this.disabled = true
        } else {
          this.disabled = false
        }
      }
    },
    // 获取质检模块列表
    fetchModularList() {
      getQModulerList().then(response => {
        response.data = [
          { modularName: '标准模块', id: '2', pid: '1', deptName: '顶级', num: '1' },
          { modularName: '入门标准模块', id: '3', pid: '1', deptName: '顶级', num: '1' },
          { modularName: '完整标准模块', id: '4', pid: '1', deptName: '顶级', num: '1' }
        ]
        this.modularList = response.data
      })
    },
    // 获取指标列表
    fetchQIndex(modularId, type) {
      const params = {
        modularId: modularId
      }
      this.scoreData = []
      getQIndexList(params).then(response => {
        if (response.code === 200) {
          response.data.rows = [
            { 'id': '1', 'firstIndexName': '信息内容准确', 'secondIndexName': '信息内容准确无误', 'indexDetail': '信息内容准确无误', 'indexType': '0', 'indexTypeName': '分值型', 'score': '4' },
            { 'id': '1', 'firstIndexName': '信息内容准确', 'secondIndexName': '信息内容全面', 'indexDetail': '信息内容全面', 'indexType': '0', 'indexTypeName': '分值型', 'score': '4' },
            { 'id': '1', 'firstIndexName': '信息内容准确', 'secondIndexName': '是否与客户核实', 'indexDetail': '是否与客户核实', 'indexType': '0', 'indexTypeName': '分值型', 'score': '4' },
            { 'id': '1', 'firstIndexName': '信息内容准确', 'secondIndexName': '有无夸张', 'indexDetail': '有无夸张', 'indexType': '0', 'indexTypeName': '分值型', 'score': '5' },
            { 'id': '1', 'firstIndexName': '语音语速语调', 'secondIndexName': '吐字清晰', 'indexDetail': '吐字清晰', 'indexType': '0', 'indexTypeName': '分值型', 'score': '5' },
            { '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' }
          ]
          const data = response.data.rows
          const self = this
          self.rowAndColumn = []
          debugger
          for (const i in data) {
            if (i === '0') {
              self.rowAndColumn.push(1)
              self.pos = 0
            } else {
              if (data[i].firstIndexName === data[i - 1].firstIndexName) {
                // 如果firstIndexName相等就累加，并且push0
                self.rowAndColumn[self.pos] += 1
                self.rowAndColumn.push(0)
              } else {
                self.rowAndColumn.push(1)
                self.pos = i
              }
            }
            const item = data[i]
            const row = {
              id: item.id,
              firstIndexName: item.firstIndexName,
              secondIndexName: item.secondIndexName,
              indexDetail: item.indexDetail,
              indexType: item.indexType,
              indexTypeName: item.indexTypeName,
              maxScore: item.score,
              score: ''
            }
            this.scoreData.push(row)
          }
          this.listLoading = false
          if (type !== 'first') {
            this.fetchCheckDetail()
          }
        }
      })
    },
    // 获取质检详情
    fetchCheckDetail() {
      const params = '1'
      getQIndexList(params).then(response => {
        if (response.code === 200) {
          this.form.checkComment = '良好'
          this.form.checkModular = '1'
          this.form.scoreSituation = '1:1,2:1,3:1,4:1,5:1,6:1,7:1,8:1,9:1'
          // 遍历scoreSituation,得到得分
          const scoreList = this.form.scoreSituation.split(',')
          for (const i in scoreList) {
            const item = scoreList[i]
            const itemList = item.split(':')
            this.scoreData[i].score = itemList[1]
          }
        }
      })
    },
    // 重置表单
    resetForm() {
      this.form = {
        callid: '',
        checkComment: '',
        checkModular: '',
        scoreSituation: ''
      }
    },
    // 保存数据
    saveData: function() {
      if (this.dialogStatus === 'first') {
        this.qualityTwiceCheck()
      } else if (this.dialogStatus === 'twice') {
        this.qualityCheck()
      }
    },
    formatData() {
      const result = []
      for (const item of this.scoreData) {
        const line = item.id + ':' + item.score
        result.push(line)
      }
      result.join(',')
      return result
    },
    // 质检
    qualityCheck: function() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const form = {
            callid: this.form.callid,
            checkComment: this.form.checkComment,
            checkModular: this.form.checkModular,
            scoreSituation: this.formatData()
          }
          this.btnLoading = true
          firstCheck(form).then(response => {
            if (response.code === 200) {
              this.$message.success('质检成功')
              this.$emit('refresh')
              this.dialogFormVisible = false
            }
          }).catch(_ => { // 异常情况，loading置为false
            this.btnLoading = false
          })
        }
      })
    },
    // 质检复核
    qualityTwiceCheck: function() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const form = {
            callid: this.form.callid,
            checkComment: this.form.checkComment,
            checkModular: this.form.checkModular,
            scoreSituation: this.formatData()
          }
          this.btnLoading = true
          secondCheck(form).then(response => {
            if (response.code === 200) {
              this.$message.success('质检复核成功')
              this.$emit('refresh')
              this.dialogFormVisible = false
            }
          }).catch(_ => { // 异常情况，loading置为false
            this.btnLoading = false
          })
        }
      })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const self = this
      if (columnIndex === 0) {
        if (self.rowAndColumn[rowIndex]) {
          const rowNum = self.rowAndColumn[rowIndex]
          return {
            rowspan: rowNum,
            colspan: rowNum > 0 ? 1 : 0
          }
        }
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    },
    cancel: function() {
      this.dialogFormVisible = false
      this.$emit('watchChild')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .el-dialog{
    width:700px
  }
  .el-select{
    width: 100%;
  }
  .slim-row{
    padding: 4px 0px;
    .tips{
      margin-left: 10px;
      color: red;
    }
  }
</style>