<template>
  <div class="IntendedCustomers">
    <Row>
      <Col span="5">
        <Input v-model="typesearchFilter.contactCell" clearable style="width:200px" placeholder="请输入手机号" @on-change="getData" />
      </Col>
      <Col span="9">
        <DatePicker type="date" v-model="typesearchFilter.startTime" placeholder="请选择开始时间" style="width: 200px"  @on-change="changeStartDate" />
        -
        <DatePicker type="date" v-model="typesearchFilter.endTime" placeholder="请选择结束时间" style="width: 200px"  @on-change="changeEndDate" />
      </Col>
  </Row>

    <el-table :data="tabData.data" style="width: 100%; margin-top:2em;" border>
      <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
      <el-table-column label="联系电话"  align="center">
        <template #default="scope">
          {{scope.row.contactCell}}
        </template>
      </el-table-column>
      <el-table-column label="意向" align="center">
        <template #default="scope"> 
          <Tag color="green" v-if="scope.row.intentionType == 2">我要卖牛</Tag>
          <Tag color="blue" v-if="scope.row.intentionType == 1">我要买牛</Tag>
        </template>
      </el-table-column>
      <el-table-column label="访问时间" align="center">
        <template #default="scope"> 
          {{ changeTime(scope.row.addTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200"  fixed="right">
        <template  #default="scope">
          <el-button v-if="scope.row.contactStatus == 0" size="small" type="success" @click="changeStatus(scope.row.id)">待联系</el-button>&nbsp;
          <el-button v-else size="small" type="info" disabled>已联系</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page_style">
      <Page :total="tabData.total" :model-value="currentPage" show-elevator show-total @on-change="changePage" />
    </div>
  </div>
</template>
  
<script>
  import { defineComponent,ref,reactive,onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import { cow } from '@/request/api'
  import moment from 'moment'

  export default defineComponent({
    components:{
      
    },
    setup() {
      
      let typesearchFilter = reactive({limit:10,offset:0,contactCell:'',startTime:'',endTime:''})
  
      let tabData = ref({})
      
      //获取列表内容
      async function getData(){
        await cow.potentialUserListPage(typesearchFilter).then(res =>{
          if (res.code == 101) {
            tabData.value = res
          }
        })
      }
  
      let currentPage = ref(1)
      //更改页码
      function changePage (page) {
        if(tabData.value.limit){
          typesearchFilter.offset = (page -1) *  tabData.value.limit  //更新偏移量
          currentPage = page  //切换当前页码
          getData()       //获取广告数据
        }
      }

      // 改变联系状态
      async function changeStatus(id){
        const params = {
          id:id,
          contactStatus:1
        }
        await cow.updatePotentialStatus(params).then(res =>{
          if (res.code == 101) {
              ElMessage({
                message: '操作成功!',
                type: 'success',
              })
              getData()
          }else{
            ElMessage({
                message: res.message || '操作失败!',
                type: 'error',
            })
            getData()
          }
        })
      }

      // 格式化时间
      function changeTime(val){
       return moment(val).format('yyyy-MM-DD hh:mm:ss')
      }

      //格式化日期
      function changeStartDate(val){
        typesearchFilter.startTime = val
        getData()
      }
      //格式化日期
      function changeEndDate(val){
        typesearchFilter.endTime = val
        getData()
      }

      onMounted(()=>{
        getData() 
      })
  
      return {
        typesearchFilter,
        getData,
        tabData,
        changePage,
        currentPage,
        changeTime,changeStartDate,changeEndDate,changeStatus
      }
    },
  })
  </script>
  
  <style lang="scss" scoped>
  .IntendedCustomers{
    padding: 1em;
    .page_style{
      text-align: right; margin-top: 1em;
      background-color: var(--system-container-background);
    }
  }
  </style>