<style>
.form-designer-container-9136076486841527 {
  height: 55vh !important;
}
</style>
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="表单名称">
              <a-input placeholder="请输入表单名称" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAddForm" type="primary" icon="plus">新增</a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="lookView(record)">预览</a>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
    <a-modal
      :maskClosable="false"
      title="表单新增"
      v-model="addForm"
      :footer="null"
      :width="1200"
      :okButtonProps="{ props: { disabled: false } }"
      :cancelButtonProps="{ props: { disabled: false } }"
    >
      <a-form :form="form">
        <a-form-item
          label="表单名称"
          :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
          :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
        >
          <a-input
            v-decorator="[
            'name',
            {rules: [{ required: true, message: '请输入表单名称' }]}
          ]"
            placeholder="请输入表单名称"
          />
        </a-form-item>
        <k-form-design
          v-if="addForm"
          style="border:2px solid #ccc"
          :fields="typeList"
          :toolbars="['save', 'preview', 'reset', 'close' ]"
          :showHead="false"
          toolbarsTop
          showToolbarsText
          @save="saveJson"
        />
      </a-form>
    </a-modal>
    <a-modal
      :maskClosable="false"
      title="表单预览"
      v-model="viewLookVisible"
      :footer="null"
      :width="1200"
      :okButtonProps="{ props: { disabled: false } }"
      :cancelButtonProps="{ props: { disabled: false } }"
    >
      <k-form-build
        v-if="viewLookVisible"
        :defaultValue="defaultValue"
        :value="jsonData"
        ref="KFB"
      />
    </a-modal>

    <!-- 表单区域 -->
    <j-select-user ref="userForm" @ok="modalFormOk"></j-select-user>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JTreeSelect from '@/components/jeecg/JTreeSelect'
import AFormItem from 'ant-design-vue/es/form/FormItem'
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
import JSelectUser from '@/components/jeecgbiz/JSelectUser'
import { postAction } from '../../api/manage'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'AdvertiserList',
  mixins: [JeecgListMixin],
  components: {
    AFormItem,
    JTreeSelect,
    JSelectUserByDep,
    JSelectDepart,
    JSelectUser,
  },
  data() {
    return {
      typeList: [
        'input',
        'textarea',
        'number',
        'select',
        'checkbox',
        'radio',
        'date',
        'time',
        'rate',
        'slider',
        'uploadFile',
        'uploadImg',
        'switch',
        'button',
        'text',
        'card',
        'grid',
        'table',
      ], //"alert","html", "divider",
      addForm: false,
      viewLookVisible: false,
      jsonData: {},
      defaultValue: {},
      departDisabled: false, //是否是我的部门调用该页面
      users: this.userInfo().realname, //用户名称
      departmentId: this.userInfo().departId, //部门id
      description: '广告主信息表管理页面',
      visible: false,
      accountName: '',
      password: '',
      mode: 'login',
      showLogin: true,
      showAuthorization: false,
      authorizationType: 'kuaishou',
      loginType: 'kuaishou',
      form: this.$form.createForm(this),
      // 表头
      columns: [
        {
          title: '表单名称',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '创建人',
          align: 'center',
          dataIndex: 'userId_dictText',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        list: '/ctop/actCustomForm/list',
        delete: '/ctop/advertiser/delete',
        deleteBatch: '/ctop/advertiser/deleteBatch',
        exportXlsUrl: 'ctop/advertiser/exportXls',
        importExcelUrl: 'ctop/advertiser/importExcel',
        bindAccountLoginUrl: '/ctop/bindAccountLogin/login',
        bindAuthorizationUrl: '/ctop/bindAccountAuth/authorization',
        getLoginInfo: '/ctop/bindAccount/getLoginInfo',
        userId: '/sys/user/generateUserId', // 引入生成添加用户情况下的url
        userWithDepart: '/sys/user/userDepartList', // 引入为指定用户查看部门信息需要的url
      },
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  created() {
    this.queryParam.userId = this.userInfo().id
  },
  methods: {
    lookView(item) {
      this.viewLookVisible = true
      this.jsonData = JSON.parse(item.text)
    },
    saveJson(json) {
      console.log(json)
      this.form.validateFields((err) => {
        if (!err) {
          var params = {}
          params.name = this.getData('name')
          params.text = json
          postAction('/ctop/actCustomForm/add', params).then((res) => {
            if (res.success) {
              this.addForm = false
              this.loadData(1)
            }
          })
        }
      })
    },
    handleAddForm() {
      this.addForm = true
    },
    getData(className) {
      return this.form.getFieldValue(className)
    },
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    searchRe() {
      this.queryParam.name = ''
      this.queryParam.industryId = ''
      this.loadData()
    },
    handleSubmit() {
      // 触发表单验证
    },

    onChageLogin() {
      console.log(this.mode)
      if (this.mode == 'login') {
        this.showLogin = true
        this.showAuthorization = false
      } else {
        this.showLogin = false
        this.showAuthorization = true
      }
    },
    showModal(record) {
      this.record = record
      this.visible = true
    },

    handleCancel() {
      this.close()
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
