<template>
  <div class="detail">
    <p-card v-if="detailShow == 1">
      <div slot="title" style="display: inline-block; align-items: center; cursor: pointer" @click="clickEvent('back')">
        <a-icon type="arrow-left" style="color: #1990ff" class="mr-10" />
        {{ '波次详情-' + (isDisabled == 1 ? '编辑' : isDisabled == 2 ? '新增' : '查看') }}
      </div>
      <div slot="extra">
        <p-button
          type="primary"
          style="margin: 5px"
          @click="clickEvent('enable')"
          v-if="isDisabled == 1 ? true : false"
          v-action:add
          >启用</p-button
        >
        <p-button
          type="primary"
          style="margin: 5px"
          @click="clickEvent('stopUsing')"
          v-if="isDisabled == 1 ? true : false"
          v-action:add
          >停用</p-button
        >
        <p-button
          type="primary"
          style="margin: 5px"
          @click="clickEvent('save')"
          v-if="isDisabled == 0 ? false : true"
          v-action:add
          >保存</p-button
        >
      </div>
      <p-card style="margin-top:16px" title="基础信息">
        <a-descriptions>
          <a-descriptions-item label="波次ID">
            wave20212012121
          </a-descriptions-item>
          <a-descriptions-item label="波次编号">
            wave20212012121
          </a-descriptions-item>
          <a-descriptions-item label="优先级">
            1
          </a-descriptions-item>
          <a-descriptions-item label="仓库">
            wave20212012121
          </a-descriptions-item>
        </a-descriptions>
      </p-card>

      <p-card style="margin-top:16px" title="状态">
        <a-steps :current="1">
          <a-step>
            <!-- <span slot="title">Finished</span> -->
            <template slot="title">
              波次创建
            </template>
            <span slot="description">2021-03-01 12:00:12</span>
          </a-step>
          <a-step title="波次下发" sub-title="Left 00:00:08" description="2021-03-01 12:00:12" />
          <a-step title="波次库存预占" description="2021-03-01 12:00:12" />
          <a-step title="计算集货区" description="2021-03-01 12:00:12" />
          <a-step title="生成容器任务" description="2021-03-01 12:00:12" />
        </a-steps>
      </p-card>

      <p-card style="margin-top:16px" title="波次明细">
        <template>
          <h3>分组：sub-wave20212012121</h3>
          <p-table
            ref="logTable"
            :rowSelectType="rowSelectType"
            :columns="tableColumnsConfig"
            :row-selection="rowSelection"
            :execute="false"
            rowKey="_row_count"
            :expandRowByClick="false"
            :dataSource.sync="dataSource"
            :pagination="10"
            bordered
          >
            <div slot="action" href="javascript:;" slot-scope="text">
              <!-- <a slot="action" style="margin: 0 5px" @click.stop="lookat(text)">查看</a> -->
              <a slot="action" style="margin: 0 5px" @click.stop="edit(text)">订单明细</a>
              <!-- <a slot="action" style="margin: 0 5px" @click.stop="deleteOne(text)">删除</a> -->
            </div>
          </p-table>
        </template>
         <template>
          <h3>分组：sub-wave20212012121</h3>
          <p-table
            ref="logTable"
            :rowSelectType="rowSelectType"
            :columns="tableColumnsConfig"
            :row-selection="rowSelection"
            :execute="false"
            rowKey="_row_count"
            :expandRowByClick="false"
            :dataSource.sync="dataSource"
            :pagination="10"
            bordered
          >
            <div slot="action" href="javascript:;" slot-scope="text">
              <!-- <a slot="action" style="margin: 0 5px" @click.stop="lookat(text)">查看</a> -->
              <a slot="action" style="margin: 0 5px" @click.stop="edit(text)">订单明细</a>
              <!-- <a slot="action" style="margin: 0 5px" @click.stop="deleteOne(text)">删除</a> -->
            </div>
          </p-table>
        </template>
      </p-card>

      <!-- <p-grid-form
          class="mb-10"
          ref="formdetail"
          :items="fmd"
          :span="8"
          :labelCol="{ span: 9 }"
          @submit="
            ($event, form) => {
              handleSubmit($event, form, 'formdetail');
            }
          "
        /> -->
    </p-card>
    <div v-if="detailShow == 2">
      <detailView :columns="tableColumnsConfig" :pUrl="pUrl" :params="detaiParams" :title="detaititle" @back="goBack"></detailView>
    </div>
  </div>
</template>
<script>
import { detailFormItems, tableColumnsConfig } from '../js/config'
import setPubConsignor from '../js/pubConsignor.js'
import detailView from './detailView.vue'

export default {
  name: 'modelForm',
  components: {detailView},
  props: {
    formData: {
      type: Object,
      default() {
        return {}
      }
    },
    formItem: {
      type: Array,
      default() {
        return []
      }
    },
    isDisabled: {
      type: Number
    }
  },
  data() {
    return {
      pubConsignor: setPubConsignor({
        on: {
          ok: this.ok
        }
      }),
      fmd: null,
      rowSelectType: 2,
      tableColumnsConfig,
      selectedRows: [],
      dataSource: [
        {
          customername: 1,
          branchid: '90',
          branchname: '121'
        }
      ],
      detailShow: 1,
      pUrl: '',
      detaiParams: {},
      detaititle: '波次-订单明细'
    }
  },
  created() {
    // this.fmd = this.pubConsignor.concat(this.formItem)
    // this.$nextTick(() => {
    //   this.$refs.formdetail.form.setFieldsValue(this.formData)
    //   if (this.isDisabled == 0) {
    //     this.fmd.forEach(item => {
    //       item.disabled = true
    //     })
    //   } else if (this.isDisabled == 1) {
    //     this.filterCode(this.fmd)
    //   }
    // })
  },
  mounted() {},
  computed: {
    rowSelection() {
      let _this = this
      return {
        onSelectAll(selected, selectedRows, changeRows) {
          var checked = selected
          var key = changeRows.map(item => item.id)
        },
        onSelect(record, selected, selectedRows, nativeEvent) {
          var checked = selected
          var key = record.id
          console.log(selectedRows)
        },
        onChange(selectedRowKeys, selectedRows) {
          _this.selectedRows = selectedRowKeys
          console.log(selectedRowKeys)
        }
      }
    }
  },
  watch: {
    formList(v) {
      this.modal.formItems = v
    }
  },
  methods: {
    filterCode(data) {
      const arr = []
      data.forEach(element => {
        if (element.name.indexOf('code') !== -1 || (element.name.indexOf('Code') !== -1 && !element.hidden)) {
          arr.push(element.name)
        }
      })
      this.$refs.formdetail.form.disableItem(arr)
    },
    edit() {
      this.detailShow = 2

    },
    goBack() {
      this.detailShow = 1
    },
    clickEvent(event) {
      // let data = this.$refs.formdetail.form.getFieldsValue()
      // let params = Object.assign(this.formData, data)
      let params = ''
      if (event === 'back') {
        this.$emit('clickEven', event, params)
      } else if (event === 'save') {
        this.$refs.formdetail.form.validateFields((error, values) => {
          if (!error) {
            this.$emit('clickEven', event, params)
          } else {
            return
          }
        })
      } else {
        this.$emit('clickEven', event, params)
      }
    }
  }
}
</script>
<style lang="less">
.buttonlist1 {
  display: flex;
  justify-content: space-between;
}
</style>
