<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      :data="data"
      :pageResult="pageResult"
      :selection="true"
      quick-search-props="name,alias"
      :show-export="false"
      :show-custom-column="false"
      ref="htTable"
      @selection-change="handleSelectionChange"
    >
      <template v-slot:toolbar>
        <el-button-group>
          <el-button
            size="small"
            @click="showDialog()"
            type="primary"
            icon="el-icon-plus"
            >添加</el-button
          >

          <ht-import-button 
            name="自定义组件" 
            :uploadUrl="uploadUrl" 
            :confirmUrl="confirmUrl" 
            :htTable="$refs.htTable" />

          <el-button
            icon="el-icon-right"
            @click="handleExport"
            :disabled="isDisabled"
            >导出</el-button
          >
          <ht-delete-button
            url="${form}/formCustomComponent/v1/"
            :htTable="$refs.htTable"
            :disabled="isDisabled"
            :checkRight="true"
            >删除</ht-delete-button
          >
        </el-button-group>
      </template>
      <template>
        <ht-table-column type="index" width="50" align="center" label="序号" />

        <ht-table-column
          prop="name"
          label="DIY组件名称"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
	           <el-link
	              type="primary"
                v-if="$checkRight(row,'3')"
	              @click="showDialog(row.id)"
	              title="查看详情"
	              >{{ row.name }}</el-link
	            >
              <template v-else>{{ row.name }}</template>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="alias"
          label="别名"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>

        <ht-table-column
          prop="createTime"
          label="创建时间"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="updateTime"
          label="更新时间"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
      </template>
    </ht-table>
    <ht-sidebar-dialog
      v-if="dialogVisible"
      width="70%"
      title="DIY组件"
      class="sp-manager__dialog"
      :visible="dialogVisible"
      :before-close="beforeCloseDialog"
    >
      <el-form v-form data-vv-scope="FormCustomComponentForm">
        <ht-form-item label="DIY组件名称" label-width="180px">
          <ht-input
            v-model="FormCustomComponent.name"
            validate="required"
            :width="250"
          />
        </ht-form-item>
        <ht-form-item label="别名" label-width="180px">
          <ht-input
            :width="250"
            v-model="FormCustomComponent.alias"
            v-pinyin="FormCustomComponent.name"
            :validate="{
              required: true,
              regex: {
                exp: '^[a-zA-Z][a-zA-Z0-9_]*$',
                message: '只能输入字母、数字、下划线，且以字母开头'
              }
            }"
            :disabled="FormCustomComponent.id ? true : false"
          />
        </ht-form-item>

        <ht-form-item label="template代码" label-width="180px">
          <codemirror
            ref="mycode"
            v-model="FormCustomComponent.templates"
            :options="cmOptions"
            class="mycode"
            style="width: 99%; height: 100%"
          ></codemirror>

          <!-- <ht-input
            v-model="FormCustomComponent.template"
            validate="required"
          /> -->
        </ht-form-item>
        <ht-form-item label="js代码区域" label-width="180px">
          <codemirror
            ref="mycode2"
            v-model="FormCustomComponent.jsCodes"
            :options="cmOptions2"
            class="code"
            style="width: 99%; height: 100%"
          ></codemirror>
          <!-- <ht-input v-model="FormCustomComponent.jsCode" validate="required" /> -->
        </ht-form-item>
        <ht-form-item label="data区域" label-width="180px">
          <codemirror
            ref="mycode2"
            v-model="FormCustomComponent.dataCodes"
            :options="cmOptions2"
            class="code"
            style="width: 99%; height: 180px"
          ></codemirror>
          <!-- <ht-input
            v-model="FormCustomComponent.dataCode"
            validate="required"
          /> -->
        </ht-form-item>
      </el-form>
      <div slot="footer" style="text-align: right;">
        <el-button @click="beforeCloseDialog">{{
          $t('eip.common.cancel')
        }}</el-button>
        <ht-submit-button
          url="${form}/formCustomComponent/v1/saveOrUp"
          :model="FormCustomComponent"
          :request-method="saveMethod"
          scope-name="FormCustomComponentForm"
          @after-save-data="afterSaveData"
          @before-save-data="beforeSaveData"
          >{{ $t('eip.common.save') }}</ht-submit-button
        >
      </div>
    </ht-sidebar-dialog>
  </div>
</template>
<script>
let Base64 = require('js-base64').Base64
import HtImportButton from '@/components/common/HtImportButton.vue'
export default {
  components: {
    HtImportButton
  },
  data() {
    return {
      dialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      FormCustomComponent: {
        alias: ''
      },
      saveMethod: 'POST',
      cmOptions: {
        value: '',
        mode: 'vue',
        readOnly: false,
        smartIndent: true,
        tabSize: 2,
        theme: 'base16-light',
        lineNumbers: true,
        line: true
      },
      cmOptions2: {
        value: '',
        mode: 'javascript',
        readOnly: false,
        smartIndent: true,
        tabSize: 2,
        theme: 'base16-light',
        lineNumbers: true,
        line: true
      },
      isDisabled: true,
      selectedList: [],
      uploadUrl:window.context.form +'/formCustomComponent/v1/import',
      confirmUrl: window.context.form + '/formCustomComponent/v1/importData?unZipFilePath='
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  watch: {
    selectedList: {
      handler(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
      deep: true
    }
  },
  methods: {
    handleExport() {
      let selection = this.$refs.htTable.$refs.htTable.selection
      if (selection && selection.length == 0) {
        this.$message.warning('请选择至少一项记录')
        return
      }
      let ids = selection.map(item => item.id)
      let url = `${window.context.form}/formCustomComponent/v1/export?ids=${ids}`
      this.$http.download(url)
    },
    // 选中点击按钮
    handleSelectionChange(selection) {
      this.selectedList = selection
    },
    showDialog(id) {
      if (id) {
        this.saveMethod = 'PUT'
        let _that = this
        this.$http.get('${form}/formCustomComponent/v1/' + id).then(
          resp => {
            // console.log(_that)
            _that.FormCustomComponent = resp.data
            if (_that.FormCustomComponent.template) {
              _that.FormCustomComponent.templates = Base64.decode(
                _that.FormCustomComponent.template,
                'utf-8'
              )
            }
            if (_that.FormCustomComponent.jsCode) {
              _that.FormCustomComponent.jsCodes = Base64.decode(
                _that.FormCustomComponent.jsCode,
                'utf-8'
              )
            }
            if (_that.FormCustomComponent.dataCode) {
              _that.FormCustomComponent.dataCodes = Base64.decode(
                _that.FormCustomComponent.dataCode,
                'utf-8'
              )
            }
            _that.dialogVisible = true
          },
          error => {
            reject(error)
          }
        )
      } else {
        this.saveMethod = 'POST'
        this.dialogVisible = true
      }
    },
    beforeCloseDialog() {
      this.FormCustomComponent = {alias: ''}
      this.dialogVisible = false
    },
    loadData(param, cb) {
      this.$addRightMarkIntoFilter(param)
      this.$http
        .post('${form}/formCustomComponent/v1/query', param)
        .then(
          resp => {
            let response = resp.data
            this.data = response.rows
            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total
            }
          },
          error => {
            reject(error)
          }
        )
        .finally(() => cb())
    },
    beforeSaveData() {
      if (this.FormCustomComponent.templates) {
        this.FormCustomComponent.template = Base64.encode(
          this.FormCustomComponent.templates,
          'utf-8'
        )
      }
      if (this.FormCustomComponent.jsCodes) {
        this.FormCustomComponent.jsCode = Base64.encode(
          this.FormCustomComponent.jsCodes,
          'utf-8'
        )
      }
      if (this.FormCustomComponent.dataCodes) {
        this.FormCustomComponent.dataCode = Base64.encode(
          this.FormCustomComponent.dataCodes,
          'utf-8'
        )
      }
      delete this.FormCustomComponent.templates
      delete this.FormCustomComponent.jsCodes
      delete this.FormCustomComponent.dataCodes
      if(this.FormCustomComponent.authModelType){
        delete this.FormCustomComponent.authModelType
      }
    },
    afterSaveData() {
      setTimeout(() => {
        this.beforeCloseDialog()
        this.$refs.htTable.load()
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.sp-manager__dialog /deep/ > .el-dialog > .el-dialog__body {
  height: calc(100% - 170px);
  padding: 20px;
}
.sp-manager__dialog /deep/ > .el-dialog > .el-dialog__footer{
  padding: 20px 45px !important;
}
.mycode /deep/ .CodeMirror {
  font-family: monospace;
  height: 400px !important;
  color: black;
  direction: ltr;
}
::v-deep {
  .el-form-item__error {
    white-space: nowrap;
  }
}
</style>