<template>
  <div>
    <p class=" text-2xl font-bold mb-5"> {{$route.query.firstSub}}客户信息</p>
      <!-- timepicker -->
      <span class=" font-semibold">注册时间：</span>
      <timerange class=" mr-3"
                 @getNewTime="getNewTime"/>
      <a-input placeholder="姓名模糊搜索" v-model="queryParam.user_name" style=" width:150px; margin-right:10px;"/>
      <a-input placeholder="手机号模糊搜索" v-model="queryParam.phone" style=" width:150px; margin-right:10px;" />
      <a-button type="primary" style=" margin-right:10px;" @click="query">查询</a-button>
      <a-button type="primary" @click="reset">重置</a-button>
      <!-- 查看弹窗 -->
      <a-modal
        title="查看内容"
        v-model="visible"
        :centered="true"
        footer=""
      >
        <div class=" text-black text-center">{{note.name}} <span class=" ml-1">{{note.account}}</span></div>
        <div class=" text-black text-center mt-4">{{note.note}}</div>
      </a-modal>
      <!-- 编辑弹窗 -->
      <a-modal
        title="编辑客户"
        v-model="show"
        :centered="true"
        footer=""
      >
        <!-- 备注表单 -->
        <a-form-model :model="form" ref="ruleForm" :rules="rules">
          <a-form-model-item label="客户名称">
            <span class=" text-sm text-black">{{note.name}}</span>
          </a-form-model-item>
          <a-form-model-item label="手机号">
            <span class=" text-sm text-black">{{note.account}}</span>
          </a-form-model-item>
          <a-form-model-item label="备注内容" :required="true" prop="notes">
            <a-input type="textarea" placeholder="请输入备注内容，100字以内" v-model="form.notes" style="height:100px"/>
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 8, offset: 8 }">
            <a-button type="primary" @click="onSubmit">发布</a-button>
            <a-button style="margin-left: 10px;" @click="show=false">取消</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
     <!-- 客户信息列表 -->
      <a-table
        :columns="columns"
        :data-source="userList"
        style=" text-align: center; margin-top:40px;"
        bordered
        :pagination="pagination"
        @change="changePage">
        <div slot="note" slot-scope="text"> 
          <a @click="check(text)">查看</a>
        </div>
        <div slot="action" slot-scope="text">
          <a @click="edit(text)">编辑</a>
        </div>
      </a-table>
  </div>
</template>
<script lang="ts">
import Vue from "vue"
import { FormModel } from 'ant-design-vue'
import { userList } from '@/mock/index'
import { user } from '@/types/user'
import { columns } from '@/const/columns/userColumns'
import timerange from '@/components/TimePicker/index.vue'
import StaffService from '@/service/StaffService/index'

const staff = new StaffService()

export default Vue.extend({
  components:{ timerange },
  computed: {
    // userList():Array<user>{
    //   return userList
    // },
    columns(){
      return columns
    }
  },
  data() {
    return {
      form:{
        notes:''
      },
      queryParam:{
        start:undefined as undefined | number,
        end:undefined as undefined | number,
        user_name:'' as undefined | string,
        phone:'' as undefined | string,
      },
      userList: [] as Array<user>,
      visible:false,
      show:false,
      labelCol: { span: 10 },
      wrapperCol: { span: 12},
      rules:{
        notes: [{ required: true, message: '请输入备注内容', trigger: 'blur' }],
      },
      note:{},
      pagination: {
        current: 1,
        defaultPageSize: 10,
        total: 0
      }
    }
  },
  created() {
    this.getList()
  },
  methods:{
    getList() {
      const uuid = this.$route.query.uuid as string
      if (uuid) {
        staff.getStaffList({
          uuid: uuid,
          page: this.pagination.current,
          page_size: this.pagination.defaultPageSize
        }).then(res => {
          this.userList = res.data.item
          this.pagination.total = res.data.total
        })
      } else {
        staff.getUserList({
          page: this.pagination.current,
          page_size: this.pagination.defaultPageSize
        }).then(res => {
          this.userList = res.data.item
          this.pagination.total = res.data.total
        })
      }
    },
    changePage(v: { current: number }) {
      this.pagination.current = v.current
      this.getList()
    },
    getNewTime(startTime:number,endTime:number){
      this.queryParam.start = startTime
      this.queryParam.end = endTime
    },
    query(){
      console.log(this.queryParam)
      staff.queryStaff({
        ...this.queryParam
      }).then(res => {
        console.log(res)
        this.userList = res.data.item
        this.pagination.total = res.data.total
      })
    },
    reset(){
      this.queryParam.start = undefined
      this.queryParam.end = undefined
      this.queryParam.user_name = ''
      this.queryParam.phone = ''
    },
    check(text:user){
      this.visible = true
      this.note = text
    },
    edit(text:user){
      this.note = text
      this.show = true
    },
    onSubmit(){
      (this.$refs.ruleForm as FormModel).validate(valid => {
        if (valid) {
          // staff.
          this.show = false
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    }
  }
});
</script>

<style scoped>
.ant-form-item{
  margin-bottom:5px;
}
</style>