<template>
  <div class="layout-no-flex">
    <el-toolbar>
      <el-row class="row-full">
        <el-col :span="6">
          <el-button @click="goBack" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
        </el-col>
        <el-col :span="6">
          <el-radio-group v-model="filter.order" @change="doSearch" size="medium" class="customform-template-order">
            <el-radio-button label="default">最近更新</el-radio-button>
            <el-radio-button label="useCount">使用次数</el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :span="12">
          <div class="dropdown-search-box-r search-bar-algin-toolbar">
            <el-input placeholder="请输入模板名称" v-model="filter.name" size="medium" @keyup.enter.native="doSearch">
            <el-select v-model="filter.industryInnercode" style="margin-right:5px;width:140px;" clearable slot="prepend" placeholder="行业分类" @change="doSearch">
              <el-option v-for="item in industrys" :key="item.ID" :label="item.name" :value="item.innerCode">
              </el-option>
            </el-select>
            <el-select v-model="filter.sceneInnercode" style="margin-left:-5px;width:120px;" clearable slot="prepend" placeholder="场景分类" @change="doSearch">
              <el-option v-for="item in scenes" :key="item.ID" :label="item.name" :value="item.innerCode">
              </el-option>
            </el-select>
          </el-input>
          <span class="search-icon"><i class="fa fa-search" @click="doSearch" title="查询"></i></span>
          </div>
        </el-col>
      </el-row>
    </el-toolbar>
    <el-table ref="formDataTable" tooltip-effect="dark" :data-read-url="formDataURL" :page-size="20">
        <el-table-column type="index" width="55" label="序号"></el-table-column>
        <el-table-column label="名称">
          <template slot-scope="scope">
            <a href="javascript:void(0)" @click.stop="gotoDetailPage(scope.row.ID)">{{scope.row.name}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="useCount" width="100" label="使用次数"></el-table-column>
        <el-table-column prop="addUser" width="100" label="添加人"></el-table-column>
        <el-table-column prop="addTime" width="160" label="添加时间">
          <template slot-scope="scope">
            {{scope.row.addTime | fixDateTime}}
          </template>
        </el-table-column>
        <el-table-column width="180" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click.stop="preview(scope.row.ID)"><i class="fa fa-search-plus"></i>预览</el-button>
            <el-button type="text" @click.stop="design(scope.row.ID)"><i class="fa fa-pencil"></i>编辑</el-button>
            <el-button type="text" @click.stop="deleteTemplate(scope.row)"><i class="fa fa-times"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>
<script>
import _ from 'lodash'
import util from '@src/common/util.js'
export default {
  name: 'CustomformTemplateManage',
  filters: {
    fixDateTime: function(val) {
      if (!val) {
        return ''
      }
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },
  data() {
    return {
      filter: {
        order: 'default',
        name: '',
        industryInnercode: '',
        sceneInnercode: ''
      },
      categoryData: []
    }
  },
  mounted() {
    this.loadCategoryData()
  },
  computed: {
    industrys() {
      if (this.categoryData.length > 0 && _.isArray(this.categoryData[0].children)) {
        return this.categoryData[0].children
      }
      return []
    },
    scenes() {
      if (this.categoryData.length > 1 && _.isArray(this.categoryData[1].children)) {
        return this.categoryData[1].children
      }
      return []
    }
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    formDataURL() {
      return [
        '/ui/customforms/templates',
        {
          params: {
            name: encodeURIComponent(this.filter.name),
            order: this.filter.order,
            industryInnercode: this.filter.industryInnercode,
            sceneInnercode: this.filter.sceneInnercode
          }
        }
      ]
    },
    // 加载分类数据
    async loadCategoryData() {
      let res = await axios.get('/ui/customforms/customFormType/treeData')
      this.categoryData = res.data.data
    },
    doSearch() {
      this.$refs.formDataTable.getData()
    },
    preview(formID) {
      this.$router.push(`/formDesigner/addform/${formID}`)
    },
    design(formID) {
      this.$router.push(`/formDesigner/editform/${formID}`)
    },
    async deleteTemplate(row) {
      await this.$confirm('确认删除模板：<span class="icon-danger">' + row.name + '</span><br/>删除后不可恢复，是否继续？', '确认', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定删除',
        cancelButtonText: '不删除'
      })
      let res = await axios.delete(`/ui/customforms/templates/${row.ID}`)
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.doSearch()
      }
    }
  }
}
</script>
<style scoped>
  .row-full{
    flex: 1;
  }
</style>
<style>
  .el-radio-group.customform-template-order label{padding:0;}
</style>
