<!--
@name: 打印模板
@author: 李恒
@time: 2022-03-28 08:49:08
-->
<template>
    <p-card v-if='!editType' :title='$route.meta.title' class='full-card-panel'>
      <div slot='extra'>
        <p-button icon='filter' @click='toggleFormTag = !toggleFormTag'>{{ toggleFormTag ? '隐藏' : '显示' }}</p-button>
        <p-button type='primary' class='ml-10' @click="toEdit('add')">新增</p-button>
      </div>
      <p-form-model v-show='toggleFormTag' ref='formTarget' :label-col='{ span: 8 }' :model='form'
                    :wrapper-col='{ span: 16 }' class='plg-grid-from'>
        <a-row>
          <a-col :span='6'>
            <p-form-model-item label='方案名称'>
              <p-input v-model='form.planName' placeholder='请输入方案名称' @pressEnter='onSubmit' />
            </p-form-model-item>
          </a-col>
          <a-col :span='6'>
            <p-form-model-item label='方案编号'>
              <p-input v-model='form.planCode' placeholder='请输入方案编号' @pressEnter='onSubmit' />
            </p-form-model-item>
          </a-col>
          <a-col :span='6'>
            <p-form-model-item :wrapper-col='{ span: 16, offset: 8 }'>
              <p-button type='primary' @click='onSubmit'>查询</p-button>
              <p-button class='ml-10' @click='onReset'>重置</p-button>
            </p-form-model-item>
          </a-col>
        </a-row>
      </p-form-model>
      <p-table
        ref='dataSource'
        :id="$route.meta.menuId+'_65696'"
        :data-source.sync='dataSource'
        :remote-url='listRemoteUrl'
        :remoteData='listParams'
        :scroll="{x:true}"
        :rowSelectType='false'
        :loading='spinning'
        bordered dragle row-key='id'>
        <p-table-column data-index='planName' title='方案名称' />
        <p-table-column data-index='planCode' title='方案编码' />
        <p-table-column data-index='companyTypeName' title='单位类型' />
        <p-table-column data-index='companyName' title='单位名称' />
        <p-table-column data-index='templateTypeName' title='模板类型' />
        <p-table-column data-index='templateName' title='模板文件名' />
        <p-table-column data-index='templateWide' title='模板宽度' />
        <p-table-column data-index='templateHeight' title='模板高度' />
        <p-table-column data-index='templatePath' title='模板路径' :width='240' >
          <template slot-scope='text, record'>
          {{host+text}}
          </template>
        </p-table-column>
        <p-table-column data-index='remark' title='备注' />
        <p-table-column data-index='createdBy' title='创建人' />
        <p-table-column data-index='createdDate' title='创建时间' />
        <p-table-column data-index='status' title='是否启用' :width='80'>
          <template slot-scope='text, record'>
            <p-switch v-model='record.status' :replaceFields='{true:"1",false:"0"}'
                      @click='statusChange(record,$event)' />
          </template>
        </p-table-column>
        <p-table-column :width='150' align='center' data-index='action' fixed='right' title='操作'>
          <a-space  slot-scope='text, record'>
              <a @click="toEdit('view',record)">详情</a>
              <a class='ml-10' :disabled='record.status === "1"' @click="toEdit('edit',record)">修改</a>
              <a class='ml-10' :disabled='record.status === "1"' @click='del(record)'>删除</a>
          </a-space>
        </p-table-column>
      </p-table>
    </p-card>
    <edit v-else :editData='editData' :type='editType' @back='back' />
</template>
<script>
import { del, update, listRemoteUrl } from './api'
import edit from './edit'
// import calcHeight from '@/blocks/calcHeight'

export default {
  // mixins: [calcHeight],
  components: { edit },
  data() {
    return {
      spinning: false,
      toggleFormTag: true,
      form: {},
      // 列表参数
      host:window.location.origin,
      listRemoteUrl,
      listParams: {},
      dataSource: [],

      editType: '',
      editData: {}
    }
  },
  methods: {
    //新增/编辑事件
    toEdit(type, record = {}) {
      this.editType = type
      this.editData = { ...record }
    },
    // 删除
    del(record) {
      let { id } = record
      let self = this
      this.$confirm({
        title: '是否确认删除?',
        onOk() {
          return new Promise((resolve, reject) => {
            del({ ids: [id] }).then(res => {
              if (res.success) {
                self.$message.success('删除成功')
                self.onSubmit()
                resolve()
              } else {
                self.$message.warn(res.message)
                resolve()
              }
            }).catch(() => {
              resolve()
            })
          })
        }
      })
    },
    // 停启用修改
    statusChange(record, checked) {
      this.spinning = true
      const params = { ...record }
      update(params).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
        } else {
          this.$message.warn(res.message)
          record.status = checked === '1' ? '0' : '1'
          this.dataSource = [...this.dataSource]
        }
      }).catch(() => {
        record.status = checked === '1' ? '0' : '1'
        this.dataSource = [...this.dataSource]
      }).finally(() => {
        this.spinning = false
      })
    },
    onReset() {
      this.$refs.formTarget.resetFields()
      this.form = {}
      this.onSubmit()
    },
    onSubmit() {
      this.$refs.formTarget.validate(flag => {
        if (!flag) return
        this.listParams = { ...this.form }
      })
    },
    back() {
      this.editType = ''
      this.$nextTick(() => this.onSubmit())
    }
  }
}
</script>
<style></style>
