<template>
  <div>
    <el-button  v-if="$local.isRoot()" size="small" @click="exportData()" plain>导出数据</el-button>
      <div style="float:right;">
        <el-date-picker
        v-model="time_search"
        type="daterange"
        range-separator="至"
        size="small"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
        </el-date-picker><el-input style="width:190px" v-model="searchModel.search_info" placeholder="请输入会员号/手机号/微信号/QQ号" clearable size="small">
          <el-button slot="append" icon="el-icon-search" @click="searchTime"></el-button>
        </el-input>
        <!-- <el-button type="primary" size="small" @click="searchTime()" plain>搜索</el-button> -->
      </div>
    <el-table :data="retData.Data" row-key="id" border size="medium" :height="$getHeight(100)">
      <el-table-column prop="create_time" label="创建时间" ></el-table-column> 
      <el-table-column prop="manager" label="负责人"></el-table-column> 
      <el-table-column label="用户"  width="150">
        <template slot-scope="scope">
          <el-link @click="click_username(scope.row)">点击查看</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="follow_status" label="状态">
        <template slot-scope="scope">
          <el-link @click="click_follow_status(scope.row)">{{scope.row.follow_status}}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="record" label="维护记录"></el-table-column>
      <el-table-column prop="product_type" label="产品类型"></el-table-column>
      <el-table-column prop="sell_money" label="销售金额"></el-table-column>
      <el-table-column prop="sell_type" label="销售类型"></el-table-column>
      
      <el-table-column label="跟进截图">
        <template slot-scope="scope">   
          <el-link type="primary" v-if="scope.row.file" :href="scope.row.file"  target="_blank"> {{scope.row.file}} 查看大图</el-link>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="telstarttime" label="呼叫开始时间"></el-table-column>
      <el-table-column prop="druation" label="呼叫时长" ></el-table-column> -->
      <el-table-column prop="remark" label="备注"></el-table-column>     

    </el-table>

    <div class="block">
      <el-pagination
        v-if="retData.Data.length>0"
        @current-change="get"
        :page-size="50"
        :current-page.sync="searchModel.PageIndex"
        layout="total,prev, pager, next, jumper"
        :total="retData.TotalCount"
      ></el-pagination>
    </div>
    
    <el-dialog
      title="用户信息"
      :visible.sync="userinfo_fall"
      width="30%">
        <el-card class="box-card">
          <p>会员号：{{user_info.UserName}}</p>
          <p>电话：{{user_info.Phone}}</p>
          <p>微信：{{user_info.Wx}}</p>
          <p>QQ：{{user_info.QQ}}</p>
        </el-card>
    </el-dialog>

    <el-dialog
      title="修改跟进状态"
      :visible.sync="follow_status_change_fall"
      width="50%">
        <el-select size="small" v-model="set_follow_status.status" placeholder="请选择">
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input style="margin:5px 0" v-model="set_follow_status.remark" size="small" placeholder="请输入备注"></el-input>
        <el-table :data="follow_status_list" border>
            <el-table-column prop="create_time" label="时间"></el-table-column>
            <el-table-column v-if="$local.isRoot()" prop="op_user" label="维护经理"></el-table-column>
            <el-table-column prop="record" width="230" label="跟进记录"></el-table-column>
            <el-table-column label="跟进截图">
              <template slot-scope="scope">   
                <el-link type="primary" v-if="scope.row.file" :href="scope.row.file"  target="_blank"> {{scope.row.file}} 查看大图</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
        </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="follow_status_change_fall = false">取 消</el-button>
        <el-button :disabled="clickOk" type="primary" @click="changeFolowStatus()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
export default {
  name: "treeTable",
  components: {
     phoneHide: () => import("@/components/common/phonehide")
  },
  data() {
    return {
      loading: false,  
      searchModel: {
        PageIndex: 1,
        s_time: '',
        e_time: '',
        search_info:''
      },
      retData:{
          TotalCount: 0, Data: []
      },
      user_info: {},
      userinfo_fall: false,
      clickOk: false,
      follow_status_change_fall: false,
      set_follow_status: {
        user_id: null,
        old_status: null,
        status: null,
        remark: null
      },
      types: [],
      follow_status_list: [],
      temps: null,
      time_search: null,
    }
  },
  created() {
     this.$store.commit("setCurrentNav","用户管理>>跟进记录")
     this.get();
  },
  methods: {
    get () {
        this.$api.get(this.$api.phpURL + 'manager/UserFollow/getAllFollowRecord', {data:this.searchModel}).then(res => {
            this.retData.Data = res.Data
            // eslint-disable-next-line eqeqeq
            if (res.TotalCount != 0) {
                this.retData.TotalCount = parseInt(res.TotalCount)
            }
            this.types = res.types

        })
    },
    click_username (row) {
      this.userinfo_fall = true
      this.$api.get(this.$api.phpURL + 'manager/UserFollow/getUserInfo', {id: row.user_id}).then(res => {
        this.user_info = res.data
      })
    },
    click_follow_status (row) {
      this.temps = row
      this.clickOk = false
      this.follow_status_change_fall = true
      this.set_follow_status.status = row.follow_status
      this.set_follow_status.user_id = row.user_id
      this.set_follow_status.old_status = row.follow_status
      this.$api.get(this.$api.phpURL + 'manager/UserFollow/getFollowRecord', {id: row.user_id}).then(res => {
        this.follow_status_list = res.data
      })
    },
    changeFolowStatus () {
      // eslint-disable-next-line valid-typeof
      if (typeof this.set_follow_status.status !== 'number') {
        this.$alert('请选择跟进状态', '警告', {
          confirmButtonText: '确定'
        })
        return
      }
      this.temps.follow_status = this.setStatus(this.set_follow_status.status)
      this.clickOk = true
      this.$api.post(this.$api.phpURL + 'manager/UserFollow/changeFolowStatus', {data: this.set_follow_status}).then(res => {
        this.follow_status_change_fall = false
      })
    },
    setStatus (status) {
      switch (status) {
        case 1:
          return '待跟进-未购买'

        case 2:
          return '跟进超时-未购买'

        case 3:
          return '待跟进-消费减少'

        case 4:
          return '跟进超时-消费减少'

        case 5:
          return '流失-需求减少'

        case 6:
          return '流失-暂时不用'

        case 7:
          return '流失-价格问题'

        case 8:
          return '流失-产品问题'

        case 9:
          return '流失-也可自定义'

        case 10:
          return '高意向客户'

        case 11:
          return '已完成'

      }
    },
    searchTime() {
        if (this.time_search && this.time_search.length === 2) {
            this.searchModel.s_time = this.time_search[0]
            this.searchModel.e_time = this.time_search[1]
        }this.searchModel.PageIndex = 1;
        this.get();
    },
    exportData () {
      if (this.time_search && this.time_search.length === 2) {
          this.searchModel.s_time = this.time_search[0]
          this.searchModel.e_time = this.time_search[1]
      }
      this.$api.getDownloadFile(this.$api.phpURL + 'manager/UserFollow/exportAllFollowRecord', {data: this.search_info}, '跟进记录.csv')
    },
  }
};
</script>
<style scoped>
.red{
  color: red;
}
</style>
