<template>
  <div class="container">
    <p-card>
      <template slot="title">
        <div class="card-custom-title">
          <div>容器管理</div>
          <div>
            <p-button type="primary" icon="plus" @click="showModal(true)">新增</p-button>
            <p-button type="primary" icon="download" style="margin-left: 10px">导出</p-button>
          </div>
        </div>
      </template>

      <div class="plg-inner-form-mb">
        <p-grid-form
          ref="search"
          :span="6"
          :label-col="{ span: 6 }"
          :items="items"
          @submit="hanlderSubmit"
        ></p-grid-form>
      </div>

      <p-table
        ref="table"
		dragle
		auto-width
		:scroll="{x:true}"
        rowKey="containerId"
        :bordered="true"
        :autoLoad="false"
        :has-row-count="true"
        :filterDropdownColum="false"
        :colorTransformRow="false"
        :remoteUrl="{ url: upcloud_base_wh+'/container/page', method: 'get' }"
        :columns="columns"
        :data-source.sync="data"
        :remoteData="remoteParams"
        :remoteParams="remoteParams"
      >
        <template slot="containerType" slot-scope="text">
          <span>{{ renderDict(text, 'types') }}</span>
        </template>
        <template slot="containerStatus" slot-scope="text">
          <span>{{ renderDict(text, 'status') }}</span>
        </template>
        <template slot="action" slot-scope="text, record">
          <a @click="showModal(false, record)">修改</a>
          <a-divider type="vertical" />
          <a-popconfirm title="您确定要删除吗?" ok-text="确认" cancel-text="取消" @confirm="delSingle(record)">
            <a>删除</a>
          </a-popconfirm>
        </template>
      </p-table>
    </p-card>

    <p-modal
      :title="actionType ? '容器新增' : '容器修改'"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :maskClosable="false"
      :enlargeable="true"
      :draggable="true"
      width="80%"
      destroyOnClose
    >
      <p-grid-form
        ref="modelForm"
        :span="12"
        :label-col="{ span: 9 }"
        :items="actionType ? modalItems : modalEditItems"
      ></p-grid-form>
    </p-modal>
  </div>
</template>

<script>
import { items, modalItems, modalEditItems, columns } from './config/container'
import { containerPage, containerAdd, containerDelete, containerUpdate, findDictType } from './api/api.js'
import { setwarehouse } from './config/warehousemixin.js'
import { sorter } from '../../utils/sort'
import { upcloud_base_wh } from "@/config/serviceSettings";

export default {
  name: 'Container',
  mixins: [setwarehouse],
  data() {
    return {
      upcloud_base_wh:upcloud_base_wh,
      items,
      modalItems,
      modalEditItems,
      data: [],
      columns:null,
      remoteParams: {},
      visible: false,
      loading: false,
      confirmLoading: false,
      actionType: true,
      types: [],
      status: [],
      record: {}
    }
  },
  created() {
    this.getContainerDict()
    this.columns = sorter(columns)
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.hanlderSubmit(null,this.$refs.search.form)
    },
    getContainerDict() {
      // 容器类型
      findDictType('pub_container_containertype').then(res => {
        if (res.success) {
          this.types = res.data
        }
      })

      // 容器状态
      findDictType('pub_container_status').then(res => {
        if (res.success) {
          this.status = res.data
        }
      })
    },
    renderDict(value, type = 'types') {
      let text = ''
      this[type].map(item => {
        if (item.dictCode == value) {
          text = item.dictName
        }
      })
      return text
    },
    hanlderSubmit(event, form) {
      if (event) event.preventDefault()
      form.validateFields((err, values) => {
        if (!err) {
          this.remoteParams = values
        }
      })
    },
    showModal(bool, record) {
      this.visible = true
      this.actionType = bool

      this.$nextTick(() => {
        const { form } = this.$refs.modelForm
        if (bool) {
          form.resetFields()
        } else {
          this.record = record
          record.isEnable = record.isEnable == 1 ? true : false
          form.setFieldsValue(record)
        }
      })
    },
    delSingle(record) {
      this.loading = true
      containerDelete({ ids: record.containerId }).then(res => {
        if (res.success) {
          this.visible = false
          this.$message.success(res.message || '操作成功')
          this.getData()
        } else {
          //   this.$message.warning(res.message || '操作失败')
          this.$exception(res)
        }
        this.loading = false
      })
    },
    handleOk(e) {
      this.confirmLoading = true
      const { actionType, record } = this
      this.$refs.modelForm.form.validateFields(async (error, values) => {
        if (!error) {
          const { startNum, endNum, isEnable } = values
          if (startNum > endNum) {
            this.$message.warning('起始号不能大于终止号')
            return false
          }
          values.isEnable = isEnable ? 1 : 0
          const res = actionType
            ? await containerAdd(values)
            : await containerUpdate({ ...values, containerId: record.containerId })
          let msg = res.message
          if (res.success) {
            this.visible = false
            this.$message.success(msg || '操作成功')
          } else {
            // this.$message.warning(msg || '操作失败')
            this.$exception(res)
          }

          this.getData()
        }

        this.confirmLoading = false
      })
    },
    handleCancel(e) {
      this.visible = false
    },
    paginationChange(pagination) {
      this.pagination = pagination
      this.pagination.pageNum = pagination.current
      const params = this.$refs.search.form.getFieldsValue()
      this.getData(params)
    }
  }
}
</script>

<style lang="less" scoped>
.card-custom-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
