<!-- 回访信息 -->
<template>
  <div class="callback-container">

    <div class="callback-info callback-item" style="margin-bottom: 15px;">
      ID：{{callbackObj.user_id}} &emsp;
      用户昵称：{{callbackObj.detail.nickname}} &emsp;
      宝宝名称：{{callbackObj.detail.baby_name ? callbackObj.detail.baby_name : '-'}} &emsp;
      宝宝生日：{{(callbackObj.detail.birthday == '0000-00-00') ? '-' : callbackObj.detail.birthday}} &emsp;
      手机号：{{callbackObj.detail.mobile ? callbackObj.detail.mobile : '--'}} &emsp;
      关联手机号：
      <span class="callback-edit">
        <!--<i v-if="!callbackEdit.mobile.show" @click="editCallback('mobile')">{{callbackObj.detail.relation_mobile ? callbackObj.detail.relation_mobile : '&#45;&#45;'}}</i>-->
        <el-input
          ref="mobileEdit"
          v-model="callbackEdit.mobile.value"
          style="width: 130px;" size="small"></el-input>
          <!--v-else  @blur="callbackEdit.mobile.show = !callbackEdit.mobile.show"-->
      </span> &emsp;
      微信号：
      <span class="callback-edit">
        <!--<i v-if="!callbackEdit.wechat.show" @click="editCallback('wechat')">{{callbackObj.detail.wx_number ? callbackObj.detail.wx_number : '&#45;&#45;'}}</i>-->
        <el-input
          ref="wechatEdit"
          v-model="callbackEdit.wechat.value"
          style="width: 100px;" size="small"></el-input>
          <!--v-else  @blur="callbackEdit.wechat.show = !callbackEdit.wechat.show"-->
      </span> &emsp;
      <el-button
        @click="editCallbackSave"
        :disabled="(callbackEdit.wechat.value == callbackEdit.wechat.origin) && (callbackEdit.mobile.value == callbackEdit.mobile.origin)"
        type="primary" plain size="small">更新用户信息</el-button>&emsp;
      <span style="font-size: 12px; color: #999999; white-space: nowrap">最后更新：{{callbackObj.detail.updated_at}}</span>
    </div>

    <div class="callback-item" style="display: flex; align-items: flex-start; margin-bottom: 15px; line-height: 32px;">
      标签：
      <span class="callback-tag-wrapper" v-if="tag.length">
        <el-tag :key="item.id" :type="item.type==1 ? 'info' : ''" v-for="item in tag">{{item.label_name}}</el-tag>
      </span>
      <el-button type="warning" size="small" plain @click="dialogToggle">编辑标签</el-button>
    </div>

    <div class="callback-item callback-input" v-if="callbackObj.teacher_id && callbackAdd">
      <el-form size="small" inline>
        <el-form-item required>
          <el-select v-model="add.method" placeholder="回访方式" style="width: 140px;">
            <el-option v-for="item in CALLBACK_METHOD" :key="item.id" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item required>
          <el-select v-model="add.type" placeholder="回访类型" style="width: 140px;">
            <el-option v-for="item in CALLBACK_TYPE" :key="item.id" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item required>
          <el-select v-model="add.intention" placeholder="意向度" style="width: 140px;">
            <el-option v-for="item in CALLBACK_INTENTION" :key="item.id" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-date-picker
            type="date" placeholder="下次回访" clearable style="width: 140px;"
            value-format="yyyy-MM-dd" v-model="add.next_visit_at"></el-date-picker>
        </el-form-item>

        <el-button size="small" type="success" plain @click="addCallback">添加回访信息</el-button>
      </el-form>

      <el-input
        type="textarea" :rows="3"
        placeholder="请输入回访内容" v-model="add.desc"></el-input>
    </div>

    <div class="callback-list callback-item">
      <ol v-if="list.length">
        <li :key="item.id" v-for="item in list">
          <!--系统-->
          <template v-if="item.flag == 0">
            <span class="time">{{item.created_at}}</span>
            <span class="grey">系统导入</span>
            <span class="grey" v-if="item.first_key" :class="(item.desc && item.desc.indexOf('支付')>-1) ? 'bold' : ''">{{item.first_key}}</span>
            <span class="info" v-if="item.desc" :class="(item.desc.indexOf('支付')>-1) ? 'red' : ''">{{item.desc}}</span>
          </template>
          <template v-else-if="item.flag == 1">
            <span class="time">{{item.created_at}}</span>
            <span class="bold dark" v-if="item.staff_name">{{item.staff_name}}</span>
            <span class="bold dark" v-if="item.teacher_name">{{item.teacher_name}}</span>
            <span class="dark">{{filterName(item.method, 'CALLBACK_METHOD')}}</span>
            <span class="dark">{{filterName(item.intention, 'CALLBACK_INTENTION')}}</span>
            <span class="green" v-if="item.desc">{{item.desc}}</span>
            <span class="info">下次回访：{{item.next_visit_at == '0000-00-00' ? '-' : item.next_visit_at}}</span>
          </template>
        </li>
      </ol>
      <p class="callback-list-text" v-else>暂无回访数据</p>
      <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    </div>

    <el-dialog :title="dialog.title" append-to-body :visible.sync="dialog.show" width="800px">

      <el-form label-width="120px">
        <el-form-item label="已有标签：" class="callback-tag-wrapper">
          <template v-if="tag.length">
            <el-popover
              placement="top"
              title="标签备注"
              width="160"
              trigger="hover"
              :key="item.id" v-for="item in tag"
              :content="item.label_desc ? item.label_desc : '暂无备注'">
              <el-tag
                slot="reference"
                @close="tagDel(item)"
                :closable="item.type==1 ? false : true"
                :type="item.type==1 ? 'info' : ''">{{item.label_name}}</el-tag>
            </el-popover>

          </template>
          <template v-else>
            暂无
          </template>
        </el-form-item>
        <el-form-item label="添加标签：" required>
          <el-cascader
            ref="tree" v-model="tagSelectedTmp"
            style="width: calc(100% - 90px)" placeholder="选择标签" clearable @change="tagChange" :disabled="!treeDataOrigin.length"
            :options="treeDataOrigin" :props="{ value: 'objString', label: 'name', multiple: false, checkStrictly: false }"></el-cascader>
        </el-form-item>
        <el-form-item label="已选标签备注：">
            <div v-if="!tagSelectedText" style="color: #999;">未选择标签</div>
            <div v-else v-html="tagSelectedText"></div>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogToggle">取消</el-button>
        <el-button type="primary" @click="dialogSave">保存，添加下一个</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {CALLBACK_METHOD, CALLBACK_TYPE, CALLBACK_INTENTION} from "@/util/wordbook";
  import {getUserTagApi, getTagApi, getCallBackApi, postCallBackApi, postUserTagApi, delUserTagApi, putUserInfoApi} from "@/service/api";
  import page from '@/components/framework/page'

  export default {
    name: "CallBack",
    components: { page },
    props: {
      callbackObj: {
        type: Object,
        default: () => {}
      },
      callbackAdd: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        CALLBACK_METHOD: CALLBACK_METHOD,
        CALLBACK_TYPE: CALLBACK_TYPE,
        CALLBACK_INTENTION: CALLBACK_INTENTION,
        tag: [],
        treeDataOrigin: [],
        tagSelected: [],
        tagSelectedTmp: [],
        tagSelectedText: '',
        list: [],
        total: 0,
        nowPage: 1,
        limit: 50,
        textarea: '',
        add: {
          method: '',
          type: '',
          intention: '',
          next_visit_at: '',
          desc: ''
        },
        dialog: {
          title: '',
          show: false,
          form: {
            id: '',
            name: '',
            mobile: '',
            id_card: '',
            type: '',
            in_at: '',
            over_at: '',
            rules: {
              name: [{required: true, message: '请输入', trigger: 'blur'}],
              mobile: [{required: true, message: '请输入', trigger: 'blur'}],
              id_card: [{required: true, message: '请输入', trigger: 'blur'}],
              type: [{required: true, message: '请选择', trigger: 'change'}],
              in_at: [{required: true, message: '请选择', trigger: 'change'}],
            },
          }
        },
        callbackEdit: {
          mobile: {
            show: false,
            origin: '', // 初始值
            value: ''
          },
          wechat: {
            show: false,
            origin: '', // 初始值
            value: ''
          },
        }

      }
    },
    created() {
    },
    watch: {
      'callbackObj.detail'() {
        this.callbackEdit.mobile.value = this.callbackObj.detail.relation_mobile;
        this.callbackEdit.mobile.origin = this.callbackObj.detail.relation_mobile;
        this.callbackEdit.wechat.value = this.callbackObj.detail.wx_number;
        this.callbackEdit.wechat.origin = this.callbackObj.detail.wx_number;
      }
    },
    mounted() {
      this.getTag();
      this.getData();
    },
    methods: {
      filterName(string, type) {
        return this[type].find(i => {return i.value == string}).label
      },

      editCallback(type) {
        this.callbackEdit[type].show = !this.callbackEdit[type].show;
        this.$nextTick(() => {
          this.$refs[`${type}Edit`].focus();
        })
      },
      editCallbackSave() {
        let json = {
          relation_mobile: this.callbackEdit.mobile.value,
          wx_number: this.callbackEdit.wechat.value
        }
        putUserInfoApi(this.callbackObj.user_id, json).then(res => {
          this.$message({type: 'success', message: '用户信息更新成功'});
          // this.$emit('updateUser');
        })
      },

      tagDel(item) {
        this.$confirm(`是否删除标签 <br> ${item.label_name}`, '提示', {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delUserTagApi(item.id).then(res => {
            this.$message({ type: 'success', message: '标签删除成功!' });
            this.getTag();
          })
        })
      },
      dialogToggle() {
        this.dialog.show = !this.dialog.show;
        if (!this.treeDataOrigin.length) {
          this.getTagTree();
        }
        if (!this.dialog.show) {
          this.dialogReset();
        }
      },
      dialogReset() {
        this.tagSelected = [];
        this.tagSelectedTmp = [];
        this.tagSelectedText = '';
      },
      dialogSave() {
        if (!this.tagSelected.length) {
          this.$message({ type: 'error', message: '请选择标签!' });
          return
        }
        var json = {
          user_id: this.callbackObj.user_id,
          type: 0,
          first_label_id: this.tagSelected[0]
        };
        this.tagSelected[1] ? json.second_label_id = this.tagSelected[1] : '';
        this.tagSelected[2] ? json.third_label_id = this.tagSelected[2] : '';
        postUserTagApi(json).then(res => {
          this.$message({ type: 'success', message: '添加成功!' });
          this.getTag();
          this.dialogReset();
        })
      },

      tagChange(val) {
        if (val.length) {
          let str = '', arr = [];
          val.forEach((i, idx) => {
            let o = JSON.parse(i);
            arr.push(o.id);
            str += `<p style="margin-top: 0;">${idx + 1}. ${o.name}：${o.cover || '-'} </p>`
          })
          this.tagSelectedText = str;
          this.tagSelected = arr;
          console.log(this.tagSelected + '')
        } else {
          this.tagSelectedText = '';
          this.tagSelected = [];
        }
      },
      getTagTree() { // 获取标签
        function recursion(arr) {
          if (Array.isArray(arr) && arr.length) {
            arr.forEach(val => {
              val.objString = JSON.stringify({
                name: val.name,
                id: val.id,
                cover: val.cover
              });
              recursion(val.children);
            })
          }
        }
        getTagApi().then(res => {
          recursion(res);
          this.treeDataOrigin = res;
        });
      },
      getTag() {
        if (this.callbackObj.user_id) {
          getUserTagApi(this.callbackObj.user_id).then(res => {
            this.tag = res;
          })
        }
      },
      getData() {
        let json = {
          limit: this.limit,
          page: this.nowPage
        };
        this.teacher_num ? json.teacher_num = this.teacher_num : '';
        this.callbackObj.user_id ? json.user_id = this.callbackObj.user_id : '';
        // console.log(json, 9000)
        getCallBackApi(json).then(res => {
          this.list = res.page_data;
          this.total = res.total
          // this.total = res.total_page
        })
      },
      callbackReset() {
        this.add.method = '';
        this.add.type = '';
        this.add.intention = '';
        this.add.next_visit_at = '';
        this.add.desc = '';
      },
      addCallback() {
        if (!this.add.method) {
          this.$message({type: 'error', message: '请选择回访方式'});
          return
        }
        if (!this.add.type) {
          this.$message({type: 'error', message: '请选择回访类型'});
          return
        }
        if (!this.add.intention) {
          this.$message({type: 'error', message: '请选择意向度'});
          return
        }
        let json = {
          user_id: this.callbackObj.user_id,
          teacher_id: this.callbackObj.teacher_id, // TODO
          // teacher_id: 84, // TODO
          method: this.add.method,
          type: this.add.type,
          intention: this.add.intention,
        }
        this.add.next_visit_at ? json.next_visit_at = this.add.next_visit_at : '';
        this.add.desc ? json.desc = this.add.desc : '';
        postCallBackApi(json).then(res => {
          this.$message({type: 'success', message: '回访添加成功'});
          this.callbackReset();
          this.getData();
        })
      },
      onPageChange(val) {
        this.nowPage = val;
        this.getData()
      },
      onSizeChange(val) {
        this.limit = val;
        this.nowPage = 1;
        this.getData()
      },
    }
  }
</script>

<style lang="less">
  .callback-container {
    .el-divider--horizontal {
      margin: 20px 0;
    }
  }

  .callback-item {
    margin-bottom: 15px;
    padding: 15px;
    background-color: rgba(245, 247, 250, 0.65);
    border: solid 1px rgba(220, 223, 230, 0.5);
    border-radius: 2px;
    font-size: 14px;
    &:last-child {
      margin-bottom: 0;
    }
  }

  .callback-info {
    /*display: flex;*/
    padding: 10px 15px;
    line-height: 32px;
    .callback-edit {
      display: inline-block;
      .el-input__inner {
        vertical-align: top;
      }
      i {
        margin: 0 -4px;
        padding: 0 4px;
        font-style: normal;
        cursor: pointer;
        transition: 240ms background-color;
        &:hover {
          background-color: #dde4ee;
          border-radius: 3px;
        }
      }
    }
  }

  .callback-tag-wrapper {
    .el-tag {
      margin-right: 10px;
    }
  }

  .callback-list {
    ol {
      margin: 0 0 10px;
      padding: 0;
      list-style: none;
    }

    .callback-list-text {
      text-align: center;
      line-height: 32px;
    }

    li {
      /*display: flex;*/
      padding: 2px 0;
      line-height: 24px;
      font-size: 14px;
      span {
        /*display: inline-block;*/
        margin-right: 12px;
        &.time {
          font-family: monospace;
          font-size: 13px;
        }
        &.grey {
          color: #555;
        }
        &.dark {
          color: #333;
        }
        &.bold {
          font-weight: bold;
        }
        &.info {
          font-size: 13px;
          color: #888;
        }
        &.green {
          color: #33CC66;
        }
        &.red {
          color: red;
        }
      }
    }
  }

  .callback-input {
    font-size: 0;
    .el-form-item {
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .is-required .el-select {
      display: flex;
      &:before {
        content: '*';
        color: #F56C6C;
        margin-top: -6px;
        margin-right: 4px;
      }
    }
  }
</style>