<template>
  <div class="page-container main-view">
    <el-row :gutter="0" class="page-query-box">
            <DifinCollapse
                :show="dataContainer.showSearch"
                :showBt="true"
                @onClick="dataContainer.showSearch = !dataContainer.showSearch"
            >
                <el-col :span="24" :xs="24">
                    <el-form
                        :model="dataContainer.form"
                        :inline="true"
                        label-width="110px"
                    >
                        <el-row :gutter="0">
                            <el-col class="anchor-point-target" :span="6" :xs="6">
                                <el-form-item label="微伴ID" prop="weibanId">
                                    <el-input
                                        v-model="dataContainer.form.id"
                                        placeholder="请输入"
                                        clearable
                                        @clear="handleQuery"
                                        @keyup.enter="handleQuery"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :xs="6">
                                <el-form-item label="联系方式" prop="contact">
                                    <el-input
                                        v-model="dataContainer.form.contact"
                                        placeholder="请输入"
                                        clearable
                                        @clear="handleQuery"
                                        @keyup.enter="handleQuery"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :xs="6">
                                <el-form-item label="weibanID" prop="weibanID">
                                    <el-input
                                        v-model="dataContainer.form.weibanID"
                                        placeholder="请输入"
                                        clearable
                                        @clear="handleQuery"
                                        @keyup.enter="handleQuery"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :xs="6">
                              <el-form-item label="客户状态" prop="status">
                                    <el-select
                                        style="width: 100%"
                                        v-model="dataContainer.form.status"
                                        placeholder="请选择"
                                        clearable
                                        @clear="handleQuery"
                                        @change="handleQuery"
                                    >
                                        <el-option
                                            v-for="item in dataContainer.optionList"
                                            :key="item.id"
                                            :label="item.label"
                                            :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" :xs="12">
                                <el-form-item label="选择日期" prop="date">
                                  <el-date-picker
                                      v-model="dataContainer.form.date"
                                      type="date"
                                      placeholder="yyyy/mm/dd"
                                      :size="size"
                                />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" :xs="12">
                                <el-form-item label=" ">
                                    <el-button type="primary" @click="handleQuery">
                                        <SvgIcon
                                            :style="'width:15px;height:15px;margin-right:5px;'"
                                            name="svg:search-bt.svg"
                                        ></SvgIcon>
                                        查询
                                    </el-button>
                                    <el-button @click="resetQuery">
                                        <SvgIcon
                                            :style="'width:15px;height:15px;margin-right:5px;'"
                                            name="svg:redo.svg"
                                        ></SvgIcon>
                                        重置
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-col>
            </DifinCollapse>
        </el-row>
   
      <div class="table-box content-container page-content-box">
        <div class="table-container">
          <el-table :data="tableData"  style="width: 100%" border fit v-loading="loading">
            <el-table-column prop="weibanId" width="130" label="微伴ID"  />
            <el-table-column prop="avatar" width="70" label="微伴头像">
              <template #default="scope">
                  <img :src="scope.row.avatar" style="width: 50px; height: 50px;">
              </template>
            </el-table-column>

            <el-table-column prop="nickname" width="400" label="昵称备注">
                <template #default="scope">
                      {{scope.row.nickname.name}}
                      <el-button>{{scope.row.nickname.label }}</el-button>
                </template>

            </el-table-column>
            <el-table-column prop="phone" width="120" label="备注手机" />
            <el-table-column prop="Customer" width="100"  label="跟进客服">
                <template #default="scope">
                    <el-button>{{scope.row.Customer}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="label" width="400" label="客服标签">
              <template #default="scope">
                <div>
                  <el-button size="small"  v-for="item in scope.row.label" style=" margin: 10px 5px;" >{{item}}</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="systemUser" width="100" label="系统用户" />
            <el-table-column prop="createTime" width="180" label="创建时间" />
            <el-table-column prop="updateTime" width="180" label="更新时间" />
            <el-table-column label="操作" width = "230">
                  
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
                <el-pagination
                    v-show="true"
                    :total="config.total"
                    :background="true"
                    :current-page="params.pageNum"
                    :page-size="params.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-sizes="[10, 20, 30, 50]"
                    :pager-count="7"
                    @size-change="
                        (size) => {
                            params.pageSize = size;
                            getDataList();
                        }
                    "
                    @current-change="
                        (page) => {
                            params.pageNum = page;
                            getDataList();
                        }
                    "
                />
        </div>
      </div>
 </div>
</template>

<script setup>
  import {
      defineComponent,
      onBeforeUnmount,
      ref,
      reactive,
      getCurrentInstance,
      onActivated,
  } from 'vue';
  // import axios from 'axios';
  import { useRouter } from 'vue-router';
import { debounceFn } from '@/common/debounceAndThrottle';
import { messageSuccess } from '@/action/messagePrompt.js';
import { saveAs } from 'file-saver';

const size = ref('default')
const router = useRouter()


    const dataContainer = reactive({
            loading: false,
            showSearch: true,
            form: {
              id:"",
              contact:"",
              weibanID:"",
              status:"",
              city:"",
              date:""
            },
            params: {
                //基础参数
                pageNum: 1,
                pageSize: 10,
            },
            config: {
                total: 38,
            },
            list: [], //当前展示的数据列表
            currentRows: [], //当前多选的数据列表
            optionList: [
                { value: true, label: '正常', elTagType: 'danger' },
                { value: false, label: '禁用', elTagType: 'primary' },
            ],
        });

let tableData = reactive([
    {
      weibanId: 'wmgizUDQAAHw1v1iudFfi7JMYgQHDYEQ',
      avatar: 'https://s11.ax1x.com/2023/12/15/pihx4js.jpg',
      nickname:{name:"zhang",label:"张小凡【海安凤林药店】"},
      phone:13409576943,
      Customer:"运营小华",
      label:["已填写未提交","单店","老板/采购","药店","江苏","南京"],
      systemUser:"",
      createTime:"2024/12/06 08:44:04",
      updateTime:"2024/12/06 10:42:03"
    },
    {
      weibanId: 'wmgizUDQAAHw1v1iudFfi7JMYgQHDYEQ',
      avatar: 'https://s11.ax1x.com/2023/12/15/pihx4js.jpg',
      nickname:{name:"zhang",label:"张小凡【海安凤林药店】"},
      phone:13409576943,
      Customer:"运营小华",
      label:["已填写未提交","单店","老板/采购","药店","江苏","南京"],
      systemUser:"",
      createTime:"2024/12/06 08:44:04",
      updateTime:"2024/12/06 10:42:03"
    },
    {
      weibanId: 'wmgizUDQAAHw1v1iudFfi7JMYgQHDYEQ',
      avatar: 'https://s11.ax1x.com/2023/12/15/pihx4js.jpg',
      nickname:{name:"zhang",label:"张小凡【海安凤林药店】"},
      phone:13409576943,
      Customer:"运营小华",
      label:["已填写未提交","单店","老板/采购","药店","江苏","南京"],
      systemUser:"",
      createTime:"2024/12/06 08:44:04",
      updateTime:"2024/12/06 10:42:03"
    }
  ]) 
  let loading = ref(false);

  const params= reactive({
                  //基础参数
                  pageNum: 1,
                  pageSize: 10,
              }) 
  const config= reactive({
                  total: 38,
              }) 

    /** 获取数据列表 */
    const getDataList = debounceFn(function () {
          if (loading.value) return;
          loading.value = true;
        setTimeout(() => {
            Promise.resolve(tableData.value)
                .then((res) => {
                    tableData.value = res.rows || [];
                    config.value.total = res.total;
                })
                .catch(() => {
                    return;
                })
                .finally(() => {
                      loading.value = false;
                });
        }, 800);
    }, 70);
    //  getDataList();

    // const handleEdit = (rows,list)=>{
    //   let {username,contact,weibanId, city} = rows
    //   let row = {username,contact,weibanId, city}
    //   router.push({
    //     name:"client-edit",
    //     query:row
    //   })
    // }
    
    /** 搜索按钮操作 */
    function handleQuery() {
      dataContainer.params.pageNum = 1;
      getDataList();
    }
    
      /** 重置按钮操作 */
      function resetQuery() {
      dataContainer.form = {};
      handleQuery();
  }
</script>

<style scoped lang='scss'>
      .main-view {
      display: flex;
      flex-direction: column;
      > .page-query-box {
          margin: 0 0 10px 0 !important;
          padding: 10px 10px 0px 10px;
          :deep(.el-form-item) {
              margin-bottom: 10px !important;
          }
          :deep(.el-form-item--default) {
              width: 100%;
              margin-right: 0;
          }
      }
      > .content-container {
          flex: 1;
          display: flex;
          flex-direction: column;
          padding: 10px 10px;
          box-sizing: border-box;
          background: #fff;
          > .top-container {
              width: 530px;
              display: flex;
              justify-content: space-between;
              // align-items: center;
              margin: 0px 0 10px 0;
          }
          > .qurey-list{
              width: 100%;
              .el-col {
                border-radius: 4px;
              }

              .grid-content {
                border-radius: 4px;
                min-height: 36px;
              }
          }
          > .table-container {
              flex: 1 1 auto;
              height: 0;
              overflow: auto;
          }
          > .pagination-container {
              display: flex;
              justify-content: flex-end;
              padding: 0;
              margin: var(--view-gap) 0 0 0;
          }
      }
      .pagination-container {
          display: flex;
          justify-content: flex-end;
          padding: 0;
          margin: 10px 0 0 0;
      }
  }
</style>