<template>
  <div>
    <p-spin :spinning="spinning">
      <p-card :title="title">
        <div slot="extra">
          <div class="btns">
            <p-button type="primary" @click="check">销毁</p-button>
          </div>
        </div>
        <main-table ref="maintable" :tablecolumns="tablecolumns" @details="details" @viewImg="viewImg"></main-table>
      </p-card>
      <p-modal
        width="80%"
        :maskClosable="false"
        :enlargeable="true"
        :draggable="true"
        :title="tablecolumns.modalItems.title"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <div style="width:100%;height:20px;">
          <p-button type="primary" style="float:right;margin-right:10px;">保存</p-button>
        </div>
        <p-grid-form
          :ref="tablecolumns.modalItems.gridformref"
          :span="8"
          :label-col="{ span: 9 }"
          :items="tablecolumns.modalItems.items"
          @submit="hanlderSubmit"
        />
        <a-divider />
        <p-table-edit
          bordered
          :remote-url="tablecolumns.modalItems.remoteUrl"
          :ref="tablecolumns.modalItems.ref"
          :row-key="tablecolumns.modalItems.rowkey"
          :columns="tablecolumns.modalItems.columns"
          :row-selection="{ fixed: true }"
          :data-source.sync="ModalData"
          :remoteParams="ModalItemsParams"
          :rowSelectType="2"
        >
        </p-table-edit>
      </p-modal>

      <p-modal
        width="80%"
        :maskClosable="false"
        :enlargeable="true"
        :draggable="true"
        :title="tablecolumns.modalItems.title"
        :visible="destroyvisible"
        :confirm-loading="confirmLoading"
        :okText="'保存'"
        @ok="handleOkM"
        @cancel="destroyvisible = false"
        :scroll="{ x: 1500 }"
      >
        <p-grid-form
          :ref="tablecolumns.modalItems.gridformref"
          :span="8"
          :label-col="{ span: 9 }"
          :items="tablecolumns.modalItems.destroyvisible.items"
        />
        <!-- <imgsUpload v-model="isUpload" :isView="lookats" @completed="handleUploadImgs"></imgsUpload> -->
      </p-modal>
      <p-modal :title="$lang('销毁单详情')" v-model="isShowModal" :width="800" :footer="false" @ok="handleOk" @cancel="onCancel">
        <a-descriptions v-if="detailData">
          <a-descriptions-item v-for="(item, key, index) in tablecolumns.details" :key="index" :label="item">
            {{ detailData[Object.keys(tablecolumns.details)[index]] }}
            <!-- {{ index }} -->
          </a-descriptions-item>
        </a-descriptions>
      </p-modal>
      <imgsUpload
        v-model="isUpload"
        :isView="lookats"
        :uploadIdlist="uploadIdlist"
        @completed="handleUploadImgs"
      ></imgsUpload>
    </p-spin>
  </div>
</template>

<script>
import { DestroybatchAuditYes, batchDestroy, DestroygetById } from '../api.js'
import MainTable from '../components/mainTable'
import tablecolumns from './config/tableconfjg'
import ImgsUpload from '@/views/kzyWMS/components/ImgsUpload'
export default {
  data() {
    return {
      spinning: false,
      uploadIdlist: [],
      ModalItemsParams: {},
      ModalData: [],
      confirmLoading: false,
      visible: false,
      destroyvisible: false,
      title: '不合合格销毁记录回填',
      isShowModal: false,
      detailData: {},
      tablecolumns: tablecolumns(this),
      isUpload: false,
      lookats: false,
      destroyPic: ''
    }
  },
  components: {
    MainTable,
    ImgsUpload
  },
  methods: {
    onCancel() {
      this.isShowModal = false
    },
    viewImg(data) {
      console.log(data)
      this.uploadIdlist.push(data)
      this.lookats = true
      this.isUpload = true
    },
    handleUploadImgs(item) {
      console.log(item)
      let destroyPic = item.map(item1 => item1.id).join(',')
      console.log(destroyPic)
      this.$refs[this.tablecolumns.modalItems.gridformref].form.setFieldsValue({ destroyPic })
    },
    async details(data) {
      console.log(data, '查看详情')
      let aaa = {
        id: data.id
      }
      console.log(aaa)
      let res = await DestroygetById({ id: data.id })
      console.log(res)
      this.detailData = res.data
      this.isShowModal = true
      console.log(Object.keys(this.tablecolumns.details))
    },
    async check() {
      let that = this
      console.log('销毁')
      //   console.log(this.$refs.maintable.MainTableselectedRowKeys)
      //   console.log(this.$refs.maintable.data)
      let a = this.$refs.maintable.data.filter(item => {
        return this.$refs.maintable.MainTableselectedRowKeys.some(item1 => {
          return item.id == item1
        })
      })
      if (a.length > 0) {
        // this.$refs.maintable.$refs[this.tablecolumns.gridform.ref].form.validateFields(async (err, value) => {
        //   if (!err) {
        //     console.log(value)
        //     let b = a.map(item => {
        //       return (item = { ...item, ...value })
        //     })
        //     console.log(b)
        //     let res = await batchDestroy(b)
        //     if (res.success) {
        //       that.$message.success('销毁成功!')
        //       that.$refs.maintable.$refs[that.tablecolumns.MainTable.ref].reload()
        //     } else {
        //       that.$exception(res)
        //     }
        //   }
        // })
        // this.isUpload = true
        this.destroyvisible = true
        this.$nextTick(() => {
          this.$refs[this.tablecolumns.modalItems.gridformref].form.resetFields()
        })
      } else {
        this.$message.info('请选择数据')
      }
    },
    hanlderSubmit(event, form) {
      event.preventDefault()
      console.log('弹窗查询')
    },
    showModal() {
      this.$refs.maintable.$refs[this.tablecolumns.gridform.ref].form.validateFields((err, value) => {
        if (!err) {
          //   console.log(value)
          this.visible = true
          console.log(this.$refs[this.tablecolumns.modalItems.ref])
          this.$nextTick(() => {
            this.$refs[this.tablecolumns.modalItems.gridformref].form.setFieldsValue(value)
          })
        } else {
          this.$message.warning('请选择货主和仓库名称')
        }
      })

      //   this.visible = true
    },
    handleOkM() {
      console.log(this.uploadIdlist)
      let that = this
      let a = this.$refs.maintable.data.filter(item => {
        return this.$refs.maintable.MainTableselectedRowKeys.some(item1 => {
          return item.id == item1
        })
      })
      let b
      //   this.destroyvisible = false
      this.$refs.maintable.$refs[this.tablecolumns.gridform.ref].form.validateFields(async (err, value) => {
        if (!err) {
          //   console.log(value)
          b = a.map(item => {
            return (item = { ...item, ...value })
          })
        }
      })
      this.$refs[this.tablecolumns.modalItems.gridformref].form.validateFields(async (err, value) => {
        if(!value.destroyPic) return this.$message.warn('请上传销毁图片')
        if (!err) {
          console.log(value)
          b = b.map(item => {
            return (item = { ...item, ...value })
          })
          console.log(b)
          that.confirmLoading = true
          try {
            let res = await batchDestroy(b)
            that.confirmLoading = false
            if (res.success) {
              that.$message.success('销毁成功!')
              that.destroyvisible = false
              that.$refs.maintable.$refs[that.tablecolumns.MainTable.ref].reload()
              that.$refs.maintable.clear()
            } else {
              that.$exception(res)
            }
          } catch (error) {
            that.$exception(error)
            that.confirmLoading = false
          }
     
        }
      })
    },
    handleOk(e) {
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
    },
    del() {
      console.log(this.$refs.maintable)
    }
  }
}
</script>

<style scoped>
.btns {
  width: 200px;
  display: flex;
  justify-content: space-around;
}
</style>
