<template>
  <div class="layout-no-flex right-list-toolbar">
    <!-- 页面左边布局 -->
    <div class="layout-col-list">
      <!-- 表单导航栏 -->
      <el-toolbar>
        <el-row class="row-full">
          <el-col :span="14">
            <el-button @click="addFormClickHandler"><i class="fa fa-plus"></i>新建表单</el-button>
            <el-button @click="typeManageClickHandler"><i class="fa fa-list-alt"></i>分类管理</el-button>
            <el-button @click="templateManageClickHandler"><i class="fa fa-file-text-o"></i>模板管理</el-button>
          </el-col>
          <el-col :span="10" class="search-box-r tool-search-box-r">
            <el-input v-model="searchFormName" @keyup.enter.native="reloadData" placeholder="请输入自定义表单名称" class="search-bar-algin-toolbar"></el-input>
            <span class="search-icon"><i class="fa fa-search" @click="reloadData" title="查询"></i></span>
          </el-col>
        </el-row>
      </el-toolbar>
      <el-list-view class="customform-list" ref="customformList" :data-read-url="formDataURL" :page-size="10">
        <template slot-scope="row">
          <el-card class="box-card">
            <div slot="header" class="clearfix customform-list__header">
              <el-row>
                <el-col :span="12"><span class="header-name">{{row.name}}</span></el-col>
                <el-col :span="12" class="tar custform-list-head-infos">
                  <span class="customform-status" :class="'customform-status-' + row.publishFlag">●&nbsp;{{row.publishFlag === 'Y' ? '已发布' : (row.publishDate !== null && row.publishDate !== '' ? '已下线' : '草稿')}}</span>
                  <span class="customform-count">答卷：{{row.useCount}}份</span>
                  <span class="customform-addtime">{{row.addTime | fixDateTime}}</span>
                </el-col>
              </el-row>
            </div>
            <div class="customform-list__body">
              <el-row>
                <el-col :span="12" class="customform-oprates-main">
                  <el-button @click="design(row)"><i class="fa fa-pencil"></i>设计</el-button>
                  <el-button @click="changePublishStatus(row)"><i class="fa" :class="row.publishFlag === 'Y' ? 'fa-refresh' : 'fa-send-o'"></i>{{row.publishFlag === 'Y' ? '下线' : '发布'}}</el-button>
                  <el-button @click="toDataView(row.ID)" :disabled="row.useCount <= 0"><i class="fa fa-line-chart"></i>数据</el-button>
                </el-col>
                <el-col :span="12" class="customform-oprates-others tar">
                  <el-button type="text" @click="deleteForm(row)"><i class="fa fa-times"></i>删除</el-button>
                  <el-button type="text" @click="copyForm(row)"><i class="fa fa-copy"></i>类似创建</el-button>
                  <el-button type="text" :disabled="row.publishFlag !== 'Y' && row.URL !== ''" @click="browseForm(row)"><i class="fa fa-bolt"></i>浏览</el-button>
                  <el-button type="text" :disabled="row.publishFlag !== 'Y'" @click="shareForm(row)"><i class="fa fa-share-alt"></i>分享</el-button>
                  <el-button type="text" :disabled="row.useCount <= 0" @click="clearFormData(row)"><i class="fa fa-eraser"></i>清空数据</el-button>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </template>
      </el-list-view>
    </div>
    <customform-share-dialog :show.sync="shareDlgVisible" :formdata="currentForm"></customform-share-dialog>
  </div>
</template>

<script>
import util from '@src/common/util.js'
import customformShareDialog from './customFormShareDialog.vue'
export default {
  components: {
    'customform-share-dialog': customformShareDialog
  },
  filters: {
    fixDateTime: function(val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      searchFormName: '', // 自定义表单的查询值
      shareDlgVisible: false,
      currentForm: {}
    }
  },
  methods: {
    // 自定义表单数据URL
    formDataURL() {
      return [
        '/ui/customforms',
        {
          params: {
            name: encodeURIComponent(this.searchFormName)
          }
        }
      ]
    },
    // 添加表单
    addFormClickHandler() {
      // this.$router.push('/formDesigner/addform')
      this.$router.push('/plugins/customForm/createGuide')
    },
    // 分类管理
    typeManageClickHandler() {
      this.$router.push('/plugins/customForm/customFormType')
    },
    // 模板管理
    templateManageClickHandler() {
      this.$router.push('/plugins/customForm/templateManage')
    },
    // 根据表单名称搜索自定义表单
    reloadData() {
      this.$refs.customformList.getData()
    },
    async changePublishStatus(formData) {
      let publishFlag = formData.publishFlag
      let res = await axios.put(`/ui/customforms/${formData.ID}/${publishFlag === 'Y' ? 'downline' : 'publish'}`)
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        formData.publishDate = util.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
        formData.publishFlag = publishFlag === 'Y' ? 'N' : 'Y'
        if (formData.publishFlag === 'Y' && res.data.url !== null && res.data.url !== '') {
          formData.URL = res.data.url
        }
      }
    },
    async design(row) {
      if (row.useCount > 0) {
        await this.$confirm(
          '该表单已收集<span class="icon-danger">' + row.useCount + '</span>份数据，现在进行题目删改可能会影响已收集的数据。' + (row.publishFlag === 'Y' ? '<br/>单击"继续"按钮,表单将自动下线，您需要在修改完后再次发布表单才可继续收集数据，' : '') + '是否继续？',
          '修改提示',
          {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '继续',
            cancelButtonText: '关闭'
          }
        )
      }
      if (row.publishFlag === 'Y') {
        await axios.put(`/ui/customforms/${row.ID}/downline`)
      }
      this.$router.push(`/formDesigner/editform/${row.ID}`)
    },
    // 删除表单
    async deleteForm(formData) {
      await this.$confirm(
        '确认删除表单：<span class="icon-danger">' + formData.name + '</span><br/>删除表单后不可恢复，是否继续？',
        '确认',
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定删除',
          cancelButtonText: '不删除'
        }
      )
      let res = await axios.delete(`/ui/customforms/${formData.ID}`)
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.reloadData()
      }
    },
    // 复制(类似创建)表单
    async copyForm(formData) {
      let formName = await this.$prompt('请输入表单名称', '类似创建表单', {
        inputValidator(val) {
          if (val === '' || val === null) {
            return '表单名称还没填呢'
          }
          return true
        }
      })
      formName = formName.value
      let res = await axios.post('/ui/customforms', {
        name: formName,
        from: formData.ID
      })
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.reloadData()
      }
    },
    browseForm(formData) {
      window.open(formData.URL)
    },
    // 分享表单
    shareForm(formData) {
      this.shareDlgVisible = true
      this.currentForm = formData
    },
    // 复制URL
    copyShareURL() {},
    // 清空表单数据
    async clearFormData(formData) {
      await this.$confirm(
        '确认清空表单数据：<span class="icon-danger">' + formData.name + '</span><br/>清空数据后不可恢复，是否继续？',
        '确认',
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定清空',
          cancelButtonText: '不清空'
        }
      )
      let res = await axios.delete(`/ui/customforms/${formData.ID}/allformdata`)
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        formData.useCount = 0
      }
    },
    toDataView(id) {
      this.$router.push(`/plugins/customForm/${id}/data`)
    }
  }
}
</script>
<style scoped>
.box-card {
  border: solid 1px #ebeef5;
}
.custform-list-head-infos span {
  margin-left: 15px;
}
.customform-list .header-name {
  color: #444;
  font-size: 17px;
}
.row-full {
  flex: 1;
}
</style>
<style>
.customform-status-Y {
  color: #28b06e;
}
.customform-status-N {
  color: #b3b3b3;
}
</style>
