<template>
  <div>
    <!-- 算法策略配置 -->
    <p-card title="算法策略配置">
      <span slot="extra">
        <p-button type="primary" style="margin-right:10px" @click="showmodel()">新增</p-button>
        <p-button type="primary" style="margin-right:10px" @click="selectmodel()">选择策略</p-button>
        <!-- <p-button type="primary">批量删除</p-button> -->
      </span>
      <p-grid-form :label-col="{ span: 8 }" :span="8" ref="gridform" :items="config.items" @submit="hanlderSubmit" />
      <p-table
        ref="table"
        row-key="id"
        bordered
        :columns="config.columns"
        :remoteUrl="config.remoteUrl"
        :remoteParams="remoteParams"
        :data-source.sync="data"
      >
        <template slot="operation" slot-scope="text, record">
          <div v-if="!record.status">
            <a @click="showmodel(record)">修改</a>
            <a-divider type="vertical" />
            <a @click="del(record)">删除</a>
          </div>
          <div v-else>
            <span>修改</span>
            <a-divider type="vertical" />
            <span>删除</span>
          </div>
        </template>
      </p-table>
    </p-card>

    <p-modal
      title="详情"
      width="50%"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p-grid-form :label-col="{ span: 8 }" ref="model" :span="8" :items="config.Modelitems" @submit="hanlderSubmit" />
    </p-modal>

    <p-modal
      title="选择策略"
      width="50%"
      :visible="selectmodelvisible"
      :confirm-loading="confirmLoading"
      @ok="selecthandleOk"
      @cancel="handleCancel"
    >
      <p-grid-form
        :label-col="{ span: 8 }"
        ref="selectmodel"
        :span="8"
        :items="SelectModelitems"
        @submit="hanlderSubmit"
      />
    </p-modal>
  </div>
</template>

<script>
import config from './config.js'
import { savestrategyConfig, updatestrategyConfig, delstrategyConfigid, choicestrategyConfigid } from './api'

export default {
  data() {
    return {
      config,
      remoteParams: {
        strategyNo: '',
        strategyName: '',
        type: '',
        status: ''
      },
      plainOptions: [
        { label: '出库口', value: 1 },
        { label: '钢平台拣选', value: 2 },
        { label: '在线拣选', value: 3 },
        { label: '在线拣选', value: 4 },
        { label: '在线拣选', value: 5 },
        { label: '在线拣选', value: 6 },
        { label: '在线拣选', value: 7 }
      ],
      data: [],
      selectmodelvisible: false,
      visible: false,
      confirmLoading: false,
      SelectModelitems: [
        {
          span: 24,
          type: 'select',
          name: 'a',
          label: '入库分货位',
          required: true,
          value: '',
          options: []
        },
        {
          span: 24,
          type: 'select',
          name: 'b',
          required: true,
          label: '入库找区域',
          value: '',
          options: []
        },
        {
          span: 24,
          type: 'select',
          name: 'c',
          required: true,
          label: '出库',
          value: '',
          options: []
        }
      ]
    }
  },
  mounted() {
    // this.getinfo()
  },
  methods: {
    onChange(checkedValues) {
      console.log('checked = ', checkedValues)
      //   console.log('value = ', this.value)
    },
    hanlderSubmit(e, form) {
      e.preventDefault()
      form.validateFields((error, values) => {
        console.log(error, values, 'valuesvaluesvaluesvaluesvalues')
        if (!error) {
          this.remoteParams = { ...this.remoteParams, ...values }
        }
      })
    },
    handleOk(e) {
      this.$refs.model.form.validateFields(async (err, value) => {
        if (!err) {
          console.log(value)
          this.confirmLoading = true
          if (this.type) {
            //修改
            let res = await updatestrategyConfig(value)
            console.log(res)
            if (res.success) {
              this.visible = false
              this.remoteParams = { ...this.remoteParams }
            } else {
              this.$exception(res)
            }
          } else {
            //添加
            let res = await savestrategyConfig(value)
            console.log(res)
            if (res.success) {
              this.visible = false
              this.remoteParams = { ...this.remoteParams }
            } else {
              this.$exception(res)
            }
          }

          this.confirmLoading = false
          //
        }
      })
    },
    selecthandleOk() {
      this.selectmodelvisible = false
      this.$refs.selectmodel.form.validateFields(async (err, value) => {
        if (!err) {
          //   console.log(Object.values(value).join(','))
          let ids = Object.values(value)
          let res = await choicestrategyConfigid(ids)
          console.log(res)
          if (res.success) {
            this.$message.success('保存成功!')
            this.remoteParams = { ...this.remoteParams }
          } else {
            this.$exception(res)
          }
        }
      })
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
      this.selectmodelvisible = false
    },
    //点击弹出
    showmodel(data) {
      console.log(data)
      this.visible = true

      if (data) {
        this.config.Modelitems.forEach(item => {
          console.log(item)
          item.name == 'strategyNo' && (item.disabled = true)
        })
        this.$nextTick(() => {
          this.$refs.model.form.setFieldsValue(data)
          this.$refs.model.form.setFieldsValue(data)
        })
        this.type = true
      } else {
        this.config.Modelitems.forEach(item => {
          item.name == 'strategyNo' && (item.disabled = false)
        })
        this.$nextTick(() => {
          this.$refs.model.form.resetFields()
        })
        this.type = false
      }
    },
    del(text) {
      let that = this
      console.log(text)
      this.$confirm({
        title: '确定是否要删除?',
        content: '',
        async onOk() {
          let res = await delstrategyConfigid({ id: text.id })
          if (res.success) {
            that.$message.success('删除成功')
            that.remoteParams = { ...that.remoteParams }
          } else {
            that.$exception(res)
          }
        },
        onCancel() {}
      })
    },
    selectmodel() {
      this.selectmodelvisible = true
      console.log(this.data)
      let a = this.data.filter(item => item.type == 10)
      let b = this.data.filter(item => item.type == 11)
      let c = this.data.filter(item => item.type == 20)
      a.forEach(item => {
        item.label = item.strategyName
        item.value = item.id
      })
      b.forEach(item => {
        item.label = item.strategyName
        item.value = item.id
      })
      c.forEach(item => {
        item.label = item.strategyName
        item.value = item.id
      })
      console.log(a, b, c)
      this.SelectModelitems[0].options = a
      this.SelectModelitems[1].options = b
      this.SelectModelitems[2].options = c
      if (a.find(item => item.status == 1)) {
        this.SelectModelitems[0].value = a.find(item => item.status == 1).strategyName
      }
      if (b.find(item => item.status == 1)) {
        this.SelectModelitems[1].value = b.find(item => item.status == 1).strategyName
      }
      if (c.find(item => item.status == 1)) {
        this.SelectModelitems[2].value = c.find(item => item.status == 1).strategyName
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
item
