<template>
  <div id="replayed">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card v-loading="infoLoading">
          <div slot="header" class="clearfix">
            <span style="font-size: 18px;font-weight: bold;padding-right: 20px;">待回访日历</span>
            <el-button size="mini" type="primary" @click="getData">刷新</el-button> <!--  @click="getData" -->
          </div>
          <div class="list-yi">
            <div class="list-content" v-for="item in infoData" @click="listContentClick(item.time)">
              <div :class="[ item.state == 1 ? 'active' : '' ]">{{ item.day }}</div>
              <div :class="[ item.state == 1 ? 'active' : '' ]">{{ item.num }}</div>
              <div :class="['weekday-color', item.state == 1 ? 'active' : '' ]">{{ item.weekday }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog append-to-body width="90%" :visible.sync="dialogTableVisible" top="5vh" :title="dialogTitle">
      <div class="block">
        <el-date-picker @change="getSTime" v-model="realTime" type="date" placeholder="选择日期"></el-date-picker>
        <el-button size="medium" type="primary" @click="batchRemarks">批量备注</el-button>
      </div>

      <el-table
        v-loading="infoLoadingDialog"
        ref="multipleTable"
        :data="infoDataChild"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="user_id"
          label="UID"
          width="120">
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="客户微信昵称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="电话号码"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="意向度"
          show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.intention === 1 ? '低意向' : scope.row.intention === 2 ? '中意向' : scope.row.intention === 3 ? '高意向' : '不跟踪' }}</template>
        </el-table-column>
        <el-table-column
          label="最近备注时间"
          show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.remark_time === 0 ? scope.row.created_at : scope.row.remark_time }}</template>
        </el-table-column>
        <el-table-column
          prop="next_visit_at"
          label="回访时间"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="操作"
          show-overflow-tooltip>
          <template slot-scope="scope"><el-input v-model="remarks" placeholder="请输入内容"></el-input><el-button size="medium" type="primary" @click="batchRemarks(item.id)">备注</el-button></template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="批量备注" append-to-body :visible.sync="dialogFormVisible" style="z-index: 7000">
      <!--<el-input size="mini" v-model="remarks" placeholder="请输入内容"></el-input>-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="OK">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script type="text/ecmascript-6">
  import {
    getVisitcalendarApi,
    getVisitdetailApi,
    operationremarkApi
  } from "../../service/api";
  import Util from '../../util/Za'

  export default {
    name: '',
    data() {
      return {
        customerO: this.customerObj.alias ? this.customerObj : JSON.parse(window.localStorage.phoneNum),
        dialogTitle: '',            // title
        dialogTableVisible: false,  // 显示弹框
        dialogFormVisible: false,
        infoData: [],               // 外层数据
        infoDataChild: [],          // 详情数据
        infoLoading: true,          // 外层loading
        infoLoadingDialog: true,    // 详情loading
        fromTimer: '',              // 详情时间
        formLabelWidth: '120px',
        remarks: '',
        handleSelectionValue: [],
        realTime: ''
      }
    },
    props: {
      customerObj: {
        type: Object,
        default() {
          return {}
        }
      },
    },
    mounted() {
      this.getData()
    },
    methods: {
      /**
       * init
       */
      getData() {
        this.infoLoading = true;
        getVisitcalendarApi(this.customerO.id).then(res => {
          this.infoLoading = false;
          let infoTimeData = [];
          this.realTime = new Date().getFullYear() + '-' + this.add0(new Date().getMonth() + 1) + '-' + this.add0(new Date().getDate())
          Object.keys(res.weekday).map((item, index) => {
            let timeStamp = new Date(Object.keys(res.visit_count)[index]).valueOf(),
                dataDay   = new Date(this.realTime).valueOf()
            infoTimeData.push({
              day: item,
              time: Object.keys(res.visit_count)[index],
              num: Object.values(res.visit_count)[index],
              weekday: Object.values(res.weekday)[index],
              state: timeStamp === dataDay ? 1 : 2
            })
          })
          this.infoData = infoTimeData
        })
      },
      add0(n) {
        return n < 10 ? '0' + n : n
      },
      /**
       * 点击详情
       * @param time {String}
       */
      listContentClick(time) {
        this.infoLoadingDialog = true
        this.fromTimer = time;
        getVisitdetailApi(this.customerO.id, { date_time: time }).then(res => {
          this.dialogTableVisible = true
          this.infoLoadingDialog = false
          this.dialogTitle = '老师名：' + this.customerO.name + '　销售顾问：' + this.customerO.adviser// + friendTotal;
          this.infoDataChild = res
        })
      },
      /**
       * 全选
       * @param val
       */
      handleSelectionChange(val) {
        this.handleSelectionValue = val;
      },
      batchRemarks() {
        this.dialogFormVisible = true;
      },
      getSTime(val) {
        if(Util.isEmpty(val)) val = new Date()
        this.infoLoadingDialog = true
        this.realTime = val.getFullYear() + '-' + (val.getMonth() + 1) + '-' + val.getDate()
        this.listContentClick(this.realTime)
      },
      OK() {
        let oId = ''
        this.handleSelectionValue.map(item => {
          oId += item.id + ','
        })
        let data = { id: oId, remark: this.remarks }
        operationremarkApi(data).then(res => {
          this.dialogFormVisible = false;
          this.listContentClick(this.fromTimer);
        })
      }
    }
  }
</script>


<style lang="less" type="text/less">
  .list-yi {
    overflow: hidden;
  }

  .list-content {
    padding: 0 20px 20px;
    text-align: center;
    float: left;
    cursor: pointer;
    .weekday-color {
      color: #409EFF;
      padding-bottom: 4px;
    }

    .active {
      color: red;
    }

  }


</style>
