<template>
  <el-dialog title="修改场景" :visible.sync="dialogVisible" width="1000px" :before-close="doClose" center custom-class="sceneModifyOut">
    <el-form ref="form" :rules="rules" :model="formModel" label-width="120px" class="sceneModify">
      <el-form-item label="场景名称" :required="true" prop="name">
        <el-input v-model="formModel.name" type="text" :style="{width: '80%'}" :maxlength="80" />
      </el-form-item>
      <el-form-item label="场景描述" :required="true" prop="description">
        <el-input v-model="formModel.description" type="textarea" :style="{width: '80%'}" />
      </el-form-item>
      <el-form-item label="处置流程" :required="true" prop="disposalProcesses">
        <el-input v-model="formModel.disposalProcesses" type="textarea" :style="{width: '80%'}" />
      </el-form-item>
      <el-form-item label="步骤描述" :required="true" prop="stepVOs">
        <el-button type="primary" size="small" style="margin-bottom:10px" @click="addStepVO">添加</el-button>
        <el-table :data="formModel.stepVOs" border style="width: 661px;">
          <el-table-column prop="description" label=" 简介" width="200">
            <template slot-scope="scope">
              <!-- <el-form-item :prop="'stepVOs[' + scope.$index + '].description'"> -->
              <el-input v-model="scope.row.description" type="text" :style="{width: '170px'}" size="small" />
              <!-- </el-form-item> -->
            </template>
          </el-table-column>
          <el-table-column prop="startActionId" label=" 首动作" width="200">
            <template slot-scope="scope">
              <!-- <el-form-item :prop="'stepVOs+[' + scope.$index + '].startActionId'"> -->
              <el-select v-model="scope.row.startActionId" type="textarea" :style="{width: '170px'}" size="small">
                <el-option
                  v-for="option in actionList"
                  :key="option.id"
                  :label="option.name"
                  :value="option.id"
                />
              </el-select>
              <!-- </el-form-item> -->
            </template>
          </el-table-column>
          <el-table-column prop="endActionId" label=" 尾动作" width="200">
            <template slot-scope="scope">
              <el-select v-model="scope.row.endActionId" type="textarea" :style="{width: '170px'}" size="small">
                <el-option
                  v-for="option in actionList"
                  :key="option.id"
                  :label="option.name"
                  :value="option.id"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="60">
            <template slot-scope="scope">
              <span class="el-icon-error deleteScene" @click="handleDelete(scope.$index)" />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label=" 指令下达规则" :required="true" prop="commandPublishStatistics">
        <el-button type="primary" size="small" style="margin-bottom:10px" @click="addStatistics">添加</el-button>
        <el-table :data="formModel.commandPublishStatistics" border style="width: 751px;">
          <el-table-column prop="keyWords" label=" 语音识别关键词列表" width="250">
            <template slot-scope="scope" style="font-size:0">
              <el-tag v-for="(tag,index) in scope.row.keyWords" :key="index" closable :disable-transitions="false" @close="handleClose(scope.$index,index)">{{ tag }}</el-tag>
              <el-input
                v-if="scope.row.inputVisible"
                :ref="'saveTagInput'+scope.$index"
                v-model="scope.row.inputValue"
                size="small"
                class="input-new-tag"
                @keyup.enter.native="handleInputConfirm(scope.$index)"
                @blur="handleInputConfirm(scope.$index)"
              />
              <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.$index)">添加</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="actionId" label="动作" width="200">
            <template slot-scope="scope">
              <el-select v-model="scope.row.actionId" type="textarea" :style="{width: '170px'}" size="small">
                <el-option
                  v-for="option in actionList"
                  :key="option.id"
                  :label="option.name"
                  :value="option.id"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="timeOut" label="超时时间" width="150">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.timeOut"
                :style="{width: '100px'}"
                :min="0"
                size="small"
                :max="Infinity"
                :step="1"
              />
            </template>
          </el-table-column>
          <el-table-column prop="score" label="总分值" width="150">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.score"
                :style="{width: '100px'}"
                :min="0"
                size="small"
                :max="Infinity"
                :step="1"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="运营部分总分" :required="true" prop="operationScore">
        <el-input-number v-model="formModel.operationScore" :controls="true" :min="0" :max="100" :step="1" />
      </el-form-item>
      <el-form-item label="关联剧本" :required="true" prop="scriptId">
        <!-- <el-input-number v-model="formModel.scriptId" :controls="true" :min="0" :max="100" :step="1" /> -->
      </el-form-item> 
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="doUpdate">{{ $t('global.confirm') }}</el-button>
      <el-button @click="doClose">{{ $t('global.cancel') }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
    name:'UpdateScene',
    props: {
        scriptList:{
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            dialogVisible:false,
            sceneId:'',
            actionList:[],
            formModel:{
                name:'', // 场景名称
                description:'', // 场景描述
                disposalProcesses:'', // 处置流程
                scriptId:'', // 剧本id
                operationScore:0, // 运营部分总分（站间停车等）
                main:true, // 是否主场景
                stepVOs:[], // 步骤描述
                commandPublishStatistics:[] // 指令下达规则列表
            }
        };
    },
    computed:{
        rules() {
            const crules = {
                name: [
                    { required: true, validator: this.validateSceneName, trigger: 'blur' },
                    { required: true, validator: this.validateSceneName, trigger: 'change' }
                ],
                description: [
                    { required: true, validator: this.validateDescription, trigger: 'blur' },
                    { required: true, validator: this.validateDescription, trigger: 'change' }
                ],
                disposalProcesses: [
                    { required: true, validator: this.validateDisposalProcesses, trigger: 'blur' },
                    { required: true, validator: this.validateDisposalProcesses, trigger: 'change' }
                ],
                scriptId:[
                    { required: true, message: '请选择剧本', trigger: 'change' }
                ],
                operationScore:[
                    { required: true, message: '请输入运营部分总分', trigger: 'blur' }
                ]
            };
            return crules;
        }
    },
    methods:{
        validateSceneName(rule, value, callback) {
            if (value.trim().length === 0) {
                this.formModel.name = this.formModel.name.replace(/\s/g, '');
                return callback(new Error('请输入场景名称'));
            } else {
                return callback();
            }
        },
        validateDescription(rule, value, callback) {
            if (value.trim().length === 0) {
                this.formModel.description = this.formModel.description.replace(/\s/g, '');
                return callback(new Error('请输入场景描述'));
            } else {
                return callback();
            }
        },
        validateDisposalProcesses(rule, value, callback) {
            if (value.trim().length === 0) {
                this.formModel.disposalProcesses = this.formModel.disposalProcesses.replace(/\s/g, '');
                return callback(new Error('请输入处置流程'));
            } else {
                return callback();
            }
        },
        doShow(sceneId) {
            this.dialogVisible = true;
            this.sceneId = sceneId;

        },
        doClose() {
            this.$refs.form.resetFields();
            this.dialogVisible = false;
        },
        doUpdate() {

        },
        addStepVO() {
            this.formModel.stepVOs.push({competitionId:this.sceneId, description:'', startActionId:'', endActionId:''});
        },
        addStatistics() {
            this.formModel.commandPublishStatistics.push({competitionId:this.sceneId, keyWords:[], actionId:'', timeOut:0, inputVisible:false, inputValue:'', score:0 });
        },
        handleDelete(index) {
            this.formModel.stepVOs.splice(index, 1);
        },
        handleClose(index, tagIndex) {
            const keyWords = this.formModel.commandPublishStatistics[index].keyWords;
            keyWords.splice(tagIndex, 1);
        },
        handleInputConfirm(index) {
            const inputValue = this.formModel.commandPublishStatistics[index].inputValue;
            if (inputValue) {
                this.formModel.commandPublishStatistics[index].keyWords.push(inputValue);
            }
            this.formModel.commandPublishStatistics[index].inputVisible = false;
            this.formModel.commandPublishStatistics[index].inputValue = '';
        },
        showInput(index) {
            this.formModel.commandPublishStatistics[index].inputVisible = true;
            this.$nextTick(_ => {
                this.$refs['saveTagInput' + index].$refs.input.focus();
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.deleteScene{
    font-size: 24px;
    color: #f00;
    cursor: pointer;
}
.sceneModify{
    height:500px;
    overflow: auto;
}
.input-new-tag {
    width: 60px;
    margin-left: 10px;
    margin-bottom: 10px;
    vertical-align: bottom;
}
.button-new-tag{
    margin-bottom:10px;
}
</style>
<style lang="scss">
.sceneModifyOut.el-dialog--center .el-dialog__body {
    text-align: initial;
    padding: 25px 10px 30px 10px;
}
.el-tag {
    margin-right: 10px;
    margin-bottom: 10px;
    vertical-align:top;
}
</style>
