<template>
  <div>
    <p-card :title="title">
      <span slot="extra">
        <template v-for="(item, index) in btnOptions">
          <p-button type="primary" style="margin-right: 10px" :icon="item.icon" @click="clickBtn(item)" :key="index">{{
            item.name
          }}</p-button>
        </template>
      </span>
      <div class="gridClass">
        <p-grid-form :span="8" ref="gridform" :items="itemDatas" @submit="hanlderSubmit" />
      </div>
      <p-table
        ref="table"
        :row-key="tableRowKey"
        :bordered="true"
        :autoLoad="tableAutoLoad"
        :filterDropdownColum="false"
        :colorTransformRow="false"
        :columns="tableColumns"
        :loading="loading"
        :pagination="false"
        :remoteBefore="remoteBefore"
        :rowSelectType="rowSelectType"
        :selectedRowKeys.sync="selectedRowKeys"
        :remoteUrl="tableRemoteUrl"
        :remoteData="remoteParams"
        :remoteParams="remoteParams"
        :data-source="dataSource"
        :scroll="{ x: true }"
        @selectChange="selectChange"
      >
        <span slot="auditFlag" slot-scope="text">
          {{ text == '1' ? '审核' : '不审核' }}
        </span>
        <span slot="syncFlag" slot-scope="text">
          {{ text == '1' ? '回传ERP' : '不回传ERP' }}
        </span>
        <span slot="quantityMode" slot-scope="text">
          {{ text == '1' ? '整件' : text == '2' ? '零散' : '整散' }}
        </span>
        <span slot="stockStatus" slot-scope="text">
          {{ stockStatus(text) }}
        </span>
        <span slot="ruleType" slot-scope="text">
          {{ typeRuleFun(text) }}
        </span>
        <span slot="srcWarehouseCategory" slot-scope="text">
          {{ category(text) }}
        </span>
        <span slot="destWarehouseCategory" slot-scope="text">
          {{ category(text) }}
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="delClick(record)" href="javascript:;">删除</a>
          <a-divider type="vertical" />
          <a @click="changeClick(record)" href="javascript:;">修改</a>
        </span>
      </p-table>
    </p-card>
  </div>
</template>

<script>
export default {
  name: 'check',
  props: {
    btnOptions: {
      // 按钮集合
      type: Array,
      default: [],
    },
    queryStatus: {
      // 查询按钮
      type: Boolean,
      default: true,
    },
    tableRowKey: {
      type: String,
      default: '',
    },
    optionsData: {
      // 移库状态
      type: Array,
      default: [],
    },
    typeRule: {
      // 规则类型
      type: Array,
      default: [],
    },
    codeDatas: {
      // 库别
      type: Array,
      default: [],
    },
    dataSource: {
      // 按钮集合
      type: Array,
      default: [],
    },
    tableAutoLoad: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: true,
    },
    rowSelectType: {
      // 行选择类型
      type: Number,
      default: 0,
    },
    title: {
      // 标题
      type: String,
      default: '',
    },
    tableColumns: {
      type: Array,
      default: [],
    },
    items: {
      type: Array,
      default: [],
    },
    tableRemoteUrl: {
      type: String | Object | Function,
      default: '',
    },
  },
  data() {
    return {
      remoteParams: {},
      item: [],
      itemOption: {
        span: 6,
        type: 'buttonGroup',
        style: { textAlign: 'left' },
        options: [
          {
            value: '查询',
            icon: 'search',
            btnType: 'primary',
            style: 'margin-left:30px;margin-right:10px;',
            htmlType: 'submit',
            on: {
              click: (event, form) => {
                form.validateFields((error, values) => {
                  if (!error) {
                    this.remoteParams = { ...values }
                  }
                })
              },
            },
          },
          {
            value: '重置',
            name: 'ccz',
            icon: 'redo',
            on: {
              click(event, form) {
                form.resetFields()
              },
            },
          },
        ],
      },
      itemDatas: [],
      selectedRowKeys: [],
    }
  },
  created() {
    if (this.queryStatus) {
      let st = false
      this.items.map((res) => {
        if (res.type == 'buttonGroup') {
          st = true
        }
      })
      if (!st) {
        this.items.push(this.itemOption)
      }
      this.itemDatas = this.items
    } else {
      this.itemDatas = this.items
    }
  },
  methods: {
    stockStatus(value) {
      if (!value) return ''
      let val = ''
      let arrs = value.split(',')
      arrs.map((list) => {
        this.optionsData.map((res) => {
          if (res.value == list) {
            val += res.label + '，'
          }
        })
      })
      val = val.slice(0, val.length - 1)
      return val
    },
    typeRuleFun(value) {
      console.log(value, '11111')
      if (!value) return ''
      let val = ''
      this.typeRule.map((res) => {
        console.log(res.value, value, '2222222')

        if (res.value == value) {
          val = res.label
        }
      })
      return val
    },
    category(value) {
      if (!value) return ''
      let val = value
      this.codeDatas.map((res) => {
        if (res.dictCode == value) {
          val = res.dictName
        }
      })
      return val
    },
    clickBtn(item) {
      // 按钮
      this.$emit(item.action, true)
    },
    hanlderSubmit(event, form) {
      // 查询
      event.preventDefault()
      this.$emit('hanlderSubmit', event, form)
    },
    remoteBefore(data, dataParams) {
      // dataParams.data = { ...dataParams.data}
      // let values = this.$refs.forms.form.getFieldsValue()
      // dataParams.params = values
      // return dataParams
    },
    selectChange(selectedRowKeys, selectedRows) {
      // 勾选框
      this.selectedRowKeys = selectedRowKeys
      this.$emit('selectChange', selectedRowKeys, selectedRows)
    },
    changeClick(record) {
      this.$emit('changeClick', record)
    },
    delClick(record) {
      // 删除
      let that = this
      this.$confirm({
        title: '是否删除?',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          that.$emit('delData', record)
        },
      })
    },
  },
}
</script>

<style>
.gridClass {
  margin-bottom: 12px;
}
</style>
