<template>
  <div>
    <div>
      <p-card title="打印机配置">
        <p-grid-form
          :span="6"
          ref="formTarget"
          :label-col="{ span: 8 }"
          :items="gridItems"
          @submit="
            ($event, form) => {
              handleSubmit($event, form, 'formTarget')
            }
          "
        />
        <p-table
          ref="logTable"
          :rowSelectType="rowSelectType"
          :columns="tableColumnsConfig"
          :row-selection="rowSelection"
          :execute="false"
          rowKey="printerid"
          :expandRowByClick="false"
          :dataSource.sync="dataSource"
          :loading="tabLoding"
          dragle
          ellipsis
          :pagination="50"
          bordered
        >
          <div slot="status" slot-scope="record">
            <span slot="status" v-if="record === '0'">已损坏报修</span>
            <span slot="status" v-if="record === '1'">正常</span>
          </div>

          <!-- <div slot="printertype" slot-scope="record">
            <span slot="printertype" v-if="record === 'JZS'">集中式,网络打印机</span>
            <span slot="printertype" v-if="record === 'FBS'">分布式,非网络打印机</span>
          </div> -->

          <div slot="action" href="javascript:;" slot-scope="text">
            <a slot="action" style="margin: 0 5px" @click.stop="lookat(text)">详情</a><a-divider type="vertical" />
            <a slot="action" style="margin: 0 5px" @click.stop="edit(text)">修改</a><a-divider type="vertical" />
            <a slot="action" style="margin: 0 5px" @click.stop="deleteOne(text)">删除</a>
          </div>
        </p-table>

        <div class="btnList" slot="extra">
          <p-button type="primary" icon="delete" @click="batchDelete">批量删除</p-button>
          <p-button type="primary" style="margin-left: 5px" icon="plus" @click="showModal">新增</p-button>
          <printButton :printUrl="printUrl" :printData="printData" :printQuantity="printQuantity" style="margin-left: 5px"></printButton>
        </div>
      </p-card>
    </div>
    <div class="">
      <p-modal
        :title="Title"
        :visible="visible"
        :enlargeable="false"
        :draggable="true"
        :maskClosable="false"
        @cancel="handleCancel"
        width='50%'
        :footer="null"
        @enlargeChange="enlargeChange"
      >
        <div>
          <p-grid-form
            ref="formdetail"
            :items="detailFormItems"
            :span="12"
            :labelCol="{ span: 6 }"
            @submit="
              ($event, form) => {
                formSubmit($event, form, 'formdetail')
              }
            "
          />
          <div style="text-align: right">
            <p-button type="primary" v-if="isDisabled == 0 ? false : true" @click="addForm">保存</p-button>
          </div>
        </div>
      </p-modal>
    </div>
  </div>
</template>
<script>
import { setFormItems, tableColumnsConfig, detailFormItems } from './js/config'
import { getList, addDetail, delDetail, updateDetail } from './api/index'
import printButton from '../printButton/printButton'

export default {
  components: { printButton },

  data() {
    return {
      dataSource: [],
      gridItems: setFormItems(this),
      rowSelectType: 2,
      tableColumnsConfig: tableColumnsConfig,
      detailFormItems: detailFormItems(this),
      tabLoding: false,
      isDisabled: null,
      Title: '',
      visible: false,
      printUrl: '/api/oms-std-maindata/pubItemtype/query/v1.0',
      printQuantity:'2',//打印数量
      printData: {
        //打印机服务地址
        printerServiceUrl: '127.0.0.0',
        //打印机名称
        printerName: '测试打印机',
        //模板地址
        softlinks: '127.0.0.0',
        //单据数据
        formData: {
          no:'1001',
          name:"张三",
        },
      },
    }
  },
  mounted() {},
  created() {
    this.getList()
  },
  computed: {
    rowSelection() {
      let _this = this
      return {
        onSelectAll(selected, selectedRows, changeRows) {
          var checked = selected
          var key = changeRows.map((item) => item.id)
          // _this.parent.savePower({ type: '2', relateId: key.join(), operation: checked })
        },
        onSelect(record, selected, selectedRows, nativeEvent) {
          var checked = selected
          var key = record.id
          // _this.parent.savePower({ type: '2', relateId: key, operation: checked })
        },
        onChange(selectedRowKeys, selectedRows) {
          _this.selectedRows = selectedRowKeys
        },
      }
    },
  },
  methods: {
    //新增显示弹框
    showModal() {
      this.Title = `打印机配置-新增`
      this.isDisabled = 2
      this.visible = true
      this.$nextTick(() => {
        this.$refs.formdetail.form.enableItem()
        this.$refs.formdetail.form.hiddenItem('createdate')
      })
    },
    //弹框关闭
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
      this.$refs.formdetail.form.resetFields()
    },
    enlargeChange(isEnlarge) {
      console.log(isEnlarge, 'isEnlarge')
    },
    //查询事件
    handleSubmit(event, form) {
      event.preventDefault()
      let parame = this.$refs.formTarget.form.getFieldsValue().parame
      let _this = this
      this.tabLoding = true
      form.validateFields((error, values) => {
        if (!error) {
          getList({
            pageNum: 1,
            pageSize: 10,
            parame: parame,
          }).then((res) => {
            this.tabLoding = false
            if (res.success) {
              this.$message.success(res.message)
              this.dataSource = res.data.list
              console.log(res, '2222222')
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },
    //初始化list
    getList() {
      this.tabLoding = true
      getList({
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        if (res.success) {
          this.tabLoding = false
          // this.$message.success(res.message)
          this.dataSource = res.data.list
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //保存
    addForm() {
      const parame = this.$refs.formdetail.form.getFieldsValue()
      //判断是否新增
      if (this.isDisabled == 2) {
        this.$refs.formdetail.form.validateFields((error, values) => {
          if (!error) {
            addDetail(parame).then((res) => {
              if (res.success) {
                this.$message.success(res.message)
                this.visible = false
                this.getList()
              } else {
                this.$message.error(res.message)
              }
            })
          }
        })
      } else {
        this.$nextTick(() => {
          //修改保存
          this.$refs.formdetail.form.validateFields((error, values) => {
            if (!error) {
              updateDetail(parame).then((res) => {
                if (res.success) {
                  this.$message.success(res.message)
                  this.visible = false
                  this.getList()
                } else {
                  this.$message.error(res.message)
                }
              })
            }
          })
        })
      }
    },
    //详情
    lookat(text) {
      this.visible = true
      this.isDisabled = 0
      this.Title = `编号 [${text.printername}] 打印机配置详情`
      this.$nextTick(() => {
        this.$refs.formdetail.form.setFieldsValue(text)
        this.$refs.formdetail.form.disableItem()
        this.$refs.formdetail.form.unhiddenItem('createdate')
      })
    },
    //修改
    edit(text) {
      this.isDisabled = 1
      this.visible = true
      this.Title = `修改编号 [${text.printername}] 打印机配置`
      this.$nextTick(() => {
        this.$refs.formdetail.form.hiddenItem('createdate')
        this.$refs.formdetail.form.enableItem()
        this.$refs.formdetail.form.setFieldsValue(text)
      })
    },
    //批量删除
    batchDelete() {
      let _this = this
      if (_this.selectedRows.length < 1) {
        this.$message.error('请至少选择一条数据！')
        return
      }
      this.$confirm({
        title: '确定是否要删除?',
        content: '',
        onOk() {
          return new Promise((resolve, reject) => {
            let params = { ids: _this.selectedRows.join(',') }
            delDetail(params).then((res) => {
              console.log(res, 'res')
              if (res.success) {
                _this.$message.success(res.message)
                _this.getList()
                _this.$refs.logTable.reload()
                resolve()
              } else {
                _this.$message.error(res.message)
                resolve()
              }
            })
          }).catch(() => console.log('Oops errors!'))
        },
        onCancel() {},
      })
    },
    //删除
    deleteOne(text) {
      let _this = this
      this.$confirm({
        title: '确定是否要删除?',
        content: '',
        onOk() {
          return new Promise((resolve, reject) => {
            delDetail({ ids: text.printerid }).then((res) => {
              if (res.success) {
                _this.$message.success(res.message)
                _this.getList()
                resolve()
              } else {
                _this.$message.error(res.message)
                resolve()
              }
            })
          }).catch(() => console.log('Oops errors!'))
        },
        onCancel() {},
      })
    },
  },
}
</script>