<template>
  <div class="app-container">
    <div style="margin: 30px;">sop规则【AI对话】模板</div>
    <div style="margin-top: 10px;margin-left: 50px;margin-right: 100px;margin-bottom: 60px;">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入模板标题" />
        </el-form-item>

        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{dict.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="form.sort" :min="0" label="排序"></el-input-number>
        </el-form-item>
        <el-form-item label="规则" prop="setting">
          <el-timeline>
            <el-timeline-item
              :timestamp="'第'+(1+(form.gap*index))+'天'"
              :color="'#0bbd87'"
              placement="top"
              v-for="(item, index) in setting"
              :key="index"
              style="margin-top: 10px;">
              <el-row>
                <el-col :span="22">
                  <div style="background-color: #fbfbfb;padding: 15px; border: 1px solid #e6e6e6; margin-bottom: 20px;">
                    <el-form :model="item" label-width="80px">
                      <el-form-item label="规则">
                        <div v-for="(content, contentIndex) in item.content"
                             :key="contentIndex"
                             style="background-color: #fdfdfd;padding: 15px; border: 1px solid #e6e6e6; margin-bottom: 20px;">
                          <el-row>
                            <el-col :span="22">
                              <el-form :model="content" label-width="70px">
                                <!-- 第一天不显示时间选择 -->
                                <el-form-item label="时间" prop="time" v-if="index > 0">
                                  <el-time-picker
                                    class="custom-input"
                                    v-model="content.time"
                                    value-format="HH:mm"
                                    format="HH:mm"
                                    :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
                                    placeholder="时间"
                                    style="width: 100px;height: 20px;">
                                  </el-time-picker>
                                </el-form-item>


                                <div v-for="(setList, setIndex) in content.setting"
                                     :key="setIndex"
                                     style="background-color: #fdfdfd; border: 1px solid #e6e6e6; margin-bottom: 20px;">
                                  <el-row>
                                    <el-col :span="22">
                                      <el-form :model="setList" label-width="70px">
										  <el-form-item label="间隔时间" prop="intervalTime" style="margin: 2%">
										    <el-input-number
										      v-model="setList.intervalTime"
										      :min="1"
										      :max="1440"
										      style="width:100;margin-top: 10px;"
										      >
										    </el-input-number>
										    <span class="tip">单位：分钟，最大1440分钟(24小时)</span>
										  </el-form-item>
                                        <el-form-item label="内容" style="margin: 2%">
                                          <el-input
                                            v-model="setList.value"
                                            type="textarea"
                                            :rows="3"
                                            placeholder="内容"
                                            style="width: 90%;margin-top: 10px;"/>
                                        </el-form-item>
										<el-form-item label="交流状态" style="margin: 2%" >
										  <el-select  v-model="setList.talkType" placeholder="更改交流状态" size="mini" style=" margin-right: 10px;" clearable>
											<el-option label="非首次交流" value="非首次交流"></el-option>
											<el-option label="首次交流1" value="首次交流1"></el-option>
											<el-option label="首次交流2" value="首次交流2"></el-option>
										    <el-option label="交流状态1" value="交流状态1"></el-option>
										    <el-option label="交流状态2" value="交流状态2"></el-option>
										    <el-option label="交流状态3" value="交流状态3"></el-option>
										  </el-select>
										</el-form-item>
                    </el-form>
                        </el-col>
                            <el-col :span="1" :offset="1">
                              <i class="el-icon-delete"
                                 @click="delSetList(index,contentIndex,setIndex)"
                                 style="margin-top: 20px;"
                                 v-if="content.setting.length>1 && (formType==1 || formType==2)"></i>
                            </el-col>
                      </el-row>
                    </div>
                                <el-link type="primary"
                                        class="el-icon-plus"
                                        :underline="false"
                                        @click='addSetList(contentIndex,item.content)' v-if="(formType==1 || formType==2)">添加内容</el-link>
                              </el-form>
                            </el-col>
                            <el-col :span="1" :offset="1">
                              <i class="el-icon-delete"
                                 @click="delContent(index,contentIndex)"
                                 style="margin-top: 20px;"
                                 v-if="item.content.length>1 && (formType==1 || formType==2)"></i>
                            </el-col>
                          </el-row>
                        </div>
                        <el-link type="primary"
								                v-if="index > 0 && (formType==1 || formType==2)"
                                class="el-icon-plus"
                                :underline="false"
                                @click='addContent(index)' >添加规则</el-link>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
                <el-col :span="1" :offset="1">
                  <i class="el-icon-delete"
                     @click="delSetting(index)"
                     v-if="setting.length>1 && (formType==1 || formType==2) "></i>
                </el-col>
              </el-row>
            </el-timeline-item>
          </el-timeline>
<!--          <el-link type="primary"
                   class="el-icon-plus"
                   :underline="false"
                   @click='addSetting()'>添加天数</el-link> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="display: flex;justify-content: flex-end;"  v-if="this.formType==1 || this.formType==2 ">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { addSopTemp ,getSopTemp,updateSopTemp} from "@/api/qw/sopTemp";

export default {
  name: "AddAiChatTemp",
  data() {
    return {
      // 状态字典
      statusOptions: [],
      // 添加推送方式字典
      sysQwSopType: [],
      // 表单数据
      form: {
        name: null,
        setting: null,
        status: "1",
        sort: 1,
        gap: 1,
        sendType: 3, // AI对话类型,固定值
      },
      //1 修改 2 复制 3 查看
      formType:null,

      // 规则设置
      setting: [],
      // 表单校验
      rules: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '状态不能为空', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '排序不能为空', trigger: 'blur' }
        ],
        gap: [
          { required: true, message: '间隔天数不能为空', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    this.getDicts("sys_company_status").then(response => {
      this.statusOptions = response.data;
    });
    // 获取推送方式字典
    this.getDicts("sys_qw_sop_type").then(response => {
      this.sysQwSopType = response.data;
    });
	const id = this.$route.params && this.$route.params.id;
	this.formType = this.$route.params && this.$route.params.type;
	this.handleUpdate(id);

  },
  methods: {

	handleUpdate(id) {
	  getSopTemp(id).then(response => {
		this.form = response.data;
	    this.setting = JSON.parse(response.data.setting);
	  });
	},
    addSetList(contentIndex, content) {
      content[contentIndex].setting.push({
		intervalTime: 5,
        contentType: '1',
        value: ""
      });
    },

    delSetList(index, contentIndex, setIndex) {
      this.setting[index].content[contentIndex].setting.splice(setIndex, 1);
    },

    addContent(index) {
      this.setting[index].content.push({
        type: 1,
        contentType: '1',
         // 默认5分钟
        setting: [{
          intervalTime: 5,
          contentType: '1',
          value: ""
        }]
      });
    },

    delContent(index, contentIndex) {
      this.setting[index].content.splice(contentIndex, 1);
    },

    addSetting() {
      this.setting.push({
        content: [{
          type: 1,
          contentType: '1',

          setting: [{
			intervalTime: 5, // 默认5分钟
            contentType: '1',
            value: ""
          }]
        }]
      });
    },

    delSetting(index) {
      this.setting.splice(index, 1);
    },

    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 验证内容
          for(let day of this.setting) {
            for(let content of day.content) {
              if(content.time === undefined && this.setting.indexOf(day) > 0) {
                return this.$message.error("时间不能为空");
              }
              for(let set of content.setting) {
				if(!set.intervalTime) {
				  return this.$message.error("间隔时间不能为空");
				}
                if(!set.value) {
                  return this.$message.error("内容不能为空");
                }
              }
            }
          }
          this.form.setting = JSON.stringify(this.setting);

		  if (this.formType == 1) {
		    if (this.form.id != null) {
		      updateSopTemp(this.form).then(response => {
		        this.msgSuccess("修改成功");
		        this.$store.dispatch("tagsView/delView", this.$route);
		        window.location.replace('/qw/conversion/sopTemp')
		        this.reset();
		      });
		    }
		  } else {
		    //id制空，防止键值重复-报错
		    this.form.id = null
		    //更新时间制空
		    this.form.updateTime = null
		    addSopTemp(this.form).then(response => {
		     this.msgSuccess("复制成功");
		     this.$store.dispatch("tagsView/delView", this.$route);
		     window.location.replace('/qw/conversion/sopTemp')
		     this.reset();
		    });
		  }



        }
      });
    },

    cancel() {
      this.$router.push('/qw/conversion/sopTemp');
    }
  }
};
</script>

<style scoped>
.custom-input /deep/ .el-input__inner {
  height: 20px;
  text-align: center;
}

.custom-input /deep/ .el-input__icon {
  line-height: 10px;
}

.tip {
  color: #909399;
  font-size: 12px;
  margin-left: 10px;
}
</style>
