<template>
  <div>
    <!-- 规则因子 -->
    <!-- <a-divider /> -->
    <p-card title="规则查询匹配条件" :bordered="false" style="width: 100%">
      <div slot="extra"><p-button type="primary" @click="AddStrategy()">添加</p-button></div>
      <p-grid-form
        :ref="tablecolumns.gridform.ref"
        :span="8"
        :items="tablecolumns.gridform.items"
        @submit="hanlderSubmit"
      />
      <a-divider />
      <p-table
        bordered
        :remote-url="tablecolumns.MainTable.RemoteUrl"
        :ref="tablecolumns.MainTable.ref"
        :row-key="tablecolumns.MainTable.rowkey"
        :columns="tablecolumns.MainTable.columns"
        :remoteParams="gridformeParams"
        :data-source.sync="data"
        :rowSelectType="false"
      >
        <span slot="type" slot-scope="text, record">
          {{ text == 'match' ? '匹配' : '查询' }}
        </span>
        <span slot="operation" slot-scope="text, record">
          <a @click.stop="AddStrategy(text)">编辑</a>
          <a-divider type="vertical" />
          <a @click.stop="details(text)">详情</a>
          <a-divider type="vertical" />
          <a @click.stop="del(text)">删除</a>
        </span>
      </p-table>
    </p-card>
    <edit-model
      ref="model"
      :visible="visible"
      @hidemodel="hidemodel"
      :strategyType="strategyType"
      :items="items"
    ></edit-model>
    <a-modal width="80%" :visible="visibles" @ok="visibles = false" @cancel="visibles = false">
      <a-descriptions title="规则因子详情" bordered>
        <!-- v-for="item of columns.filter(t => !t.hidden && t.key != 'operation' && t.dataIndex != '_row_count')"
          :key="item.key"
          :label="item.title" -->
        <a-descriptions-item
          v-for="item of tablecolumns.MainTable.columns.filter(
            t => !t.hidden && t.key != 'operation' && t.dataIndex != '_row_count'
          )"
          :key="item.key"
          :label="item.title"
        >
          {{ detailsdata[item.key] }}
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </div>
</template>
<script>
import tablecolumns from './config/tableconfjg'
import model from './config/model'
import { delItem } from './api'
import EditModel from './model.vue'
export default {
  name: 'factor',
  data() {
    return {
      detailsdata: {},
      visibles: false,
      tablecolumns: tablecolumns(this),
      model: model(this),
      data: [],
      gridformeParams: {
        category: this.strategyType
      },
      //   items: [],
      visible: false,
      hide: true
    }
  },
  props: {
    strategyType: {
      type: String,
      default: 'InStock'
    }
  },
  components: {
    EditModel
  },
  computed: {
    items() {
      return this.model.strategy.items
    }
  },
  mounted() {
  },
  methods: {
    details(text) {
      //   this.$nextTick(() => {
      this.detailsdata = text
      this.visibles = true
      //   })
    },
    hidemodel(data) {
      this.visible = false
      if (!data) {
        this.reload()
      }
    },

    reload() {
      this.$refs[this.tablecolumns.MainTable.ref].reload()
    },
    SetModel(data) {
      this.$refs.model.setvalue(data)
    },
    AddStrategy(text) {
      this.visible = true
      if (text) {
        this.SetModel(text)
      } else {
        this.$refs.model.types()
      }
    },
    back(value) {
      this.hide = value
    },
    del(data) {
      let that = this
      this.$confirm({
        title: '是否删除?',
        okText: '确认',
        cancelText: '取消',
        async onOk() {
          let res = await delItem({ id: data.id })
          if (res.success) {
            that.$message.success(`删除成功！${res.message}`)
            that.reload()
          } else {
            that.$exception(res)
          }
        }
      })
    },
    hanlderSubmit(event, form) {
      event.preventDefault()
      //   gridformeParams
      form.validateFields((err, value) => {
        if (!err) {
          this.gridformeParams = { ...value }
        }
      })
    }
  }
}
</script>
