<template>
  <div>
    <div>
      <p-card title="打印路由配置">
        <p-grid-form
          ref="formTarget"
          :span="5"
          :label-col="{ span: 5 }"
          :items="gridItems"
          @submit="
            ($event, form) => {
              handleSubmit($event, form, 'formTarget')
            }
          "
        />
        <p-table
          ref="logTable"
          :columns="tableColumnsConfig"
          :execute="false"
          rowKey="printrouteid"
          :expandRowByClick="false"
          :rowSelectType="false"
          :dataSource.sync="dataSource"
          dragle
          ellipsis
          :loading="tabLoding"
          :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="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="plus" @click="add()">新增</p-button>
        </div>
      </p-card>
    </div>
    <div class="detail">
      <p-modal
        :title="Title"
        :visible="visible"
        :enlargeable="false"
        :draggable="true"
        width='50%'
        :maskClosable="false"
        @cancel="handleCancel"
        :footer="null"
      >
        <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'

export default {
  data() {
    return {
      dataSource: [],
      gridItems: setFormItems(this),
      rowSelectType: 2,
      tableColumnsConfig: tableColumnsConfig,
      detailFormItems: detailFormItems(this),
      isDisabled: null,
      tabLoding: false,
      Title: '',
      visible: false,
    }
  },
  mounted() {},
  created() {
    this.getList()
  },
  methods: {
    //弹框关闭
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
      this.$refs.formdetail.form.resetFields()
    },

    //查询事件
    handleSubmit(event, form) {
      event.preventDefault()
      console.log(form, '查询')
      let operatorcode = this.$refs.formTarget.form.getFieldsValue().operatorcode
      let _this = this
      this.tabLoding = true
      form.validateFields((error, values) => {
        if (!error) {
          getList({
            pageNum: 1,
            pageSize: 10,
            operatorcode: operatorcode,
          }).then((res) => {
            this.tabLoding = false
            if (res.success) {
              this.$message.success(res.message)
              this.dataSource = res.data.list
            } 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.dataSource = res.data.list
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //跳转新增
    add() {
      this.visible = true
      this.isDisabled = 2
      this.Title = '打印路由配置-新增'
      this.$nextTick(() => {
        this.$refs.formdetail.form.enableItem()
        this.$refs.formdetail.form.disableItem('branchid')
        // this.$refs.formdetail.form.hiddenItem("lastmodifydate")
        // this.$refs.formdetail.form.hiddenItem("createdate")
      })
    },
    //保存
    addForm() {
      if (this.isDisabled == 2) {
        const parame = this.$refs.formdetail.form.getFieldsValue()
        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)
              }
            })
          }
        })
        console.log(this.$refs.formdetail.form.getFieldsValue(), '新增测试')
      } else {
        this.$nextTick(() => {
          const parame = this.$refs.formdetail.form.getFieldsValue()
          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()
      })
    },
    //修改
    edit(text) {
      this.isDisabled = 1
      this.visible = true
      this.Title = `打印路由 [${text.operatorcode}] 信息修改`
      this.$nextTick(() => {
        // this.$refs.formdetail.form.hiddenItem("lastmodifydate")
        // this.$refs.formdetail.form.hiddenItem("createdate")
        this.$refs.formdetail.form.enableItem()
        this.$refs.formdetail.form.setFieldsValue(text)
        this.$refs.formdetail.form.disableItem('branchid')
      })
    },
    //删除
    deleteOne(text) {
      let _this = this
      this.$confirm({
        title: '确定是否要删除?',
        content: '',
        onOk() {
          return new Promise((resolve, reject) => {
            delDetail({ ids: text.printrouteid }).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>