<template>
  <div>
    <!--查询-->
    <div>
      <div ref="lxHeader">
        <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="客户列表">
          <div slot="content"></div>

          <slot>
            <div>
              <Input placeholder="关键字搜索" style="width: 200px; margin-right: 10px"/>

              <Button style="margin-left: 10px" type="primary">查询</Button>
              <Button style="margin-left: 10px" type="primary"
                      @click="$refs['addCustomer'].type = 'add',$refs['addCustomer'].isShow = true">录入客户
              </Button>
            </div>
          </slot>
        </lx-header>
      </div>
    </div>

    <xy-table
      ref="table"
      :total="total"
      :list="list"
      :table-item="tableItem"
      @pageSizeChange="e => select.page_size = e"
      @pageIndexChange="e => {select.page = e;getCustomers()}"
      @editor="editor"
      @delete="destroy">
    </xy-table>

    <add-customer ref="addCustomer" :disability-level="disabilityLevel" @refresh="getCustomers"></add-customer>
  </div>
</template>

<script>
import {getList,destroy} from '@/api/customer'
import {getparameter} from '@/api/system/dictionary'

import addCustomer from "@/views/customer/component/addCustomer";

export default {
  components: {
    addCustomer
  },
  data() {
    return {
      select: {
        page: 1,
        page_size: 10,
        keyword: ''
      },
      disabilityLevel: [],

      total: 0,
      list: [],
      tableItem: [
        {
          prop: "name",
          label: "姓名",
          width: "180",
          fixed:'left'
        },
        {
          prop: "idcard",
          label: "身份证号",
          width: "220"
        },
        {
          prop: "phone",
          label: "手机号",
          width: "160"
        },
        {
          label: "委托人",
          width: "180",
          prop:'contact_name'
        },
        {
          label: "委托人电话",
          width: "160",
          prop:'contact_phone'
        },
        {
          prop:'idcard_address',
          label:'户籍地址',
          width: 140
        },
        {
          label:'默认上门地址',
          minWidth:300,
          align:'left',
          customFn:(row)=>{
            return (
              <div>
                {
                  row.customer_address.filter(item => {
                    return item.default === 1
                  })[0]?.address || row.customer_address[0]?.address || '无'
                }
              </div>
            )
          }
        },
        {
          label:'上门地址数',
          prop:'customer_address_count',
          width: 140
        }
      ]
    }
  },
  methods: {
    async getDisabilityLevel() {
      const res = await getparameter({number: 'disabilityLevel'})
      this.disabilityLevel = res.detail
    },

    async getCustomers() {
      const res = await getList(this.select)
      this.list = res.data.data
      this.total = res.data.total
    },

    editor(row){
      this.$refs['addCustomer'].id = row.id
      this.$refs['addCustomer'].type = 'editor'
      this.$refs['addCustomer'].isShow = true
    },
    destroy(row){
      destroy(row.id).then(res => {
        this.$successMessage('destroy','客户')
        this.getCustomers()
      })
    }
  },
  mounted() {
    this.getDisabilityLevel()
    this.getCustomers()
  }
}
</script>

<style lang="scss" scoped>

</style>

