<template>
  <div>
    <div>
      <el-button size="mini" type="text" @click="editDesc(row)">
      <span v-if="row.desc !== ''">
        {{ row.desc }}
      </span>
        <span style='color:red' v-if="row.desc === '' && !typeFlag">今日未沟通</span>
        <span style='color:red' v-if="row.desc === '' && typeFlag">暂未沟通</span>
      </el-button>
    </div>
    <el-button size="mini" @click="editComment(row.id)">
      新增话术记录
    </el-button>
    <el-dialog append-to-body :visible.sync="descDialog.show" title="沟通情况列表" width="75%">
      <el-form label-width="90px">
        <el-form-item>
          <el-button style="float: right" type="primary" plain @click="editComment(descDialog.id)">添加沟通情况</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="descDialog.descList"
        style="width: 100%">
        <el-table-column
          label="用户" className="f-c" width="150">
          <template slot-scope="scope" v-if="descDialog.user_info">
            <img :src="descDialog.user_info.avatar" style="width: 40px;height: 40px;border-radius: 50px"> {{descDialog.user_info.nickname}}(ID:{{descDialog.user_info.user_id}})
          </template>
        </el-table-column>
        <el-table-column
          prop="desc"
          label="沟通情况">
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型" width="80px">
          <template slot-scope="scope">
            {{scope.row.type === 0 ? '备注' : scope.row.type === 1 ? '沟通话术' : '召回话术'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="reply_content"
          label="用户回复">
          <template slot-scope="scope">
            <div v-if="scope.row.reply_content">
              {{scope.row.reply_content}}
            </div>
            <div style="position: relative" v-if="!scope.row.reply_content">
              <el-input type="textarea" v-model="scope.row.reply_content2" maxlength="255" rows="3" clearable></el-input>
              <el-button size="mini" type="success" style="position: absolute;bottom: 10px;right: 10px" @click="subReply(scope.row)">确定</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="operator"
          label="联系人">
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="记录事件">
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog append-to-body :visible.sync="newDialog.show" center title="添加沟通情况">
      <el-form label-width="120px" size="mini">
        <el-form-item label="类型" v-if="typeFlag">
          <el-select v-model="newDialog.type" placeholder="类型">
            <el-option label="备注" :value="0"></el-option>
            <el-option label="沟通话术" :value="1"></el-option>
            <el-option label="召回话术" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="沟通话术">
          <el-input v-model="newDialog.desc" :rows="4" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="用户是否回复">
          <el-select v-model="newDialog.is_reply" placeholder="是否回复">
            <el-option label="否" :value="0"></el-option>
            <el-option label="是" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回复内容" v-if="newDialog.is_reply === 1">
          <el-input v-model="newDialog.reply_content" :rows="4" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="newDialog.show = false">取 消</el-button>
        <el-button type="primary" @click="submitDesc()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {addPeriodsClassUserDescApi,getUserDescListApi,editUserReplyApi} from "../../service/api";

  export default {
    name: "teacherDesc",
    props:[
      'row',
      'descType',
      'typeFlag'
    ],
    data(){
      return {
        descDialog:{
          show:false,
          id:'',
          descList:[],
          user_info:null,
          type:null
        },
        newDialog:{
          show:false,
          desc:'',
          type:1,
          is_reply:0,
          reply_content:''
        }
      }
    },
    methods:{
      subReply(data){
        let json = {}
        if(data.reply_content2 && data.reply_content2 !== ''){
          json.reply_content = data.reply_content2
        }
        editUserReplyApi(data.id,json).then(res=>{
          this.$message({
            type: 'success',
            message: '添加用户回复成功'
          });
          this.getUserDescList()
        });
      },
      editDesc(data,type){
        this.descDialog.show = true;
        this.descDialog.id = data.id;
        this.descDialog.type = this.descType;
        this.descDialog.user_info = {
          avatar:data.avatar,
          nickname:data.nickname,
          user_id:data.user_id,
        };
        this.getUserDescList()
      },
      getUserDescList(){
        getUserDescListApi(this.row.id,{limit:1000}).then(res=>{
          this.descDialog.descList = res.list
        })
      },
      submitDesc(){
        let json = {
          is_reply:this.newDialog.is_reply,
          type:this.typeFlag ? this.newDialog.type :this.descType
        };
        if(this.newDialog.desc && this.newDialog.desc !== ''){
          json.desc = this.newDialog.desc
        }else{
          this.$message.error('请输入沟通话术');
          return false;
        }
       if(this.newDialog.reply_content){
          json.reply_content = this.newDialog.reply_content
        }
        addPeriodsClassUserDescApi(this.row.id,json).then(res=>{
            this.$message({
              type: 'success',
              message: '添加沟通话术成功'
            });
            this.newDialog.show=false;
            this.getUserDescList();
            this.$emit('onSuccess')
        })
      },
      editComment() {
        this.newDialog={
          show:true,
          desc:'',
          type:1,
          is_reply:0,
          reply_content:''
        }
      },
    }
  }
</script>

<style scoped>

</style>