<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">导入</p-button> -->
        <p-button type="primary" @click="delall()">批量删除</p-button>
        <div style="padding:5px">
          <p-upload
            name="file"
            :multiple="false"
            :headers="headers"
            action="/master/containerInfo/save-containerInfo-excel"
            @change="handleChange"
          >
            <p-button type="primary" style="margin-right:10px"> <p-icon type="upload" /> 导入 </p-button>
          </p-upload>
        </div>
      </span>
      <p-grid-form :label-col="{ span: 8 }" :span="8" :items="config.items" @submit="hanlderSubmit" />
      <p-table
        ref="table"
        row-key="id"
        bordered
        :columns="config.columns"
        :remoteUrl="config.remoteUrl"
        :remoteParams="remoteParams"
        :doneBefore="doneBefore"
        :rowSelectType="2"
        @selectChange="selectChange"
        :data-source="data"
      >
        <template slot="operation" slot-scope="text, record">
          <a v-if="record.status" @click="add(record)">禁用</a>
          <a v-if="!record.status" @click="add(record)">启用</a>
        </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" />
    </p-modal>
  </div>
</template>

<script>
import config from './config.js'
import { openorforbidden, SaveContainerInfo, delcontainerNo } from './api'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
const token = sessionStorage.getItem('token')
// console.log(token)
export default {
  data() {
    return {
      config,
      data: [],
      visible: false,
      selectedRowKeys: [],
      confirmLoading: false,
      remoteParams: {
        containerNo: ''
      },
      containerNos: [],
      headers: {
        Authorization: `Bearer ${token}`
      }
    }
  },
  mounted() {
    // this.getinfo()
  },
  methods: {
    handleChange(info) {
      console.log(info, '=============')
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done' && info.file.response.success) {
        this.$message.success(`${info.file.name} 上传成功`)
        this.remoteParams = { ...this.remoteParams }
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name}上传失败.`)
        this.$exception(info.file.response)
      } else if (info.file.status === 'done' && !info.file.response.success) {
        this.$message.error(`${info.file.name} 上传失败`)
        this.$exception(info.file.response)
      }
    },
    selectChange(selectedRowKeys, selectedRows) {
      this.containerNos = selectedRows.map(item => item.containerNo)
      console.log(this.containerNos)
    },
    doneBefore(res) {
      res.data.list.forEach(item => {
        item.id = item.containerNo + new Date().getTime()
      })
      console.log(res)
      return res
    },
    //点击禁用
    async add(data) {
      let that = this
      let { containerNo } = data
      console.log(containerNo)
      let res = await openorforbidden({ containerNo })
      console.log(res)
      if (res.success) {
        that.$message.success(res.message)
        that.remoteParams = { ...that.remoteParams }
      } else {
        that.$exception(res)
      }
    },
    hanlderSubmit(e, form) {
      e.preventDefault()
      form.validateFields((error, values) => {
        console.log(error, values, 'valuesvaluesvaluesvaluesvalues')
        // this.queryName = values.name
        // this.queryType = values.type
        // this.getlistCompanyByAuthId()
        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
          //添加
          let res = await SaveContainerInfo(value)
          console.log(res)
          if (res.success) {
            res.message == '添加成功' && this.$message.success(res.message)
            res.message != '添加成功' && this.$message.error(res.message)

            this.visible = false
            this.remoteParams = { ...this.remoteParams }
          } else {
            this.$exception(res)
          }

          this.confirmLoading = false
          //
        }
      })
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
    },
    //点击弹出
    showmodel(text) {
      console.log(text)

      this.visible = true
      this.$nextTick(() => {
        this.$refs.model.form.resetFields()
      })
    },
    //批量删除
    async delall() {
      let that = this
      let containerNos = this.containerNos
      if (containerNos.length > 0) {
        this.$confirm({
          title: '确定是否要删除?',
          content: '',
          async onOk() {
            let res = await delcontainerNo(containerNos)
            if (res.success) {
              that.$message.success(res.message)
              that.remoteParams = { ...that.remoteParams }
            } else {
              that.$exception(res)
            }
          },
          onCancel() {}
        })
      } else {
        this.$message.error('请选择数据')
      }
    }
  }
}
</script>

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