<template>
  <div class="auth">
    <p-grid-form
      :span="8"
      ref="form"
      :label-col="{ span: 9 }"
      class="plg-form"
      :items="items"
      @submit="hanlderSubmit"
    />
    <p-spin size="small" :spinning="spinning">
      <p-table
        ref="table"
        bordered
        rowKey="companyId"
        :columns="columns3"
        :hasRowCount="false"
        :colorTransformRow="false"
        @change="changePagination"
        @checkRow="selectChange"
        :pagination="pagination"
        :data-source="dataSource"
      >
      </p-table>
    </p-spin>
  </div>
</template>
<script>
const items = function(that) {
  return [
    {
      span: 8,
      type: 'input',
      name: 'name',
      label: '查询条件',
      placeholder: '请输入编号/名称/助记码',
      value: ''
    },
    {
      span: 8,
      type: 'radio',
      name: 'type',
      label: '状态',
      labelCol: {
        span: 6
      },
      wrapperCol: {
        span: 18
      },
      value: '0',
      options: [
        {
          value: '0',
          label: '未分配'
        },
        {
          value: '1',
          label: '已分配'
        }
      ],
      on: {
        change(e) {
          that.queryType = e.target.value
          console.log(this.queryType)
          that.$emit('selectChange', '')
          that.getlistCompanyByAuthId()
        }
      }
    },
    {
      span: 8,
      labelAlign: 'left',
      type: 'buttonGroup',
      style: { textAlign: 'right' },
      options: [
        {
          value: '查询',
          icon: 'search',
          btnType: 'primary',
          style: 'margin-right:10px',
          htmlType: 'submit'
        },
        {
          value: '重置',
          icon: 'redo',
          on: {
            click: function(event) {
              that.$refs.form.form.resetFields()
              that.$emit('reset', event, this.$refs.form)
            }.bind(this)
          }
        }
      ]
    }
  ]
}
const columns3 = [
  {
    title: '序号',
    align: 'center',
    width: 60,
    customRender: (text, record, index) => `${index + 1}` // 显示每一行的序号
  },
  {
    dataIndex: 'companyCode',
    key: 'companyCode',
    title: '客户编号',
    scopedSlots: { customRender: 'companyCode' }
  },
  {
    title: '客户名称',
    dataIndex: 'companyName',
    key: 'companyName'
  },
  {
    title: '客户类型',
    dataIndex: 'companyType',
    key: 'companyType'
  }
]
import { listCompanyByAuthId, searchPage } from './../api/addAuth.js'
export default {
  data() {
    return {
      items: items(this),
      columns3,
      queryName: '', // 单位名称
      queryType: '0', // 查询类型
      columnsType: '1',
      typeValue: 'V,C,Y,W',
      spinning: false,
      recordId: '',
      dataSource: [], // 数据
      pagination: {
        total: 0,
        pageSize: 10, //每页中显示10条数据
        pageNum: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '15', '20'], //每页中显示的数据
        showTotal: total => `共有 ${total} 条数据` //分页中显示总的数据
      }
    }
  },
  props: {
    type: {
      type: String,
      default: '1'
    },
    setRecord: {
      type: Object,
      default: {}
    }
  },
  watch: {
    // type (newVal) {
    //   console.log(newVal, 'watchwatchwatch')
    //   this.columnsType = newVal
    //   if (newVal === '1') { //
    //     this.typeValue = 'H'
    //   } else if (newVal === '2') {
    //     this.typeValue = 'S'
    //   } else if (newVal === '3') {
    //     this.typeValue = 'V,C,Y,W'
    //   }
    //   this.getlistCompanyByAuthId()
    // },
    setRecord(newVal) {
      console.log(newVal, 'newValnewValnewVal')
      this.recordId = newVal.id
    }
  },
  created() {
    this.recordId = this.setRecord.id
    this.getlistCompanyByAuthId()
  },
  methods: {
    getlistCompanyByAuthId() {
      // 根据权限ID查询关联单位列表
      if (this.queryType == 1) {
        // 关联
        this.ajaxAuthId()
      } else {
        // 未关联
        this.ajaxSearch()
      }
      this.spinning = true
    },
    selectChange(val, val1) {
      // checked
      console.log(val, val1)
      let datas = {
        type: this.queryType,
        authId: this.recordId,
        vos: val1
      }
      if (val1 && val1.length > 0) {
        this.$emit('selectChange', datas)
      } else {
        this.$emit('selectChange', '')
      }
    },
    ajaxAuthId() {
      let params = {
        authId: this.recordId,
        companyName: this.queryName, // 单位名称
        companyType: 'V,C,Y,W', // 单位类型
        type: this.queryType, // 查询类型1关联0未关联"
        pageNum: this.pagination.pageNum, // 页码
        pageSize: this.pagination.pageSize // 页数
      }
      listCompanyByAuthId(params).then(res => {
        this.spinning = false
        if (res.success) {
          console.log(res)
          this.pagination.total = Number(res.data.totalCount)
          this.dataSource = res.data.list
        } else {
          this.$message.warn(res.message)
        }
      })
    },
    ajaxSearch() {
      let params = {
        num: '564090818114228224',
        pageNum: this.pagination.pageNum, // 页码
        pageSize: this.pagination.pageSize, // 页数
        params: {
          companyName: this.queryName, // 单位名称
          companyType: 'V,C,Y,W', // 单位类型
          authId: this.recordId
        }
      }
      searchPage(params).then(res => {
        this.spinning = false
        if (res.success) {
          console.log(res)
          this.pagination.total = Number(res.data.totalCount)
          this.dataSource = res.data.list
        } else {
          this.$message.warn(res.message)
        }
      })
    },
    hanlderSubmit(e, form) {
      e.preventDefault()
      form.validateFields((error, values) => {
        console.log(error, values, 'valuesvaluesvaluesvaluesvalues')
        this.queryName = values.name
        this.queryType = values.type
        this.getlistCompanyByAuthId()
      })
    },
    changePagination(pagination, filters, sorter) {
      // 分页变化
      console.log(pagination, filters, sorter, '分页变化分页变化')
      this.pagination = pagination
      this.pagination.pageNum = pagination.current
      this.getlistCompanyByAuthId()
    }
  }
}
</script>
<style lang="less" scoped>
.auth {
  background: #fff;
}
.plg-form {
  padding: 0px 0px 12px 0px;
  background: #fff;
}
</style>
