<template>
  <el-dialog
    :title=" !operationType ? '经销商上限':'经销商提货上限'"
    :visible.sync="linitVisible"
    width="60%"
    :show-close="false"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="onCancel"
  >
    <div>
      <zj-table :table-attributes="tableAttributes" :is-drop="true" :columns="columns" :table-data="dataList" />
    </div>
    <span slot="footer">
      <el-button size="mini" @click="onCancel">取消</el-button>
      <el-button size="mini" type="primary" @click="onSbumit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getMaterialListV2 } from '@/api/basic_data/material'
import { getDealerListV2 } from '@/api/basic_data/dealer'
import { getCustomerList, getMaterialList } from '@/api/policy_list'
export default {
  props: {
    operationType: {
      type: String,
      default: null
    },
    detailType: {
      type: String,
      default: null
    },
    linitVisible: {
      type: Boolean,
      default: false
    },
    showClose: {
      type: Boolean,
      default: false
    },
    dataList: {
      type: Array,
      default: () => []
    },
    linitType: {
      type: String,
      default: null
    },
    policyId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      loading: false,
      k3List: [],
      dealerList: [],
      tableAttributes: {
        border: true,
        maxHeight: '600px',
        headerCellClassName: 'headerRowColor',
        size: 'mini'
      }
    }
  },
  computed: {
    columns() {
      return [
        {
          columnAttributes: {
            label: '经销商编号',
            prop: 'customerNumber',
            'min-width': '200px'
          },
          render: (h, { column, row, index }) => {
            return (
              <div style='margin:0 10px'>
                <el-select
                  style='width:100%'
                  value={row.customerNumber}
                  onInput={e => (row.customerNumber = e)}
                  onChange={e => this.handleChange(e, row)}
                  filterable
                  disabled={this.linitType === 'edit'}
                  size='mini'
                  placeholder='请输入经销商编号'
                  loading={this.loading}
                >
                  {this.dealerList.map(k => {
                    return <el-option key={k.id} label={k.customerNumber} value={k.id}></el-option>
                  })}
                </el-select>
              </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '经销商名称',
            prop: 'customerName',
            'min-width': '200px'
          },
          render: (h, { column, row, index }) => {
            return (
              <div style='margin:0 10px'>
                <el-select
                  style='width:100%'
                  value={row.customerName}
                  onInput={e => (row.customerName = e)}
                  onChange={e => this.handleChange(e, row)}
                  filterable
                  disabled={this.linitType === 'edit'}
                  size='mini'
                  placeholder='请输入经销商名称'
                  loading={this.loading}
                >
                  {this.dealerList.map(k => {
                    return <el-option key={k.id} label={k.customerName} value={k.id}></el-option>
                  })}
                </el-select>
              </div>
            )
          }
        },
        ...(() => {
          return !this.operationType
            ? [
              {
                columnAttributes: {
                  label: '物料名称',
                  prop: 'materialName',
                  'min-width': '200px'
                },
                render: (h, { column, row, index }) => {
                  return (
                    <div style='margin:0 10px'>
                      <el-select
                        style='width:100%'
                        value={row.materialName}
                        onInput={e => (row.materialName = e)}
                        onChange={e => this.handleChange2(e, row)}
                        filterable
                        size='mini'
                        disabled={this.linitType === 'edit'}
                        placeholder='请输入物料名称'
                        loading={this.loading}
                      >
                        {this.k3List.map(k => {
                          return <el-option key={k.id} label={k.materialName} value={k.id}></el-option>
                        })}
                      </el-select>
                    </div>
                  )
                }
              },
              {
                columnAttributes: {
                  label: '物料编号',
                  prop: 'materialNumber',
                  'min-width': '200px'
                },
                render: (h, { column, row, index }) => {
                  return (
                    <div style='margin:0 10px'>
                      <el-select
                        style='width:100%'
                        value={row.materialNumber}
                        onInput={e => (row.materialNumber = e)}
                        onChange={e => this.handleChange2(e, row)}
                        disabled={this.linitType === 'edit'}
                        filterable
                        size='mini'
                        placeholder='请输入物料编号'
                        loading={this.loading}
                      >
                        {this.k3List.map(k => {
                          return <el-option key={k.id} label={k.materialNumber} value={k.id}></el-option>
                        })}
                      </el-select>
                    </div>
                  )
                }
              },
              {
                columnAttributes: {
                  label: '规格型号',
                  prop: 'specification',
                  'min-width': '200px'
                },
                render: (h, { column, row, index }) => {
                  return (
                    <div style='margin:0 10px'>
                      <el-select
                        style='width:100%'
                        value={row.specification}
                        onInput={e => (row.specification = e)}
                        onChange={e => this.handleChange2(e, row)}
                        disabled={this.linitType === 'edit'}
                        filterable
                        size='mini'
                        placeholder='请输入规格型号'
                        loading={this.loading}
                      >
                        {this.k3List.map(k => {
                          return <el-option key={k.id} label={k.specification} value={k.id}></el-option>
                        })}
                      </el-select>
                    </div>
                  )
                }
              },
              {
                columnAttributes: {
                  label: '订货上限',
                  prop: 'limitQty',
                  'min-width': '100px'
                },
                render: (h, { column, row, index }) => {
                  return (
                    <div style='margin:0 10px'>
                      <el-input
                        type='number'
                        value={row.limitQty}
                        onInput={e => (row.limitQty = e)}
                        placeholder='请输入'
                        size='mini'
                        clearable
                      ></el-input>
                    </div>
                  )
                }
              }
            ]
            : this.detailType === 'LIMIT'
              ? [
                {
                  columnAttributes: {
                    label: '最小提货数量',
                    prop: 'minBuyNum',
                    'min-width': '100px'
                  },
                  render: (h, { column, row, index }) => {
                    return (
                      <div style='margin:0 10px'>
                        <el-input
                          type='number'
                          value={row.minBuyNum}
                          onInput={e => (row.minBuyNum = e)}
                          placeholder='请输入'
                          size='mini'
                          clearable
                        ></el-input>
                      </div>
                    )
                  }
                },
                {
                  columnAttributes: {
                    label: '最大提货组数',
                    prop: 'maxBuyNum',
                    'min-width': '100px'
                  },
                  render: (h, { column, row, index }) => {
                    return (
                      <div style='margin:0 10px'>
                        <el-input
                          type='number'
                          value={row.maxBuyNum}
                          onInput={e => (row.maxBuyNum = e)}
                          placeholder='请输入'
                          size='mini'
                          clearable
                        ></el-input>
                      </div>
                    )
                  }
                }
              ]
              : [
                {
                  columnAttributes: {
                    label: '配提上限组数',
                    prop: 'groupLimitNum',
                    'min-width': '100px'
                  },
                  render: (h, { column, row, index }) => {
                    return (
                      <div style='margin:0 10px'>
                        <el-input
                          type='number'
                          value={row.groupLimitNum}
                          onInput={e => (row.groupLimitNum = e)}
                          placeholder='请输入'
                          size='mini'
                          clearable
                        ></el-input>
                      </div>
                    )
                  }
                }
              ]
        })(),
        {
          columnAttributes: {
            label: '已下订单数',
            prop: 'orderNums',
            'min-width': '100px'
          },
          render: (h, { column, row, index }) => {
            return (
              <div style='margin:0 10px'>
                <el-input
                  type='number'
                  value={row.orderNums}
                  disabled={true}
                  onInput={e => (row.orderNums = e)}
                  placeholder='请输入'
                  size='mini'
                  clearable
                ></el-input>
              </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '已审订单数',
            prop: 'examineOrderNums',
            'min-width': '100px'
          },
          render: (h, { column, row, index }) => {
            return (
              <div style='margin:0 10px'>
                <el-input
                  type='number'
                  value={row.examineOrderNums}
                  onInput={e => (row.examineOrderNums = e)}
                  disabled={true}
                  placeholder='请输入'
                  size='mini'
                  clearable
                ></el-input>
              </div>
            )
          }
        }
      ]
    }
  },
  mounted() {
    if (!this.operationType) {
      if (this.linitType === 'add') {
        this.dataList.push({
          customerId: '',
          id: '',
          limitQty: null,
          materialId: '',
          policyId: this.policyId,
          customerName: '',
          customerNumber: '',
          examineOrderNums: 0,
          materialName: '',
          materialNumber: '',
          orderNums: 0,
          policyType: '',
          specification: ''
        })
      }
    } else {
      if (this.linitType === 'add') {
        this.dataList.push({
          customerId: '',
          id: '',
          minBuyNum: null,
          maxBuyNum: null,
          groupLimitNum: null,
          policyId: this.policyId,
          customerName: '',
          customerNumber: '',
          examineOrderNums: 0,
          orderNums: 0,
          policyType: '',
          specification: ''
        })
      }
    }
  },
  created() {
    this.getCustomerList()
    this.getMaterialList()
  },
  methods: {
    remoteMethod(query, name) {
      const params = []
      switch (name) {
        case 'number':
          params.push({
            param: 'a.number',
            compare: 'like',
            value: query
          })
          break
        case 'name':
          params.push({
            param: 'a.name',
            compare: 'like',
            value: query
          })
          break
        default:
          params.push({
            param: 'a.specification',
            compare: 'like',
            value: query
          })
          break
      }
      if (query !== '') {
        this.loading = true
        getMaterialListV2({
          pageNum: 1,
          pageSize: 100,
          params
        }).then(res => {
          this.k3List = res.data.records
          this.loading = false
        })
      }
    },
    remoteMethod2(query, name) {
      const params = []
      switch (name) {
        case 'number':
          params.push({
            param: 'a.number',
            compare: 'like',
            value: query
          })
          break
        default:
          params.push({
            param: 'a.name',
            compare: 'like',
            value: query
          })
          break
      }
      if (query !== '') {
        this.loading = true
        getDealerListV2({
          pageNum: 1,
          pageSize: 100,
          params
        }).then(res => {
          this.dealerList = res.data.records
          this.loading = false
        })
      }
    },
    getCustomerList() {
      getCustomerList({
        pageNum: 1,
        pageSize: -1,
        policyId: this.policyId
      }).then(res => {
        this.dealerList = res.data.records
        this.loading = false
      })
    },
    getMaterialList() {
      getMaterialList({
        pageNum: 1,
        pageSize: -1,
        policyId: this.policyId
      }).then(res => {
        this.k3List = res.data.records
        this.loading = false
      })
    },
    handleChange(e, row) {
      const item = this.dealerList.find(k => k.id === e)
      this.$set(row, 'customerId', item.customerId)
      this.$set(row, 'customerName', item.customerName)
      this.$set(row, 'customerNumber', item.customerNumber)
    },
    handleChange2(e, row) {
      const item = this.k3List.find(k => k.id === e)
      this.$set(row, 'materialId', item.materialId)
      this.$set(row, 'materialName', item.materialName)
      this.$set(row, 'materialNumber', item.materialNumber)
      this.$set(row, 'specification', item.specification)
    },
    onSbumit() {
      this.$emit('sbumit', { dataList: this.dataList, type: this.linitType, operationType: this.operationType })
    },
    onCancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped></style>
