<style></style>
<template>
  <div>
    <div class="row wrap">
      <q-btn label="新增" v-if="isHaveAddAction" color="accent q-mb-lg" size="sm" @click="isShowAdd = true" />
      <q-btn label="取消" style="margin-left:20px;" v-if="isShowAdd" flat color="grey-10 q-mb-lg" size="sm"
        @click="isShowAdd = false" />
    </div>
    <template v-if="isShowAdd">
      <div class="row wrap studentDate">
        <q-select filled stack-label option-value="Id" @input="getRate(conMsg.AdvisorStatus)" dense option-label="Name"
          v-model="conMsg.AdvisorStatus" ref="AdvisorStatus" :options="consultList" label="跟进状态"
          :rules="[val => !!val || '请选择跟进状态']" class="col-6 q-pb-lg q-pr-lg" emit-value map-options />
        <q-input filled stack-label maxlength="50" disable dense v-model="conMsg.AdvisorRate" ref="AdvisorRate"
          class="col-6 q-pb-lg" label="胜率" />
      </div>
      <div class="row wrap">
        <q-input filled v-model="conMsg.AdvisorDate" dense class="col-6 q-pb-lg q-pr-lg" mask="date"
          :label="commonName+'月份'">
          <template v-slot:append>
            <q-icon name="event" class="cursor-pointer">
              <q-popup-proxy ref="AdvisorDate" transition-show="scale" transition-hide="scale">
                <q-date v-model="conMsg.AdvisorDate" @input=' () => $refs.AdvisorDate.hide()' />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
        <q-input filled v-model="conMsg.AdvisorExpectDate" v-if="dataList.length==0" dense class="col-6 q-pb-lg"
          mask="date" label="期望达成协议日期">
          <template v-slot:append>
            <q-icon name="event" class="cursor-pointer">
              <q-popup-proxy ref="AdvisorExpectDate" transition-show="scale" transition-hide="scale">
                <q-date v-model="conMsg.AdvisorExpectDate" @input=' () => $refs.AdvisorExpectDate.hide()' />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
      </div>
      <div class="row wrap">
        <q-input filled type="textarea" :rows="3" stack-label maxlength="2000" v-model="conMsg.AdvisorRemark"
          :dense="false" class="col-12 q-pb-lg" label="跟进备注" />
      </div>
      <div class="row wrap justify-end q-pr-lg" style="margin-bottom:10px;">
        <q-btn label="保存" color="accent q-mb-lg" size="md" @click="saveConsult()" />
      </div>
    </template>
    <div style="display:flex;flex:1;flex-direction: column;overflow:hidden;">
      <div class="TimeLineDiv">
        <q-timeline color="primary">
          <q-timeline-entry v-for="(tItem, tIndex) in dataList" :key="tIndex">
            <template v-slot:title>
              <div class="visit_Cont">
                <div class="Log_Content">
                  <div>跟进状态：{{ tItem.AdvisorStatusName }}</div>
                  <div class="StuCom_Remark">
                    <div class="StuCom_Left">胜率</div>
                    ：
                    <div class="StuCom_Inner">{{ tItem.AdvisorRate }}%</div>
                  </div>
                  <div>跟进月份：{{ tItem.AdvisorDate }}</div>
                  <div>跟进备注：{{ tItem.AdvisorRemark }}</div>
                </div>
              </div>
            </template>
            <template v-slot:subtitle>
              <div class="Time_TopList">
                <div>{{ tItem.CreateTimeStr }}</div>
                <div>{{ tItem.CreateByName }}</div>
              </div>
            </template>
          </q-timeline-entry>
        </q-timeline>
      </div>
    </div>
    <div style="margin-left:40px;">
      <div style="color:#ff0099">1.“疑似”填入日期后~百分比自动跳20%；</div>
      <div style="color:#ff00ff">2.“意向”填入日期后~百分比自动跳40%；</div>
      <div style="color:#9933ff">3.“近期可邀约”填入日期后~百分比自动跳60%；</div>
      <div style="color:#33ccff">4.“谈判”填入日期后~百分比自动跳80%；</div>
      <div style="color:green">5.“签约”填入日期后~百分比自动跳100%；</div>
    </div>
    <div style="margin-bottom:20px">
      <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="page_Count" input
        @input="changePage" />
    </div>
  </div>
</template>
<script>
  import {
    GetStudentAdvisorConfigList,
    SetStudentAdvisor,
    GetStudentAdvisorPage
  } from "../../../api/customerstudent/customerstudent";
  import {
    mapState
  } from "vuex";

  export default {
    meta: {
      title: ""
    },
    components: {},
    props: {
      stateId: {
        type: Number,
        default: 0
      },
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        isShowAdd: false,
        conMsg: {
          Id: 0, //编号
          StuId: 0, //学员编号
          AdvisorStatus: '', //跟进状态
          AdvisorDate: "", //跟进月份
          AdvisorRemark: "", //跟进备注
          AdvisorExpectDate: "", //期望达成协议日期
          AdvisorRate: ''
        },
        msg: {
          pageIndex: 1,
          pageSize: 12,
          StuId: 0
        },
        dataList: [],
        page_Count: 0,
        consultList: [], //跟进状态下拉
        commonName: ''
      };
    },
    created() {
      if (this.saveObj && this.saveObj.StuId) {
        this.conMsg.StuId = this.saveObj.StuId;
        this.msg.StuId = this.saveObj.StuId;
      }
    },
    watch: {},
    computed: mapState({
      //是否有新增课程顾问权限
      isHaveAddAction(state) {
        if (state.user.userInfo && state.user.userInfo.ActionMenuList && state.user.userInfo.ActionMenuList.length >
          0) {
          let action = state.user.userInfo.ActionMenuList.find(x => {
            if (x.FunctionCode == "MyStu_CourseManager") {
              return x;
            }
          });
          return action && action.FunctionCode;
        }
        return false;
      }
    }),
    mounted() {
      this.getStatusList();
      this.getList();
    },
    methods: {
      //获取跟进状态下拉
      getStatusList() {
        let msg = {
          Name: ''
        }
        GetStudentAdvisorConfigList(msg).then(res => {
          if (res.Code == 1) {
            this.consultList = res.Data;
          }
        })
      },
      getRate(Id) {
        this.consultList.forEach(x => {
          if (x.Id == Id) {
            this.conMsg.AdvisorRate = x.Rate;
            this.commonName = x.Name;
          }
        })
      },
      //保存约访
      saveConsult() {
        if (this.conMsg.AdvisorStatus == "") {
          this.$q.notify({
            type: "negative",
            position: "top",
            timeout: 2000,
            message: "请选择跟进状态！"
          });
          return;
        }
        if (this.conMsg.AdvisorDate == '') {
          this.$q.notify({
            type: "negative",
            position: "top",
            timeout: 2000,
            message: "请选择" + this.commonName + "日期！"
          });
          return;
        }
        if (this.dataList.length == 0) {
          if (this.conMsg.AdvisorExpectDate == '') {
            this.$q.notify({
              type: "negative",
              position: "top",
              timeout: 2000,
              message: "请选择期望达成协议日期！"
            });
            return;
          }
        }
        SetStudentAdvisor(this.conMsg)
          .then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: "iconfont icon-chenggong",
                color: "accent",
                timeout: 2000,
                message: "数据保存成功！",
                position: "top"
              });
              this.getList();
              this.clearMsg();
              this.$emit('success');
            }
          })
          .catch(() => {});
      },
      //获取数据
      getList() {
        GetStudentAdvisorPage(this.msg)
          .then(res => {
            if (res.Code == 1) {
              this.dataList = res.Data.PageData;
              this.page_Count = res.Data.PageCount;
            }
          })
          .catch(() => {});
      },
      //清除数据
      clearMsg() {
        this.conMsg.Id = 0;
        this.conMsg.StuId = 0;
        this.conMsg.AdvisorStatus = "";
        this.conMsg.AdvisorDate = "";
        this.conMsg.AdvisorRemark = "";
        this.conMsg.AdvisorExpectDate = "";
        this.conMsg.AdvisorRate = "";
        this.commonName = '';
        this.isShowAdd = false;
      },
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
    }
  };
</script>